canvas-editor-engine 1.0.15 → 1.0.17

package/dist/components/excretions.component.js

@@ -185,7 +185,7 @@ class ExcretionsComponent extends component_service_1.default {
 }
 ExcretionsComponent.template = ``;
 ExcretionsComponent.templateExcretion = `
-    <button type="button" class="crop-button">
+    <button type="button" class="crop-button crop-button--view">
       <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>
   `;
@@ -205,13 +205,22 @@ ExcretionsComponent.css = `
     }
 
     .crop-button {
+      display: none;
+      justify-content: center;
+      align-items: center;
       position: absolute;
-      padding: 3px;
-      right: -5px;
+      padding: 5px;
+      right: -35px;
       top: 0;
-      background: #23222270;
-      border: none;
+      background: #232222;
+      border: 1px solid #ffffff50;
       border-radius: 4px;
+      width: 30px;
+      height: 30px;
+    }
+
+    .crop-button--view {
+      display: flex;
     }
 
     @keyframes border-dance {

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

@@ -1,4 +1,10 @@
 export default class CropService {
     static crop(): void;
-    private static get options();
+    static viewCropButton(): void;
+    static get options(): {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
 }

package/dist/services/crop.service.js

@@ -4,8 +4,15 @@ const excretions_component_1 = require("../components/excretions.component");
 class CropService {
     static crop() {
         excretions_component_1.default.additionStyle = 'crop';
+        CropService.viewCropButton();
         console.log(CropService.options);
     }
+    static viewCropButton() {
+        const cropButtons = excretions_component_1.default.excretionWrap.querySelectorAll('.crop-button');
+        const lastCropButtonIndex = cropButtons.length - 1;
+        const cropButton = cropButtons[lastCropButtonIndex];
+        cropButton.classList.add('crop-button--view');
+    }
     static get options() {
         const excretionLastIndex = excretions_component_1.default.excretionsCoords.length - 1;
         const coords = excretions_component_1.default.excretionsCoords[excretionLastIndex];

package/package.json

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