canvas-editor-engine 1.0.46 → 1.0.48

package/dist/components/loading.component.d.ts

@@ -0,0 +1,14 @@
+import ComponentService from "../services/component.service";
+export default class LoadingComponent extends ComponentService {
+    private static template;
+    private static css;
+    static loading: HTMLElement;
+    static getComponent(): {
+        loadingTemplate: HTMLElement;
+        loadingStyle: HTMLStyleElement;
+    };
+    static hide(): void;
+    static view(): void;
+    private static subscribeLoadingStart;
+    private static subscribeLoadingEnd;
+}

package/dist/components/loading.component.js

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const config_1 = require("../config");
+const component_service_1 = require("../services/component.service");
+const event_service_1 = require("../services/event.service");
+const logger_service_1 = require("../services/logger.service");
+class LoadingComponent extends component_service_1.default {
+    static template = `
+    <span class="loader"></span>
+  `;
+    static css = `
+    .loading-wrapper {
+      display: none;
+      justify-content: center;
+      align-items: center;
+      position: absolute;
+      width: ${config_1.default.CANVAS_SIZE.width}px;
+      height: ${config_1.default.CANVAS_SIZE.height}px;
+    }
+
+    .loader {
+      width: 48px;
+      height: 48px;
+      border-radius: 50%;
+      position: relative;
+      animation: rotate 1s linear infinite
+    }
+    .loader::before , .loader::after {
+      content: "";
+      box-sizing: border-box;
+      position: absolute;
+      inset: 0px;
+      border-radius: 50%;
+      border: 5px solid #FFF;
+      animation: prixClipFix 2s linear infinite ;
+    }
+    .loader::after{
+      inset: 8px;
+      transform: rotate3d(90, 90, 0, 180deg );
+      border-color: #FF3D00;
+    }
+
+    @keyframes rotate {
+      0%   {transform: rotate(0deg)}
+      100%   {transform: rotate(360deg)}
+    }
+
+    @keyframes prixClipFix {
+        0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
+        50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
+        75%, 100%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
+    }
+  `;
+    static loading;
+    static {
+        logger_service_1.default.components.add({
+            info: {
+                name: 'loading',
+                description: 'loading component',
+            },
+            prototype: LoadingComponent,
+        });
+    }
+    static getComponent() {
+        const wrapOptions = {
+            className: 'loading-wrapper',
+        };
+        const loadingTemplate = LoadingComponent.getTemplate(LoadingComponent.template, wrapOptions);
+        const loadingStyle = LoadingComponent.getStyle(LoadingComponent.css);
+        LoadingComponent.loading = loadingTemplate;
+        LoadingComponent.subscribeLoadingStart();
+        LoadingComponent.subscribeLoadingEnd();
+        return { loadingTemplate, loadingStyle };
+    }
+    static hide() {
+        LoadingComponent.loading.style.display = 'none';
+    }
+    static view() {
+        LoadingComponent.loading.style.display = 'flex';
+    }
+    static subscribeLoadingStart() {
+        const controlEvent = {
+            name: 'loading-start',
+            action: () => LoadingComponent.view(),
+        };
+        event_service_1.default.subcribe(controlEvent);
+    }
+    static subscribeLoadingEnd() {
+        const controlEvent = {
+            name: 'loading-end',
+            action: () => LoadingComponent.hide(),
+        };
+        event_service_1.default.subcribe(controlEvent);
+    }
+}
+exports.default = LoadingComponent;

package/dist/index.d.ts

@@ -4,6 +4,7 @@ import CanvasComponent from "./components/canvas.component";
 import PipetteComponent from "./components/pipette.component";
 import ExcretionComponent from "./components/excretions.component";
 import SlotComponent from "./components/slot.component";
+import LoadingComponent from "./components/loading.component";
 import DrawService from "./services/draw.service";
 import ToolService from "./services/tool.service";
 import LoggerService from "./services/logger.service";
@@ -26,4 +27,4 @@ declare class VueCanvasEditorEngine extends CanvasEditorEngine {
     getContext2D(): CanvasRenderingContext2D;
     getCanvas(): HTMLCanvasElement;
 }
-export { AppConfig, PipetteComponent, CanvasComponent, ExcretionComponent, SlotComponent, ToolService, DrawService, LoggerService, CropService, DownloadService, ToolLayerService, StaticCanvasEditorEngine, VueCanvasEditorEngine, };
+export { AppConfig, PipetteComponent, CanvasComponent, ExcretionComponent, SlotComponent, LoadingComponent, ToolService, DrawService, LoggerService, CropService, DownloadService, ToolLayerService, StaticCanvasEditorEngine, VueCanvasEditorEngine, };

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VueCanvasEditorEngine = exports.StaticCanvasEditorEngine = exports.ToolLayerService = exports.DownloadService = exports.CropService = exports.LoggerService = exports.DrawService = exports.ToolService = exports.SlotComponent = exports.ExcretionComponent = exports.CanvasComponent = exports.PipetteComponent = exports.AppConfig = void 0;
+exports.VueCanvasEditorEngine = exports.StaticCanvasEditorEngine = exports.ToolLayerService = exports.DownloadService = exports.CropService = exports.LoggerService = exports.DrawService = exports.ToolService = exports.LoadingComponent = exports.SlotComponent = exports.ExcretionComponent = exports.CanvasComponent = exports.PipetteComponent = exports.AppConfig = void 0;
 const config_1 = require("./config");
 exports.AppConfig = config_1.default;
 const web_component_1 = require("./web-component");
@@ -12,6 +12,8 @@ const excretions_component_1 = require("./components/excretions.component");
 exports.ExcretionComponent = excretions_component_1.default;
 const slot_component_1 = require("./components/slot.component");
 exports.SlotComponent = slot_component_1.default;
