canvas-editor-engine 1.0.25 → 1.0.26
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/components/canvas.component.js +32 -29
- package/dist/components/excretions.component.d.ts +3 -0
- package/dist/components/excretions.component.js +108 -96
- package/dist/components/pipette.component.js +71 -68
- package/dist/components/slot.component.js +14 -13
- package/dist/config.js +10 -8
- package/dist/filters/collection/vague.js +6 -8
- package/dist/services/draw.service.js +4 -5
- package/dist/services/event.service.d.ts +24 -0
- package/dist/services/event.service.js +43 -0
- package/dist/services/logger.service.js +5 -5
- package/dist/services/tool.service.js +7 -9
- package/dist/types/general.d.ts +1 -0
- package/dist/utils/filter.js +6 -6
- package/dist/utils/guid4.d.ts +12 -0
- package/dist/utils/guid4.js +102 -0
- package/dist/web-component.js +4 -0
- package/package.json +1 -1
|
@@ -4,6 +4,38 @@ const config_1 = require("../config");
|
|
|
4
4
|
const component_service_1 = require("../services/component.service");
|
|
5
5
|
const logger_service_1 = require("../services/logger.service");
|
|
6
6
|
class CanvasComponent extends component_service_1.default {
|
|
7
|
+
static template = `
|
|
8
|
+
<div id="event-listener"></div>
|
|
9
|
+
<canvas id="sc-canvas"></canvas>
|
|
10
|
+
`;
|
|
11
|
+
static css = `
|
|
12
|
+
#event-listener {
|
|
13
|
+
position: absolute;
|
|
14
|
+
z-index: 10000;
|
|
15
|
+
}
|
|
16
|
+
`;
|
|
17
|
+
static eventListener;
|
|
18
|
+
static canvas;
|
|
19
|
+
static ctx;
|
|
20
|
+
static subscriptions = {
|
|
21
|
+
click: [],
|
|
22
|
+
mousemove: [],
|
|
23
|
+
mousedown: [],
|
|
24
|
+
mouseup: [],
|
|
25
|
+
};
|
|
26
|
+
static _cursorStyle = {
|
|
27
|
+
before: null,
|
|
28
|
+
current: 'default',
|
|
29
|
+
};
|
|
30
|
+
static {
|
|
31
|
+
logger_service_1.default.components.add({
|
|
32
|
+
info: {
|
|
33
|
+
name: 'canvas',
|
|
34
|
+
description: 'canvas component',
|
|
35
|
+
},
|
|
36
|
+
prototype: CanvasComponent,
|
|
37
|
+
});
|
|
38
|
+
}
|
|
7
39
|
;
|
|
8
40
|
static getComponent() {
|
|
9
41
|
const canvasTemplate = CanvasComponent.getTemplate(CanvasComponent.template);
|
|
@@ -54,33 +86,4 @@ class CanvasComponent extends component_service_1.default {
|
|
|
54
86
|
});
|
|
55
87
|
}
|
|
56
88
|
}
|
|
57
|
-
CanvasComponent.template = `
|
|
58
|
-
<div id="event-listener"></div>
|
|
59
|
-
<canvas id="sc-canvas"></canvas>
|
|
60
|
-
`;
|
|
61
|
-
CanvasComponent.css = `
|
|
62
|
-
#event-listener {
|
|
63
|
-
position: absolute;
|
|
64
|
-
z-index: 10000;
|
|
65
|
-
}
|
|
66
|
-
`;
|
|
67
|
-
CanvasComponent.subscriptions = {
|
|
68
|
-
click: [],
|
|
69
|
-
mousemove: [],
|
|
70
|
-
mousedown: [],
|
|
71
|
-
mouseup: [],
|
|
72
|
-
};
|
|
73
|
-
CanvasComponent._cursorStyle = {
|
|
74
|
-
before: null,
|
|
75
|
-
current: 'default',
|
|
76
|
-
};
|
|
77
|
-
(() => {
|
|
78
|
-
logger_service_1.default.components.add({
|
|
79
|
-
info: {
|
|
80
|
-
name: 'canvas',
|
|
81
|
-
description: 'canvas component',
|
|
82
|
-
},
|
|
83
|
-
prototype: CanvasComponent,
|
|
84
|
-
});
|
|
85
|
-
})();
|
|
86
89
|
exports.default = CanvasComponent;
|
|
@@ -3,6 +3,7 @@ import type { IExcretionsCoords, TExcretionStyle, TExcretionToolState } from "..
|
|
|
3
3
|
export default class ExcretionsComponent extends ComponentService {
|
|
4
4
|
private static template;
|
|
5
5
|
private static templateExcretion;
|
|
6
|
+
private static _excretionDefaultStyle;
|
|
6
7
|
private static css;
|
|
7
8
|
static excretionWrap: HTMLElement;
|
|
8
9
|
private static _excretions;
|
|
@@ -15,6 +16,8 @@ export default class ExcretionsComponent extends ComponentService {
|
|
|
15
16
|
static get additionStyle(): TExcretionStyle;
|
|
16
17
|
static set additionStyle(value: TExcretionStyle);
|
|
17
18
|
private static applyExcretionStyle;
|
|
19
|
+
private static determineCropStyle;
|
|
20
|
+
private static determineDefaultStyle;
|
|
18
21
|
private static tool;
|
|
19
22
|
static getComponent(): {
|
|
20
23
|
excretionsTemplate: HTMLElement;
|
|
@@ -6,6 +6,65 @@ const canvas_component_1 = require("./canvas.component");
|
|
|
6
6
|
const logger_service_1 = require("../services/logger.service");
|
|
7
7
|
const crop_service_1 = require("../services/crop.service");
|
|
8
8
|
class ExcretionsComponent extends component_service_1.default {
|
|
9
|
+
static template = ``;
|
|
10
|
+
static templateExcretion = `
|
|
11
|
+
<button type="button" class="crop-button">
|
|
12
|
+
<svg fill="#ffffff" viewBox="0 0 1920 1920" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M426.667 0h106.666v1386.67H1920v106.66H426.667V0zM320 426.667H0v106.666h320V426.667zm320 0v106.666h746.67V1280h106.66V426.667H640zM1493.33 1600h-106.66v320h106.66v-320z"></path> </g></svg>
|
|
13
|
+
</button>
|
|
14
|
+
`;
|
|
15
|
+
static _excretionDefaultStyle = ['excretion'];
|
|
16
|
+
static css = `
|
|
17
|
+
.excretion {
|
|
18
|
+
display: flex;
|
|
19
|
+
position: absolute;
|
|
20
|
+
background-image: linear-gradient(90deg, silver 50%, transparent 50%), linear-gradient(90deg, silver 50%, transparent 50%), linear-gradient(0deg, silver 50%, transparent 50%), linear-gradient(0deg, silver 50%, transparent 50%);
|
|
21
|
+
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
|
|
22
|
+
background-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px;
|
|
23
|
+
background-position: left top, right bottom, left bottom, right top;
|
|
24
|
+
animation: border-dance 1s infinite linear;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.excretion_crop {
|
|
28
|
+
box-shadow: 0px 0px 0px calc(100vw + 100vh) #50505070;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.crop-button {
|
|
32
|
+
display: none;
|
|
33
|
+
justify-content: center;
|
|
34
|
+
align-items: center;
|
|
35
|
+
position: absolute;
|
|
36
|
+
padding: 5px;
|
|
37
|
+
right: -35px;
|
|
38
|
+
top: 0;
|
|
39
|
+
background: #232222;
|
|
40
|
+
border: 1px solid #ffffff50;
|
|
41
|
+
border-radius: 4px;
|
|
42
|
+
width: 30px;
|
|
43
|
+
height: 30px;
|
|
44
|
+
cursor: pointer;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.crop-button--view {
|
|
48
|
+
display: flex;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
@keyframes border-dance {
|
|
52
|
+
0% {
|
|
53
|
+
background-position: left top, right bottom, left bottom, right top;
|
|
54
|
+
}
|
|
55
|
+
100% {
|
|
56
|
+
background-position: left 8px top, right 8px bottom, left bottom 8px, right top 8px;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
`;
|
|
60
|
+
static excretionWrap;
|
|
61
|
+
static _excretions = [];
|
|
62
|
+
static _excretionState = 'abandoned';
|
|
63
|
+
static _excretionActivity = 'abandoned';
|
|
64
|
+
static _excretionToolState = 'abandoned';
|
|
65
|
+
static _tempCoords = [];
|
|
66
|
+
static excretionsCoords = [];
|
|
67
|
+
static _additionStyle = 'default';
|
|
9
68
|
static get additionStyle() {
|
|
10
69
|
return ExcretionsComponent._additionStyle;
|
|
11
70
|
}
|
|
@@ -14,27 +73,57 @@ class ExcretionsComponent extends component_service_1.default {
|
|
|
14
73
|
ExcretionsComponent.applyExcretionStyle();
|
|
15
74
|
}
|
|
16
75
|
static applyExcretionStyle() {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
else {
|
|
28
|
-
ExcretionsComponent._excretions.forEach((excretion) => {
|
|
29
|
-
if (!!excretion) {
|
|
30
|
-
if (excretion.classList.contains('excretion_crop')) {
|
|
31
|
-
excretion.classList.remove("excretion_crop");
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
});
|
|
76
|
+
switch (ExcretionsComponent._additionStyle) {
|
|
77
|
+
case 'crop':
|
|
78
|
+
ExcretionsComponent.determineCropStyle();
|
|
79
|
+
break;
|
|
80
|
+
case 'default':
|
|
81
|
+
ExcretionsComponent.determineDefaultStyle();
|
|
82
|
+
break;
|
|
83
|
+
default:
|
|
84
|
+
ExcretionsComponent.determineDefaultStyle();
|
|
85
|
+
break;
|
|
35
86
|
}
|
|
36
87
|
}
|
|
37
88
|
;
|
|
89
|
+
static determineCropStyle() {
|
|
90
|
+
ExcretionsComponent._excretions.forEach((excretion) => {
|
|
91
|
+
if (!!excretion === false)
|
|
92
|
+
return;
|
|
93
|
+
if (!excretion.classList.contains('excretion_crop')) {
|
|
94
|
+
excretion.classList.add("excretion_crop");
|
|
95
|
+
crop_service_1.default.viewCropButton();
|
|
96
|
+
}
|
|
97
|
+
});
|
|
98
|
+
}
|
|
99
|
+
static determineDefaultStyle() {
|
|
100
|
+
ExcretionsComponent._excretions.forEach((excretion) => {
|
|
101
|
+
if (!!excretion === false)
|
|
102
|
+
return;
|
|
103
|
+
// @ts-ignore
|
|
104
|
+
excretion.classList = ExcretionsComponent._excretionDefaultStyle;
|
|
105
|
+
});
|
|
106
|
+
}
|
|
107
|
+
static tool = {
|
|
108
|
+
id: 1,
|
|
109
|
+
name: 'excretion',
|
|
110
|
+
onAction: () => ExcretionsComponent.setToolState('taken'),
|
|
111
|
+
offAction: () => ExcretionsComponent.setToolState('abandoned'),
|
|
112
|
+
support: () => {
|
|
113
|
+
ExcretionsComponent.clearExcretionsCoords();
|
|
114
|
+
ExcretionsComponent.additionStyle = 'default';
|
|
115
|
+
},
|
|
116
|
+
};
|
|
117
|
+
static {
|
|
118
|
+
tool_service_1.default.add(ExcretionsComponent.tool);
|
|
119
|
+
logger_service_1.default.components.add({
|
|
120
|
+
info: {
|
|
121
|
+
name: 'excretion',
|
|
122
|
+
description: 'excretion component',
|
|
123
|
+
},
|
|
124
|
+
prototype: ExcretionsComponent,
|
|
125
|
+
});
|
|
126
|
+
}
|
|
38
127
|
static getComponent() {
|
|
39
128
|
const wrapOptions = {
|
|
40
129
|
className: 'excretions-wrap',
|
|
@@ -109,7 +198,7 @@ class ExcretionsComponent extends component_service_1.default {
|
|
|
109
198
|
const state = ExcretionsComponent._excretionState;
|
|
110
199
|
if (state === 'create') {
|
|
111
200
|
const wrapOptions = {
|
|
112
|
-
className:
|
|
201
|
+
className: ExcretionsComponent._excretionDefaultStyle[0],
|
|
113
202
|
};
|
|
114
203
|
const excretionTemplate = ExcretionsComponent.getTemplate(ExcretionsComponent.templateExcretion, wrapOptions);
|
|
115
204
|
ExcretionsComponent.clearExcretionsCoords();
|
|
@@ -185,81 +274,4 @@ class ExcretionsComponent extends component_service_1.default {
|
|
|
185
274
|
});
|
|
186
275
|
}
|
|
187
276
|
}
|
|
188
|
-
ExcretionsComponent.template = ``;
|
|
189
|
-
ExcretionsComponent.templateExcretion = `
|
|
190
|
-
<button type="button" class="crop-button">
|
|
191
|
-
<svg fill="#ffffff" viewBox="0 0 1920 1920" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M426.667 0h106.666v1386.67H1920v106.66H426.667V0zM320 426.667H0v106.666h320V426.667zm320 0v106.666h746.67V1280h106.66V426.667H640zM1493.33 1600h-106.66v320h106.66v-320z"></path> </g></svg>
|
|
192
|
-
</button>
|
|
193
|
-
`;
|
|
194
|
-
ExcretionsComponent.css = `
|
|
195
|
-
.excretion {
|
|
196
|
-
display: flex;
|
|
197
|
-
position: absolute;
|
|
198
|
-
background-image: linear-gradient(90deg, silver 50%, transparent 50%), linear-gradient(90deg, silver 50%, transparent 50%), linear-gradient(0deg, silver 50%, transparent 50%), linear-gradient(0deg, silver 50%, transparent 50%);
|
|
199
|
-
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
|
|
200
|
-
background-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px;
|
|
201
|
-
background-position: left top, right bottom, left bottom, right top;
|
|
202
|
-
animation: border-dance 1s infinite linear;
|
|
203
|
-
}
|
|
204
|
-
|
|
205
|
-
.excretion_crop {
|
|
206
|
-
box-shadow: 0px 0px 0px calc(100vw + 100vh) #50505070;
|
|
207
|
-
}
|
|
208
|
-
|
|
209
|
-
.crop-button {
|
|
210
|
-
display: none;
|
|
211
|
-
justify-content: center;
|
|
212
|
-
align-items: center;
|
|
213
|
-
position: absolute;
|
|
214
|
-
padding: 5px;
|
|
215
|
-
right: -35px;
|
|
216
|
-
top: 0;
|
|
217
|
-
background: #232222;
|
|
218
|
-
border: 1px solid #ffffff50;
|
|
219
|
-
border-radius: 4px;
|
|
220
|
-
width: 30px;
|
|
221
|
-
height: 30px;
|
|
222
|
-
cursor: pointer;
|
|
223
|
-
}
|
|
224
|
-
|
|
225
|
-
.crop-button--view {
|
|
226
|
-
display: flex;
|
|
227
|
-
}
|
|
228
|
-
|
|
229
|
-
@keyframes border-dance {
|
|
230
|
-
0% {
|
|
231
|
-
background-position: left top, right bottom, left bottom, right top;
|
|
232
|
-
}
|
|
233
|
-
100% {
|
|
234
|
-
background-position: left 8px top, right 8px bottom, left bottom 8px, right top 8px;
|
|
235
|
-
}
|
|
236
|
-
}
|
|
237
|
-
`;
|
|
238
|
-
ExcretionsComponent._excretions = [];
|
|
239
|
-
ExcretionsComponent._excretionState = 'abandoned';
|
|
240
|
-
ExcretionsComponent._excretionActivity = 'abandoned';
|
|
241
|
-
ExcretionsComponent._excretionToolState = 'abandoned';
|
|
242
|
-
ExcretionsComponent._tempCoords = [];
|
|
243
|
-
ExcretionsComponent.excretionsCoords = [];
|
|
244
|
-
ExcretionsComponent._additionStyle = 'default';
|
|
245
|
-
ExcretionsComponent.tool = {
|
|
246
|
-
id: 1,
|
|
247
|
-
name: 'excretion',
|
|
248
|
-
onAction: () => ExcretionsComponent.setToolState('taken'),
|
|
249
|
-
offAction: () => ExcretionsComponent.setToolState('abandoned'),
|
|
250
|
-
support: () => {
|
|
251
|
-
ExcretionsComponent.clearExcretionsCoords();
|
|
252
|
-
ExcretionsComponent.additionStyle = 'default';
|
|
253
|
-
},
|
|
254
|
-
};
|
|
255
|
-
(() => {
|
|
256
|
-
tool_service_1.default.add(ExcretionsComponent.tool);
|
|
257
|
-
logger_service_1.default.components.add({
|
|
258
|
-
info: {
|
|
259
|
-
name: 'excretion',
|
|
260
|
-
description: 'excretion component',
|
|
261
|
-
},
|
|
262
|
-
prototype: ExcretionsComponent,
|
|
263
|
-
});
|
|
264
|
-
})();
|
|
265
277
|
exports.default = ExcretionsComponent;
|
|
@@ -6,6 +6,59 @@ const component_service_1 = require("../services/component.service");
|
|
|
6
6
|
const tool_service_1 = require("../services/tool.service");
|
|
7
7
|
const logger_service_1 = require("../services/logger.service");
|
|
8
8
|
class PipetteComponent extends component_service_1.default {
|
|
9
|
+
static template = `
|
|
10
|
+
<div class="pipette_border-out">
|
|
11
|
+
<div class="pipette_color">
|
|
12
|
+
<div class="pipette_border-in">
|
|
13
|
+
<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M17 12C17 14.7614 14.7614 17 12 17M17 12C17 9.23858 14.7614 7 12 7M17 12H19M12 17C9.23858 17 7 14.7614 7 12M12 17V19M7 12C7 9.23858 9.23858 7 12 7M7 12H5M12 7V5M14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12Z" stroke="#d9d9d9" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>
|
|
14
|
+
</div>
|
|
15
|
+
</div>
|
|
16
|
+
</div>
|
|
17
|
+
`;
|
|
18
|
+
static css = `
|
|
19
|
+
.pipette {
|
|
20
|
+
position: absolute;
|
|
21
|
+
display: none;
|
|
22
|
+
justify-content: center;
|
|
23
|
+
align-items: center;
|
|
24
|
+
width: 48px;
|
|
25
|
+
height: 48px;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.pipette_border-out {
|
|
29
|
+
display: flex;
|
|
30
|
+
justify-content: center;
|
|
31
|
+
align-items: center;
|
|
32
|
+
border-radius: 100px;
|
|
33
|
+
border: solid 2px #d9d9d9;
|
|
34
|
+
width: 44px;
|
|
35
|
+
height: 44px;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.pipette_border-in {
|
|
39
|
+
display: flex;
|
|
40
|
+
justify-content: center;
|
|
41
|
+
align-items: center;
|
|
42
|
+
border-radius: 100px;
|
|
43
|
+
border: solid 1px #d9d9d9;
|
|
44
|
+
width: 32px;
|
|
45
|
+
height: 32px;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.pipette_color {
|
|
49
|
+
display: flex;
|
|
50
|
+
justify-content: center;
|
|
51
|
+
align-items: center;
|
|
52
|
+
width: 34px;
|
|
53
|
+
height: 34px;
|
|
54
|
+
border-radius: 100px;
|
|
55
|
+
border-color: blue;
|
|
56
|
+
border-style: solid;
|
|
57
|
+
border-width: 5px;
|
|
58
|
+
}
|
|
59
|
+
`;
|
|
60
|
+
static pipette;
|
|
61
|
+
static _pipetteColor;
|
|
9
62
|
static set pipetteColor(color) {
|
|
10
63
|
PipetteComponent._pipetteColor = color;
|
|
11
64
|
PipetteComponent._pipetteColorElement.style.borderColor = PipetteComponent._pipetteColor;
|
|
@@ -13,6 +66,24 @@ class PipetteComponent extends component_service_1.default {
|
|
|
13
66
|
static get pipetteColor() {
|
|
14
67
|
return PipetteComponent._pipetteColor;
|
|
15
68
|
}
|
|
69
|
+
static _pipetteColorElement;
|
|
70
|
+
static _pipetteState = 'abandoned';
|
|
71
|
+
static tool = {
|
|
72
|
+
id: 0,
|
|
73
|
+
name: 'pipette',
|
|
74
|
+
onAction: () => PipetteComponent.setState('taken'),
|
|
75
|
+
offAction: () => PipetteComponent.setState('abandoned'),
|
|
76
|
+
};
|
|
77
|
+
static {
|
|
78
|
+
tool_service_1.default.add(PipetteComponent.tool);
|
|
79
|
+
logger_service_1.default.components.add({
|
|
80
|
+
info: {
|
|
81
|
+
name: 'pipette',
|
|
82
|
+
description: 'pipette component',
|
|
83
|
+
},
|
|
84
|
+
prototype: PipetteComponent,
|
|
85
|
+
});
|
|
86
|
+
}
|
|
16
87
|
static getComponent() {
|
|
17
88
|
const wrapOptions = {
|
|
18
89
|
className: 'pipette',
|
|
@@ -75,72 +146,4 @@ class PipetteComponent extends component_service_1.default {
|
|
|
75
146
|
canvas_component_1.default.cursorStyle = 'default';
|
|
76
147
|
}
|
|
77
148
|
}
|
|
78
|
-
PipetteComponent.template = `
|
|
79
|
-
<div class="pipette_border-out">
|
|
80
|
-
<div class="pipette_color">
|
|
81
|
-
<div class="pipette_border-in">
|
|
82
|
-
<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M17 12C17 14.7614 14.7614 17 12 17M17 12C17 9.23858 14.7614 7 12 7M17 12H19M12 17C9.23858 17 7 14.7614 7 12M12 17V19M7 12C7 9.23858 9.23858 7 12 7M7 12H5M12 7V5M14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12Z" stroke="#d9d9d9" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>
|
|
83
|
-
</div>
|
|
84
|
-
</div>
|
|
85
|
-
</div>
|
|
86
|
-
`;
|
|
87
|
-
PipetteComponent.css = `
|
|
88
|
-
.pipette {
|
|
89
|
-
position: absolute;
|
|
90
|
-
display: none;
|
|
91
|
-
justify-content: center;
|
|
92
|
-
align-items: center;
|
|
93
|
-
width: 48px;
|
|
94
|
-
height: 48px;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
.pipette_border-out {
|
|
98
|
-
display: flex;
|
|
99
|
-
justify-content: center;
|
|
100
|
-
align-items: center;
|
|
101
|
-
border-radius: 100px;
|
|
102
|
-
border: solid 2px #d9d9d9;
|
|
103
|
-
width: 44px;
|
|
104
|
-
height: 44px;
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
.pipette_border-in {
|
|
108
|
-
display: flex;
|
|
109
|
-
justify-content: center;
|
|
110
|
-
align-items: center;
|
|
111
|
-
border-radius: 100px;
|
|
112
|
-
border: solid 1px #d9d9d9;
|
|
113
|
-
width: 32px;
|
|
114
|
-
height: 32px;
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
.pipette_color {
|
|
118
|
-
display: flex;
|
|
119
|
-
justify-content: center;
|
|
120
|
-
align-items: center;
|
|
121
|
-
width: 34px;
|
|
122
|
-
height: 34px;
|
|
123
|
-
border-radius: 100px;
|
|
124
|
-
border-color: blue;
|
|
125
|
-
border-style: solid;
|
|
126
|
-
border-width: 5px;
|
|
127
|
-
}
|
|
128
|
-
`;
|
|
129
|
-
PipetteComponent._pipetteState = 'abandoned';
|
|
130
|
-
PipetteComponent.tool = {
|
|
131
|
-
id: 0,
|
|
132
|
-
name: 'pipette',
|
|
133
|
-
onAction: () => PipetteComponent.setState('taken'),
|
|
134
|
-
offAction: () => PipetteComponent.setState('abandoned'),
|
|
135
|
-
};
|
|
136
|
-
(() => {
|
|
137
|
-
tool_service_1.default.add(PipetteComponent.tool);
|
|
138
|
-
logger_service_1.default.components.add({
|
|
139
|
-
info: {
|
|
140
|
-
name: 'pipette',
|
|
141
|
-
description: 'pipette component',
|
|
142
|
-
},
|
|
143
|
-
prototype: PipetteComponent,
|
|
144
|
-
});
|
|
145
|
-
})();
|
|
146
149
|
exports.default = PipetteComponent;
|
|
@@ -3,6 +3,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
const component_service_1 = require("../services/component.service");
|
|
4
4
|
const logger_service_1 = require("../services/logger.service");
|
|
5
5
|
class SlotComponent extends component_service_1.default {
|
|
6
|
+
static template = `
|
|
7
|
+
<slot class="slot"></slot>
|
|
8
|
+
`;
|
|
9
|
+
static css = ``;
|
|
10
|
+
static slot;
|
|
11
|
+
static {
|
|
12
|
+
logger_service_1.default.components.add({
|
|
13
|
+
info: {
|
|
14
|
+
name: 'slot',
|
|
15
|
+
description: 'slot component',
|
|
16
|
+
},
|
|
17
|
+
prototype: SlotComponent,
|
|
18
|
+
});
|
|
19
|
+
}
|
|
6
20
|
static getComponent(slotName) {
|
|
7
21
|
const wrapOptions = {
|
|
8
22
|
className: 'slot-wrapper',
|
|
@@ -14,17 +28,4 @@ class SlotComponent extends component_service_1.default {
|
|
|
14
28
|
return { slotTemplate, slotStyle };
|
|
15
29
|
}
|
|
16
30
|
}
|
|
17
|
-
SlotComponent.template = `
|
|
18
|
-
<slot class="slot"></slot>
|
|
19
|
-
`;
|
|
20
|
-
SlotComponent.css = ``;
|
|
21
|
-
(() => {
|
|
22
|
-
logger_service_1.default.components.add({
|
|
23
|
-
info: {
|
|
24
|
-
name: 'slot',
|
|
25
|
-
description: 'slot component',
|
|
26
|
-
},
|
|
27
|
-
prototype: SlotComponent,
|
|
28
|
-
});
|
|
29
|
-
})();
|
|
30
31
|
exports.default = SlotComponent;
|
package/dist/config.js
CHANGED
|
@@ -2,9 +2,18 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.ConfigFabric = void 0;
|
|
4
4
|
class ConfigFabric {
|
|
5
|
+
static _WEB_COMPONENT_TAG_NAME;
|
|
6
|
+
static _CANVAS_SIZE;
|
|
5
7
|
}
|
|
6
8
|
exports.ConfigFabric = ConfigFabric;
|
|
7
9
|
class AppConfig extends ConfigFabric {
|
|
10
|
+
static {
|
|
11
|
+
AppConfig._CANVAS_SIZE = {
|
|
12
|
+
width: 300,
|
|
13
|
+
height: 150,
|
|
14
|
+
};
|
|
15
|
+
AppConfig._WEB_COMPONENT_TAG_NAME = 'canvas-editor-engine';
|
|
16
|
+
}
|
|
8
17
|
static get WEB_COMPONENT_TAG_NAME() {
|
|
9
18
|
return AppConfig._WEB_COMPONENT_TAG_NAME;
|
|
10
19
|
}
|
|
@@ -17,7 +26,7 @@ class AppConfig extends ConfigFabric {
|
|
|
17
26
|
return AppConfig._CANVAS_SIZE;
|
|
18
27
|
}
|
|
19
28
|
static set CANVAS_SIZE(value) {
|
|
20
|
-
if (!!value && !!
|
|
29
|
+
if (!!value && !!value?.width && !!value?.height) {
|
|
21
30
|
AppConfig._CANVAS_SIZE = value;
|
|
22
31
|
}
|
|
23
32
|
else {
|
|
@@ -25,11 +34,4 @@ class AppConfig extends ConfigFabric {
|
|
|
25
34
|
}
|
|
26
35
|
}
|
|
27
36
|
}
|
|
28
|
-
(() => {
|
|
29
|
-
AppConfig._CANVAS_SIZE = {
|
|
30
|
-
width: 300,
|
|
31
|
-
height: 150,
|
|
32
|
-
};
|
|
33
|
-
AppConfig._WEB_COMPONENT_TAG_NAME = 'canvas-editor-engine';
|
|
34
|
-
})();
|
|
35
37
|
exports.default = AppConfig;
|
|
@@ -4,9 +4,10 @@ const filter_1 = require("../../utils/filter");
|
|
|
4
4
|
const convert_1 = require("../../utils/convert");
|
|
5
5
|
const lodash_1 = require("lodash");
|
|
6
6
|
class VagueFilter extends filter_1.Filter {
|
|
7
|
+
options;
|
|
8
|
+
filterList = ['pixel'];
|
|
7
9
|
constructor(ctx, options) {
|
|
8
10
|
super(ctx);
|
|
9
|
-
this.filterList = ['pixel'];
|
|
10
11
|
this.options = options;
|
|
11
12
|
}
|
|
12
13
|
on(action, filterOptions) {
|
|
@@ -52,7 +53,6 @@ class VagueFilter extends filter_1.Filter {
|
|
|
52
53
|
let yEnd = quality;
|
|
53
54
|
(0, lodash_1.range)(0, hq).forEach((hqi) => {
|
|
54
55
|
(0, lodash_1.range)(0, wq).forEach((wqi) => {
|
|
55
|
-
var _a, _b;
|
|
56
56
|
const dy = (0, lodash_1.range)(yStart, yEnd);
|
|
57
57
|
const dx = (0, lodash_1.range)(xStart, xEnd);
|
|
58
58
|
const items = [];
|
|
@@ -65,8 +65,8 @@ class VagueFilter extends filter_1.Filter {
|
|
|
65
65
|
});
|
|
66
66
|
xStart += quality;
|
|
67
67
|
xEnd += quality;
|
|
68
|
-
|
|
69
|
-
|
|
68
|
+
rangeCommit[i] ??= coords;
|
|
69
|
+
qualityBuff[i] ??= items;
|
|
70
70
|
i++;
|
|
71
71
|
});
|
|
72
72
|
xStart = 0;
|
|
@@ -84,11 +84,9 @@ class VagueFilter extends filter_1.Filter {
|
|
|
84
84
|
});
|
|
85
85
|
qualityBuffWithMostCommonElement.forEach((qPixel, pixelIndex) => {
|
|
86
86
|
qPixel.forEach((pixelColor, pixelColorIndex) => {
|
|
87
|
-
var _a, _b;
|
|
88
|
-
var _c;
|
|
89
87
|
const { x, y } = rangeCommit[pixelIndex][pixelColorIndex];
|
|
90
|
-
|
|
91
|
-
|
|
88
|
+
mostCommonQuanlityBuff[y] ??= [];
|
|
89
|
+
mostCommonQuanlityBuff[y][x] ??= pixelColor;
|
|
92
90
|
});
|
|
93
91
|
});
|
|
94
92
|
return mostCommonQuanlityBuff;
|
|
@@ -9,14 +9,13 @@ class DrawService {
|
|
|
9
9
|
img.draw(options);
|
|
10
10
|
}
|
|
11
11
|
static drawSmoothImage(ctx, src, options, filterOptions) {
|
|
12
|
-
var _a, _b;
|
|
13
12
|
const img = new SCImage(src, ctx);
|
|
14
13
|
const filterArgs = {
|
|
15
14
|
x: options.position.x,
|
|
16
15
|
y: options.position.y,
|
|
17
16
|
};
|
|
18
17
|
if (options.size !== 'initial') {
|
|
19
|
-
if (!!
|
|
18
|
+
if (!!options.size?.width && !!options.size?.height) {
|
|
20
19
|
filterArgs.width = options.size.width;
|
|
21
20
|
filterArgs.height = options.size.height;
|
|
22
21
|
}
|
|
@@ -27,8 +26,9 @@ class DrawService {
|
|
|
27
26
|
}
|
|
28
27
|
exports.default = DrawService;
|
|
29
28
|
class SCImage {
|
|
29
|
+
img = new Image();
|
|
30
|
+
ctx;
|
|
30
31
|
constructor(src, ctx) {
|
|
31
|
-
this.img = new Image();
|
|
32
32
|
this.img.src = src;
|
|
33
33
|
this.ctx = ctx;
|
|
34
34
|
}
|
|
@@ -42,10 +42,9 @@ class SCImage {
|
|
|
42
42
|
return new Promise((resolve, reject) => {
|
|
43
43
|
try {
|
|
44
44
|
protoImg.addEventListener("load", () => {
|
|
45
|
-
var _a, _b;
|
|
46
45
|
let drawImageArgs = [options.position.x, options.position.y];
|
|
47
46
|
if (options.size !== 'initial') {
|
|
48
|
-
if (!!
|
|
47
|
+
if (!!options.size?.width && !!options.size?.height) {
|
|
49
48
|
drawImageArgs = drawImageArgs.concat([options.size.width, options.size.height]);
|
|
50
49
|
}
|
|
51
50
|
else {
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { IGUID4 } from "../types/general";
|
|
2
|
+
export declare abstract class ControlEvent {
|
|
3
|
+
name: string;
|
|
4
|
+
action: (args?: any) => Event;
|
|
5
|
+
}
|
|
6
|
+
export declare class EventAtom implements ControlEvent {
|
|
7
|
+
id: IGUID4;
|
|
8
|
+
name: string;
|
|
9
|
+
action: (args?: any) => Event;
|
|
10
|
+
}
|
|
11
|
+
export declare abstract class AbstractEvent {
|
|
12
|
+
eventList: EventAtom[];
|
|
13
|
+
abstract subcribe(event: EventAtom): void;
|
|
14
|
+
abstract dispatch(name: ControlEvent['name'], eventArgs?: any): void;
|
|
15
|
+
abstract applyEvents(baseElement: HTMLDivElement): void;
|
|
16
|
+
}
|
|
17
|
+
export declare class EventService implements AbstractEvent {
|
|
18
|
+
private baseElement;
|
|
19
|
+
eventList: EventAtom[];
|
|
20
|
+
constructor(baseElement: HTMLDivElement);
|
|
21
|
+
subcribe(controlEvent: ControlEvent): void;
|
|
22
|
+
dispatch(name: ControlEvent['name'], eventArgs?: any): void;
|
|
23
|
+
applyEvents(): void;
|
|
24
|
+
}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.EventService = exports.AbstractEvent = exports.EventAtom = exports.ControlEvent = void 0;
|
|
4
|
+
const guid4_1 = require("../utils/guid4");
|
|
5
|
+
class ControlEvent {
|
|
6
|
+
name;
|
|
7
|
+
action;
|
|
8
|
+
}
|
|
9
|
+
exports.ControlEvent = ControlEvent;
|
|
10
|
+
class EventAtom {
|
|
11
|
+
id;
|
|
12
|
+
name;
|
|
13
|
+
action;
|
|
14
|
+
}
|
|
15
|
+
exports.EventAtom = EventAtom;
|
|
16
|
+
class AbstractEvent {
|
|
17
|
+
eventList;
|
|
18
|
+
}
|
|
19
|
+
exports.AbstractEvent = AbstractEvent;
|
|
20
|
+
class EventService {
|
|
21
|
+
baseElement;
|
|
22
|
+
eventList;
|
|
23
|
+
constructor(baseElement) {
|
|
24
|
+
this.baseElement = baseElement;
|
|
25
|
+
}
|
|
26
|
+
subcribe(controlEvent) {
|
|
27
|
+
const eventAtom = {
|
|
28
|
+
id: new guid4_1.Guid4().finite,
|
|
29
|
+
...controlEvent
|
|
30
|
+
};
|
|
31
|
+
this.eventList.push(eventAtom);
|
|
32
|
+
}
|
|
33
|
+
dispatch(name, eventArgs) {
|
|
34
|
+
const eventAtom = this.eventList.find((event) => event.name === name);
|
|
35
|
+
eventAtom.action(eventArgs);
|
|
36
|
+
}
|
|
37
|
+
applyEvents() {
|
|
38
|
+
this.eventList.forEach((event) => {
|
|
39
|
+
this.baseElement.addEventListener(event.name, event.action);
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
exports.EventService = EventService;
|
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
class LoggerService {
|
|
4
|
+
static log = {
|
|
5
|
+
components: [],
|
|
6
|
+
services: [],
|
|
7
|
+
planed: [],
|
|
8
|
+
};
|
|
4
9
|
static get components() {
|
|
5
10
|
return LoggerService.getMethods('components');
|
|
6
11
|
}
|
|
@@ -30,9 +35,4 @@ class LoggerService {
|
|
|
30
35
|
return LoggerService.log[field].find((logItem) => logItem.info.name === name);
|
|
31
36
|
}
|
|
32
37
|
}
|
|
33
|
-
LoggerService.log = {
|
|
34
|
-
components: [],
|
|
35
|
-
services: [],
|
|
36
|
-
planed: [],
|
|
37
|
-
};
|
|
38
38
|
exports.default = LoggerService;
|
|
@@ -2,6 +2,9 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
const canvas_component_1 = require("../components/canvas.component");
|
|
4
4
|
class ToolService {
|
|
5
|
+
static before = null;
|
|
6
|
+
static active = null;
|
|
7
|
+
static registry = [];
|
|
5
8
|
static add(tool) {
|
|
6
9
|
const hasRegisteredTool = ToolService.registry.find((registeredTool) => registeredTool.id === tool.id);
|
|
7
10
|
if (hasRegisteredTool) {
|
|
@@ -12,16 +15,15 @@ class ToolService {
|
|
|
12
15
|
return true;
|
|
13
16
|
}
|
|
14
17
|
static setActive(id) {
|
|
15
|
-
|
|
16
|
-
if (((_a = ToolService.active) === null || _a === void 0 ? void 0 : _a.id) === id)
|
|
18
|
+
if (ToolService.active?.id === id)
|
|
17
19
|
return console.warn('Tool is already active');
|
|
18
|
-
if (!!
|
|
20
|
+
if (!!ToolService.active?.offAction) {
|
|
19
21
|
ToolService.active.offAction();
|
|
20
22
|
}
|
|
21
23
|
const registeredTool = ToolService.registry.find((registeredTool) => registeredTool.id === id);
|
|
22
24
|
if (!!registeredTool) {
|
|
23
25
|
ToolService.active = registeredTool;
|
|
24
|
-
if (!!
|
|
26
|
+
if (!!ToolService.active?.onAction) {
|
|
25
27
|
ToolService.active.onAction();
|
|
26
28
|
}
|
|
27
29
|
}
|
|
@@ -43,8 +45,7 @@ class ToolService {
|
|
|
43
45
|
}
|
|
44
46
|
}
|
|
45
47
|
static off() {
|
|
46
|
-
|
|
47
|
-
if (!!((_a = ToolService.active) === null || _a === void 0 ? void 0 : _a.offAction)) {
|
|
48
|
+
if (!!ToolService.active?.offAction) {
|
|
48
49
|
ToolService.active.offAction();
|
|
49
50
|
}
|
|
50
51
|
ToolService.before = ToolService.active;
|
|
@@ -52,7 +53,4 @@ class ToolService {
|
|
|
52
53
|
canvas_component_1.default.cursorStyle = 'default';
|
|
53
54
|
}
|
|
54
55
|
}
|
|
55
|
-
ToolService.before = null;
|
|
56
|
-
ToolService.active = null;
|
|
57
|
-
ToolService.registry = [];
|
|
58
56
|
exports.default = ToolService;
|
package/dist/types/general.d.ts
CHANGED
package/dist/utils/filter.js
CHANGED
|
@@ -5,6 +5,8 @@ const config_1 = require("../config");
|
|
|
5
5
|
const convert_1 = require("./convert");
|
|
6
6
|
const lodash_1 = require("lodash");
|
|
7
7
|
class Filter {
|
|
8
|
+
ctx;
|
|
9
|
+
imageSize;
|
|
8
10
|
constructor(ctx) {
|
|
9
11
|
this.ctx = ctx;
|
|
10
12
|
}
|
|
@@ -12,8 +14,8 @@ class Filter {
|
|
|
12
14
|
this.imageSize = size;
|
|
13
15
|
}
|
|
14
16
|
copy(options) {
|
|
15
|
-
const width = (options
|
|
16
|
-
const height = (options
|
|
17
|
+
const width = (options?.width) ? options.width : config_1.default.CANVAS_SIZE.width;
|
|
18
|
+
const height = (options?.height) ? options.height : config_1.default.CANVAS_SIZE.height;
|
|
17
19
|
const imgData = this.ctx.getImageData(options.x, options.y, width, height);
|
|
18
20
|
return imgData;
|
|
19
21
|
}
|
|
@@ -31,11 +33,10 @@ class Filter {
|
|
|
31
33
|
const buff = [];
|
|
32
34
|
let indexOfDistance = 0;
|
|
33
35
|
hexBuff.forEach((pxColor, pxIndex) => {
|
|
34
|
-
var _a;
|
|
35
36
|
if (pxIndex >= distanceRow[indexOfDistance + 1]) {
|
|
36
37
|
indexOfDistance++;
|
|
37
38
|
}
|
|
38
|
-
|
|
39
|
+
buff[indexOfDistance] ??= [];
|
|
39
40
|
buff[indexOfDistance].push(pxColor);
|
|
40
41
|
});
|
|
41
42
|
return buff;
|
|
@@ -45,14 +46,13 @@ class Filter {
|
|
|
45
46
|
let colorIndx = 0;
|
|
46
47
|
let colorRGBAIndx = 0;
|
|
47
48
|
imageData.data.forEach((pxColor) => {
|
|
48
|
-
var _a;
|
|
49
49
|
if (colorIndx >= 4) {
|
|
50
50
|
colorIndx = 0;
|
|
51
51
|
colorRGBAIndx++;
|
|
52
52
|
}
|
|
53
53
|
colorIndx++;
|
|
54
54
|
// @ts-ignore
|
|
55
|
-
|
|
55
|
+
rowRGBABuff[colorRGBAIndx] ??= [];
|
|
56
56
|
rowRGBABuff[colorRGBAIndx].push(pxColor);
|
|
57
57
|
});
|
|
58
58
|
return rowRGBABuff;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { IGUID4 } from "../types/general";
|
|
2
|
+
export declare class Guid4 {
|
|
3
|
+
static stack: IGUID4[];
|
|
4
|
+
guid4: IGUID4;
|
|
5
|
+
constructor();
|
|
6
|
+
private generate;
|
|
7
|
+
private getFactor;
|
|
8
|
+
private get attempt();
|
|
9
|
+
private get Guid4();
|
|
10
|
+
private formating;
|
|
11
|
+
get finite(): IGUID4;
|
|
12
|
+
}
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Guid4 = void 0;
|
|
4
|
+
class Guid4 {
|
|
5
|
+
static stack = [];
|
|
6
|
+
guid4;
|
|
7
|
+
constructor() {
|
|
8
|
+
this.generate(this.attempt);
|
|
9
|
+
}
|
|
10
|
+
generate(attempt) {
|
|
11
|
+
const factor = this.getFactor(this.guid4);
|
|
12
|
+
attempt.use('withError').run(factor);
|
|
13
|
+
}
|
|
14
|
+
getFactor(guid4) {
|
|
15
|
+
return (attempt) => {
|
|
16
|
+
guid4 = this.Guid4;
|
|
17
|
+
if (!Guid4.stack.includes(guid4)) {
|
|
18
|
+
attempt.current = attempt.max;
|
|
19
|
+
Guid4.stack.push(guid4);
|
|
20
|
+
}
|
|
21
|
+
};
|
|
22
|
+
}
|
|
23
|
+
get attempt() {
|
|
24
|
+
const attemptConfig = {
|
|
25
|
+
attempt: {
|
|
26
|
+
current: 1,
|
|
27
|
+
max: 5,
|
|
28
|
+
},
|
|
29
|
+
error: {
|
|
30
|
+
message: '[Fatal Error] Guid4 module cannot generate unique guid4'
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
const attempt = new GenerateAttempt(attemptConfig.attempt, attemptConfig.error);
|
|
34
|
+
return attempt;
|
|
35
|
+
}
|
|
36
|
+
get Guid4() {
|
|
37
|
+
const base = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx';
|
|
38
|
+
const regex = /[xy]/g;
|
|
39
|
+
const guid4 = base.replace(regex, this.formating);
|
|
40
|
+
return guid4;
|
|
41
|
+
}
|
|
42
|
+
formating(char) {
|
|
43
|
+
const preformer = Math.random() * 16 | 0;
|
|
44
|
+
const formattedChar = (char == 'x') ? preformer : (preformer & 0x3 | 0x8);
|
|
45
|
+
return formattedChar.toString(16);
|
|
46
|
+
}
|
|
47
|
+
get finite() {
|
|
48
|
+
const isFound = (item) => !!item;
|
|
49
|
+
return Guid4.stack.findLast(isFound);
|
|
50
|
+
}
|
|
51
|
+
;
|
|
52
|
+
}
|
|
53
|
+
exports.Guid4 = Guid4;
|
|
54
|
+
;
|
|
55
|
+
class GenerateAttempt {
|
|
56
|
+
_attempt;
|
|
57
|
+
_error;
|
|
58
|
+
constructor(config, error) {
|
|
59
|
+
this._attempt = config;
|
|
60
|
+
if (!!error)
|
|
61
|
+
this._error = error;
|
|
62
|
+
}
|
|
63
|
+
use(strategy = 'default') {
|
|
64
|
+
const context = this;
|
|
65
|
+
switch (strategy) {
|
|
66
|
+
case 'default':
|
|
67
|
+
return {
|
|
68
|
+
run(action) {
|
|
69
|
+
context.defaultRun(action);
|
|
70
|
+
},
|
|
71
|
+
};
|
|
72
|
+
case 'withError':
|
|
73
|
+
return {
|
|
74
|
+
run(action) {
|
|
75
|
+
context.withErrorRun(action);
|
|
76
|
+
},
|
|
77
|
+
};
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
defaultRun(action) {
|
|
81
|
+
const attemptCondition = this._attempt.current <= this._attempt.max;
|
|
82
|
+
while (attemptCondition) {
|
|
83
|
+
action(this._attempt);
|
|
84
|
+
this._attempt.current++;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
withErrorRun(action) {
|
|
88
|
+
const attemptCondition = this._attempt.current <= this._attempt.max;
|
|
89
|
+
const errorCondition = this._attempt.current === this._attempt.max;
|
|
90
|
+
const errorMessage = this._error.message;
|
|
91
|
+
while (attemptCondition) {
|
|
92
|
+
this.throwError(errorCondition, errorMessage);
|
|
93
|
+
action(this._attempt);
|
|
94
|
+
this._attempt.current++;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
throwError(condition, message) {
|
|
98
|
+
if (condition) {
|
|
99
|
+
throw new Error(message);
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
}
|
package/dist/web-component.js
CHANGED
|
@@ -6,6 +6,10 @@ const excretions_component_1 = require("./components/excretions.component");
|
|
|
6
6
|
const pipette_component_1 = require("./components/pipette.component");
|
|
7
7
|
const slot_component_1 = require("./components/slot.component");
|
|
8
8
|
class WebComponentWrapper {
|
|
9
|
+
baseElement;
|
|
10
|
+
editorWrapElement;
|
|
11
|
+
stylesWrapElement;
|
|
12
|
+
toolsWrapElement;
|
|
9
13
|
constructor() {
|
|
10
14
|
const base = document.createElement('div');
|
|
11
15
|
base.className = 'wc-editor';
|