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

Comparing version 1.1.1 to 1.1.2

CHANGELOG.md

@@ -0,1 +1,7 @@
+# 1.1.2 (2020-07-19)
+
+### Fix
+
+- webkit workaround :(
+
 # 1.1.1 (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(.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}}";
+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}}";
 
@@ -89,4 +89,7 @@ const DeckdeckgoDragResizeRotate = class {
             if (element) {
-                element.focus();
-                await this.moveCursorToEnd(element);
+                // Webkit workaround otherwise element is not focused
+                setTimeout(async () => {
+                    element.focus();
+                    await this.moveCursorToEnd(element);
+                });
             }
@@ -93,0 +96,0 @@ };

dist/collection/components/deckdeckgo-drr.js

@@ -75,4 +75,7 @@ import { Component, h, Host, Prop, State, Element, Event, Build } from '@stencil/core';
             if (element) {
-                element.focus();
-                await this.moveCursorToEnd(element);
+                // Webkit workaround otherwise element is not focused
+                setTimeout(async () => {
+                    element.focus();
+                    await this.moveCursorToEnd(element);
+                });
             }
@@ -79,0 +82,0 @@ };

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-79e80aba",[[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-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));

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-05ba242b.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-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)}))}}}));

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(.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 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 DeckdeckgoDragResizeRotate = /** @class */ (function () {
@@ -126,15 +126,22 @@ function class_1(hostRef) {
             var element;
+            var _this = this;
             return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        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*/];
+                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*/];
+                            }
+                        });
+                    }); });
                 }
+                return [2 /*return*/];
             });
@@ -141,0 +148,0 @@ }); };

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(.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}}";
+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}}";
 
@@ -85,4 +85,7 @@ const DeckdeckgoDragResizeRotate = class {
             if (element) {
-                element.focus();
-                await this.moveCursorToEnd(element);
+                // Webkit workaround otherwise element is not focused
+                setTimeout(async () => {
+                    element.focus();
+                    await this.moveCursorToEnd(element);
+                });
             }
@@ -89,0 +92,0 @@ };

package.json

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

New alerts

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

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

912874

increased by0.06%

Lines of code

12432

increased by0.14%

No dependency changes