@deckdeckgo/drag-resize-rotate - npm Package Compare versions

Comparing version 1.1.2 to 1.1.3

CHANGELOG.md

@@ -0,1 +1,7 @@
+# 1.1.3 (2020-07-19)
+
+### Fix
+
+- iOS :(
+
 # 1.1.2 (2020-07-19)
@@ -2,0 +8,0 @@

dist/cjs/deckgo-drr.cjs.entry.js

@@ -11,3 +11,3 @@ 'use strict';
 
-const deckdeckgoDrrCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;contain:size;width:var(--width);height:var(--height);-webkit-transform:rotate(var(--rotate, 0deg));transform:rotate(var(--rotate, 0deg));position:absolute;top:var(--top);left:var(--left);-webkit-user-select:var(--deckgo-drr-user-select, none);-moz-user-select:var(--deckgo-drr-user-select, none);-ms-user-select:var(--deckgo-drr-user-select, none);user-select:var(--deckgo-drr-user-select, none)}:host(.text){contain:layout}:host(.editing) ::slotted(*){pointer-events:all;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}:host(:not(.editing)) ::slotted(*){pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.selected.draggable:not(.drag)){cursor:move}:host(.selected){outline:var(--deckgo-drr-border, 1px solid #3880ff)}::slotted(*){width:100%;height:100%;-ms-touch-action:none;touch-action:none}div.anchor{position:absolute;width:var(--deckgo-drr-anchor-width, 16px);height:var(--deckgo-drr-anchor-height, 16px);padding:var(--deckgo-drr-anchor-padding-desktop, 16px)}div.anchor>div{width:100%;height:100%;border-radius:var(--deckgo-drr-anchor-border-radius, 50%);background:var(--deckgo-drr-anchor-background, #3880ff);border:var(--deckgo-drr-anchor-border)}div.anchor.top{top:0}div.anchor.top.end{cursor:ne-resize;-webkit-transform:translate(50%, -50%);transform:translate(50%, -50%)}div.anchor.top.start{cursor:nw-resize;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}div.anchor.end{right:0}div.anchor.bottom{bottom:0}div.anchor.bottom.end{cursor:se-resize;-webkit-transform:translate(50%, 50%);transform:translate(50%, 50%)}div.anchor.bottom.start{cursor:sw-resize;-webkit-transform:translate(-50%, 50%);transform:translate(-50%, 50%)}div.anchor.start{left:0}div.border{position:absolute}div.border.top,div.border.bottom{width:calc(100% - var(--deckgo-drr-anchor-width, 16px));height:16px}div.border.end,div.border.start{top:50%;height:calc(100% - var(--deckgo-drr-anchor-height, 16px));width:16px}div.border.top{top:0;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);cursor:n-resize}div.border.end{right:0;-webkit-transform:translate(50%, -50%);transform:translate(50%, -50%);cursor:e-resize}div.border.bottom{bottom:0;left:50%;-webkit-transform:translate(-50%, 50%);transform:translate(-50%, 50%);cursor:s-resize}div.border.start{left:0;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);cursor:w-resize}div.rotate{position:absolute;top:0;left:50%;-webkit-transform:translate(-50%, -100%);transform:translate(-50%, -100%);height:var(--deckgo-drr-rotate-anchor-width, 24px);width:var(--deckgo-drr-rotate-anchor-height, 32px)}div.rotate div.action{position:absolute;top:0;left:50%;-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0);cursor:crosshair;width:var(--deckgo-drr-rotate-anchor-action-width, 16px);height:var(--deckgo-drr-rotate-anchor-action-height, 16px);border-radius:var(--deckgo-drr-rotate-anchor-action-border-radius, 50%);background:var(--deckgo-drr-rotate-anchor-action-background);border:var(--deckgo-drr-rotate-anchor-action-border, 1px solid #3880ff)}div.rotate div.presentation{position:absolute;bottom:0;left:50%;-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0);height:var(--deckgo-drr-rotate-anchor-presentation-height, calc(100% - 16px - 1px));border-right:var(--deckgo-drr-rotate-anchor-presentation-border-right, 1px solid #3880ff)}@media (hover: none) and (pointer: coarse){div.anchor{padding:var(--deckgo-drr-anchor-padding-mobile)}div.border.top,div.border.bottom{height:4px}div.border.end,div.border.start{width:4px}}";
+const deckdeckgoDrrCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;contain:size;width:var(--width);height:var(--height);-webkit-transform:rotate(var(--rotate, 0deg));transform:rotate(var(--rotate, 0deg));position:absolute;top:var(--top);left:var(--left);-webkit-user-select:var(--deckgo-drr-user-select, none);-moz-user-select:var(--deckgo-drr-user-select, none);-ms-user-select:var(--deckgo-drr-user-select, none);user-select:var(--deckgo-drr-user-select, none)}:host(.text){contain:layout}:host(.selected.draggable:not(.drag)){cursor:move}:host(.selected){outline:var(--deckgo-drr-border, 1px solid #3880ff)}::slotted(*){width:100%;height:100%;-webkit-user-select:var(--user-select, none);-moz-user-select:var(--user-select, none);-ms-user-select:var(--user-select, none);user-select:var(--user-select, none);-ms-touch-action:none;touch-action:none;pointer-events:var(--pointer-events, none)}div.anchor{position:absolute;width:var(--deckgo-drr-anchor-width, 16px);height:var(--deckgo-drr-anchor-height, 16px);padding:var(--deckgo-drr-anchor-padding-desktop, 16px)}div.anchor>div{width:100%;height:100%;border-radius:var(--deckgo-drr-anchor-border-radius, 50%);background:var(--deckgo-drr-anchor-background, #3880ff);border:var(--deckgo-drr-anchor-border)}div.anchor.top{top:0}div.anchor.top.end{cursor:ne-resize;-webkit-transform:translate(50%, -50%);transform:translate(50%, -50%)}div.anchor.top.start{cursor:nw-resize;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}div.anchor.end{right:0}div.anchor.bottom{bottom:0}div.anchor.bottom.end{cursor:se-resize;-webkit-transform:translate(50%, 50%);transform:translate(50%, 50%)}div.anchor.bottom.start{cursor:sw-resize;-webkit-transform:translate(-50%, 50%);transform:translate(-50%, 50%)}div.anchor.start{left:0}div.border{position:absolute}div.border.top,div.border.bottom{width:calc(100% - var(--deckgo-drr-anchor-width, 16px));height:16px}div.border.end,div.border.start{top:50%;height:calc(100% - var(--deckgo-drr-anchor-height, 16px));width:16px}div.border.top{top:0;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);cursor:n-resize}div.border.end{right:0;-webkit-transform:translate(50%, -50%);transform:translate(50%, -50%);cursor:e-resize}div.border.bottom{bottom:0;left:50%;-webkit-transform:translate(-50%, 50%);transform:translate(-50%, 50%);cursor:s-resize}div.border.start{left:0;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);cursor:w-resize}div.rotate{position:absolute;top:0;left:50%;-webkit-transform:translate(-50%, -100%);transform:translate(-50%, -100%);height:var(--deckgo-drr-rotate-anchor-width, 24px);width:var(--deckgo-drr-rotate-anchor-height, 32px)}div.rotate div.action{position:absolute;top:0;left:50%;-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0);cursor:crosshair;width:var(--deckgo-drr-rotate-anchor-action-width, 16px);height:var(--deckgo-drr-rotate-anchor-action-height, 16px);border-radius:var(--deckgo-drr-rotate-anchor-action-border-radius, 50%);background:var(--deckgo-drr-rotate-anchor-action-background);border:var(--deckgo-drr-rotate-anchor-action-border, 1px solid #3880ff)}div.rotate div.presentation{position:absolute;bottom:0;left:50%;-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0);height:var(--deckgo-drr-rotate-anchor-presentation-height, calc(100% - 16px - 1px));border-right:var(--deckgo-drr-rotate-anchor-presentation-border-right, 1px solid #3880ff)}@media (hover: none) and (pointer: coarse){div.anchor{padding:var(--deckgo-drr-anchor-padding-mobile)}div.border.top,div.border.bottom{height:4px}div.border.end,div.border.start{width:4px}}";
 
@@ -57,5 +57,4 @@ const DeckdeckgoDragResizeRotate = class {
             }
-            const selected = $event.target.closest('deckgo-drr');
             // If we click elsewhere or select another component, then this component should loose focus and values need to be reset for next usage
-            if (!selected || !selected.isEqualNode(this.el)) {
+            if (!this.isTargetEvent($event)) {
                 this.stopAndReset(false);
@@ -70,2 +69,3 @@ if (this.selected) {
             if (!this.editing) {
+                const selected = $event.target.closest('deckgo-drr');
                 this.drrSelect.emit(selected);
@@ -87,11 +87,11 @@ this.selected = true;
         };
-        this.dbclick = async () => {
+        this.dbclick = async ($event) => {
+            if (!this.isTargetEvent($event)) {
+                return;
+            }
             this.editing = true;
             const element = this.el.querySelector( `:scope > *` );
             if (element) {
-                // Webkit workaround otherwise element is not focused
-                setTimeout(async () => {
-                    element.focus();
-                    await this.moveCursorToEnd(element);
-                });
+                element.focus();
+                await this.moveCursorToEnd(element);
             }
@@ -131,6 +131,4 @@ };
             document.removeEventListener('touchend', this.stop, true);
+            document.removeEventListener('dblclick', this.dbclick, true);
         }
-        if (this.el) {
-            this.el.removeEventListener('dblclick', this.dbclick, true);
-        }
     }
@@ -153,2 +151,6 @@ async init() {
     }
+    isTargetEvent($event) {
+        const selected = $event.target.closest('deckgo-drr');
+        return selected && selected.isEqualNode(this.el);
+    }
     initTextEditable() {
@@ -158,3 +160,3 @@ if (!this.text || !this.el) {
         }
-        this.el.addEventListener('dblclick', this.dbclick, { once: true });
+        document.addEventListener('dblclick', this.dbclick.bind(this), { once: true });
         const element = this.el.querySelector( `:scope > *` );
@@ -166,7 +168,9 @@ if (element) {
     resetTextEditable() {
-        if (!this.text || !this.el) {
+        if (!this.text) {
             return;
         }
         this.editing = false;
-        this.el.removeEventListener('dblclick', this.dbclick, true);
+        if (document) {
+            document.removeEventListener('dblclick', this.dbclick, true);
+        }
     }
@@ -429,3 +433,5 @@ async initStartPositions($event) {
                 '--rotate': this.rotate ? `${this.rotate}deg` : `0deg`,
-            }, class: `${this.selected ? 'selected' : ''} ${this.text ? 'text' : ''} ${this.drag !== 'none' ? 'draggable' : ''} ${this.drag !== 'none' && this.moving ? 'drag' : ''} ${this.editing ? 'editing' : ''}` }, this.renderEdgesAnchors(), this.renderBorderAnchors(), this.renderRotateAnchor(), index.h("slot", null)));
+                '--pointer-events': `${this.editing ? 'all' : 'none'}`,
+                '--user-select': `${this.text ? 'text' : 'none'}`,
+            }, class: `${this.selected ? 'selected' : ''} ${this.text ? 'text' : ''} ${this.drag !== 'none' ? 'draggable' : ''} ${this.drag !== 'none' && this.moving ? 'drag' : ''}` }, this.renderEdgesAnchors(), this.renderBorderAnchors(), this.renderRotateAnchor(), index.h("slot", null)));
     }
