canvas-editor-engine 1.0.2 → 1.0.4

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

@@ -1,5 +1,5 @@
 import ComponentService from "../services/component.service";
-import type { IExcretionsCoords, TExcretionToolState } from "../types/excretion";
+import type { IExcretionsCoords, TExcretionStyle, TExcretionToolState } from "../types/excretion";
 export default class ExcretionsComponent extends ComponentService {
     private static template;
     private static css;
@@ -10,6 +10,10 @@ export default class ExcretionsComponent extends ComponentService {
     private static _excretionToolState;
     private static _tempCoords;
     static excretionsCoords: IExcretionsCoords[];
+    private static _style;
+    static get style(): TExcretionStyle;
+    static set style(value: TExcretionStyle);
+    private static applyExcretionStyle;
     private static tool;
     static getComponent(): {
         excretionsTemplate: HTMLElement;

package/dist/components/excretions.component.js

@@ -5,6 +5,34 @@ const tool_service_1 = require("../services/tool.service");
 const canvas_component_1 = require("./canvas.component");
 const logger_service_1 = require("../services/logger.service");
 class ExcretionsComponent extends component_service_1.default {
+    static get style() {
+        return ExcretionsComponent._style;
+    }
+    static set style(value) {
+        ExcretionsComponent._style = value;
+        ExcretionsComponent.applyExcretionStyle();
+    }
+    static applyExcretionStyle() {
+        if (ExcretionsComponent._style === 'crop') {
+            ExcretionsComponent._excretions.forEach((excretion) => {
+                if (!!excretion) {
+                    if (!excretion.classList.contains('excretion_crop')) {
+                        excretion.classList.add("excretion_crop");
+                    }
+                }
+            });
+        }
+        else {
+            ExcretionsComponent._excretions.forEach((excretion) => {
+                if (!!excretion) {
+                    if (excretion.classList.contains('excretion_crop')) {
+                        excretion.classList.remove("excretion_crop");
+                    }
+                }
+            });
+        }
+    }
+    ;
     static getComponent() {
         const wrapOptions = {
             className: 'excretions-wrap',
@@ -17,6 +45,7 @@ class ExcretionsComponent extends component_service_1.default {
     }
     static set excretionState(state) {
         ExcretionsComponent._excretionState = state;
+        ExcretionsComponent.applyExcretionStyle();
         switch (state) {
             case 'abandoned':
                 canvas_component_1.default.cursorStyle = 'default';
@@ -97,6 +126,7 @@ class ExcretionsComponent extends component_service_1.default {
                 };
                 ExcretionsComponent._tempCoords.push(tempStart);
             }
+            ExcretionsComponent.applyExcretionStyle();
             ExcretionsComponent._excretionActivity = 'active';
         });
         canvas_component_1.default.subscribe('mousemove', (event, cursorPosition) => {
@@ -165,6 +195,10 @@ ExcretionsComponent.css = `
       animation: border-dance 1s infinite linear;
     }
 
+    .excretion_crop {
+      box-shadow: 0px 0px 0px 100% rgba(34, 60, 80, 0.2);
+    }
+
     @keyframes border-dance {
       0% {
         background-position: left top, right bottom, left bottom, right top;
@@ -180,6 +214,7 @@ ExcretionsComponent._excretionActivity = 'abandoned';
 ExcretionsComponent._excretionToolState = 'abandoned';
 ExcretionsComponent._tempCoords = [];
 ExcretionsComponent.excretionsCoords = [];
+ExcretionsComponent._style = 'default';
 ExcretionsComponent.tool = {
     id: 1,
     name: 'excretion',

package/dist/index.d.ts

@@ -7,6 +7,7 @@ import SlotComponent from "./components/slot.component";
 import DrawService from "./services/draw.service";
 import ToolService from "./services/tool.service";
 import LoggerService from "./services/logger.service";
+import CropService from "./services/crop.service";
 declare class CanvasEditorEngine {
     constructor(webComponentTagName?: string);
     getInitial(): {
@@ -23,4 +24,4 @@ declare class VueCanvasEditorEngine extends CanvasEditorEngine {
     getContext2D(): CanvasRenderingContext2D;
     getCanvas(): HTMLCanvasElement;
 }
-export { AppConfig, PipetteComponent, CanvasComponent, ExcretionComponent, SlotComponent, ToolService, DrawService, LoggerService, StaticCanvasEditorEngine, VueCanvasEditorEngine, };
+export { AppConfig, PipetteComponent, CanvasComponent, ExcretionComponent, SlotComponent, ToolService, DrawService, LoggerService, CropService, StaticCanvasEditorEngine, VueCanvasEditorEngine, };

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VueCanvasEditorEngine = exports.StaticCanvasEditorEngine = exports.LoggerService = exports.DrawService = exports.ToolService = exports.SlotComponent = exports.ExcretionComponent = exports.CanvasComponent = exports.PipetteComponent = exports.AppConfig = void 0;
+exports.VueCanvasEditorEngine = exports.StaticCanvasEditorEngine = exports.CropService = exports.LoggerService = exports.DrawService = exports.ToolService = 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");
@@ -18,6 +18,8 @@ const tool_service_1 = require("./services/tool.service");
 exports.ToolService = tool_service_1.default;
 const logger_service_1 = require("./services/logger.service");
 exports.LoggerService = logger_service_1.default;
+const crop_service_1 = require("./services/crop.service");
+exports.CropService = crop_service_1.default;
 class CanvasEditorEngine {
     constructor(webComponentTagName) {
         config_1.default.WEB_COMPONENT_TAG_NAME = webComponentTagName;

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

@@ -0,0 +1,3 @@
+export default class CropService {
+    static crop(): void;
+}

package/dist/services/crop.service.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const excretions_component_1 = require("../components/excretions.component");
+class CropService {
+    static crop() {
+        excretions_component_1.default.style = 'crop';
+        console.log('ExcretionComponent.excretionsCoords', excretions_component_1.default.excretionsCoords);
+    }
+}
+exports.default = CropService;

package/dist/types/excretion.d.ts

@@ -24,3 +24,4 @@ export type TExcretionTempCoords = (IExcretionTempStart | IExcretionTempEnd)[];
 export type TExcretionToolState = 'taken' | 'abandoned';
 export type TExcretionState = 'create' | 'add' | 'remove' | 'abandoned';
 export type TExcretionActivity = 'active' | 'end' | 'abandoned';
+export type TExcretionStyle = 'default' | 'crop';

package/package.json

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