canvas-editor-engine 1.0.2 → 1.0.3

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

@@ -0,0 +1,5 @@
+import ComponentService from "../services/component.service";
+export default class CropComponent extends ComponentService {
+    private static template;
+    private static css;
+}

package/dist/components/crop.component.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const component_service_1 = require("../services/component.service");
+class CropComponent extends component_service_1.default {
+}
+CropComponent.template = '';
+CropComponent.css = '';
+exports.default = CropComponent;

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/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.3",
   "description": "CanvasEditorEngine library, use: [typescript] [canvas]",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",