@@ -432,0 +438,0 @@ renderEdgesAnchors() {

dist/collection/components/deckdeckgo-drr.js

@@ -43,5 +43,4 @@ import { Component, h, Host, Prop, State, Element, Event, Build } from '@stencil/core';
             }
-            const selected = $event.target.closest('deckgo-drr');
             // If we click elsewhere or select another component, then this component should loose focus and values need to be reset for next usage
-            if (!selected || !selected.isEqualNode(this.el)) {
+            if (!this.isTargetEvent($event)) {
                 this.stopAndReset(false);
@@ -56,2 +55,3 @@ if (this.selected) {
             if (!this.editing) {
+                const selected = $event.target.closest('deckgo-drr');
                 this.drrSelect.emit(selected);
@@ -73,11 +73,11 @@ this.selected = true;
         };
-        this.dbclick = async () => {
+        this.dbclick = async ($event) => {
+            if (!this.isTargetEvent($event)) {
+                return;
+            }
             this.editing = true;
             const element = this.el.querySelector(Build.isBrowser ? `:scope > *` : '> *');
             if (element) {
-                // Webkit workaround otherwise element is not focused
-                setTimeout(async () => {
-                    element.focus();
-                    await this.moveCursorToEnd(element);
-                });
+                element.focus();
+                await this.moveCursorToEnd(element);
             }
@@ -117,6 +117,4 @@ };
             document.removeEventListener('touchend', this.stop, true);
+            document.removeEventListener('dblclick', this.dbclick, true);
         }
-        if (this.el) {
-            this.el.removeEventListener('dblclick', this.dbclick, true);
-        }
     }
@@ -139,2 +137,6 @@ async init() {
     }
+    isTargetEvent($event) {
+        const selected = $event.target.closest('deckgo-drr');
+        return selected && selected.isEqualNode(this.el);
+    }
     initTextEditable() {
@@ -144,3 +146,3 @@ if (!this.text || !this.el) {
         }
-        this.el.addEventListener('dblclick', this.dbclick, { once: true });
+        document.addEventListener('dblclick', this.dbclick.bind(this), { once: true });
         const element = this.el.querySelector(Build.isBrowser ? `:scope > *` : '> *');
@@ -152,7 +154,9 @@ if (element) {
     resetTextEditable() {
-        if (!this.text || !this.el) {
+        if (!this.text) {
             return;
         }
         this.editing = false;
-        this.el.removeEventListener('dblclick', this.dbclick, true);
+        if (document) {
+            document.removeEventListener('dblclick', this.dbclick, true);
+        }
     }
@@ -415,3 +419,5 @@ async initStartPositions($event) {
                 '--rotate': this.rotate ? `${this.rotate}deg` : `0deg`,
-            }, class: `${this.selected ? 'selected' : ''} ${this.text ? 'text' : ''} ${this.drag !== 'none' ? 'draggable' : ''} ${this.drag !== 'none' && this.moving ? 'drag' : ''} ${this.editing ? 'editing' : ''}` },
+                '--pointer-events': `${this.editing ? 'all' : 'none'}`,
+                '--user-select': `${this.text ? 'text' : 'none'}`,
+            }, class: `${this.selected ? 'selected' : ''} ${this.text ? 'text' : ''} ${this.drag !== 'none' ? 'draggable' : ''} ${this.drag !== 'none' && this.moving ? 'drag' : ''}` },
             this.renderEdgesAnchors(),
@@ -418,0 +424,0 @@ this.renderBorderAnchors(),

dist/deckdeckgo-drag-resize-rotate/deckdeckgo-drag-resize-rotate.esm.js

@@ -1,1 +0,1 @@
-import{b as t}from"./p-d1bc1279.js";import{p as i}from"./p-666007b3.js";i().then(i=>t([["p-df6c50f2",[[1,"deckgo-drr",{unit:[1],resize:[1028],drag:[1],rotation:[4],text:[516],width:[32],height:[32],minWidth:[32],minHeight:[32],top:[32],left:[32],rotate:[32],selected:[32],moving:[32],editing:[32]}]]]],i));
+import{b as t}from"./p-d1bc1279.js";import{p as i}from"./p-666007b3.js";i().then(i=>t([["p-69b93902",[[1,"deckgo-drr",{unit:[1],resize:[1028],drag:[1],rotation:[4],text:[516],width:[32],height:[32],minWidth:[32],minHeight:[32],top:[32],left:[32],rotate:[32],selected:[32],moving:[32],editing:[32]}]]]],i));

dist/deckdeckgo-drag-resize-rotate/p-eca43bd0.system.js

@@ -1,1 +0,1 @@
-System.register(["./p-dffea8f7.system.js","./p-76bcfc74.system.js"],(function(){"use strict";var t,e;return{setters:[function(e){t=e.b},function(t){e=t.p}],execute:function(){e().then((function(e){return t([["p-df30bafa.system",[[1,"deckgo-drr",{unit:[1],resize:[1028],drag:[1],rotation:[4],text:[516],width:[32],height:[32],minWidth:[32],minHeight:[32],top:[32],left:[32],rotate:[32],selected:[32],moving:[32],editing:[32]}]]]],e)}))}}}));
+System.register(["./p-dffea8f7.system.js","./p-76bcfc74.system.js"],(function(){"use strict";var t,e;return{setters:[function(e){t=e.b},function(t){e=t.p}],execute:function(){e().then((function(e){return t([["p-832be782.system",[[1,"deckgo-drr",{unit:[1],resize:[1028],drag:[1],rotation:[4],text:[516],width:[32],height:[32],minWidth:[32],minHeight:[32],top:[32],left:[32],rotate:[32],selected:[32],moving:[32],editing:[32]}]]]],e)}))}}}));

dist/esm-es5/deckgo-drr.entry.js

@@ -41,3 +41,3 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
 }
-var deckdeckgoDrrCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;contain:size;width:var(--width);height:var(--height);-webkit-transform:rotate(var(--rotate, 0deg));transform:rotate(var(--rotate, 0deg));position:absolute;top:var(--top);left:var(--left);-webkit-user-select:var(--deckgo-drr-user-select, none);-moz-user-select:var(--deckgo-drr-user-select, none);-ms-user-select:var(--deckgo-drr-user-select, none);user-select:var(--deckgo-drr-user-select, none)}:host(.text){contain:layout}:host(.editing) ::slotted(*){pointer-events:all;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}:host(:not(.editing)) ::slotted(*){pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.selected.draggable:not(.drag)){cursor:move}:host(.selected){outline:var(--deckgo-drr-border, 1px solid #3880ff)}::slotted(*){width:100%;height:100%;-ms-touch-action:none;touch-action:none}div.anchor{position:absolute;width:var(--deckgo-drr-anchor-width, 16px);height:var(--deckgo-drr-anchor-height, 16px);padding:var(--deckgo-drr-anchor-padding-desktop, 16px)}div.anchor>div{width:100%;height:100%;border-radius:var(--deckgo-drr-anchor-border-radius, 50%);background:var(--deckgo-drr-anchor-background, #3880ff);border:var(--deckgo-drr-anchor-border)}div.anchor.top{top:0}div.anchor.top.end{cursor:ne-resize;-webkit-transform:translate(50%, -50%);transform:translate(50%, -50%)}div.anchor.top.start{cursor:nw-resize;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}div.anchor.end{right:0}div.anchor.bottom{bottom:0}div.anchor.bottom.end{cursor:se-resize;-webkit-transform:translate(50%, 50%);transform:translate(50%, 50%)}div.anchor.bottom.start{cursor:sw-resize;-webkit-transform:translate(-50%, 50%);transform:translate(-50%, 50%)}div.anchor.start{left:0}div.border{position:absolute}div.border.top,div.border.bottom{width:calc(100% - var(--deckgo-drr-anchor-width, 16px));height:16px}div.border.end,div.border.start{top:50%;height:calc(100% - var(--deckgo-drr-anchor-height, 16px));width:16px}div.border.top{top:0;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);cursor:n-resize}div.border.end{right:0;-webkit-transform:translate(50%, -50%);transform:translate(50%, -50%);cursor:e-resize}div.border.bottom{bottom:0;left:50%;-webkit-transform:translate(-50%, 50%);transform:translate(-50%, 50%);cursor:s-resize}div.border.start{left:0;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);cursor:w-resize}div.rotate{position:absolute;top:0;left:50%;-webkit-transform:translate(-50%, -100%);transform:translate(-50%, -100%);height:var(--deckgo-drr-rotate-anchor-width, 24px);width:var(--deckgo-drr-rotate-anchor-height, 32px)}div.rotate div.action{position:absolute;top:0;left:50%;-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0);cursor:crosshair;width:var(--deckgo-drr-rotate-anchor-action-width, 16px);height:var(--deckgo-drr-rotate-anchor-action-height, 16px);border-radius:var(--deckgo-drr-rotate-anchor-action-border-radius, 50%);background:var(--deckgo-drr-rotate-anchor-action-background);border:var(--deckgo-drr-rotate-anchor-action-border, 1px solid #3880ff)}div.rotate div.presentation{position:absolute;bottom:0;left:50%;-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0);height:var(--deckgo-drr-rotate-anchor-presentation-height, calc(100% - 16px - 1px));border-right:var(--deckgo-drr-rotate-anchor-presentation-border-right, 1px solid #3880ff)}@media (hover: none) and (pointer: coarse){div.anchor{padding:var(--deckgo-drr-anchor-padding-mobile)}div.border.top,div.border.bottom{height:4px}div.border.end,div.border.start{width:4px}}";
+var deckdeckgoDrrCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;contain:size;width:var(--width);height:var(--height);-webkit-transform:rotate(var(--rotate, 0deg));transform:rotate(var(--rotate, 0deg));position:absolute;top:var(--top);left:var(--left);-webkit-user-select:var(--deckgo-drr-user-select, none);-moz-user-select:var(--deckgo-drr-user-select, none);-ms-user-select:var(--deckgo-drr-user-select, none);user-select:var(--deckgo-drr-user-select, none)}:host(.text){contain:layout}:host(.selected.draggable:not(.drag)){cursor:move}:host(.selected){outline:var(--deckgo-drr-border, 1px solid #3880ff)}::slotted(*){width:100%;height:100%;-webkit-user-select:var(--user-select, none);-moz-user-select:var(--user-select, none);-ms-user-select:var(--user-select, none);user-select:var(--user-select, none);-ms-touch-action:none;touch-action:none;pointer-events:var(--pointer-events, none)}div.anchor{position:absolute;width:var(--deckgo-drr-anchor-width, 16px);height:var(--deckgo-drr-anchor-height, 16px);padding:var(--deckgo-drr-anchor-padding-desktop, 16px)}div.anchor>div{width:100%;height:100%;border-radius:var(--deckgo-drr-anchor-border-radius, 50%);background:var(--deckgo-drr-anchor-background, #3880ff);border:var(--deckgo-drr-anchor-border)}div.anchor.top{top:0}div.anchor.top.end{cursor:ne-resize;-webkit-transform:translate(50%, -50%);transform:translate(50%, -50%)}div.anchor.top.start{cursor:nw-resize;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}div.anchor.end{right:0}div.anchor.bottom{bottom:0}div.anchor.bottom.end{cursor:se-resize;-webkit-transform:translate(50%, 50%);transform:translate(50%, 50%)}div.anchor.bottom.start{cursor:sw-resize;-webkit-transform:translate(-50%, 50%);transform:translate(-50%, 50%)}div.anchor.start{left:0}div.border{position:absolute}div.border.top,div.border.bottom{width:calc(100% - var(--deckgo-drr-anchor-width, 16px));height:16px}div.border.end,div.border.start{top:50%;height:calc(100% - var(--deckgo-drr-anchor-height, 16px));width:16px}div.border.top{top:0;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);cursor:n-resize}div.border.end{right:0;-webkit-transform:translate(50%, -50%);transform:translate(50%, -50%);cursor:e-resize}div.border.bottom{bottom:0;left:50%;-webkit-transform:translate(-50%, 50%);transform:translate(-50%, 50%);cursor:s-resize}div.border.start{left:0;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);cursor:w-resize}div.rotate{position:absolute;top:0;left:50%;-webkit-transform:translate(-50%, -100%);transform:translate(-50%, -100%);height:var(--deckgo-drr-rotate-anchor-width, 24px);width:var(--deckgo-drr-rotate-anchor-height, 32px)}div.rotate div.action{position:absolute;top:0;left:50%;-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0);cursor:crosshair;width:var(--deckgo-drr-rotate-anchor-action-width, 16px);height:var(--deckgo-drr-rotate-anchor-action-height, 16px);border-radius:var(--deckgo-drr-rotate-anchor-action-border-radius, 50%);background:var(--deckgo-drr-rotate-anchor-action-background);border:var(--deckgo-drr-rotate-anchor-action-border, 1px solid #3880ff)}div.rotate div.presentation{position:absolute;bottom:0;left:50%;-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0);height:var(--deckgo-drr-rotate-anchor-presentation-height, calc(100% - 16px - 1px));border-right:var(--deckgo-drr-rotate-anchor-presentation-border-right, 1px solid #3880ff)}@media (hover: none) and (pointer: coarse){div.anchor{padding:var(--deckgo-drr-anchor-padding-mobile)}div.border.top,div.border.bottom{height:4px}div.border.end,div.border.start{width:4px}}";
 var DeckdeckgoDragResizeRotate = /** @class */ (function () {
@@ -91,5 +91,4 @@ function class_1(hostRef) {
                         }
-                        selected = $event.target.closest('deckgo-drr');
                         // If we click elsewhere or select another component, then this component should loose focus and values need to be reset for next usage
-                        if (!selected || !selected.isEqualNode(this.el)) {
+                        if (!this.isTargetEvent($event)) {
                             this.stopAndReset(false);
@@ -104,2 +103,3 @@ if (this.selected) {
                         if (!this.editing) {
+                            selected = $event.target.closest('deckgo-drr');
                             this.drrSelect.emit(selected);
@@ -126,24 +126,20 @@ this.selected = true;
         };
-        this.dbclick = function () { return __awaiter(_this, void 0, void 0, function () {
+        this.dbclick = function ($event) { return __awaiter(_this, void 0, void 0, function () {
             var element;
-            var _this = this;
             return __generator(this, function (_a) {
-                this.editing = true;
-                element = this.el.querySelector(":scope > *");
-                if (element) {
-                    // Webkit workaround otherwise element is not focused
-                    setTimeout(function () { return __awaiter(_this, void 0, void 0, function () {
-                        return __generator(this, function (_a) {
-                            switch (_a.label) {
-                                case 0:
-                                    element.focus();
-                                    return [4 /*yield*/, this.moveCursorToEnd(element)];
-                                case 1:
-                                    _a.sent();
-                                    return [2 /*return*/];
-                            }
-                        });
-                    }); });
+                switch (_a.label) {
+                    case 0:
+                        if (!this.isTargetEvent($event)) {
+                            return [2 /*return*/];
+                        }
+                        this.editing = true;
+                        element = this.el.querySelector(":scope > *");
+                        if (!element) return [3 /*break*/, 2];
+                        element.focus();
+                        return [4 /*yield*/, this.moveCursorToEnd(element)];
+                    case 1:
+                        _a.sent();
+                        _a.label = 2;
+                    case 2: return [2 /*return*/];
                 }
-                return [2 /*return*/];
             });
@@ -221,6 +217,4 @@ }); };
                     document.removeEventListener('touchend', this.stop, true);
+                    document.removeEventListener('dblclick', this.dbclick, true);
                 }
-                if (this.el) {
-                    this.el.removeEventListener('dblclick', this.dbclick, true);
-                }
                 return [2 /*return*/];
@@ -257,2 +251,6 @@ });
     };
+    class_1.prototype.isTargetEvent = function ($event) {
+        var selected = $event.target.closest('deckgo-drr');
+        return selected && selected.isEqualNode(this.el);
+    };
     class_1.prototype.initTextEditable = function () {
@@ -262,3 +260,3 @@ if (!this.text || !this.el) {
         }
-        this.el.addEventListener('dblclick', this.dbclick, { once: true });
+        document.addEventListener('dblclick', this.dbclick.bind(this), { once: true });
         var element = this.el.querySelector(":scope > *");
@@ -270,7 +268,9 @@ if (element) {
     class_1.prototype.resetTextEditable = function () {
-        if (!this.text || !this.el) {
+        if (!this.text) {
             return;
         }
         this.editing = false;
-        this.el.removeEventListener('dblclick', this.dbclick, true);
+        if (document) {
+            document.removeEventListener('dblclick', this.dbclick, true);
+        }
     };
@@ -559,3 +559,5 @@ class_1.prototype.initStartPositions = function ($event) {
                 '--rotate': this.rotate ? this.rotate + "deg" : "0deg",
-            }, class: (this.selected ? 'selected' : '') + " " + (this.text ? 'text' : '') + " " + (this.drag !== 'none' ? 'draggable' : '') + " " + (this.drag !== 'none' && this.moving ? 'drag' : '') + " " + (this.editing ? 'editing' : '') }, this.renderEdgesAnchors(), this.renderBorderAnchors(), this.renderRotateAnchor(), h("slot", null)));
+                '--pointer-events': "" + (this.editing ? 'all' : 'none'),
+                '--user-select': "" + (this.text ? 'text' : 'none'),
+            }, class: (this.selected ? 'selected' : '') + " " + (this.text ? 'text' : '') + " " + (this.drag !== 'none' ? 'draggable' : '') + " " + (this.drag !== 'none' && this.moving ? 'drag' : '') }, this.renderEdgesAnchors(), this.renderBorderAnchors(), this.renderRotateAnchor(), h("slot", null)));
     };
@@ -562,0 +564,0 @@ class_1.prototype.renderEdgesAnchors = function () {

dist/esm/deckgo-drr.entry.js

@@ -7,3 +7,3 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a4a96ce2.js';
 
-const deckdeckgoDrrCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;contain:size;width:var(--width);height:var(--height);-webkit-transform:rotate(var(--rotate, 0deg));transform:rotate(var(--rotate, 0deg));position:absolute;top:var(--top);left:var(--left);-webkit-user-select:var(--deckgo-drr-user-select, none);-moz-user-select:var(--deckgo-drr-user-select, none);-ms-user-select:var(--deckgo-drr-user-select, none);user-select:var(--deckgo-drr-user-select, none)}:host(.text){contain:layout}:host(.editing) ::slotted(*){pointer-events:all;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}:host(:not(.editing)) ::slotted(*){pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.selected.draggable:not(.drag)){cursor:move}:host(.selected){outline:var(--deckgo-drr-border, 1px solid #3880ff)}::slotted(*){width:100%;height:100%;-ms-touch-action:none;touch-action:none}div.anchor{position:absolute;width:var(--deckgo-drr-anchor-width, 16px);height:var(--deckgo-drr-anchor-height, 16px);padding:var(--deckgo-drr-anchor-padding-desktop, 16px)}div.anchor>div{width:100%;height:100%;border-radius:var(--deckgo-drr-anchor-border-radius, 50%);background:var(--deckgo-drr-anchor-background, #3880ff);border:var(--deckgo-drr-anchor-border)}div.anchor.top{top:0}div.anchor.top.end{cursor:ne-resize;-webkit-transform:translate(50%, -50%);transform:translate(50%, -50%)}div.anchor.top.start{cursor:nw-resize;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}div.anchor.end{right:0}div.anchor.bottom{bottom:0}div.anchor.bottom.end{cursor:se-resize;-webkit-transform:translate(50%, 50%);transform:translate(50%, 50%)}div.anchor.bottom.start{cursor:sw-resize;-webkit-transform:translate(-50%, 50%);transform:translate(-50%, 50%)}div.anchor.start{left:0}div.border{position:absolute}div.border.top,div.border.bottom{width:calc(100% - var(--deckgo-drr-anchor-width, 16px));height:16px}div.border.end,div.border.start{top:50%;height:calc(100% - var(--deckgo-drr-anchor-height, 16px));width:16px}div.border.top{top:0;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);cursor:n-resize}div.border.end{right:0;-webkit-transform:translate(50%, -50%);transform:translate(50%, -50%);cursor:e-resize}div.border.bottom{bottom:0;left:50%;-webkit-transform:translate(-50%, 50%);transform:translate(-50%, 50%);cursor:s-resize}div.border.start{left:0;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);cursor:w-resize}div.rotate{position:absolute;top:0;left:50%;-webkit-transform:translate(-50%, -100%);transform:translate(-50%, -100%);height:var(--deckgo-drr-rotate-anchor-width, 24px);width:var(--deckgo-drr-rotate-anchor-height, 32px)}div.rotate div.action{position:absolute;top:0;left:50%;-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0);cursor:crosshair;width:var(--deckgo-drr-rotate-anchor-action-width, 16px);height:var(--deckgo-drr-rotate-anchor-action-height, 16px);border-radius:var(--deckgo-drr-rotate-anchor-action-border-radius, 50%);background:var(--deckgo-drr-rotate-anchor-action-background);border:var(--deckgo-drr-rotate-anchor-action-border, 1px solid #3880ff)}div.rotate div.presentation{position:absolute;bottom:0;left:50%;-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0);height:var(--deckgo-drr-rotate-anchor-presentation-height, calc(100% - 16px - 1px));border-right:var(--deckgo-drr-rotate-anchor-presentation-border-right, 1px solid #3880ff)}@media (hover: none) and (pointer: coarse){div.anchor{padding:var(--deckgo-drr-anchor-padding-mobile)}div.border.top,div.border.bottom{height:4px}div.border.end,div.border.start{width:4px}}";
+const deckdeckgoDrrCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;contain:size;width:var(--width);height:var(--height);-webkit-transform:rotate(var(--rotate, 0deg));transform:rotate(var(--rotate, 0deg));position:absolute;top:var(--top);left:var(--left);-webkit-user-select:var(--deckgo-drr-user-select, none);-moz-user-select:var(--deckgo-drr-user-select, none);-ms-user-select:var(--deckgo-drr-user-select, none);user-select:var(--deckgo-drr-user-select, none)}:host(.text){contain:layout}:host(.selected.draggable:not(.drag)){cursor:move}:host(.selected){outline:var(--deckgo-drr-border, 1px solid #3880ff)}::slotted(*){width:100%;height:100%;-webkit-user-select:var(--user-select, none);-moz-user-select:var(--user-select, none);-ms-user-select:var(--user-select, none);user-select:var(--user-select, none);-ms-touch-action:none;touch-action:none;pointer-events:var(--pointer-events, none)}div.anchor{position:absolute;width:var(--deckgo-drr-anchor-width, 16px);height:var(--deckgo-drr-anchor-height, 16px);padding:var(--deckgo-drr-anchor-padding-desktop, 16px)}div.anchor>div{width:100%;height:100%;border-radius:var(--deckgo-drr-anchor-border-radius, 50%);background:var(--deckgo-drr-anchor-background, #3880ff);border:var(--deckgo-drr-anchor-border)}div.anchor.top{top:0}div.anchor.top.end{cursor:ne-resize;-webkit-transform:translate(50%, -50%);transform:translate(50%, -50%)}div.anchor.top.start{cursor:nw-resize;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}div.anchor.end{right:0}div.anchor.bottom{bottom:0}div.anchor.bottom.end{cursor:se-resize;-webkit-transform:translate(50%, 50%);transform:translate(50%, 50%)}div.anchor.bottom.start{cursor:sw-resize;-webkit-transform:translate(-50%, 50%);transform:translate(-50%, 50%)}div.anchor.start{left:0}div.border{position:absolute}div.border.top,div.border.bottom{width:calc(100% - var(--deckgo-drr-anchor-width, 16px));height:16px}div.border.end,div.border.start{top:50%;height:calc(100% - var(--deckgo-drr-anchor-height, 16px));width:16px}div.border.top{top:0;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);cursor:n-resize}div.border.end{right:0;-webkit-transform:translate(50%, -50%);transform:translate(50%, -50%);cursor:e-resize}div.border.bottom{bottom:0;left:50%;-webkit-transform:translate(-50%, 50%);transform:translate(-50%, 50%);cursor:s-resize}div.border.start{left:0;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);cursor:w-resize}div.rotate{position:absolute;top:0;left:50%;-webkit-transform:translate(-50%, -100%);transform:translate(-50%, -100%);height:var(--deckgo-drr-rotate-anchor-width, 24px);width:var(--deckgo-drr-rotate-anchor-height, 32px)}div.rotate div.action{position:absolute;top:0;left:50%;-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0);cursor:crosshair;width:var(--deckgo-drr-rotate-anchor-action-width, 16px);height:var(--deckgo-drr-rotate-anchor-action-height, 16px);border-radius:var(--deckgo-drr-rotate-anchor-action-border-radius, 50%);background:var(--deckgo-drr-rotate-anchor-action-background);border:var(--deckgo-drr-rotate-anchor-action-border, 1px solid #3880ff)}div.rotate div.presentation{position:absolute;bottom:0;left:50%;-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0);height:var(--deckgo-drr-rotate-anchor-presentation-height, calc(100% - 16px - 1px));border-right:var(--deckgo-drr-rotate-anchor-presentation-border-right, 1px solid #3880ff)}@media (hover: none) and (pointer: coarse){div.anchor{padding:var(--deckgo-drr-anchor-padding-mobile)}div.border.top,div.border.bottom{height:4px}div.border.end,div.border.start{width:4px}}";
 
@@ -53,5 +53,4 @@ const DeckdeckgoDragResizeRotate = class {
             }
-            const selected = $event.target.closest('deckgo-drr');
             // If we click elsewhere or select another component, then this component should loose focus and values need to be reset for next usage
-            if (!selected || !selected.isEqualNode(this.el)) {
+            if (!this.isTargetEvent($event)) {
                 this.stopAndReset(false);
@@ -66,2 +65,3 @@ if (this.selected) {
             if (!this.editing) {
+                const selected = $event.target.closest('deckgo-drr');
                 this.drrSelect.emit(selected);
@@ -83,11 +83,11 @@ this.selected = true;
         };
-        this.dbclick = async () => {
+        this.dbclick = async ($event) => {
+            if (!this.isTargetEvent($event)) {
+                return;
+            }
             this.editing = true;
             const element = this.el.querySelector( `:scope > *` );
             if (element) {
-                // Webkit workaround otherwise element is not focused
-                setTimeout(async () => {
-                    element.focus();
-                    await this.moveCursorToEnd(element);
-                });
+                element.focus();
+                await this.moveCursorToEnd(element);
             }
@@ -127,6 +127,4 @@ };
             document.removeEventListener('touchend', this.stop, true);
+            document.removeEventListener('dblclick', this.dbclick, true);
         }
-        if (this.el) {
-            this.el.removeEventListener('dblclick', this.dbclick, true);
-        }
     }
@@ -149,2 +147,6 @@ async init() {
     }
+    isTargetEvent($event) {
+        const selected = $event.target.closest('deckgo-drr');
+        return selected && selected.isEqualNode(this.el);
+    }
     initTextEditable() {
@@ -154,3 +156,3 @@ if (!this.text || !this.el) {
         }
-        this.el.addEventListener('dblclick', this.dbclick, { once: true });
+        document.addEventListener('dblclick', this.dbclick.bind(this), { once: true });
         const element = this.el.querySelector( `:scope > *` );
@@ -162,7 +164,9 @@ if (element) {
     resetTextEditable() {
-        if (!this.text || !this.el) {
+        if (!this.text) {
             return;
         }
         this.editing = false;
-        this.el.removeEventListener('dblclick', this.dbclick, true);
+        if (document) {
+            document.removeEventListener('dblclick', this.dbclick, true);
+        }
     }
@@ -425,3 +429,5 @@ async initStartPositions($event) {
                 '--rotate': this.rotate ? `${this.rotate}deg` : `0deg`,
-            }, class: `${this.selected ? 'selected' : ''} ${this.text ? 'text' : ''} ${this.drag !== 'none' ? 'draggable' : ''} ${this.drag !== 'none' && this.moving ? 'drag' : ''} ${this.editing ? 'editing' : ''}` }, this.renderEdgesAnchors(), this.renderBorderAnchors(), this.renderRotateAnchor(), h("slot", null)));
+                '--pointer-events': `${this.editing ? 'all' : 'none'}`,
+                '--user-select': `${this.text ? 'text' : 'none'}`,
+            }, class: `${this.selected ? 'selected' : ''} ${this.text ? 'text' : ''} ${this.drag !== 'none' ? 'draggable' : ''} ${this.drag !== 'none' && this.moving ? 'drag' : ''}` }, this.renderEdgesAnchors(), this.renderBorderAnchors(), this.renderRotateAnchor(), h("slot", null)));
     }
@@ -428,0 +434,0 @@ renderEdgesAnchors() {

dist/types/components/deckdeckgo-drr.d.ts

@@ -52,2 +52,3 @@ export declare class DeckdeckgoDragResizeRotate {
     private start;
+    private isTargetEvent;
     private initTextEditable;
@@ -54,0 +55,0 @@ private resetTextEditable;

package.json

 {
   "name": "@deckdeckgo/drag-resize-rotate",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "A Web Component to drag, resize and rotate any element",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

913406

increased by0.06%

Lines of code

12441

increased by0.07%

No dependency changes