+const loading_component_1 = require("./components/loading.component");
+exports.LoadingComponent = loading_component_1.default;
 const draw_service_1 = require("./services/draw.service");
 exports.DrawService = draw_service_1.default;
 const tool_service_1 = require("./services/tool.service");

package/dist/services/crop.service.js

@@ -11,7 +11,6 @@ class CropService {
     static crop(ctx) {
         if (!!excretions_component_1.default.excretionsCoords?.length === false)
             return;
-        console.log(CropService.options);
         const filter = new filter_1.Filter(ctx);
         const options = CropService.options;
         const imageData = filter.copy(options);

package/dist/services/draw.service.js

@@ -4,6 +4,7 @@ exports.SCImage = void 0;
 const config_1 = require("../config");
 const filters_1 = require("../filters");
 const store_1 = require("../store/store");
+const event_service_1 = require("./event.service");
 class DrawService {
     static scImage;
     static drawImage(ctx, src, options) {
@@ -12,6 +13,7 @@ class DrawService {
     }
     static drawSmoothImage(useStore, options, filterOptions) {
         const filterArgs = DrawService.getFilterArgs(useStore, options);
+        event_service_1.default.dispatch('loading-start');
         this.scImage.vague(filterArgs, filterOptions);
     }
     static getFilterArgs(useStore, options) {

package/dist/services/event.service.d.ts

@@ -1,24 +1,21 @@
 import { IGUID4 } from "../types/general";
 export declare abstract class ControlEvent {
     name: string;
-    action: (args?: any) => Event;
+    action: (args?: any) => any;
 }
 export declare class EventAtom implements ControlEvent {
     id: IGUID4;
     name: string;
-    action: (args?: any) => Event;
+    action: (args?: any) => any;
 }
-export declare abstract class AbstractEvent {
-    eventList: EventAtom[];
-    abstract subcribe(event: EventAtom): void;
-    abstract dispatch(name: ControlEvent['name'], eventArgs?: any): void;
+export declare abstract class AbstractEventService {
     abstract applyEvents(baseElement: HTMLDivElement): void;
 }
-export declare class EventService implements AbstractEvent {
+export default class EventService implements AbstractEventService {
     private baseElement;
-    eventList: EventAtom[];
+    static eventList: EventAtom[];
     constructor(baseElement: HTMLDivElement);
-    subcribe(controlEvent: ControlEvent): void;
-    dispatch(name: ControlEvent['name'], eventArgs?: any): void;
+    static subcribe(controlEvent: ControlEvent): void;
+    static dispatch(name: ControlEvent['name'], eventArgs?: any): void;
     applyEvents(): void;
 }

package/dist/services/event.service.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.EventService = exports.AbstractEvent = exports.EventAtom = exports.ControlEvent = void 0;
+exports.AbstractEventService = exports.EventAtom = exports.ControlEvent = void 0;
 const guid4_1 = require("../utils/guid4");
 class ControlEvent {
     name;
@@ -13,31 +13,30 @@ class EventAtom {
     action;
 }
 exports.EventAtom = EventAtom;
-class AbstractEvent {
-    eventList;
+class AbstractEventService {
 }
-exports.AbstractEvent = AbstractEvent;
+exports.AbstractEventService = AbstractEventService;
 class EventService {
     baseElement;
-    eventList;
+    static eventList;
     constructor(baseElement) {
         this.baseElement = baseElement;
     }
-    subcribe(controlEvent) {
+    static subcribe(controlEvent) {
         const eventAtom = {
             id: new guid4_1.Guid4().finite,
             ...controlEvent
         };
-        this.eventList.push(eventAtom);
+        EventService.eventList.push(eventAtom);
     }
-    dispatch(name, eventArgs) {
-        const eventAtom = this.eventList.find((event) => event.name === name);
+    static dispatch(name, eventArgs) {
+        const eventAtom = EventService.eventList.find((event) => event.name === name);
         eventAtom.action(eventArgs);
     }
     applyEvents() {
-        this.eventList.forEach((event) => {
+        EventService.eventList.forEach((event) => {
             this.baseElement.addEventListener(event.name, event.action);
         });
     }
 }
-exports.EventService = EventService;
+exports.default = EventService;

package/dist/web-component.js

@@ -3,8 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.WebComponentWrapper = void 0;
 const canvas_component_1 = require("./components/canvas.component");
 const excretions_component_1 = require("./components/excretions.component");
+const loading_component_1 = require("./components/loading.component");
 const pipette_component_1 = require("./components/pipette.component");
 const slot_component_1 = require("./components/slot.component");
+const event_service_1 = require("./services/event.service");
 class WebComponentWrapper {
     baseElement;
     editorWrapElement;
@@ -88,8 +90,12 @@ class WebComponent extends HTMLElement {
         webComponentWrapper.toolsWrap.add(slotTemplate, slotStyle);
         const { excretionsTemplate, excretionsStyle } = excretions_component_1.default.getComponent();
         webComponentWrapper.editorWrap.add(excretionsTemplate, excretionsStyle);
+        const { loadingTemplate, loadingStyle } = loading_component_1.default.getComponent();
+        webComponentWrapper.editorWrap.add(loadingTemplate, loadingStyle);
         shadowRoot.appendChild(webComponentWrapper.baseElement);
         canvas_component_1.default.simulateSubscriptions();
+        const eventService = new event_service_1.default(webComponentWrapper.baseElement);
+        eventService.applyEvents();
         this.addEventListener('initial', () => {
             this.dispatchEvent(new CustomEvent('get-editor-element', {
                 detail: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvas-editor-engine",
-  "version": "1.0.46",
+  "version": "1.0.48",
   "description": "CanvasEditorEngine library, use: [typescript] [canvas]",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",