canvas-editor-engine 1.0.24 → 1.0.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/canvas.component.js +32 -29
- package/dist/components/excretions.component.d.ts +3 -0
- package/dist/components/excretions.component.js +108 -97
- package/dist/components/pipette.component.js +71 -68
- package/dist/components/slot.component.js +14 -13
- package/dist/config.d.ts +9 -3
- package/dist/config.js +15 -7
- 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,82 +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
|
-
z-index: 1001;
|
|
228
|
-
}
|
|
229
|
-
|
|
230
|
-
@keyframes border-dance {
|
|
231
|
-
0% {
|
|
232
|
-
background-position: left top, right bottom, left bottom, right top;
|
|
233
|
-
}
|
|
234
|
-
100% {
|
|
235
|
-
background-position: left 8px top, right 8px bottom, left bottom 8px, right top 8px;
|
|
236
|
-
}
|
|
237
|
-
}
|
|
238
|
-
`;
|
|
239
|
-
ExcretionsComponent._excretions = [];
|
|
240
|
-
ExcretionsComponent._excretionState = 'abandoned';
|
|
241
|
-
ExcretionsComponent._excretionActivity = 'abandoned';
|
|
242
|
-
ExcretionsComponent._excretionToolState = 'abandoned';
|
|
243
|
-
ExcretionsComponent._tempCoords = [];
|
|
244
|
-
ExcretionsComponent.excretionsCoords = [];
|
|
245
|
-
ExcretionsComponent._additionStyle = 'default';
|
|
246
|
-
ExcretionsComponent.tool = {
|
|
247
|
-
id: 1,
|
|
248
|
-
name: 'excretion',
|
|
249
|
-
onAction: () => ExcretionsComponent.setToolState('taken'),
|
|
250
|
-
offAction: () => ExcretionsComponent.setToolState('abandoned'),
|
|
251
|
-
support: () => {
|
|
252
|
-
ExcretionsComponent.clearExcretionsCoords();
|
|
253
|
-
ExcretionsComponent.additionStyle = 'default';
|
|
254
|
-
},
|
|
255
|
-
};
|
|
256
|
-
(() => {
|
|
257
|
-
tool_service_1.default.add(ExcretionsComponent.tool);
|
|
258
|
-
logger_service_1.default.components.add({
|
|
259
|
-
info: {
|
|
260
|
-
name: 'excretion',
|
|
261
|
-
description: 'excretion component',
|
|
262
|
-
},
|
|
263
|
-
prototype: ExcretionsComponent,
|
|
264
|
-
});
|
|
265
|
-
})();
|
|
266
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.d.ts
CHANGED
|
@@ -1,7 +1,13 @@
|
|
|
1
1
|
import { ICanvasSize } from "./types/canvas";
|
|
2
|
-
export
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
export interface IConfigStore {
|
|
3
|
+
_WEB_COMPONENT_TAG_NAME: string;
|
|
4
|
+
_CANVAS_SIZE: ICanvasSize;
|
|
5
|
+
}
|
|
6
|
+
export declare class ConfigFabric {
|
|
7
|
+
protected static _WEB_COMPONENT_TAG_NAME: string;
|
|
8
|
+
protected static _CANVAS_SIZE: ICanvasSize;
|
|
9
|
+
}
|
|
10
|
+
export default class AppConfig extends ConfigFabric {
|
|
5
11
|
static get WEB_COMPONENT_TAG_NAME(): string;
|
|
6
12
|
static set WEB_COMPONENT_TAG_NAME(value: string | undefined);
|
|
7
13
|
static get CANVAS_SIZE(): ICanvasSize;
|
package/dist/config.js
CHANGED
|
@@ -1,6 +1,19 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
|
|
3
|
+
exports.ConfigFabric = void 0;
|
|
4
|
+
class ConfigFabric {
|
|
5
|
+
static _WEB_COMPONENT_TAG_NAME;
|
|
6
|
+
static _CANVAS_SIZE;
|
|
7
|
+
}
|
|
8
|
+
exports.ConfigFabric = ConfigFabric;
|
|
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
|
+
}
|
|
4
17
|
static get WEB_COMPONENT_TAG_NAME() {
|
|
5
18
|
return AppConfig._WEB_COMPONENT_TAG_NAME;
|
|
6
19
|
}
|
|
@@ -13,7 +26,7 @@ class AppConfig {
|
|
|
13
26
|
return AppConfig._CANVAS_SIZE;
|
|
14
27
|
}
|
|
15
28
|
static set CANVAS_SIZE(value) {
|
|
16
|
-
if (!!value && !!
|
|
29
|
+
if (!!value && !!value?.width && !!value?.height) {
|
|
17
30
|
AppConfig._CANVAS_SIZE = value;
|
|
18
31
|
}
|
|
19
32
|
else {
|
|
@@ -21,9 +34,4 @@ class AppConfig {
|
|
|
21
34
|
}
|
|
22
35
|
}
|
|
23
36
|
}
|
|
24
|
-
AppConfig._WEB_COMPONENT_TAG_NAME = 'canvas-editor-engine';
|
|
25
|
-
AppConfig._CANVAS_SIZE = {
|
|
26
|
-
width: 300,
|
|
27
|
-
height: 150,
|
|
28
|
-
};
|
|
29
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';
|