Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@deckdeckgo/drag-resize-rotate

Package Overview
Dependencies
Maintainers
1
Versions
16
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 2.2.0 to 2.2.1

dist/cjs/index-f9bd1e30.js

4

dist/cjs/deckdeckgo-drag-resize-rotate.cjs.js
'use strict';
const index = require('./index-916ae86e.js');
const index = require('./index-f9bd1e30.js');
/*
Stencil Client Patch Browser v2.5.2 | MIT Licensed | https://stenciljs.com
Stencil Client Patch Browser v2.8.0 | MIT Licensed | https://stenciljs.com
*/

@@ -8,0 +8,0 @@ const patchBrowser = () => {

@@ -5,5 +5,5 @@ 'use strict';

const index = require('./index-916ae86e.js');
const index = require('./index-f9bd1e30.js');
function f(e){return e.changedTouches?e.changedTouches[0]:e}
function f(e){return e.changedTouches?e.changedTouches[0]:e}var l=()=>window&&window.getSelection?window.getSelection():document&&document.getSelection?document.getSelection():document&&document.selection?document.selection.createRange().text:null,I=e=>{if(window&&document&&document.createRange&&e){let n=document.createRange();n.selectNodeContents(e),n.collapse(!1);let t=l();t?.removeAllRanges(),t?.addRange(n);}};

@@ -70,3 +70,3 @@ const deckdeckgoDrrCss = ":host{display:flex;justify-content:center;align-items:center;contain:size;width:var(--width);height:var(--height);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);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;transform:translate(50%, -50%)}div.anchor.top.start{cursor:nw-resize;transform:translate(-50%, -50%)}div.anchor.end{right:0}div.anchor.bottom{bottom:0}div.anchor.bottom.end{cursor:se-resize;transform:translate(50%, 50%)}div.anchor.bottom.start{cursor:sw-resize;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%;transform:translate(-50%, -50%);cursor:n-resize}div.border.end{right:0;transform:translate(50%, -50%);cursor:e-resize}div.border.bottom{bottom:0;left:50%;transform:translate(-50%, 50%);cursor:s-resize}div.border.start{left:0;transform:translate(-50%, -50%);cursor:w-resize}div.rotate{position:absolute;top:0;left:50%;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%;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%;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}}";

}
// If we click elsewhere or select another component, then this component should loose focus and values need to be reset for next usage
// If we click elsewhere or select another component, then this component should lose focus and values need to be reset for next usage
if (!this.isTargetEvent($event)) {

@@ -107,3 +107,3 @@ this.stopAndReset(false);

element.focus();
await this.moveCursorToEnd(element);
I(element);
}

@@ -238,4 +238,6 @@ };

else {
this.parentWidth = this.unit === 'percentage' ? this.el.parentElement.offsetWidth : this.convertToUnit(this.el.parentElement.offsetWidth, 'width');
this.parentHeight = this.unit === 'percentage' ? this.el.parentElement.offsetHeight : this.convertToUnit(this.el.parentElement.offsetHeight, 'height');
this.parentWidth =
this.unit === 'percentage' ? this.el.parentElement.offsetWidth : this.convertToUnit(this.el.parentElement.offsetWidth, 'width');
this.parentHeight =
this.unit === 'percentage' ? this.el.parentElement.offsetHeight : this.convertToUnit(this.el.parentElement.offsetHeight, 'height');
}

@@ -353,3 +355,3 @@ }

x: this.dragBottom || this.dragTop ? 0 : currentX - this.startX,
y: this.dragStart || this.dragEnd ? 0 : currentY - this.startY,
y: this.dragStart || this.dragEnd ? 0 : currentY - this.startY
};

@@ -425,16 +427,5 @@ }

