diff --git a/src/app/app.component.html b/src/app/app.component.html index 8714b7f..34f0335 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -7,7 +7,16 @@
  • {{canvasParam | json}}
  • -
    + +
  • +
  • +
  • diff --git a/src/app/app.component.ts b/src/app/app.component.ts index f9c8aff..d2228b6 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -20,9 +20,9 @@ export class AppComponent { start: '#cc0045', end: '#0067cc' }, - points: 3 + points: 3, + margin: 0.1 }; - this.test = 1; } public updateCanvasConfig(config): void { diff --git a/src/app/canvas/canvas.directive.ts b/src/app/canvas/canvas.directive.ts index 922cd2e..4ef0dcd 100644 --- a/src/app/canvas/canvas.directive.ts +++ b/src/app/canvas/canvas.directive.ts @@ -163,16 +163,18 @@ export class CanvasDirective implements OnInit, OnChanges { } private updateConfig(): void { + const margin = this.canvas.clientWidth * this.param.margin; + this.config = { width: this.canvas.clientWidth, height: this.canvas.clientHeight, start: { - x: this.canvas.clientWidth, + x: this.canvas.clientWidth - margin, y: 0, color: this.param.colors.start }, end: { - x: 0, + x: 0 + margin, y: this.canvas.clientHeight, color: this.param.colors.end }, diff --git a/src/app/models/param.model.ts b/src/app/models/param.model.ts index d1012a5..fce35a3 100644 --- a/src/app/models/param.model.ts +++ b/src/app/models/param.model.ts @@ -4,4 +4,5 @@ export interface Param { end: string }; points: number; + margin: number; }