canvas-editor-engine 1.0.14 → 1.0.16

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

@@ -2,6 +2,7 @@ import ComponentService from "../services/component.service";
 import type { IExcretionsCoords, TExcretionStyle, TExcretionToolState } from "../types/excretion";
 export default class ExcretionsComponent extends ComponentService {
     private static template;
+    private static templateExcretion;
     private static css;
     static excretionWrap: HTMLElement;
     private static _excretions;

package/dist/components/excretions.component.js

@@ -109,7 +109,7 @@ class ExcretionsComponent extends component_service_1.default {
                 const wrapOptions = {
                     className: 'excretion',
                 };
-                const excretionTemplate = ExcretionsComponent.getTemplate('', wrapOptions);
+                const excretionTemplate = ExcretionsComponent.getTemplate(ExcretionsComponent.templateExcretion, wrapOptions);
                 ExcretionsComponent.clearExcretionsCoords();
                 const tempStart = {
                     start: cursorPosition,
@@ -184,6 +184,11 @@ class ExcretionsComponent extends component_service_1.default {
     }
 }
 ExcretionsComponent.template = ``;
+ExcretionsComponent.templateExcretion = `
+    <button type="button" class="crop-button">
+      <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>
+    </button>
+  `;
 ExcretionsComponent.css = `
     .excretion {
       display: flex;
@@ -199,6 +204,21 @@ ExcretionsComponent.css = `
       box-shadow: 0px 0px 0px calc(100vw + 100vh) #50505070;
     }
 
+    .crop-button {
+      position: absolute;
+      padding: 3px;
+      right: -35px;
+      top: 0;
+      background: #232222;
+      border: none;
+      border-radius: 4px;
+      width: 30px;
+      height: 30px;
+      display: flex;
+      justify-content: center;
+      alight-items: center;
+    }
+
     @keyframes border-dance {
       0% {
         background-position: left top, right bottom, left bottom, right top;

package/package.json

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