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

Comparing version 1.0.0-beta.2 to 1.0.0-beta.3

CHANGELOG.md

@@ -0,1 +1,10 @@
+<a name="1.0.0-beta.3"></a>
+
+# 1.0.0-beta.3 (2020-02-25)
+
+### Fix
+
+- content sizing fit in Firefox
+- resize component in Safari ("no jump")
+
 <a name="1.0.0-beta.2"></a>
@@ -2,0 +11,0 @@

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

@@ -147,6 +147,7 @@ 'use strict';
         const sin_t = Math.sin(theta);
-        const l = this.el.offsetLeft;
-        const t = this.el.offsetTop;
-        const w = this.el.offsetWidth;
-        const h = this.el.offsetHeight;
+        const css = window.getComputedStyle(this.el);
+        const l = parseFloat(css.left);
+        const t = parseFloat(css.top);
+        const w = parseFloat(css.width);
+        const h = parseFloat(css.height);
         const matrix = this.resizeMatrix();
@@ -400,5 +401,5 @@ const c0_x = l + w / 2.0;
     get el() { return core.getElement(this); }
-    static get style() { return ":host{display:block;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(.selected.draggable:not(.drag)){cursor:move}:host(.selected){outline:var(--deckgo-drr-border,1px solid #3880ff)}::slotted(*){width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-touch-action:none;touch-action:none;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.bottom,div.border.top{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{top: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.action,div.rotate div.presentation{position:absolute;left:50%;-webkit-transform:translate(-50%);transform:translate(-50%)}div.rotate div.presentation{bottom: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.bottom,div.border.top{height:4px}div.border.end,div.border.start{width:4px}}"; }
+    static get style() { return ":host{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align: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(.selected.draggable:not(.drag)){cursor:move}:host(.selected){outline:var(--deckgo-drr-border,1px solid #3880ff)}::slotted(*){width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-touch-action:none;touch-action:none;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.bottom,div.border.top{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{top: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.action,div.rotate div.presentation{position:absolute;left:50%;-webkit-transform:translate(-50%);transform:translate(-50%)}div.rotate div.presentation{bottom: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.bottom,div.border.top{height:4px}div.border.end,div.border.start{width:4px}}"; }
 };
 
 exports.deckgo_drr = DeckdeckgoDragResizeRotate;

dist/collection/components/deckdeckgo-drr.js

@@ -136,6 +136,7 @@ import { h, Host } from "@stencil/core";
         const sin_t = Math.sin(theta);
-        const l = this.el.offsetLeft;
-        const t = this.el.offsetTop;
-        const w = this.el.offsetWidth;
-        const h = this.el.offsetHeight;
+        const css = window.getComputedStyle(this.el);
+        const l = parseFloat(css.left);
+        const t = parseFloat(css.top);
+        const w = parseFloat(css.width);
+        const h = parseFloat(css.height);
         const matrix = this.resizeMatrix();
@@ -142,0 +143,0 @@ const c0_x = l + w / 2.0;

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

@@ -1,1 +0,1 @@
-import{p as t,b as i}from"./p-6f05f556.js";t().then(t=>i([["p-m6bsqat4",[[1,"deckgo-drr",{unit:[1],resize:[4],drag:[1],rotation:[4],width:[32],height:[32],minWidth:[32],minHeight:[32],top:[32],left:[32],rotate:[32],selected:[32],moving:[32]}]]]],t));
+import{p as t,b as e}from"./p-6f05f556.js";t().then(t=>e([["p-ubkdhecb",[[1,"deckgo-drr",{unit:[1],resize:[4],drag:[1],rotation:[4],width:[32],height:[32],minWidth:[32],minHeight:[32],top:[32],left:[32],rotate:[32],selected:[32],moving:[32]}]]]],t));

dist/deckdeckgo-drag-resize-rotate/p-6e554986.system.js

@@ -1,1 +0,1 @@
-System.register(["./p-bda7cb80.system.js"],(function(){"use strict";var t,e;return{setters:[function(i){t=i.p;e=i.b}],execute:function(){t().then((function(t){return e([["p-pjd8yiww.system",[[1,"deckgo-drr",{unit:[1],resize:[4],drag:[1],rotation:[4],width:[32],height:[32],minWidth:[32],minHeight:[32],top:[32],left:[32],rotate:[32],selected:[32],moving:[32]}]]]],t)}))}}}));
+System.register(["./p-bda7cb80.system.js"],(function(){"use strict";var t,e;return{setters:[function(i){t=i.p;e=i.b}],execute:function(){t().then((function(t){return e([["p-3wugwpbw.system",[[1,"deckgo-drr",{unit:[1],resize:[4],drag:[1],rotation:[4],width:[32],height:[32],minWidth:[32],minHeight:[32],top:[32],left:[32],rotate:[32],selected:[32],moving:[32]}]]]],t)}))}}}));

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