c,
d,
d
};
}
// https://stackoverflow.com/a/3866442/5404186
async moveCursorToEnd(contentEditableElement) {
if (window && document && document.createRange && contentEditableElement) {
const range = document.createRange();
range.selectNodeContents(contentEditableElement);
range.collapse(false);
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}
}
render() {

@@ -450,3 +441,3 @@ const widthUnit = this.unit === 'percentage' ? '%' : this.unit === 'viewport' ? 'vw' : this.unit;

'--pointer-events': `${this.editing ? 'all' : 'none'}`,
'--user-select': `${this.text ? 'text' : '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)));

@@ -462,3 +453,3 @@ }

index.h("div", { class: "anchor bottom start", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragBottomStart = true), onTouchStart: () => (this.dragBottomStart = true) }, index.h("div", null)),
index.h("div", { class: "anchor top start", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragTopStart = true), onTouchStart: () => (this.dragTopStart = true) }, index.h("div", null)),
index.h("div", { class: "anchor top start", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragTopStart = true), onTouchStart: () => (this.dragTopStart = true) }, index.h("div", null))
];

@@ -474,3 +465,3 @@ }

index.h("div", { class: "border bottom", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragBottom = true), onTouchStart: () => (this.dragBottom = true) }),
index.h("div", { class: "border start", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragStart = true), onTouchStart: () => (this.dragStart = true) }),
index.h("div", { class: "border start", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragStart = true), onTouchStart: () => (this.dragStart = true) })
];

@@ -477,0 +468,0 @@ }

@@ -5,6 +5,6 @@ 'use strict';

const index = require('./index-916ae86e.js');
const index = require('./index-f9bd1e30.js');
/*
Stencil Client Patch Esm v2.5.2 | MIT Licensed | https://stenciljs.com
Stencil Client Patch Esm v2.8.0 | MIT Licensed | https://stenciljs.com
*/

@@ -11,0 +11,0 @@ const patchEsm = () => {

@@ -7,3 +7,3 @@ {

"name": "@stencil/core",
"version": "2.5.2",
"version": "2.8.0",
"typescriptVersion": "4.2.3"

@@ -10,0 +10,0 @@ },

@@ -1,3 +0,3 @@

import { Component, h, Host, Prop, State, Element, Event, Build, Watch } from "@stencil/core";
import { unifyEvent } from '@deckdeckgo/utils';
import { Component, h, Host, Prop, State, Element, Event, Build, Watch } from '@stencil/core';
import { moveCursorToEnd, unifyEvent } from '@deckdeckgo/utils';
export class DeckdeckgoDragResizeRotate {

@@ -58,3 +58,3 @@ constructor() {

}
// If we click elsewhere or select another component, then this component should loose focus and values need to be reset for next usage
// If we click elsewhere or select another component, then this component should lose focus and values need to be reset for next usage
if (!this.isTargetEvent($event)) {

@@ -95,3 +95,3 @@ this.stopAndReset(false);

element.focus();
await this.moveCursorToEnd(element);
moveCursorToEnd(element);
}

@@ -226,4 +226,6 @@ };

else {
this.parentWidth = this.unit === 'percentage' ? this.el.parentElement.offsetWidth : this.convertToUnit(this.el.parentElement.offsetWidth, 'width');
this.parentHeight = this.unit === 'percentage' ? this.el.parentElement.offsetHeight : this.convertToUnit(this.el.parentElement.offsetHeight, 'height');
this.parentWidth =
this.unit === 'percentage' ? this.el.parentElement.offsetWidth : this.convertToUnit(this.el.parentElement.offsetWidth, 'width');
this.parentHeight =
this.unit === 'percentage' ? this.el.parentElement.offsetHeight : this.convertToUnit(this.el.parentElement.offsetHeight, 'height');
}

@@ -341,3 +343,3 @@ }

x: this.dragBottom || this.dragTop ? 0 : currentX - this.startX,
y: this.dragStart || this.dragEnd ? 0 : currentY - this.startY,
y: this.dragStart || this.dragEnd ? 0 : currentY - this.startY
};

@@ -413,16 +415,5 @@ }

c,
d,
d
};
}
// https://stackoverflow.com/a/3866442/5404186
async moveCursorToEnd(contentEditableElement) {
if (window && document && document.createRange && contentEditableElement) {
const range = document.createRange();
range.selectNodeContents(contentEditableElement);
range.collapse(false);
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}
}
render() {

@@ -438,3 +429,3 @@ const widthUnit = this.unit === 'percentage' ? '%' : this.unit === 'viewport' ? 'vw' : this.unit;

'--pointer-events': `${this.editing ? 'all' : 'none'}`,
'--user-select': `${this.text ? 'text' : 'none'}`,
'--user-select': `${this.text ? 'text' : 'none'}`
}, class: `${this.selected ? 'selected' : ''} ${this.text ? 'text' : ''} ${this.drag !== 'none' ? 'draggable' : ''} ${this.drag !== 'none' && this.moving ? 'drag' : ''}` },

@@ -458,3 +449,3 @@ this.renderEdgesAnchors(),

h("div", { class: "anchor top start", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragTopStart = true), onTouchStart: () => (this.dragTopStart = true) },
h("div", null)),
h("div", null))
];

@@ -470,3 +461,3 @@ }

h("div", { class: "border bottom", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragBottom = true), onTouchStart: () => (this.dragBottom = true) }),
h("div", { class: "border start", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragStart = true), onTouchStart: () => (this.dragStart = true) }),
h("div", { class: "border start", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragStart = true), onTouchStart: () => (this.dragStart = true) })
];

@@ -473,0 +464,0 @@ }

import { attachShadow, createEvent, Build, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
function f(e){return e.changedTouches?e.changedTouches[0]:e}
function f(e){return e.changedTouches?e.changedTouches[0]:e}var l=()=>window&&window.getSelection?window.getSelection():document&&document.getSelection?document.getSelection():document&&document.selection?document.selection.createRange().text:null,I=e=>{if(window&&document&&document.createRange&&e){let n=document.createRange();n.selectNodeContents(e),n.collapse(!1);let t=l();t?.removeAllRanges(),t?.addRange(n);}};

@@ -68,3 +68,3 @@ const deckdeckgoDrrCss = ":host{display:flex;justify-content:center;align-items:center;contain:size;width:var(--width);height:var(--height);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);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;transform:translate(50%, -50%)}div.anchor.top.start{cursor:nw-resize;transform:translate(-50%, -50%)}div.anchor.end{right:0}div.anchor.bottom{bottom:0}div.anchor.bottom.end{cursor:se-resize;transform:translate(50%, 50%)}div.anchor.bottom.start{cursor:sw-resize;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%;transform:translate(-50%, -50%);cursor:n-resize}div.border.end{right:0;transform:translate(50%, -50%);cursor:e-resize}div.border.bottom{bottom:0;left:50%;transform:translate(-50%, 50%);cursor:s-resize}div.border.start{left:0;transform:translate(-50%, -50%);cursor:w-resize}div.rotate{position:absolute;top:0;left:50%;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%;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%;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}}";

}
// If we click elsewhere or select another component, then this component should loose focus and values need to be reset for next usage
// If we click elsewhere or select another component, then this component should lose focus and values need to be reset for next usage
if (!this.isTargetEvent($event)) {

@@ -105,3 +105,3 @@ this.stopAndReset(false);

element.focus();
await this.moveCursorToEnd(element);
I(element);
}

@@ -236,4 +236,6 @@ };

else {
this.parentWidth = this.unit === 'percentage' ? this.el.parentElement.offsetWidth : this.convertToUnit(this.el.parentElement.offsetWidth, 'width');
this.parentHeight = this.unit === 'percentage' ? this.el.parentElement.offsetHeight : this.convertToUnit(this.el.parentElement.offsetHeight, 'height');
this.parentWidth =
this.unit === 'percentage' ? this.el.parentElement.offsetWidth : this.convertToUnit(this.el.parentElement.offsetWidth, 'width');
this.parentHeight =
this.unit === 'percentage' ? this.el.parentElement.offsetHeight : this.convertToUnit(this.el.parentElement.offsetHeight, 'height');
}

@@ -351,3 +353,3 @@ }

x: this.dragBottom || this.dragTop ? 0 : currentX - this.startX,
y: this.dragStart || this.dragEnd ? 0 : currentY - this.startY,
y: this.dragStart || this.dragEnd ? 0 : currentY - this.startY
};

@@ -423,16 +425,5 @@ }

c,
d,
d
};
}
// https://stackoverflow.com/a/3866442/5404186
async moveCursorToEnd(contentEditableElement) {
if (window && document && document.createRange && contentEditableElement) {
const range = document.createRange();
range.selectNodeContents(contentEditableElement);
range.collapse(false);
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}
}
render() {

@@ -448,3 +439,3 @@ const widthUnit = this.unit === 'percentage' ? '%' : this.unit === 'viewport' ? 'vw' : this.unit;

'--pointer-events': `${this.editing ? 'all' : 'none'}`,
'--user-select': `${this.text ? 'text' : '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)));

@@ -460,3 +451,3 @@ }

h("div", { class: "anchor bottom start", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragBottomStart = true), onTouchStart: () => (this.dragBottomStart = true) }, h("div", null)),
h("div", { class: "anchor top start", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragTopStart = true), onTouchStart: () => (this.dragTopStart = true) }, h("div", null)),
h("div", { class: "anchor top start", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragTopStart = true), onTouchStart: () => (this.dragTopStart = true) }, h("div", null))
];

