canvas-editor-engine 2.3.19 → 2.3.21
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/index.mjs +239 -191
- package/dist/services/draw-accumulator.service.d.ts +4 -2
- package/dist/services/draw-layers.service.d.ts +2 -0
- package/dist/types/draw-service.d.ts +4 -0
- package/dist/utils/painter.d.ts +12 -0
- package/package.json +1 -1
- package/dist/services/draw-leayers.service.d.ts +0 -17
- package/dist/services/draw-leayers.service.js +0 -72
package/dist/index.mjs
CHANGED
@@ -2143,194 +2143,6 @@ var TempCanvas = function() {
|
|
2143
2143
|
return TempCanvas;
|
2144
2144
|
}();
|
2145
2145
|
|
2146
|
-
var DrawAccumulator = function() {
|
2147
|
-
function DrawAccumulator(appConfig, appStoreRepository, eventService, drawLayersService) {
|
2148
|
-
this.appConfig = appConfig;
|
2149
|
-
this.appStoreRepository = appStoreRepository;
|
2150
|
-
this.eventService = eventService;
|
2151
|
-
this.drawLayersService = drawLayersService;
|
2152
|
-
this.painters = new Proxy([], {
|
2153
|
-
get: function(target, name) {
|
2154
|
-
return target[name];
|
2155
|
-
},
|
2156
|
-
set: function(target, name, value) {
|
2157
|
-
try {
|
2158
|
-
if (typeof (value === null || value === void 0 ? void 0 : value.object) !== "undefined") {
|
2159
|
-
target[name] = value.object;
|
2160
|
-
value.update();
|
2161
|
-
return true;
|
2162
|
-
} else {
|
2163
|
-
if (name != "length") {
|
2164
|
-
console.warn("Proxy set error: object denied");
|
2165
|
-
return false;
|
2166
|
-
} else {
|
2167
|
-
var MIN_LENGTH = -1;
|
2168
|
-
var MAX_LENGTH = __spreadArray([], Object.keys(target), true);
|
2169
|
-
if (value <= Math.max.apply(Math, __spreadArray([ MIN_LENGTH ], MAX_LENGTH, false)) + 1) {
|
2170
|
-
target.length = value;
|
2171
|
-
}
|
2172
|
-
}
|
2173
|
-
return true;
|
2174
|
-
}
|
2175
|
-
} catch (error) {
|
2176
|
-
console.error("Proxy set error:", error);
|
2177
|
-
return false;
|
2178
|
-
}
|
2179
|
-
}
|
2180
|
-
});
|
2181
|
-
}
|
2182
|
-
DrawAccumulator.prototype.add = function(layerId, drawType, options, initialSize) {
|
2183
|
-
return __awaiter(this, void 0, void 0, (function() {
|
2184
|
-
var id, painter;
|
2185
|
-
return __generator(this, (function(_a) {
|
2186
|
-
id = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
|
2187
|
-
painter = {
|
2188
|
-
drawService: new DrawService(this.appConfig, this.appStoreRepository, this.eventService),
|
2189
|
-
drawType,
|
2190
|
-
id
|
2191
|
-
};
|
2192
|
-
painter.drawService.bindOptions(drawType, options);
|
2193
|
-
painter.drawService.tempCanvas.bindOptions(initialSize);
|
2194
|
-
this.painters.push({
|
2195
|
-
object: painter,
|
2196
|
-
update: this.update.bind(this)
|
2197
|
-
});
|
2198
|
-
this.drawLayersService.addToLayer(layerId, painter);
|
2199
|
-
this.invokePainter(drawType, painter.drawService);
|
2200
|
-
return [ 2 ];
|
2201
|
-
}));
|
2202
|
-
}));
|
2203
|
-
};
|
2204
|
-
DrawAccumulator.prototype.removePainter = function(id) {
|
2205
|
-
return __awaiter(this, void 0, void 0, (function() {
|
2206
|
-
var painter;
|
2207
|
-
return __generator(this, (function(_a) {
|
2208
|
-
painter = this.painters.find((function(painter) {
|
2209
|
-
return painter.id === id;
|
2210
|
-
}));
|
2211
|
-
if (!!painter) {
|
2212
|
-
this.painters = this.painters.filter((function(painter) {
|
2213
|
-
return painter.id !== id;
|
2214
|
-
}));
|
2215
|
-
}
|
2216
|
-
this.drawLayersService.removePainter(id);
|
2217
|
-
return [ 2 ];
|
2218
|
-
}));
|
2219
|
-
}));
|
2220
|
-
};
|
2221
|
-
DrawAccumulator.prototype.smoothFilter = function(painterId, smoothFilterOptions) {
|
2222
|
-
return __awaiter(this, void 0, void 0, (function() {
|
2223
|
-
var useStore, options, filterOptions, painter;
|
2224
|
-
var _this = this;
|
2225
|
-
return __generator(this, (function(_a) {
|
2226
|
-
useStore = smoothFilterOptions.useStore, options = smoothFilterOptions.options,
|
2227
|
-
filterOptions = smoothFilterOptions.filterOptions;
|
2228
|
-
painter = this.painters.find((function(painter) {
|
2229
|
-
return painter.id === painterId;
|
2230
|
-
}));
|
2231
|
-
if (!painter) return [ 2 ];
|
2232
|
-
painter.drawService.drawSmoothImage(useStore, options, filterOptions).then((function() {
|
2233
|
-
_this.update();
|
2234
|
-
}));
|
2235
|
-
return [ 2 ];
|
2236
|
-
}));
|
2237
|
-
}));
|
2238
|
-
};
|
2239
|
-
DrawAccumulator.prototype.update = function() {
|
2240
|
-
var _this = this;
|
2241
|
-
setTimeout((function() {
|
2242
|
-
_this.clearCanvas();
|
2243
|
-
_this.invokePaintersOnLayers();
|
2244
|
-
}), 1e3);
|
2245
|
-
};
|
2246
|
-
Object.defineProperty(DrawAccumulator.prototype, "gradient", {
|
2247
|
-
get: function() {
|
2248
|
-
var _this = this;
|
2249
|
-
var gradient = [];
|
2250
|
-
this.painters.forEach((function(painter) {
|
2251
|
-
var layer = _this.drawLayersService.layerList.find((function(layer) {
|
2252
|
-
return layer.painters.includes(painter);
|
2253
|
-
}));
|
2254
|
-
if (layer) {
|
2255
|
-
gradient.push(layer.order);
|
2256
|
-
}
|
2257
|
-
}));
|
2258
|
-
return gradient.sort((function(a, b) {
|
2259
|
-
return a - b;
|
2260
|
-
}));
|
2261
|
-
},
|
2262
|
-
enumerable: false,
|
2263
|
-
configurable: true
|
2264
|
-
});
|
2265
|
-
DrawAccumulator.prototype.clearCanvas = function() {
|
2266
|
-
var ctx = this.appConfig.canvas.getContext("2d");
|
2267
|
-
ctx.clearRect(0, 0, this.appConfig.CANVAS_SIZE.width, this.appConfig.CANVAS_SIZE.height);
|
2268
|
-
ctx.save();
|
2269
|
-
};
|
2270
|
-
DrawAccumulator.prototype.invokePaintersOnLayers = function() {
|
2271
|
-
var _this = this;
|
2272
|
-
var stash = [];
|
2273
|
-
this.gradient.forEach((function(order) {
|
2274
|
-
_this.painters.forEach((function(painter) {
|
2275
|
-
var layer = _this.drawLayersService.layerList.find((function(layer) {
|
2276
|
-
return layer.painters.includes(painter);
|
2277
|
-
}));
|
2278
|
-
if (!layer) return console.warn("[invoke] Layer not found");
|
2279
|
-
if (!stash.includes(painter) && layer.order === order) {
|
2280
|
-
_this.invokePainterWithTempCtx(painter.drawType, painter.drawService);
|
2281
|
-
stash.push(painter);
|
2282
|
-
}
|
2283
|
-
}));
|
2284
|
-
}));
|
2285
|
-
};
|
2286
|
-
DrawAccumulator.prototype.invokePainter = function(drawType, painter) {
|
2287
|
-
return __awaiter(this, void 0, void 0, (function() {
|
2288
|
-
return __generator(this, (function(_a) {
|
2289
|
-
switch (_a.label) {
|
2290
|
-
case 0:
|
2291
|
-
if (!(drawType === "image")) return [ 3, 2 ];
|
2292
|
-
return [ 4, painter.drawImage() ];
|
2293
|
-
|
2294
|
-
case 1:
|
2295
|
-
_a.sent();
|
2296
|
-
return [ 3, 4 ];
|
2297
|
-
|
2298
|
-
case 2:
|
2299
|
-
if (!(drawType === "project")) return [ 3, 4 ];
|
2300
|
-
return [ 4, painter.drawProject() ];
|
2301
|
-
|
2302
|
-
case 3:
|
2303
|
-
_a.sent();
|
2304
|
-
_a.label = 4;
|
2305
|
-
|
2306
|
-
case 4:
|
2307
|
-
return [ 2 ];
|
2308
|
-
}
|
2309
|
-
}));
|
2310
|
-
}));
|
2311
|
-
};
|
2312
|
-
DrawAccumulator.prototype.invokePainterWithTempCtx = function(drawType, painter) {
|
2313
|
-
return __awaiter(this, void 0, void 0, (function() {
|
2314
|
-
var imageData, ctx, x, y;
|
2315
|
-
return __generator(this, (function(_a) {
|
2316
|
-
imageData = painter.tempCanvas.getImageData();
|
2317
|
-
ctx = this.appConfig.canvas.getContext("2d");
|
2318
|
-
if (drawType === "image") {
|
2319
|
-
x = painter.options.image.drawImageArgs.position.x;
|
2320
|
-
y = painter.options.image.drawImageArgs.position.y;
|
2321
|
-
ctx.putImageData(imageData, x, y);
|
2322
|
-
ctx.save();
|
2323
|
-
} else if (drawType === "project") {
|
2324
|
-
ctx.putImageData(imageData, 0, 0);
|
2325
|
-
ctx.save();
|
2326
|
-
}
|
2327
|
-
return [ 2 ];
|
2328
|
-
}));
|
2329
|
-
}));
|
2330
|
-
};
|
2331
|
-
return DrawAccumulator;
|
2332
|
-
}();
|
2333
|
-
|
2334
2146
|
var DrawService = function() {
|
2335
2147
|
function DrawService(appConfig, appStoreRepository, eventService) {
|
2336
2148
|
this.appConfig = appConfig;
|
@@ -2655,9 +2467,245 @@ var DrawLayersService = function() {
|
|
2655
2467
|
var layer = this.layerList[layerIndex];
|
2656
2468
|
this.appStoreRepository.store.drawLayersState.reduce("UPDATE_LAYER", layer);
|
2657
2469
|
};
|
2470
|
+
DrawLayersService.prototype.updatePainterData = function(painter) {
|
2471
|
+
var layerIndex = this.layerList.findIndex((function(layer) {
|
2472
|
+
return layer.painters.find((function(layerPainter) {
|
2473
|
+
return layerPainter.id === painter.id;
|
2474
|
+
}));
|
2475
|
+
}));
|
2476
|
+
if (layerIndex === -1) return;
|
2477
|
+
var painterIndex = this.layerList[layerIndex].painters.findIndex((function(layerPainter) {
|
2478
|
+
return layerPainter.id === painter.id;
|
2479
|
+
}));
|
2480
|
+
this.layerList[layerIndex].painters[painterIndex] = painter;
|
2481
|
+
var layer = this.layerList[layerIndex];
|
2482
|
+
this.appStoreRepository.store.drawLayersState.reduce("UPDATE_LAYER", layer);
|
2483
|
+
};
|
2658
2484
|
return DrawLayersService;
|
2659
2485
|
}();
|
2660
2486
|
|
2487
|
+
var Painter = function() {
|
2488
|
+
function Painter(drawLayersService, createModel) {
|
2489
|
+
this.drawLayersService = drawLayersService;
|
2490
|
+
this.drawService = createModel.drawService;
|
2491
|
+
this.drawType = createModel.drawType;
|
2492
|
+
this.id = createModel.id;
|
2493
|
+
this.name = createModel.name;
|
2494
|
+
}
|
2495
|
+
Painter.prototype.putPainter = function(painter) {
|
2496
|
+
var isUpdated = false;
|
2497
|
+
if (painter.name) {
|
2498
|
+
this.name = painter.name;
|
2499
|
+
isUpdated = true;
|
2500
|
+
}
|
2501
|
+
if (isUpdated) {
|
2502
|
+
this.drawLayersService.updatePainterData(this);
|
2503
|
+
}
|
2504
|
+
};
|
2505
|
+
return Painter;
|
2506
|
+
}();
|
2507
|
+
|
2508
|
+
var DrawAccumulatorService = function() {
|
2509
|
+
function DrawAccumulatorService(appConfig, appStoreRepository, eventService, drawLayersService) {
|
2510
|
+
this.appConfig = appConfig;
|
2511
|
+
this.appStoreRepository = appStoreRepository;
|
2512
|
+
this.eventService = eventService;
|
2513
|
+
this.drawLayersService = drawLayersService;
|
2514
|
+
this.painters = new Proxy([], {
|
2515
|
+
get: function(target, name) {
|
2516
|
+
return target[name];
|
2517
|
+
},
|
2518
|
+
set: function(target, name, value) {
|
2519
|
+
try {
|
2520
|
+
if (typeof (value === null || value === void 0 ? void 0 : value.object) !== "undefined") {
|
2521
|
+
target[name] = value.object;
|
2522
|
+
value.update();
|
2523
|
+
return true;
|
2524
|
+
} else {
|
2525
|
+
if (name != "length") {
|
2526
|
+
console.warn("Proxy set error: object denied");
|
2527
|
+
return false;
|
2528
|
+
} else {
|
2529
|
+
var MIN_LENGTH = -1;
|
2530
|
+
var MAX_LENGTH = __spreadArray([], Object.keys(target), true);
|
2531
|
+
if (value <= Math.max.apply(Math, __spreadArray([ MIN_LENGTH ], MAX_LENGTH, false)) + 1) {
|
2532
|
+
target.length = value;
|
2533
|
+
}
|
2534
|
+
}
|
2535
|
+
return true;
|
2536
|
+
}
|
2537
|
+
} catch (error) {
|
2538
|
+
console.error("Proxy set error:", error);
|
2539
|
+
return false;
|
2540
|
+
}
|
2541
|
+
}
|
2542
|
+
});
|
2543
|
+
}
|
2544
|
+
DrawAccumulatorService.prototype.add = function(layerId, drawType, options, initialSize) {
|
2545
|
+
return __awaiter(this, void 0, void 0, (function() {
|
2546
|
+
var id, painter;
|
2547
|
+
return __generator(this, (function(_a) {
|
2548
|
+
id = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
|
2549
|
+
painter = new Painter(this.drawLayersService, {
|
2550
|
+
drawService: new DrawService(this.appConfig, this.appStoreRepository, this.eventService),
|
2551
|
+
name: "Painter ".concat(id),
|
2552
|
+
drawType,
|
2553
|
+
id
|
2554
|
+
});
|
2555
|
+
painter.drawService.bindOptions(drawType, options);
|
2556
|
+
painter.drawService.tempCanvas.bindOptions(initialSize);
|
2557
|
+
this.painters.push({
|
2558
|
+
object: painter,
|
2559
|
+
update: this.update.bind(this)
|
2560
|
+
});
|
2561
|
+
this.drawLayersService.addToLayer(layerId, painter);
|
2562
|
+
this.invokePainter(drawType, painter.drawService);
|
2563
|
+
return [ 2 ];
|
2564
|
+
}));
|
2565
|
+
}));
|
2566
|
+
};
|
2567
|
+
DrawAccumulatorService.prototype.removePainter = function(painterId) {
|
2568
|
+
return __awaiter(this, void 0, void 0, (function() {
|
2569
|
+
var painter;
|
2570
|
+
return __generator(this, (function(_a) {
|
2571
|
+
painter = this.painters.find((function(painter) {
|
2572
|
+
return painter.id === painterId;
|
2573
|
+
}));
|
2574
|
+
if (!!painter) {
|
2575
|
+
this.painters = this.painters.filter((function(painter) {
|
2576
|
+
return painter.id !== painterId;
|
2577
|
+
}));
|
2578
|
+
}
|
2579
|
+
this.drawLayersService.removePainter(painterId);
|
2580
|
+
return [ 2 ];
|
2581
|
+
}));
|
2582
|
+
}));
|
2583
|
+
};
|
2584
|
+
DrawAccumulatorService.prototype.renamePainter = function(painterId, name) {
|
2585
|
+
var painter = this.painters.find((function(painter) {
|
2586
|
+
return painter.id === painterId;
|
2587
|
+
}));
|
2588
|
+
if (painter) {
|
2589
|
+
painter.putPainter({
|
2590
|
+
name
|
2591
|
+
});
|
2592
|
+
} else {
|
2593
|
+
console.error("Painter not found");
|
2594
|
+
}
|
2595
|
+
};
|
2596
|
+
DrawAccumulatorService.prototype.smoothFilter = function(painterId, smoothFilterOptions) {
|
2597
|
+
return __awaiter(this, void 0, void 0, (function() {
|
2598
|
+
var useStore, options, filterOptions, painter;
|
2599
|
+
var _this = this;
|
2600
|
+
return __generator(this, (function(_a) {
|
2601
|
+
useStore = smoothFilterOptions.useStore, options = smoothFilterOptions.options,
|
2602
|
+
filterOptions = smoothFilterOptions.filterOptions;
|
2603
|
+
painter = this.painters.find((function(painter) {
|
2604
|
+
return painter.id === painterId;
|
2605
|
+
}));
|
2606
|
+
if (!painter) return [ 2 ];
|
2607
|
+
painter.drawService.drawSmoothImage(useStore, options, filterOptions).then((function() {
|
2608
|
+
_this.update();
|
2609
|
+
}));
|
2610
|
+
return [ 2 ];
|
2611
|
+
}));
|
2612
|
+
}));
|
2613
|
+
};
|
2614
|
+
DrawAccumulatorService.prototype.update = function() {
|
2615
|
+
var _this = this;
|
2616
|
+
setTimeout((function() {
|
2617
|
+
_this.clearCanvas();
|
2618
|
+
_this.invokePaintersOnLayers();
|
2619
|
+
}), 1e3);
|
2620
|
+
};
|
2621
|
+
Object.defineProperty(DrawAccumulatorService.prototype, "gradient", {
|
2622
|
+
get: function() {
|
2623
|
+
var _this = this;
|
2624
|
+
var gradient = [];
|
2625
|
+
this.painters.forEach((function(painter) {
|
2626
|
+
var layer = _this.drawLayersService.layerList.find((function(layer) {
|
2627
|
+
return layer.painters.includes(painter);
|
2628
|
+
}));
|
2629
|
+
if (layer) {
|
2630
|
+
gradient.push(layer.order);
|
2631
|
+
}
|
2632
|
+
}));
|
2633
|
+
return gradient.sort((function(a, b) {
|
2634
|
+
return a - b;
|
2635
|
+
}));
|
2636
|
+
},
|
2637
|
+
enumerable: false,
|
2638
|
+
configurable: true
|
2639
|
+
});
|
2640
|
+
DrawAccumulatorService.prototype.clearCanvas = function() {
|
2641
|
+
var ctx = this.appConfig.canvas.getContext("2d");
|
2642
|
+
ctx.clearRect(0, 0, this.appConfig.CANVAS_SIZE.width, this.appConfig.CANVAS_SIZE.height);
|
2643
|
+
ctx.save();
|
2644
|
+
};
|
2645
|
+
DrawAccumulatorService.prototype.invokePaintersOnLayers = function() {
|
2646
|
+
var _this = this;
|
2647
|
+
var stash = [];
|
2648
|
+
this.gradient.forEach((function(order) {
|
2649
|
+
_this.painters.forEach((function(painter) {
|
2650
|
+
var layer = _this.drawLayersService.layerList.find((function(layer) {
|
2651
|
+
return layer.painters.includes(painter);
|
2652
|
+
}));
|
2653
|
+
if (!layer) return console.warn("[invoke] Layer not found");
|
2654
|
+
if (!stash.includes(painter) && layer.order === order) {
|
2655
|
+
_this.invokePainterWithTempCtx(painter.drawType, painter.drawService);
|
2656
|
+
stash.push(painter);
|
2657
|
+
}
|
2658
|
+
}));
|
2659
|
+
}));
|
2660
|
+
};
|
2661
|
+
DrawAccumulatorService.prototype.invokePainter = function(drawType, painter) {
|
2662
|
+
return __awaiter(this, void 0, void 0, (function() {
|
2663
|
+
return __generator(this, (function(_a) {
|
2664
|
+
switch (_a.label) {
|
2665
|
+
case 0:
|
2666
|
+
if (!(drawType === "image")) return [ 3, 2 ];
|
2667
|
+
return [ 4, painter.drawImage() ];
|
2668
|
+
|
2669
|
+
case 1:
|
2670
|
+
_a.sent();
|
2671
|
+
return [ 3, 4 ];
|
2672
|
+
|
2673
|
+
case 2:
|
2674
|
+
if (!(drawType === "project")) return [ 3, 4 ];
|
2675
|
+
return [ 4, painter.drawProject() ];
|
2676
|
+
|
2677
|
+
case 3:
|
2678
|
+
_a.sent();
|
2679
|
+
_a.label = 4;
|
2680
|
+
|
2681
|
+
case 4:
|
2682
|
+
return [ 2 ];
|
2683
|
+
}
|
2684
|
+
}));
|
2685
|
+
}));
|
2686
|
+
};
|
2687
|
+
DrawAccumulatorService.prototype.invokePainterWithTempCtx = function(drawType, painter) {
|
2688
|
+
return __awaiter(this, void 0, void 0, (function() {
|
2689
|
+
var imageData, ctx, x, y;
|
2690
|
+
return __generator(this, (function(_a) {
|
2691
|
+
imageData = painter.tempCanvas.getImageData();
|
2692
|
+
ctx = this.appConfig.canvas.getContext("2d");
|
2693
|
+
if (drawType === "image") {
|
2694
|
+
x = painter.options.image.drawImageArgs.position.x;
|
2695
|
+
y = painter.options.image.drawImageArgs.position.y;
|
2696
|
+
ctx.putImageData(imageData, x, y);
|
2697
|
+
ctx.save();
|
2698
|
+
} else if (drawType === "project") {
|
2699
|
+
ctx.putImageData(imageData, 0, 0);
|
2700
|
+
ctx.save();
|
2701
|
+
}
|
2702
|
+
return [ 2 ];
|
2703
|
+
}));
|
2704
|
+
}));
|
2705
|
+
};
|
2706
|
+
return DrawAccumulatorService;
|
2707
|
+
}();
|
2708
|
+
|
2661
2709
|
reflect();
|
2662
2710
|
|
2663
2711
|
var WebComponentWrapper = function() {
|
@@ -2764,7 +2812,7 @@ var WebComponent = function(_super) {
|
|
2764
2812
|
this.pullProjectService = new PullProjectService(this.throughHistoryService, this.appStoreRepository);
|
2765
2813
|
this.drawService = new DrawService(this.appConfig, this.appStoreRepository, this.eventService);
|
2766
2814
|
this.drawLayersService = new DrawLayersService(this.appStoreRepository);
|
2767
|
-
this.
|
2815
|
+
this.drawAccumulatorService = new DrawAccumulatorService(this.appConfig, this.appStoreRepository, this.eventService, this.drawLayersService);
|
2768
2816
|
this.downloadService = new DownloadService(this.canvasComponent);
|
2769
2817
|
var _a = this.canvasComponent.getComponent(), canvasTemplate = _a.canvasTemplate, canvasStyle = _a.canvasStyle;
|
2770
2818
|
this.canvasElement = this.webComponentWrapper.editorWrap.add(canvasTemplate, canvasStyle);
|
@@ -2796,7 +2844,7 @@ var WebComponent = function(_super) {
|
|
2796
2844
|
var projectProcessor = this.projectsService.on("File");
|
2797
2845
|
var serializer = projectProcessor.getSerializerInstance(jsonProjects);
|
2798
2846
|
var projects = serializer.getProjects();
|
2799
|
-
this.
|
2847
|
+
this.drawAccumulatorService.add(layerId, "project", projects[0], projects[0].state.current.size);
|
2800
2848
|
this.throughHistoryService.recovery(projects[0]);
|
2801
2849
|
};
|
2802
2850
|
return WebComponent;
|
@@ -2835,4 +2883,4 @@ var VueCanvasEditorEngine = function(_super) {
|
|
2835
2883
|
return VueCanvasEditorEngine;
|
2836
2884
|
}(CanvasEditorEngine);
|
2837
2885
|
|
2838
|
-
export { AppConfig, AppStore, AppStoreRepository, CanvasComponent, CropService, DownloadService, DrawService, EventService, ExcretionsComponent as ExcretionComponent, LoadingComponent, LoggerService, PipetteComponent, ProjectsService, PullProjectService, SlotComponent, StaticCanvasEditorEngine, ThroughHistoryService, ToolLayerService, ToolService, VueCanvasEditorEngine };
|
2886
|
+
export { AppConfig, AppStore, AppStoreRepository, CanvasComponent, CropService, DownloadService, DrawAccumulatorService, DrawService, EventService, ExcretionsComponent as ExcretionComponent, LoadingComponent, LoggerService, PipetteComponent, ProjectsService, PullProjectService, SlotComponent, StaticCanvasEditorEngine, ThroughHistoryService, ToolLayerService, ToolService, VueCanvasEditorEngine };
|
@@ -3,6 +3,7 @@ import AppStoreRepository from "../store/storeRepository";
|
|
3
3
|
import { ILayer } from "../types/draw-layers";
|
4
4
|
import { IPainter, ISmoothFilterOptions, TDrawType } from "../types/draw-service";
|
5
5
|
import { ITempCanvasOptions } from "../types/temp-canvas";
|
6
|
+
import Painter from "../utils/painter";
|
6
7
|
import DrawLayersService from "./draw-layers.service";
|
7
8
|
import DrawService from "./draw.service";
|
8
9
|
import EventService from "./event.service";
|
@@ -11,10 +12,11 @@ export default class DrawAccumulatorService {
|
|
11
12
|
private appStoreRepository;
|
12
13
|
private eventService;
|
13
14
|
private drawLayersService;
|
14
|
-
painters:
|
15
|
+
painters: Painter[];
|
15
16
|
constructor(appConfig: AppConfig, appStoreRepository: AppStoreRepository, eventService: EventService, drawLayersService: DrawLayersService);
|
16
17
|
add<DrawType extends TDrawType>(layerId: ILayer['id'], drawType: DrawType, options: DrawService['options'][DrawType], initialSize: ITempCanvasOptions): Promise<void>;
|
17
|
-
removePainter(
|
18
|
+
removePainter(painterId: string): Promise<void>;
|
19
|
+
renamePainter(painterId: IPainter['id'], name: string): void;
|
18
20
|
smoothFilter(painterId: IPainter['id'], smoothFilterOptions: ISmoothFilterOptions): Promise<void>;
|
19
21
|
private update;
|
20
22
|
private get gradient();
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import AppStoreRepository from "../store/storeRepository";
|
2
2
|
import { ILayer, ILayerUpdate } from "../types/draw-layers";
|
3
3
|
import { IPainter } from "../types/draw-service";
|
4
|
+
import Painter from "../utils/painter";
|
4
5
|
export default class DrawLayersService {
|
5
6
|
private appStoreRepository;
|
6
7
|
layerList: ILayer[];
|
@@ -14,4 +15,5 @@ export default class DrawLayersService {
|
|
14
15
|
addToLayer(id: ILayer['id'], painter: IPainter): void;
|
15
16
|
updateLayer(id: ILayer['id'], updateData?: ILayerUpdate): void;
|
16
17
|
removePainter(id: IPainter['id']): void;
|
18
|
+
updatePainterData(painter: Painter): void;
|
17
19
|
}
|
@@ -0,0 +1,12 @@
|
|
1
|
+
import DrawLayersService from "../services/draw-layers.service";
|
2
|
+
import DrawService from "../services/draw.service";
|
3
|
+
import { IPainter, IPutPainter, TDrawType } from "../types/draw-service";
|
4
|
+
export default class Painter {
|
5
|
+
private drawLayersService;
|
6
|
+
drawService: DrawService;
|
7
|
+
drawType: TDrawType;
|
8
|
+
id: string;
|
9
|
+
name: string;
|
10
|
+
constructor(drawLayersService: DrawLayersService, createModel: IPainter);
|
11
|
+
putPainter(painter: IPutPainter): void;
|
12
|
+
}
|
package/package.json
CHANGED
@@ -1,17 +0,0 @@
|
|
1
|
-
import AppStoreRepository from "../store/storeRepository";
|
2
|
-
import { ILayer, ILayerUpdate } from "../types/draw-layers";
|
3
|
-
import { IPainter } from "../types/draw-service";
|
4
|
-
export default class DrawLayersService {
|
5
|
-
private appStoreRepository;
|
6
|
-
layerList: ILayer[];
|
7
|
-
constructor(appStoreRepository: AppStoreRepository);
|
8
|
-
addLayer(layerOptions?: {
|
9
|
-
layerName?: string;
|
10
|
-
painter?: IPainter;
|
11
|
-
}): void;
|
12
|
-
getLayerByOrder(order: number): ILayer;
|
13
|
-
getLayerById(layerId: ILayer['id']): ILayer;
|
14
|
-
addToLayer(id: ILayer['id'], painter: IPainter): void;
|
15
|
-
updateLayer(id: ILayer['id'], updateData?: ILayerUpdate): void;
|
16
|
-
removePainter(id: IPainter['id']): void;
|
17
|
-
}
|
@@ -1,72 +0,0 @@
|
|
1
|
-
var DrawLayersService = /** @class */ (function () {
|
2
|
-
function DrawLayersService(appStoreRepository) {
|
3
|
-
this.appStoreRepository = appStoreRepository;
|
4
|
-
this.layerList = [];
|
5
|
-
this.addLayer({ layerName: 'Base Layer' });
|
6
|
-
}
|
7
|
-
DrawLayersService.prototype.addLayer = function (layerOptions) {
|
8
|
-
var _a;
|
9
|
-
var layerName = layerOptions === null || layerOptions === void 0 ? void 0 : layerOptions.layerName;
|
10
|
-
var painter = layerOptions === null || layerOptions === void 0 ? void 0 : layerOptions.painter;
|
11
|
-
var id = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
|
12
|
-
var name = (function () {
|
13
|
-
if (layerName)
|
14
|
-
return layerName;
|
15
|
-
if (painter) {
|
16
|
-
return "".concat(painter.drawType, "-").concat(painter.id);
|
17
|
-
}
|
18
|
-
else {
|
19
|
-
return 'New Layer';
|
20
|
-
}
|
21
|
-
})();
|
22
|
-
var painters = (painter) ? [painter] : [];
|
23
|
-
var sortedLayers = (_a = this.layerList) === null || _a === void 0 ? void 0 : _a.sort(function (a, b) { return a.order - b.order; });
|
24
|
-
var order = (sortedLayers === null || sortedLayers === void 0 ? void 0 : sortedLayers.length) ? sortedLayers.at(-1).order + 1 : 1;
|
25
|
-
var layer = {
|
26
|
-
id: id,
|
27
|
-
painters: painters,
|
28
|
-
order: order,
|
29
|
-
name: name,
|
30
|
-
};
|
31
|
-
this.layerList.push(layer);
|
32
|
-
this.appStoreRepository.store.drawLayersState.reduce('ADD_LAYER', layer);
|
33
|
-
};
|
34
|
-
DrawLayersService.prototype.getLayerByOrder = function (order) {
|
35
|
-
return this.layerList.find(function (layer) { return layer.order === order; });
|
36
|
-
};
|
37
|
-
DrawLayersService.prototype.getLayerById = function (layerId) {
|
38
|
-
return this.layerList.find(function (layer) { return layer.id === layerId; });
|
39
|
-
};
|
40
|
-
DrawLayersService.prototype.addToLayer = function (id, painter) {
|
41
|
-
var layerIndex = this.layerList.findIndex(function (layer) { return layer.id === id; });
|
42
|
-
if (layerIndex === -1)
|
43
|
-
return;
|
44
|
-
var layer = this.layerList[layerIndex];
|
45
|
-
layer.painters.push(painter);
|
46
|
-
this.appStoreRepository.store.drawLayersState.reduce('UPDATE_LAYER', layer);
|
47
|
-
};
|
48
|
-
DrawLayersService.prototype.updateLayer = function (id, updateData) {
|
49
|
-
var layerIndex = this.layerList.findIndex(function (layer) { return layer.id === id; });
|
50
|
-
var fields = Object.keys(updateData);
|
51
|
-
if (!fields.length || layerIndex === -1)
|
52
|
-
return;
|
53
|
-
var layer = this.layerList[layerIndex];
|
54
|
-
fields.forEach(function (field) {
|
55
|
-
layer[field] = updateData[field];
|
56
|
-
});
|
57
|
-
this.layerList[layerIndex] = layer;
|
58
|
-
this.appStoreRepository.store.drawLayersState.reduce('UPDATE_LAYER', layer);
|
59
|
-
};
|
60
|
-
DrawLayersService.prototype.removePainter = function (id) {
|
61
|
-
var layerIndex = this.layerList.findIndex(function (layer) {
|
62
|
-
return layer.painters.find(function (painter) { return painter.id === id; });
|
63
|
-
});
|
64
|
-
if (layerIndex === -1)
|
65
|
-
return;
|
66
|
-
this.layerList[layerIndex].painters = this.layerList[layerIndex].painters.filter(function (painter) { return painter.id !== id; });
|
67
|
-
var layer = this.layerList[layerIndex];
|
68
|
-
this.appStoreRepository.store.drawLayersState.reduce('UPDATE_LAYER', layer);
|
69
|
-
};
|
70
|
-
return DrawLayersService;
|
71
|
-
}());
|
72
|
-
export default DrawLayersService;
|