@@ -245,6 +245,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
         var sin_t = Math.sin(theta);
-        var l = this.el.offsetLeft;
-        var t = this.el.offsetTop;
-        var w = this.el.offsetWidth;
-        var h = this.el.offsetHeight;
+        var css = window.getComputedStyle(this.el);
+        var l = parseFloat(css.left);
+        var t = parseFloat(css.top);
+        var w = parseFloat(css.width);
+        var h = parseFloat(css.height);
         var matrix = this.resizeMatrix();
@@ -516,3 +517,3 @@ var c0_x = l + w / 2.0;
     Object.defineProperty(class_1, "style", {
-        get: function () { return ":host{display:block;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(.selected.draggable:not(.drag)){cursor:move}:host(.selected){outline:var(--deckgo-drr-border,1px solid #3880ff)}::slotted(*){width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-touch-action:none;touch-action:none;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.bottom,div.border.top{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{top: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.action,div.rotate div.presentation{position:absolute;left:50%;-webkit-transform:translate(-50%);transform:translate(-50%)}div.rotate div.presentation{bottom: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.bottom,div.border.top{height:4px}div.border.end,div.border.start{width:4px}}"; },
+        get: function () { return ":host{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align: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(.selected.draggable:not(.drag)){cursor:move}:host(.selected){outline:var(--deckgo-drr-border,1px solid #3880ff)}::slotted(*){width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-touch-action:none;touch-action:none;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.bottom,div.border.top{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{top: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.action,div.rotate div.presentation{position:absolute;left:50%;-webkit-transform:translate(-50%);transform:translate(-50%)}div.rotate div.presentation{bottom: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.bottom,div.border.top{height:4px}div.border.end,div.border.start{width:4px}}"; },
         enumerable: true,
@@ -519,0 +520,0 @@ configurable: true

dist/esm/deckgo-drr.entry.js

@@ -143,6 +143,7 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './core-527d05e9.js';
         const sin_t = Math.sin(theta);
-        const l = this.el.offsetLeft;
-        const t = this.el.offsetTop;
-        const w = this.el.offsetWidth;
-        const h = this.el.offsetHeight;
+        const css = window.getComputedStyle(this.el);
+        const l = parseFloat(css.left);
+        const t = parseFloat(css.top);
+        const w = parseFloat(css.width);
+        const h = parseFloat(css.height);
         const matrix = this.resizeMatrix();
@@ -396,5 +397,5 @@ const c0_x = l + w / 2.0;
     get el() { return getElement(this); }
-    static get style() { return ":host{display:block;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(.selected.draggable:not(.drag)){cursor:move}:host(.selected){outline:var(--deckgo-drr-border,1px solid #3880ff)}::slotted(*){width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-touch-action:none;touch-action:none;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.bottom,div.border.top{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{top: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.action,div.rotate div.presentation{position:absolute;left:50%;-webkit-transform:translate(-50%);transform:translate(-50%)}div.rotate div.presentation{bottom: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.bottom,div.border.top{height:4px}div.border.end,div.border.start{width:4px}}"; }
+    static get style() { return ":host{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align: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(.selected.draggable:not(.drag)){cursor:move}:host(.selected){outline:var(--deckgo-drr-border,1px solid #3880ff)}::slotted(*){width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-touch-action:none;touch-action:none;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.bottom,div.border.top{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{top: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.action,div.rotate div.presentation{position:absolute;left:50%;-webkit-transform:translate(-50%);transform:translate(-50%)}div.rotate div.presentation{bottom: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.bottom,div.border.top{height:4px}div.border.end,div.border.start{width:4px}}"; }
 };
 
 export { DeckdeckgoDragResizeRotate as deckgo_drr };

package.json

 {
   "name": "@deckdeckgo/drag-resize-rotate",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.3",
   "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

923585

increased by0.16%

Lines of code

14817

increased by0.06%

No dependency changes