/
styles.ts
79 lines (68 loc) · 1.59 KB
/
styles.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
import { fabric } from "fabric";
export const enum Dash {
Solid,
Dashed,
Dotted,
}
export const enum Stroke {
Black = "#000000",
Blue = "#0097f6",
Green = "#00b253",
Yellow = "#ffbf00",
Orange = "#ff2600",
}
export const enum Fill {
Transparent,
Solid,
HalfSolid,
}
export interface Style {
dash: Dash;
stroke: Stroke;
fill: Fill;
}
const dashMap = [
[0, 0],
[20, 15],
[5, 10],
];
export default class StyleHandler {
constructor(
public currentStyle: Style,
public drawerOptions: fabric.IObjectOptions,
public freeDrawingBrush: fabric.BaseBrush,
public updateState: () => void
) {}
set = (dash: Dash | null, stroke: Stroke | null, fill: Fill | null): void => {
if (dash !== null) {
this.currentStyle.dash = dash;
this.drawerOptions.strokeDashArray = dashMap[dash];
this.freeDrawingBrush.strokeDashArray = dashMap[dash];
}
if (stroke !== null) {
this.currentStyle.stroke = stroke;
this.drawerOptions.stroke = stroke;
this.freeDrawingBrush.color = stroke;
}
if (fill !== null) {
this.currentStyle.fill = fill;
}
if (stroke !== null || fill !== null) {
switch (this.currentStyle.fill) {
case Fill.Transparent: {
this.drawerOptions.fill = "transparent";
break;
}
case Fill.Solid: {
this.drawerOptions.fill = this.currentStyle.stroke;
break;
}
case Fill.HalfSolid: {
this.drawerOptions.fill = `${this.currentStyle.stroke}11`;
break;
}
}
}
this.updateState();
};
}