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;
}