@@ -472,3 +463,3 @@ }

h("div", { class: "border bottom", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragBottom = true), onTouchStart: () => (this.dragBottom = true) }),
h("div", { class: "border start", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragStart = true), onTouchStart: () => (this.dragStart = true) }),
h("div", { class: "border start", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragStart = true), onTouchStart: () => (this.dragStart = true) })
];

@@ -475,0 +466,0 @@ }

@@ -1,1 +0,1 @@

import{p as t,b as e}from"./p-04cf06ee.js";(()=>{const e=import.meta.url,i={};return""!==e&&(i.resourcesUrl=new URL(".",e).href),t(i)})().then((t=>e([["p-46ca341f",[[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]}]]]],t)));
import{p as e,b as t}from"./p-d5cea43e.js";(()=>{const t=import.meta.url,i={};return""!==t&&(i.resourcesUrl=new URL(".",t).href),e(i)})().then((e=>t([["p-e50e9e93",[[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)));

@@ -1,5 +0,5 @@

import { p as promiseResolve, b as bootstrapLazy } from './index-dea18ca4.js';
import { p as promiseResolve, b as bootstrapLazy } from './index-2b3565f2.js';
/*
Stencil Client Patch Browser v2.5.2 | MIT Licensed | https://stenciljs.com
Stencil Client Patch Browser v2.8.0 | MIT Licensed | https://stenciljs.com
*/

@@ -6,0 +6,0 @@ const patchBrowser = () => {

@@ -1,4 +0,4 @@

import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-dea18ca4.js';
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-2b3565f2.js';
function f(e){return e.changedTouches?e.changedTouches[0]:e}
function f(e){return e.changedTouches?e.changedTouches[0]:e}var l=()=>window&&window.getSelection?window.getSelection():document&&document.getSelection?document.getSelection():document&&document.selection?document.selection.createRange().text:null,I=e=>{if(window&&document&&document.createRange&&e){let n=document.createRange();n.selectNodeContents(e),n.collapse(!1);let t=l();t?.removeAllRanges(),t?.addRange(n);}};

@@ -65,3 +65,3 @@ const deckdeckgoDrrCss = ":host{display:flex;justify-content:center;align-items:center;contain:size;width:var(--width);height:var(--height);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);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;transform:translate(50%, -50%)}div.anchor.top.start{cursor:nw-resize;transform:translate(-50%, -50%)}div.anchor.end{right:0}div.anchor.bottom{bottom:0}div.anchor.bottom.end{cursor:se-resize;transform:translate(50%, 50%)}div.anchor.bottom.start{cursor:sw-resize;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%;transform:translate(-50%, -50%);cursor:n-resize}div.border.end{right:0;transform:translate(50%, -50%);cursor:e-resize}div.border.bottom{bottom:0;left:50%;transform:translate(-50%, 50%);cursor:s-resize}div.border.start{left:0;transform:translate(-50%, -50%);cursor:w-resize}div.rotate{position:absolute;top:0;left:50%;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%;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%;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}}";

}
// If we click elsewhere or select another component, then this component should loose focus and values need to be reset for next usage
// If we click elsewhere or select another component, then this component should lose focus and values need to be reset for next usage
if (!this.isTargetEvent($event)) {

@@ -102,3 +102,3 @@ this.stopAndReset(false);

element.focus();
await this.moveCursorToEnd(element);
I(element);
}

@@ -233,4 +233,6 @@ };

else {
this.parentWidth = this.unit === 'percentage' ? this.el.parentElement.offsetWidth : this.convertToUnit(this.el.parentElement.offsetWidth, 'width');
this.parentHeight = this.unit === 'percentage' ? this.el.parentElement.offsetHeight : this.convertToUnit(this.el.parentElement.offsetHeight, 'height');
this.parentWidth =
this.unit === 'percentage' ? this.el.parentElement.offsetWidth : this.convertToUnit(this.el.parentElement.offsetWidth, 'width');
this.parentHeight =
this.unit === 'percentage' ? this.el.parentElement.offsetHeight : this.convertToUnit(this.el.parentElement.offsetHeight, 'height');
}

@@ -348,3 +350,3 @@ }

x: this.dragBottom || this.dragTop ? 0 : currentX - this.startX,
y: this.dragStart || this.dragEnd ? 0 : currentY - this.startY,
y: this.dragStart || this.dragEnd ? 0 : currentY - this.startY
};

@@ -420,16 +422,5 @@ }

c,
d,
d
};
}
// https://stackoverflow.com/a/3866442/5404186
async moveCursorToEnd(contentEditableElement) {
if (window && document && document.createRange && contentEditableElement) {
const range = document.createRange();
range.selectNodeContents(contentEditableElement);
range.collapse(false);
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}
}
render() {

@@ -445,3 +436,3 @@ const widthUnit = this.unit === 'percentage' ? '%' : this.unit === 'viewport' ? 'vw' : this.unit;

'--pointer-events': `${this.editing ? 'all' : 'none'}`,
'--user-select': `${this.text ? 'text' : '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)));

@@ -457,3 +448,3 @@ }

h("div", { class: "anchor bottom start", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragBottomStart = true), onTouchStart: () => (this.dragBottomStart = true) }, h("div", null)),
h("div", { class: "anchor top start", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragTopStart = true), onTouchStart: () => (this.dragTopStart = true) }, h("div", null)),
h("div", { class: "anchor top start", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragTopStart = true), onTouchStart: () => (this.dragTopStart = true) }, h("div", null))
];

@@ -469,3 +460,3 @@ }

h("div", { class: "border bottom", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragBottom = true), onTouchStart: () => (this.dragBottom = true) }),
h("div", { class: "border start", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragStart = true), onTouchStart: () => (this.dragStart = true) }),
h("div", { class: "border start", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragStart = true), onTouchStart: () => (this.dragStart = true) })
];

@@ -472,0 +463,0 @@ }

@@ -1,5 +0,5 @@

import { p as promiseResolve, b as bootstrapLazy } from './index-dea18ca4.js';
import { p as promiseResolve, b as bootstrapLazy } from './index-2b3565f2.js';
/*
Stencil Client Patch Esm v2.5.2 | MIT Licensed | https://stenciljs.com
Stencil Client Patch Esm v2.8.0 | MIT Licensed | https://stenciljs.com
*/

@@ -6,0 +6,0 @@ const patchEsm = () => {

@@ -1,2 +0,2 @@

import { EventEmitter } from "../stencil-public-runtime";
import { EventEmitter } from '../stencil-public-runtime';
export declare class DeckdeckgoDragResizeRotate {

@@ -100,3 +100,2 @@ el: HTMLElement;

private dbclick;
private moveCursorToEnd;
render(): any;

@@ -103,0 +102,0 @@ private renderEdgesAnchors;

@@ -227,2 +227,9 @@ declare type CustomMethodDecorator<T> = (target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;

export declare function getMode<T = string | undefined>(ref: any): T;
export declare function setPlatformHelpers(helpers: {
jmp?: (c: any) => any;
raf?: (c: any) => number;
ael?: (el: any, eventName: string, listener: any, options: any) => void;
rel?: (el: any, eventName: string, listener: any, options: any) => void;
ce?: (eventName: string, opts?: any) => any;
}): void;
/**

@@ -676,2 +683,3 @@ * Get the base path to where the assets can be found. Use `setAssetPath(path)`

target?: string;
referrerPolicy?: ReferrerPolicy;
}

@@ -1164,47 +1172,47 @@ interface AudioHTMLAttributes<T> extends MediaHTMLAttributes<T> {

interface SVGAttributes<T = SVGElement> extends DOMAttributes<T> {
'class'?: string | {
class?: string | {
[className: string]: boolean;
};
'color'?: string;
'height'?: number | string;
'id'?: string;
'lang'?: string;
'max'?: number | string;
'media'?: string;
'method'?: string;
'min'?: number | string;
'name'?: string;
'style'?: {
color?: string;
height?: number | string;
id?: string;
lang?: string;
max?: number | string;
media?: string;
method?: string;
min?: number | string;
name?: string;
style?: {
[key: string]: string | undefined;
};
'target'?: string;
'type'?: string;
'width'?: number | string;
'role'?: string;
'tabindex'?: number;
target?: string;
type?: string;
width?: number | string;
role?: string;
tabindex?: number;
'accent-height'?: number | string;
'accumulate'?: 'none' | 'sum';
'additive'?: 'replace' | 'sum';
accumulate?: 'none' | 'sum';
additive?: 'replace' | 'sum';
'alignment-baseline'?: 'auto' | 'baseline' | 'before-edge' | 'text-before-edge' | 'middle' | 'central' | 'after-edge' | 'text-after-edge' | 'ideographic' | 'alphabetic' | 'hanging' | 'mathematical' | 'inherit';
'allowReorder'?: 'no' | 'yes';
'alphabetic'?: number | string;
'amplitude'?: number | string;
allowReorder?: 'no' | 'yes';
alphabetic?: number | string;
amplitude?: number | string;
'arabic-form'?: 'initial' | 'medial' | 'terminal' | 'isolated';
'ascent'?: number | string;
'attributeName'?: string;
'attributeType'?: string;
'autoReverse'?: number | string;
'azimuth'?: number | string;
'baseFrequency'?: number | string;
ascent?: number | string;
attributeName?: string;
attributeType?: string;
autoReverse?: number | string;
azimuth?: number | string;
baseFrequency?: number | string;
'baseline-shift'?: number | string;
'baseProfile'?: number | string;
'bbox'?: number | string;
'begin'?: number | string;
'bias'?: number | string;
'by'?: number | string;
'calcMode'?: number | string;
baseProfile?: number | string;
bbox?: number | string;
begin?: number | string;
bias?: number | string;
by?: number | string;
calcMode?: number | string;
'cap-height'?: number | string;
'clip'?: number | string;
clip?: number | string;
'clip-path'?: string;
'clipPathUnits'?: number | string;
clipPathUnits?: number | string;
'clip-rule'?: number | string;

@@ -1215,33 +1223,33 @@ 'color-interpolation'?: number | string;

'color-rendering'?: number | string;
'contentScriptType'?: number | string;
'contentStyleType'?: number | string;
'cursor'?: number | string;
'cx'?: number | string;
'cy'?: number | string;
'd'?: string;
'decelerate'?: number | string;
'descent'?: number | string;
'diffuseConstant'?: number | string;
'direction'?: number | string;
'display'?: number | string;
'divisor'?: number | string;
contentScriptType?: number | string;
contentStyleType?: number | string;
cursor?: number | string;
cx?: number | string;
cy?: number | string;
d?: string;
decelerate?: number | string;
descent?: number | string;
diffuseConstant?: number | string;
direction?: number | string;
display?: number | string;
divisor?: number | string;
'dominant-baseline'?: number | string;
'dur'?: number | string;
'dx'?: number | string;
'dy'?: number | string;
dur?: number | string;
dx?: number | string;
dy?: number | string;
'edge-mode'?: number | string;
'elevation'?: number | string;
elevation?: number | string;
'enable-background'?: number | string;
'end'?: number | string;
'exponent'?: number | string;
'externalResourcesRequired'?: number | string;
'fill'?: string;
end?: number | string;
exponent?: number | string;
externalResourcesRequired?: number | string;
fill?: string;
'fill-opacity'?: number | string;
'fill-rule'?: 'nonzero' | 'evenodd' | 'inherit';
'filter'?: string;
'filterRes'?: number | string;
'filterUnits'?: number | string;
filter?: string;
filterRes?: number | string;
filterUnits?: number | string;
'flood-color'?: number | string;
'flood-opacity'?: number | string;
'focusable'?: number | string;
focusable?: number | string;
'font-family'?: string;

@@ -1254,103 +1262,103 @@ 'font-size'?: number | string;

'font-weight'?: number | string;
'format'?: number | string;
'from'?: number | string;
'fx'?: number | string;
'fy'?: number | string;
'g1'?: number | string;
'g2'?: number | string;
format?: number | string;
from?: number | string;
fx?: number | string;
fy?: number | string;
g1?: number | string;
g2?: number | string;
'glyph-name'?: number | string;
'glyph-orientation-horizontal'?: number | string;
'glyph-orientation-vertical'?: number | string;
'glyphRef'?: number | string;
'gradientTransform'?: string;
'gradientUnits'?: string;
'hanging'?: number | string;
glyphRef?: number | string;
gradientTransform?: string;
gradientUnits?: string;
hanging?: number | string;
'horiz-adv-x'?: number | string;
'horiz-origin-x'?: number | string;
'href'?: string;
'ideographic'?: number | string;
href?: string;
ideographic?: number | string;
'image-rendering'?: number | string;
'in2'?: number | string;
'in'?: string;
'intercept'?: number | string;
'k1'?: number | string;
'k2'?: number | string;
'k3'?: number | string;
'k4'?: number | string;
'k'?: number | string;
'kernelMatrix'?: number | string;
'kernelUnitLength'?: number | string;
'kerning'?: number | string;
'keyPoints'?: number | string;
'keySplines'?: number | string;
'keyTimes'?: number | string;
'lengthAdjust'?: number | string;
in2?: number | string;
in?: string;
intercept?: number | string;
k1?: number | string;
k2?: number | string;
k3?: number | string;
k4?: number | string;
k?: number | string;
kernelMatrix?: number | string;
kernelUnitLength?: number | string;
kerning?: number | string;
keyPoints?: number | string;
keySplines?: number | string;
keyTimes?: number | string;
lengthAdjust?: number | string;
'letter-spacing'?: number | string;
'lighting-color'?: number | string;
'limitingConeAngle'?: number | string;
'local'?: number | string;
limitingConeAngle?: number | string;
local?: number | string;
'marker-end'?: string;
'markerHeight'?: number | string;
markerHeight?: number | string;
'marker-mid'?: string;
'marker-start'?: string;
'markerUnits'?: number | string;
'markerWidth'?: number | string;
'mask'?: string;
'maskContentUnits'?: number | string;
'maskUnits'?: number | string;
'mathematical'?: number | string;
'mode'?: number | string;
'numOctaves'?: number | string;
'offset'?: number | string;
'opacity'?: number | string;
'operator'?: number | string;
'order'?: number | string;
'orient'?: number | string;
'orientation'?: number | string;
'origin'?: number | string;
'overflow'?: number | string;
markerUnits?: number | string;
markerWidth?: number | string;
mask?: string;
maskContentUnits?: number | string;
maskUnits?: number | string;
mathematical?: number | string;
mode?: number | string;
numOctaves?: number | string;
offset?: number | string;
opacity?: number | string;
operator?: number | string;
order?: number | string;
orient?: number | string;
orientation?: number | string;
origin?: number | string;
overflow?: number | string;
'overline-position'?: number | string;
'overline-thickness'?: number | string;
'paint-order'?: number | string;
'panose1'?: number | string;
'pathLength'?: number | string;
'patternContentUnits'?: string;
'patternTransform'?: number | string;
'patternUnits'?: string;
panose1?: number | string;
pathLength?: number | string;
patternContentUnits?: string;
patternTransform?: number | string;
patternUnits?: string;
'pointer-events'?: number | string;
'points'?: string;
'pointsAtX'?: number | string;
'pointsAtY'?: number | string;
'pointsAtZ'?: number | string;
'preserveAlpha'?: number | string;
'preserveAspectRatio'?: string;
'primitiveUnits'?: number | string;
'r'?: number | string;
'radius'?: number | string;
'refX'?: number | string;
'refY'?: number | string;
points?: string;
pointsAtX?: number | string;
pointsAtY?: number | string;
pointsAtZ?: number | string;
preserveAlpha?: number | string;
preserveAspectRatio?: string;
primitiveUnits?: number | string;
r?: number | string;
radius?: number | string;
refX?: number | string;
refY?: number | string;
'rendering-intent'?: number | string;
'repeatCount'?: number | string;
'repeatDur'?: number | string;
'requiredextensions'?: number | string;
'requiredFeatures'?: number | string;
'restart'?: number | string;
'result'?: string;
'rotate'?: number | string;
'rx'?: number | string;
'ry'?: number | string;
'scale'?: number | string;
'seed'?: number | string;
repeatCount?: number | string;
repeatDur?: number | string;
requiredextensions?: number | string;
requiredFeatures?: number | string;
restart?: number | string;
result?: string;
rotate?: number | string;
rx?: number | string;
ry?: number | string;
scale?: number | string;
seed?: number | string;
'shape-rendering'?: number | string;
'slope'?: number | string;
'spacing'?: number | string;
'specularConstant'?: number | string;
'specularExponent'?: number | string;
'speed'?: number | string;
'spreadMethod'?: string;
'startOffset'?: number | string;
'stdDeviation'?: number | string;
'stemh'?: number | string;
'stemv'?: number | string;
'stitchTiles'?: number | string;
slope?: number | string;
spacing?: number | string;
specularConstant?: number | string;
specularExponent?: number | string;
speed?: number | string;
spreadMethod?: string;
startOffset?: number | string;
stdDeviation?: number | string;
stemh?: number | string;
stemv?: number | string;
stitchTiles?: number | string;
'stop-color'?: string;

@@ -1360,4 +1368,4 @@ 'stop-opacity'?: number | string;

'strikethrough-thickness'?: number | string;
'string'?: number | string;
'stroke'?: string;
string?: number | string;
stroke?: string;
'stroke-dasharray'?: string | number;

@@ -1370,18 +1378,18 @@ 'stroke-dashoffset'?: string | number;

'stroke-width'?: number | string;
'surfaceScale'?: number | string;
'systemLanguage'?: number | string;
'tableValues'?: number | string;
'targetX'?: number | string;
'targetY'?: number | string;
surfaceScale?: number | string;
systemLanguage?: number | string;
tableValues?: number | string;
targetX?: number | string;
targetY?: number | string;
'text-anchor'?: string;
'text-decoration'?: number | string;
'textLength'?: number | string;
textLength?: number | string;
'text-rendering'?: number | string;
'to'?: number | string;
'transform'?: string;
'u1'?: number | string;
'u2'?: number | string;
to?: number | string;
transform?: string;
u1?: number | string;
u2?: number | string;
'underline-position'?: number | string;
'underline-thickness'?: number | string;
'unicode'?: number | string;
unicode?: number | string;
'unicode-bidi'?: number | string;

@@ -1391,5 +1399,5 @@ 'unicode-range'?: number | string;

'v-alphabetic'?: number | string;
'values'?: string;
values?: string;
'vector-effect'?: number | string;
'version'?: string;
version?: string;
'vert-adv-y'?: number | string;

@@ -1400,31 +1408,31 @@ 'vert-origin-x'?: number | string;

'v-ideographic'?: number | string;
'viewBox'?: string;
'viewTarget'?: number | string;
'visibility'?: number | string;
viewBox?: string;
viewTarget?: number | string;
visibility?: number | string;
'v-mathematical'?: number | string;
'widths'?: number | string;
widths?: number | string;
'word-spacing'?: number | string;
'writing-mode'?: number | string;
'x1'?: number | string;
'x2'?: number | string;
'x'?: number | string;
x1?: number | string;
x2?: number | string;
x?: number | string;
'x-channel-selector'?: string;
'x-height'?: number | string;
'xlinkActuate'?: string;
'xlinkArcrole'?: string;
'xlinkHref'?: string;
'xlinkRole'?: string;
'xlinkShow'?: string;
'xlinkTitle'?: string;
'xlinkType'?: string;
'xmlBase'?: string;
'xmlLang'?: string;
'xmlns'?: string;
'xmlSpace'?: string;
'y1'?: number | string;
'y2'?: number | string;
'y'?: number | string;
'yChannelSelector'?: string;
'z'?: number | string;
'zoomAndPan'?: string;
xlinkActuate?: string;
xlinkArcrole?: string;
xlinkHref?: string;
xlinkRole?: string;
xlinkShow?: string;
xlinkTitle?: string;
xlinkType?: string;
xmlBase?: string;
xmlLang?: string;
xmlns?: string;
xmlSpace?: string;
y1?: number | string;
y2?: number | string;
y?: number | string;
yChannelSelector?: string;
z?: number | string;
zoomAndPan?: string;
}

@@ -1431,0 +1439,0 @@ interface DOMAttributes<T = Element> {

{
"name": "@deckdeckgo/drag-resize-rotate",
"version": "2.2.0",
"version": "2.2.1",
"description": "A Web Component to drag, resize and rotate any element",

@@ -26,22 +26,7 @@ "main": "dist/index.cjs.js",

},
"devDependencies": {
"@stencil/core": "^2.5.2",
"@stencil/postcss": "^2.0.0",
"@stencil/sass": "^1.4.1",
"@stencil/utils": "0.0.5",
"@types/jest": "26.0.23",
"@types/prismjs": "^1.16.5",
"@types/puppeteer": "5.4.3",
"autoprefixer": "^10.2.6",
"husky": "^6.0.0",
"jest": "26.4.2",
"jest-cli": "26.4.2",
"prettier": "2.3.0",
"pretty-quick": "^3.1.0",
"puppeteer": "9.1.1"
},
"license": "MIT",
"repository": {
"type": "git",
"url": "git+https://github.com/deckgo/deckdeckgo.git"
"url": "git+https://github.com/deckgo/deckdeckgo.git",
"directory": "webcomponents/drag-resize-rotate"
},

@@ -66,10 +51,5 @@ "author": "David Dal Busco",

],
"husky": {
"hooks": {
"pre-commit": "pretty-quick --staged"
}
},
"dependencies": {
"@deckdeckgo/utils": "^2.0.1"
"@deckdeckgo/utils": "^2.2.0"
}
}

@@ -7,3 +7,3 @@ [![npm][npm-badge]][npm-badge-url]

[npm-license]: https://img.shields.io/npm/l/@deckdeckgo/drag-resize-rotate
[npm-license-url]: https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/drag-resize-rotate/LICENSE
[npm-license-url]: https://github.com/deckgo/deckdeckgo/blob/main/webcomponents/drag-resize-rotate/LICENSE

@@ -17,3 +17,2 @@ # DeckDeckGo - Draggable, Resizable and Rotatable

- [Getting Started](#getting-started)
- [Develop](#develop)
- [License](#license)

@@ -25,13 +24,2 @@

## Develop
To develop and run this Web Component locally, proceed as following:
```
git clone https://github.com/deckgo/deckdeckgo
cd deckdeckgo/webcomponents/drag-resize-rotate
npm install
npm run start
```
## License

@@ -38,0 +26,0 @@

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc