@deckdeckgo/drag-resize-rotate
Advanced tools
Comparing version 1.0.0-beta.1 to 1.0.0-beta.2
@@ -0,1 +1,9 @@ | ||
| <a name="1.0.0-beta.2"></a> | ||
| # 1.0.0-beta.2 (2020-02-25) | ||
| ### Features | ||
| - sticky opposite corner on resizing (credits to @nmattia maths) | ||
| <a name="1.0.0-beta.1"></a> | ||
@@ -2,0 +10,0 @@ |
@@ -11,7 +11,2 @@ 'use strict'; | ||
| var ApplyOperation; | ||
| (function (ApplyOperation) { | ||
| ApplyOperation[ApplyOperation["ADD"] = 0] = "ADD"; | ||
| ApplyOperation[ApplyOperation["SUBSTRACT"] = 1] = "SUBSTRACT"; | ||
| })(ApplyOperation || (ApplyOperation = {})); | ||
| const DeckdeckgoDragResizeRotate = class { | ||
@@ -27,4 +22,4 @@ constructor(hostRef) { | ||
| this.rotation = true; | ||
| this.minWidth = 5; | ||
| this.minHeight = 5; | ||
| this.minWidth = 10; | ||
| this.minHeight = 10; | ||
| this.selected = false; | ||
@@ -123,4 +118,2 @@ this.updated = false; | ||
| this.rotate = this.el.style.getPropertyValue('--rotate') ? parseFloat(this.el.style.getPropertyValue('--rotate')) : 0; | ||
| this.minWidth = this.el.style.getPropertyValue('--min-width') ? parseFloat(this.el.style.getPropertyValue('--min-width')) : 5; | ||
| this.minHeight = this.el.style.getPropertyValue('--min-height') ? parseFloat(this.el.style.getPropertyValue('--min-height')) : 5; | ||
| resolve(); | ||
@@ -135,2 +128,52 @@ }); | ||
| } | ||
| async initStartPositions($event) { | ||
| this.startX = unifyEvent($event).clientX; | ||
| this.startY = unifyEvent($event).clientY; | ||
| await this.initParentSize(); | ||
| this.initStartPositionsMove(); | ||
| this.initStartPositionsRotation(); | ||
| this.initStartPositionsResize(); | ||
| } | ||
| initStartPositionsMove() { | ||
| this.startWidth = this.width; | ||
| this.startHeight = this.height; | ||
| this.startTop = this.top; | ||
| this.startLeft = this.left; | ||
| } | ||
| initStartPositionsRotation() { | ||
| this.centerX = this.el.getBoundingClientRect().left + this.el.offsetWidth / 2; | ||
| this.centerY = this.el.getBoundingClientRect().top + this.el.offsetHeight / 2; | ||
| } | ||
| initStartPositionsResize() { | ||
| const theta = (Math.PI * 2 * this.rotate) / 360; | ||
| const cos_t = Math.cos(theta); | ||
| 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 matrix = this.resizeMatrix(); | ||
| const c0_x = l + w / 2.0; | ||
| const c0_y = t + h / 2.0; | ||
| const q0_x = l + matrix.a * w; | ||
| const q0_y = t + matrix.b * h; | ||
| const p0_x = l + matrix.c * w; | ||
| const p0_y = t + matrix.d * h; | ||
| this.qp0_x = q0_x * cos_t - q0_y * sin_t - c0_x * cos_t + c0_y * sin_t + c0_x; | ||
| this.qp0_y = q0_x * sin_t + q0_y * cos_t - c0_x * sin_t - c0_y * cos_t + c0_y; | ||
| this.pp_x = p0_x * cos_t - p0_y * sin_t - c0_x * cos_t + c0_y * sin_t + c0_x; | ||
| this.pp_y = p0_x * sin_t + p0_y * cos_t - c0_x * sin_t - c0_y * cos_t + c0_y; | ||
| } | ||
| async initParentSize() { | ||
| // The deckgo-slide-aspect-ratio template exposes a getContainer function which return a reference to the effective container. | ||
| if (this.el.parentElement && typeof this.el.parentElement.getContainer === 'function') { | ||
| const parent = await this.el.parentElement.getContainer(); | ||
| this.parentWidth = this.unit === 'percentage' ? parent.offsetWidth : this.convertToUnit(parent.offsetWidth, 'width'); | ||
| this.parentHeight = this.unit === 'percentage' ? parent.offsetHeight : this.convertToUnit(parent.offsetHeight, 'height'); | ||
| } | ||
| 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'); | ||
| } | ||
| } | ||
| move($event) { | ||
@@ -141,9 +184,9 @@ if (!this.moving || this.drag === 'none') { | ||
| if (this.drag === 'x-axis') { | ||
| this.deltaMove($event, { left: ApplyOperation.ADD }); | ||
| this.deltaMove($event, false, true); | ||
| } | ||
| else if (this.drag === 'y-axis') { | ||
| this.deltaMove($event, { top: ApplyOperation.ADD }); | ||
| this.deltaMove($event, true, false); | ||
| } | ||
| else { | ||
| this.deltaMove($event, { top: ApplyOperation.ADD, left: ApplyOperation.ADD }); | ||
| this.deltaMove($event, true, true); | ||
| } | ||
@@ -156,94 +199,78 @@ return true; | ||
| } | ||
| if (!this.selected || !this.startX || !this.startY || !this.startWidth || !this.startHeight) { | ||
| if (!this.selected || !this.startX || !this.startY) { | ||
| return false; | ||
| } | ||
| if (this.dragBottomEnd) { | ||
| this.deltaResize($event, { width: ApplyOperation.ADD, height: ApplyOperation.ADD }); | ||
| if (!this.dragBottomEnd && | ||
| !this.dragTopEnd && | ||
| !this.dragBottomStart && | ||
| !this.dragTopStart && | ||
| !this.dragTop && | ||
| !this.dragEnd && | ||
| !this.dragBottom && | ||
| !this.dragStart) { | ||
| return false; | ||
| } | ||
| else if (this.dragTopEnd) { | ||
| this.deltaResize($event, { width: ApplyOperation.ADD, height: ApplyOperation.SUBSTRACT, top: ApplyOperation.ADD }); | ||
| } | ||
| else if (this.dragBottomStart) { | ||
| this.deltaResize($event, { width: ApplyOperation.SUBSTRACT, height: ApplyOperation.ADD, left: ApplyOperation.ADD }); | ||
| } | ||
| else if (this.dragTopStart) { | ||
| this.deltaResize($event, { | ||
| width: ApplyOperation.SUBSTRACT, | ||
| top: ApplyOperation.ADD, | ||
| height: ApplyOperation.SUBSTRACT, | ||
| left: ApplyOperation.ADD | ||
| }); | ||
| } | ||
| else if (this.dragTop) { | ||
| this.deltaResize($event, { top: ApplyOperation.ADD, height: ApplyOperation.SUBSTRACT }); | ||
| } | ||
| else if (this.dragEnd) { | ||
| this.deltaResize($event, { width: ApplyOperation.ADD }); | ||
| } | ||
| else if (this.dragBottom) { | ||
| this.deltaResize($event, { height: ApplyOperation.ADD }); | ||
| } | ||
| else if (this.dragStart) { | ||
| this.deltaResize($event, { left: ApplyOperation.ADD, width: ApplyOperation.SUBSTRACT }); | ||
| } | ||
| this.deltaResize($event); | ||
| return true; | ||
| } | ||
| deltaMove($event, attr) { | ||
| deltaMove($event, top, left) { | ||
| const delta = this.getDelta($event); | ||
| if (attr.top === ApplyOperation.ADD) { | ||
| const deltaX = this.convertToUnit(delta.x, 'width'); | ||
| const deltaY = this.convertToUnit(delta.y, 'height'); | ||
| if (top) { | ||
| const maxTop = this.convertParentUnit(this.parentHeight) - this.startHeight; | ||
| this.top = this.startTop + delta.y > 0 ? (this.startTop + delta.y < maxTop ? this.startTop + delta.y : maxTop) : 0; | ||
| this.top = this.startTop + deltaY > 0 ? (this.startTop + deltaY < maxTop ? this.startTop + deltaY : maxTop) : 0; | ||
| } | ||
| if (attr.left === ApplyOperation.ADD) { | ||
| if (left) { | ||
| const maxLeft = this.convertParentUnit(this.parentWidth) - this.startWidth; | ||
| this.left = this.startLeft + delta.x > 0 ? (this.startLeft + delta.x < maxLeft ? this.startLeft + delta.x : maxLeft) : 0; | ||
| this.left = this.startLeft + deltaX > 0 ? (this.startLeft + deltaX < maxLeft ? this.startLeft + deltaX : maxLeft) : 0; | ||
| } | ||
| } | ||
| deltaResize($event, attr) { | ||
| deltaResize($event) { | ||
| const delta = this.getDelta($event); | ||
| if (attr.width === ApplyOperation.ADD) { | ||
| const maxWidth = this.convertParentUnit(this.parentWidth) - this.startLeft; | ||
| this.width = this.startWidth + delta.x > this.minWidth ? (this.startWidth + delta.x < maxWidth ? this.startWidth + delta.x : maxWidth) : this.minWidth; | ||
| const qp_x = this.qp0_x + delta.x; | ||
| const qp_y = this.qp0_y + delta.y; | ||
| const cp_x = (qp_x + this.pp_x) / 2.0; | ||
| const cp_y = (qp_y + this.pp_y) / 2.0; | ||
| const mtheta = (-1 * Math.PI * 2 * this.rotate) / 360; | ||
| const cos_mt = Math.cos(mtheta); | ||
| const sin_mt = Math.sin(mtheta); | ||
| let q_x = qp_x * cos_mt - qp_y * sin_mt - cos_mt * cp_x + sin_mt * cp_y + cp_x; | ||
| let q_y = qp_x * sin_mt + qp_y * cos_mt - sin_mt * cp_x - cos_mt * cp_y + cp_y; | ||
| let p_x = this.pp_x * cos_mt - this.pp_y * sin_mt - cos_mt * cp_x + sin_mt * cp_y + cp_x; | ||
| let p_y = this.pp_x * sin_mt + this.pp_y * cos_mt - sin_mt * cp_x - cos_mt * cp_y + cp_y; | ||
| const matrix = this.resizeMatrix(); | ||
| const wtmp = matrix.a * (q_x - p_x) + matrix.c * (p_x - q_x); | ||
| const htmp = matrix.b * (q_y - p_y) + matrix.d * (p_y - q_y); | ||
| let w; | ||
| let h; | ||
| if (wtmp < this.minWidth || htmp < this.minHeight) { | ||
| w = Math.max(this.minWidth, wtmp); | ||
| h = Math.max(this.minHeight, htmp); | ||
| const theta = -1 * mtheta; | ||
| const cos_t = Math.cos(theta); | ||
| const sin_t = Math.sin(theta); | ||
| const dh_x = -sin_t * h; | ||
| const dh_y = cos_t * h; | ||
| const dw_x = cos_t * w; | ||
| const dw_y = sin_t * w; | ||
| const qp_x_min = this.pp_x + (matrix.a - matrix.c) * dw_x + (matrix.b - matrix.d) * dh_x; | ||
| const qp_y_min = this.pp_y + (matrix.a - matrix.c) * dw_y + (matrix.b - matrix.d) * dh_y; | ||
| const cp_x_min = (qp_x_min + this.pp_x) / 2.0; | ||
| const cp_y_min = (qp_y_min + this.pp_y) / 2.0; | ||
| q_x = qp_x_min * cos_mt - qp_y_min * sin_mt - cos_mt * cp_x_min + sin_mt * cp_y_min + cp_x_min; | ||
| q_y = qp_x_min * sin_mt + qp_y_min * cos_mt - sin_mt * cp_x_min - cos_mt * cp_y_min + cp_y_min; | ||
| p_x = this.pp_x * cos_mt - this.pp_y * sin_mt - cos_mt * cp_x_min + sin_mt * cp_y_min + cp_x_min; | ||
| p_y = this.pp_x * sin_mt + this.pp_y * cos_mt - sin_mt * cp_x_min - cos_mt * cp_y_min + cp_y_min; | ||
| } | ||
| else if (attr.width === ApplyOperation.SUBSTRACT) { | ||
| const maxWidth = this.startLeft + this.startWidth; | ||
| this.width = this.startWidth - delta.x > this.minWidth ? (this.startWidth - delta.x < maxWidth ? this.startWidth - delta.x : maxWidth) : this.minWidth; | ||
| else { | ||
| w = wtmp; | ||
| h = htmp; | ||
| } | ||
| if (attr.height === ApplyOperation.ADD) { | ||
| const maxHeight = this.convertParentUnit(this.parentHeight) - this.startTop; | ||
| this.height = | ||
| this.startHeight + delta.y > this.minHeight ? (this.startHeight + delta.y < maxHeight ? this.startHeight + delta.y : maxHeight) : this.minHeight; | ||
| } | ||
| else if (attr.height === ApplyOperation.SUBSTRACT) { | ||
| const maxHeight = this.startTop + this.startHeight; | ||
| this.height = | ||
| this.startHeight - delta.y > this.minHeight ? (this.startHeight - delta.y < maxHeight ? this.startHeight - delta.y : maxHeight) : this.minHeight; | ||
| } | ||
| if (attr.top === ApplyOperation.ADD) { | ||
| const maxTop = this.startTop + this.startHeight - this.minHeight; | ||
| this.top = this.startTop + delta.y > 0 ? (this.startTop + delta.y < maxTop ? this.startTop + delta.y : maxTop) : 0; | ||
| } | ||
| if (attr.left === ApplyOperation.ADD) { | ||
| const maxLeft = this.startLeft + this.startWidth - this.minWidth; | ||
| this.left = this.startLeft + delta.x > 0 ? (this.startLeft + delta.x < maxLeft ? this.startLeft + delta.x : maxLeft) : 0; | ||
| } | ||
| // TODO: Resize stick corner | ||
| // const currentX: number = unifyEvent($event).clientX; | ||
| // const currentY: number = unifyEvent($event).clientY; | ||
| // | ||
| // const phi: number = this.rotate !== undefined ? (this.rotate * Math.PI) / 180 : 0; | ||
| // | ||
| // const a = currentX; | ||
| // const b = -2 * (Math.cos(phi) * Math.sin(phi) * currentY); | ||
| // const c = -1 * Math.cos(phi) * this.width; | ||
| // const d = -1 * Math.sin(phi) * this.height; | ||
| // | ||
| // this.left = a + b + c + d; | ||
| // | ||
| // const e = 2 * (Math.cos(phi) * Math.sin(phi) * currentX); | ||
| // const f = currentY; | ||
| // const g = -1 * Math.cos(phi) * this.height; | ||
| // const h = -1 * Math.sin(phi) * this.width; | ||
| // | ||
| // this.top = -1 * (e + f + g + h); | ||
| const l = matrix.c * q_x + matrix.a * p_x; | ||
| const t = matrix.d * q_y + matrix.b * p_y; | ||
| this.left = this.convertToUnit(l, 'width'); | ||
| this.width = this.convertToUnit(w, 'width'); | ||
| this.top = this.convertToUnit(t, 'height'); | ||
| this.height = this.convertToUnit(h, 'height'); | ||
| } | ||
@@ -262,7 +289,5 @@ rotateShape($event) { | ||
| const currentY = unifyEvent($event).clientY; | ||
| const deltaX = this.convertToUnit(currentX - this.startX, 'width'); | ||
| const deltaY = this.convertToUnit(currentY - this.startY, 'height'); | ||
| return { | ||
| x: deltaX, | ||
| y: deltaY | ||
| x: this.dragBottom || this.dragTop ? 0 : currentX - this.startX, | ||
| y: this.dragStart || this.dragEnd ? 0 : currentY - this.startY | ||
| }; | ||
@@ -284,25 +309,2 @@ } | ||
| } | ||
| async initStartPositions($event) { | ||
| this.startX = unifyEvent($event).clientX; | ||
| this.startY = unifyEvent($event).clientY; | ||
| this.startWidth = this.width; | ||
| this.startHeight = this.height; | ||
| this.startTop = this.top; | ||
| this.startLeft = this.left; | ||
| await this.initParentSize(); | ||
| this.centerX = this.el.getBoundingClientRect().left + this.el.offsetWidth / 2; | ||
| this.centerY = this.el.getBoundingClientRect().top + this.el.offsetHeight / 2; | ||
| } | ||
| async initParentSize() { | ||
| // The deckgo-slide-aspect-ratio template exposes a getContainer function which return a reference to the effective container. | ||
| if (this.el.parentElement && typeof this.el.parentElement.getContainer === 'function') { | ||
| const parent = await this.el.parentElement.getContainer(); | ||
| this.parentWidth = this.unit === 'percentage' ? parent.offsetWidth : this.convertToUnit(parent.offsetWidth, 'width'); | ||
| this.parentHeight = this.unit === 'percentage' ? parent.offsetHeight : this.convertToUnit(parent.offsetHeight, 'height'); | ||
| } | ||
| 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'); | ||
| } | ||
| } | ||
| startMove() { | ||
@@ -353,2 +355,14 @@ if (this.dragBottomEnd || this.dragTopEnd || this.dragBottomStart || this.dragTopStart) { | ||
| } | ||
| resizeMatrix() { | ||
| const a = this.dragBottomEnd || this.dragTopEnd || this.dragEnd ? 1 : 0; | ||
| const b = this.dragBottomEnd || this.dragBottomStart || this.dragStart || this.dragBottom ? 1 : 0; | ||
| const c = a === 1 ? 0 : 1; | ||
| const d = b === 1 ? 0 : 1; | ||
| return { | ||
| a, | ||
| b, | ||
| c, | ||
| d | ||
| }; | ||
| } | ||
| render() { | ||
@@ -355,0 +369,0 @@ const widthUnit = this.unit === 'percentage' ? '%' : this.unit === 'viewport' ? 'vw' : this.unit; |
| import { h, Host } from "@stencil/core"; | ||
| import { unifyEvent } from '@deckdeckgo/utils'; | ||
| var ApplyOperation; | ||
| (function (ApplyOperation) { | ||
| ApplyOperation[ApplyOperation["ADD"] = 0] = "ADD"; | ||
| ApplyOperation[ApplyOperation["SUBSTRACT"] = 1] = "SUBSTRACT"; | ||
| })(ApplyOperation || (ApplyOperation = {})); | ||
| export class DeckdeckgoDragResizeRotate { | ||
@@ -17,4 +12,4 @@ constructor() { | ||
| this.rotation = true; | ||
| this.minWidth = 5; | ||
| this.minHeight = 5; | ||
| this.minWidth = 10; | ||
| this.minHeight = 10; | ||
| this.selected = false; | ||
@@ -111,4 +106,2 @@ this.updated = false; | ||
| this.rotate = this.el.style.getPropertyValue('--rotate') ? parseFloat(this.el.style.getPropertyValue('--rotate')) : 0; | ||
| this.minWidth = this.el.style.getPropertyValue('--min-width') ? parseFloat(this.el.style.getPropertyValue('--min-width')) : 5; | ||
| this.minHeight = this.el.style.getPropertyValue('--min-height') ? parseFloat(this.el.style.getPropertyValue('--min-height')) : 5; | ||
| resolve(); | ||
@@ -123,2 +116,52 @@ }); | ||
| } | ||
| async initStartPositions($event) { | ||
| this.startX = unifyEvent($event).clientX; | ||
| this.startY = unifyEvent($event).clientY; | ||
| await this.initParentSize(); | ||
| this.initStartPositionsMove(); | ||
| this.initStartPositionsRotation(); | ||
| this.initStartPositionsResize(); | ||
| } | ||
| initStartPositionsMove() { | ||
| this.startWidth = this.width; | ||
| this.startHeight = this.height; | ||
| this.startTop = this.top; | ||
| this.startLeft = this.left; | ||
| } | ||
| initStartPositionsRotation() { | ||
| this.centerX = this.el.getBoundingClientRect().left + this.el.offsetWidth / 2; | ||
| this.centerY = this.el.getBoundingClientRect().top + this.el.offsetHeight / 2; | ||
| } | ||
| initStartPositionsResize() { | ||
| const theta = (Math.PI * 2 * this.rotate) / 360; | ||
| const cos_t = Math.cos(theta); | ||
| 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 matrix = this.resizeMatrix(); | ||
| const c0_x = l + w / 2.0; | ||
| const c0_y = t + h / 2.0; | ||
| const q0_x = l + matrix.a * w; | ||
| const q0_y = t + matrix.b * h; | ||
| const p0_x = l + matrix.c * w; | ||
| const p0_y = t + matrix.d * h; | ||
| this.qp0_x = q0_x * cos_t - q0_y * sin_t - c0_x * cos_t + c0_y * sin_t + c0_x; | ||
| this.qp0_y = q0_x * sin_t + q0_y * cos_t - c0_x * sin_t - c0_y * cos_t + c0_y; | ||
| this.pp_x = p0_x * cos_t - p0_y * sin_t - c0_x * cos_t + c0_y * sin_t + c0_x; | ||
| this.pp_y = p0_x * sin_t + p0_y * cos_t - c0_x * sin_t - c0_y * cos_t + c0_y; | ||
| } | ||
| async initParentSize() { | ||
| // The deckgo-slide-aspect-ratio template exposes a getContainer function which return a reference to the effective container. | ||
| if (this.el.parentElement && typeof this.el.parentElement.getContainer === 'function') { | ||
| const parent = await this.el.parentElement.getContainer(); | ||
| this.parentWidth = this.unit === 'percentage' ? parent.offsetWidth : this.convertToUnit(parent.offsetWidth, 'width'); | ||
| this.parentHeight = this.unit === 'percentage' ? parent.offsetHeight : this.convertToUnit(parent.offsetHeight, 'height'); | ||
| } | ||
| 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'); | ||
| } | ||
| } | ||
| move($event) { | ||
@@ -129,9 +172,9 @@ if (!this.moving || this.drag === 'none') { | ||
| if (this.drag === 'x-axis') { | ||
| this.deltaMove($event, { left: ApplyOperation.ADD }); | ||
| this.deltaMove($event, false, true); | ||
| } | ||
| else if (this.drag === 'y-axis') { | ||
| this.deltaMove($event, { top: ApplyOperation.ADD }); | ||
| this.deltaMove($event, true, false); | ||
| } | ||
| else { | ||
| this.deltaMove($event, { top: ApplyOperation.ADD, left: ApplyOperation.ADD }); | ||
| this.deltaMove($event, true, true); | ||
| } | ||
@@ -144,94 +187,78 @@ return true; | ||
| } | ||
| if (!this.selected || !this.startX || !this.startY || !this.startWidth || !this.startHeight) { | ||
| if (!this.selected || !this.startX || !this.startY) { | ||
| return false; | ||
| } | ||
| if (this.dragBottomEnd) { | ||
| this.deltaResize($event, { width: ApplyOperation.ADD, height: ApplyOperation.ADD }); | ||
| if (!this.dragBottomEnd && | ||
| !this.dragTopEnd && | ||
| !this.dragBottomStart && | ||
| !this.dragTopStart && | ||
| !this.dragTop && | ||
| !this.dragEnd && | ||
| !this.dragBottom && | ||
| !this.dragStart) { | ||
| return false; | ||
| } | ||
| else if (this.dragTopEnd) { | ||
| this.deltaResize($event, { width: ApplyOperation.ADD, height: ApplyOperation.SUBSTRACT, top: ApplyOperation.ADD }); | ||
| } | ||
| else if (this.dragBottomStart) { | ||
| this.deltaResize($event, { width: ApplyOperation.SUBSTRACT, height: ApplyOperation.ADD, left: ApplyOperation.ADD }); | ||
| } | ||
| else if (this.dragTopStart) { | ||
| this.deltaResize($event, { | ||
| width: ApplyOperation.SUBSTRACT, | ||
| top: ApplyOperation.ADD, | ||
| height: ApplyOperation.SUBSTRACT, | ||
| left: ApplyOperation.ADD | ||
| }); | ||
| } | ||
| else if (this.dragTop) { | ||
| this.deltaResize($event, { top: ApplyOperation.ADD, height: ApplyOperation.SUBSTRACT }); | ||
| } | ||
| else if (this.dragEnd) { | ||
| this.deltaResize($event, { width: ApplyOperation.ADD }); | ||
| } | ||
| else if (this.dragBottom) { | ||
| this.deltaResize($event, { height: ApplyOperation.ADD }); | ||
| } | ||
| else if (this.dragStart) { | ||
| this.deltaResize($event, { left: ApplyOperation.ADD, width: ApplyOperation.SUBSTRACT }); | ||
| } | ||
| this.deltaResize($event); | ||
| return true; | ||
| } | ||
| deltaMove($event, attr) { | ||
| deltaMove($event, top, left) { | ||
| const delta = this.getDelta($event); | ||
| if (attr.top === ApplyOperation.ADD) { | ||
| const deltaX = this.convertToUnit(delta.x, 'width'); | ||
| const deltaY = this.convertToUnit(delta.y, 'height'); | ||
| if (top) { | ||
| const maxTop = this.convertParentUnit(this.parentHeight) - this.startHeight; | ||
| this.top = this.startTop + delta.y > 0 ? (this.startTop + delta.y < maxTop ? this.startTop + delta.y : maxTop) : 0; | ||
| this.top = this.startTop + deltaY > 0 ? (this.startTop + deltaY < maxTop ? this.startTop + deltaY : maxTop) : 0; | ||
| } | ||
| if (attr.left === ApplyOperation.ADD) { | ||
| if (left) { | ||
| const maxLeft = this.convertParentUnit(this.parentWidth) - this.startWidth; | ||
| this.left = this.startLeft + delta.x > 0 ? (this.startLeft + delta.x < maxLeft ? this.startLeft + delta.x : maxLeft) : 0; | ||
| this.left = this.startLeft + deltaX > 0 ? (this.startLeft + deltaX < maxLeft ? this.startLeft + deltaX : maxLeft) : 0; | ||
| } | ||
| } | ||
| deltaResize($event, attr) { | ||
| deltaResize($event) { | ||
| const delta = this.getDelta($event); | ||
| if (attr.width === ApplyOperation.ADD) { | ||
| const maxWidth = this.convertParentUnit(this.parentWidth) - this.startLeft; | ||
| this.width = this.startWidth + delta.x > this.minWidth ? (this.startWidth + delta.x < maxWidth ? this.startWidth + delta.x : maxWidth) : this.minWidth; | ||
| const qp_x = this.qp0_x + delta.x; | ||
| const qp_y = this.qp0_y + delta.y; | ||
| const cp_x = (qp_x + this.pp_x) / 2.0; | ||
| const cp_y = (qp_y + this.pp_y) / 2.0; | ||
| const mtheta = (-1 * Math.PI * 2 * this.rotate) / 360; | ||
| const cos_mt = Math.cos(mtheta); | ||
| const sin_mt = Math.sin(mtheta); | ||
| let q_x = qp_x * cos_mt - qp_y * sin_mt - cos_mt * cp_x + sin_mt * cp_y + cp_x; | ||
| let q_y = qp_x * sin_mt + qp_y * cos_mt - sin_mt * cp_x - cos_mt * cp_y + cp_y; | ||
| let p_x = this.pp_x * cos_mt - this.pp_y * sin_mt - cos_mt * cp_x + sin_mt * cp_y + cp_x; | ||
| let p_y = this.pp_x * sin_mt + this.pp_y * cos_mt - sin_mt * cp_x - cos_mt * cp_y + cp_y; | ||
| const matrix = this.resizeMatrix(); | ||
| const wtmp = matrix.a * (q_x - p_x) + matrix.c * (p_x - q_x); | ||
| const htmp = matrix.b * (q_y - p_y) + matrix.d * (p_y - q_y); | ||
| let w; | ||
| let h; | ||
| if (wtmp < this.minWidth || htmp < this.minHeight) { | ||
| w = Math.max(this.minWidth, wtmp); | ||
| h = Math.max(this.minHeight, htmp); | ||
| const theta = -1 * mtheta; | ||
| const cos_t = Math.cos(theta); | ||
| const sin_t = Math.sin(theta); | ||
| const dh_x = -sin_t * h; | ||
| const dh_y = cos_t * h; | ||
| const dw_x = cos_t * w; | ||
| const dw_y = sin_t * w; | ||
| const qp_x_min = this.pp_x + (matrix.a - matrix.c) * dw_x + (matrix.b - matrix.d) * dh_x; | ||
| const qp_y_min = this.pp_y + (matrix.a - matrix.c) * dw_y + (matrix.b - matrix.d) * dh_y; | ||
| const cp_x_min = (qp_x_min + this.pp_x) / 2.0; | ||
| const cp_y_min = (qp_y_min + this.pp_y) / 2.0; | ||
| q_x = qp_x_min * cos_mt - qp_y_min * sin_mt - cos_mt * cp_x_min + sin_mt * cp_y_min + cp_x_min; | ||
| q_y = qp_x_min * sin_mt + qp_y_min * cos_mt - sin_mt * cp_x_min - cos_mt * cp_y_min + cp_y_min; | ||
| p_x = this.pp_x * cos_mt - this.pp_y * sin_mt - cos_mt * cp_x_min + sin_mt * cp_y_min + cp_x_min; | ||
| p_y = this.pp_x * sin_mt + this.pp_y * cos_mt - sin_mt * cp_x_min - cos_mt * cp_y_min + cp_y_min; | ||
| } | ||
| else if (attr.width === ApplyOperation.SUBSTRACT) { | ||
| const maxWidth = this.startLeft + this.startWidth; | ||
| this.width = this.startWidth - delta.x > this.minWidth ? (this.startWidth - delta.x < maxWidth ? this.startWidth - delta.x : maxWidth) : this.minWidth; | ||
| else { | ||
| w = wtmp; | ||
| h = htmp; | ||
| } | ||
| if (attr.height === ApplyOperation.ADD) { | ||
| const maxHeight = this.convertParentUnit(this.parentHeight) - this.startTop; | ||
| this.height = | ||
| this.startHeight + delta.y > this.minHeight ? (this.startHeight + delta.y < maxHeight ? this.startHeight + delta.y : maxHeight) : this.minHeight; | ||
| } | ||
| else if (attr.height === ApplyOperation.SUBSTRACT) { | ||
| const maxHeight = this.startTop + this.startHeight; | ||
| this.height = | ||
| this.startHeight - delta.y > this.minHeight ? (this.startHeight - delta.y < maxHeight ? this.startHeight - delta.y : maxHeight) : this.minHeight; | ||
| } | ||
| if (attr.top === ApplyOperation.ADD) { | ||
| const maxTop = this.startTop + this.startHeight - this.minHeight; | ||
| this.top = this.startTop + delta.y > 0 ? (this.startTop + delta.y < maxTop ? this.startTop + delta.y : maxTop) : 0; | ||
| } | ||
| if (attr.left === ApplyOperation.ADD) { | ||
| const maxLeft = this.startLeft + this.startWidth - this.minWidth; | ||
| this.left = this.startLeft + delta.x > 0 ? (this.startLeft + delta.x < maxLeft ? this.startLeft + delta.x : maxLeft) : 0; | ||
| } | ||
| // TODO: Resize stick corner | ||
| // const currentX: number = unifyEvent($event).clientX; | ||
| // const currentY: number = unifyEvent($event).clientY; | ||
| // | ||
| // const phi: number = this.rotate !== undefined ? (this.rotate * Math.PI) / 180 : 0; | ||
| // | ||
| // const a = currentX; | ||
| // const b = -2 * (Math.cos(phi) * Math.sin(phi) * currentY); | ||
| // const c = -1 * Math.cos(phi) * this.width; | ||
| // const d = -1 * Math.sin(phi) * this.height; | ||
| // | ||
| // this.left = a + b + c + d; | ||
| // | ||
| // const e = 2 * (Math.cos(phi) * Math.sin(phi) * currentX); | ||
| // const f = currentY; | ||
| // const g = -1 * Math.cos(phi) * this.height; | ||
| // const h = -1 * Math.sin(phi) * this.width; | ||
| // | ||
| // this.top = -1 * (e + f + g + h); | ||
| const l = matrix.c * q_x + matrix.a * p_x; | ||
| const t = matrix.d * q_y + matrix.b * p_y; | ||
| this.left = this.convertToUnit(l, 'width'); | ||
| this.width = this.convertToUnit(w, 'width'); | ||
| this.top = this.convertToUnit(t, 'height'); | ||
| this.height = this.convertToUnit(h, 'height'); | ||
| } | ||
@@ -250,7 +277,5 @@ rotateShape($event) { | ||
| const currentY = unifyEvent($event).clientY; | ||
| const deltaX = this.convertToUnit(currentX - this.startX, 'width'); | ||
| const deltaY = this.convertToUnit(currentY - this.startY, 'height'); | ||
| return { | ||
| x: deltaX, | ||
| y: deltaY | ||
| x: this.dragBottom || this.dragTop ? 0 : currentX - this.startX, | ||
| y: this.dragStart || this.dragEnd ? 0 : currentY - this.startY | ||
| }; | ||
@@ -272,25 +297,2 @@ } | ||
| } | ||
| async initStartPositions($event) { | ||
| this.startX = unifyEvent($event).clientX; | ||
| this.startY = unifyEvent($event).clientY; | ||
| this.startWidth = this.width; | ||
| this.startHeight = this.height; | ||
| this.startTop = this.top; | ||
| this.startLeft = this.left; | ||
| await this.initParentSize(); | ||
| this.centerX = this.el.getBoundingClientRect().left + this.el.offsetWidth / 2; | ||
| this.centerY = this.el.getBoundingClientRect().top + this.el.offsetHeight / 2; | ||
| } | ||
| async initParentSize() { | ||
| // The deckgo-slide-aspect-ratio template exposes a getContainer function which return a reference to the effective container. | ||
| if (this.el.parentElement && typeof this.el.parentElement.getContainer === 'function') { | ||
| const parent = await this.el.parentElement.getContainer(); | ||
| this.parentWidth = this.unit === 'percentage' ? parent.offsetWidth : this.convertToUnit(parent.offsetWidth, 'width'); | ||
| this.parentHeight = this.unit === 'percentage' ? parent.offsetHeight : this.convertToUnit(parent.offsetHeight, 'height'); | ||
| } | ||
| 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'); | ||
| } | ||
| } | ||
| startMove() { | ||
@@ -341,2 +343,14 @@ if (this.dragBottomEnd || this.dragTopEnd || this.dragBottomStart || this.dragTopStart) { | ||
| } | ||
| resizeMatrix() { | ||
| const a = this.dragBottomEnd || this.dragTopEnd || this.dragEnd ? 1 : 0; | ||
| const b = this.dragBottomEnd || this.dragBottomStart || this.dragStart || this.dragBottom ? 1 : 0; | ||
| const c = a === 1 ? 0 : 1; | ||
| const d = b === 1 ? 0 : 1; | ||
| return { | ||
| a, | ||
| b, | ||
| c, | ||
| d | ||
| }; | ||
| } | ||
| render() { | ||
@@ -343,0 +357,0 @@ const widthUnit = this.unit === 'percentage' ? '%' : this.unit === 'viewport' ? 'vw' : this.unit; |
@@ -1,1 +0,1 @@ | ||
| import{p as t,b as e}from"./p-6f05f556.js";t().then(t=>e([["p-on0qbgej",[[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 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)); |
@@ -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-qildddu2.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-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)}))}}})); |
@@ -41,7 +41,2 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { | ||
| } | ||
| var ApplyOperation; | ||
| (function (ApplyOperation) { | ||
| ApplyOperation[ApplyOperation["ADD"] = 0] = "ADD"; | ||
| ApplyOperation[ApplyOperation["SUBSTRACT"] = 1] = "SUBSTRACT"; | ||
| })(ApplyOperation || (ApplyOperation = {})); | ||
| var DeckdeckgoDragResizeRotate = /** @class */ (function () { | ||
@@ -58,4 +53,4 @@ function class_1(hostRef) { | ||
| this.rotation = true; | ||
| this.minWidth = 5; | ||
| this.minHeight = 5; | ||
| this.minWidth = 10; | ||
| this.minHeight = 10; | ||
| this.selected = false; | ||
@@ -205,4 +200,2 @@ this.updated = false; | ||
| _this.rotate = _this.el.style.getPropertyValue('--rotate') ? parseFloat(_this.el.style.getPropertyValue('--rotate')) : 0; | ||
| _this.minWidth = _this.el.style.getPropertyValue('--min-width') ? parseFloat(_this.el.style.getPropertyValue('--min-width')) : 5; | ||
| _this.minHeight = _this.el.style.getPropertyValue('--min-height') ? parseFloat(_this.el.style.getPropertyValue('--min-height')) : 5; | ||
| resolve(); | ||
@@ -223,2 +216,72 @@ }); | ||
| }; | ||
| class_1.prototype.initStartPositions = function ($event) { | ||
| return __awaiter(this, void 0, void 0, function () { | ||
| return __generator(this, function (_a) { | ||
| switch (_a.label) { | ||
| case 0: | ||
| this.startX = unifyEvent($event).clientX; | ||
| this.startY = unifyEvent($event).clientY; | ||
| return [4 /*yield*/, this.initParentSize()]; | ||
| case 1: | ||
| _a.sent(); | ||
| this.initStartPositionsMove(); | ||
| this.initStartPositionsRotation(); | ||
| this.initStartPositionsResize(); | ||
| return [2 /*return*/]; | ||
| } | ||
| }); | ||
| }); | ||
| }; | ||
| class_1.prototype.initStartPositionsMove = function () { | ||
| this.startWidth = this.width; | ||
| this.startHeight = this.height; | ||
| this.startTop = this.top; | ||
| this.startLeft = this.left; | ||
| }; | ||
| class_1.prototype.initStartPositionsRotation = function () { | ||
| this.centerX = this.el.getBoundingClientRect().left + this.el.offsetWidth / 2; | ||
| this.centerY = this.el.getBoundingClientRect().top + this.el.offsetHeight / 2; | ||
| }; | ||
| class_1.prototype.initStartPositionsResize = function () { | ||
| var theta = (Math.PI * 2 * this.rotate) / 360; | ||
| var cos_t = Math.cos(theta); | ||
| 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 matrix = this.resizeMatrix(); | ||
| var c0_x = l + w / 2.0; | ||
| var c0_y = t + h / 2.0; | ||
| var q0_x = l + matrix.a * w; | ||
| var q0_y = t + matrix.b * h; | ||
| var p0_x = l + matrix.c * w; | ||
| var p0_y = t + matrix.d * h; | ||
| this.qp0_x = q0_x * cos_t - q0_y * sin_t - c0_x * cos_t + c0_y * sin_t + c0_x; | ||
| this.qp0_y = q0_x * sin_t + q0_y * cos_t - c0_x * sin_t - c0_y * cos_t + c0_y; | ||
| this.pp_x = p0_x * cos_t - p0_y * sin_t - c0_x * cos_t + c0_y * sin_t + c0_x; | ||
| this.pp_y = p0_x * sin_t + p0_y * cos_t - c0_x * sin_t - c0_y * cos_t + c0_y; | ||
| }; | ||
| class_1.prototype.initParentSize = function () { | ||
| return __awaiter(this, void 0, void 0, function () { | ||
| var parent; | ||
| return __generator(this, function (_a) { | ||
| switch (_a.label) { | ||
| case 0: | ||
| if (!(this.el.parentElement && typeof this.el.parentElement.getContainer === 'function')) return [3 /*break*/, 2]; | ||
| return [4 /*yield*/, this.el.parentElement.getContainer()]; | ||
| case 1: | ||
| parent = _a.sent(); | ||
| this.parentWidth = this.unit === 'percentage' ? parent.offsetWidth : this.convertToUnit(parent.offsetWidth, 'width'); | ||
| this.parentHeight = this.unit === 'percentage' ? parent.offsetHeight : this.convertToUnit(parent.offsetHeight, 'height'); | ||
| return [3 /*break*/, 3]; | ||
| case 2: | ||
| 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'); | ||
| _a.label = 3; | ||
| case 3: return [2 /*return*/]; | ||
| } | ||
| }); | ||
| }); | ||
| }; | ||
| class_1.prototype.move = function ($event) { | ||
@@ -229,9 +292,9 @@ if (!this.moving || this.drag === 'none') { | ||
| if (this.drag === 'x-axis') { | ||
| this.deltaMove($event, { left: ApplyOperation.ADD }); | ||
| this.deltaMove($event, false, true); | ||
| } | ||
| else if (this.drag === 'y-axis') { | ||
| this.deltaMove($event, { top: ApplyOperation.ADD }); | ||
| this.deltaMove($event, true, false); | ||
| } | ||
| else { | ||
| this.deltaMove($event, { top: ApplyOperation.ADD, left: ApplyOperation.ADD }); | ||
| this.deltaMove($event, true, true); | ||
| } | ||
@@ -244,94 +307,78 @@ return true; | ||
| } | ||
| if (!this.selected || !this.startX || !this.startY || !this.startWidth || !this.startHeight) { | ||
| if (!this.selected || !this.startX || !this.startY) { | ||
| return false; | ||
| } | ||
| if (this.dragBottomEnd) { | ||
| this.deltaResize($event, { width: ApplyOperation.ADD, height: ApplyOperation.ADD }); | ||
| if (!this.dragBottomEnd && | ||
| !this.dragTopEnd && | ||
| !this.dragBottomStart && | ||
| !this.dragTopStart && | ||
| !this.dragTop && | ||
| !this.dragEnd && | ||
| !this.dragBottom && | ||
| !this.dragStart) { | ||
| return false; | ||
| } | ||
| else if (this.dragTopEnd) { | ||
| this.deltaResize($event, { width: ApplyOperation.ADD, height: ApplyOperation.SUBSTRACT, top: ApplyOperation.ADD }); | ||
| } | ||
| else if (this.dragBottomStart) { | ||
| this.deltaResize($event, { width: ApplyOperation.SUBSTRACT, height: ApplyOperation.ADD, left: ApplyOperation.ADD }); | ||
| } | ||
| else if (this.dragTopStart) { | ||
| this.deltaResize($event, { | ||
| width: ApplyOperation.SUBSTRACT, | ||
| top: ApplyOperation.ADD, | ||
| height: ApplyOperation.SUBSTRACT, | ||
| left: ApplyOperation.ADD | ||
| }); | ||
| } | ||
| else if (this.dragTop) { | ||
| this.deltaResize($event, { top: ApplyOperation.ADD, height: ApplyOperation.SUBSTRACT }); | ||
| } | ||
| else if (this.dragEnd) { | ||
| this.deltaResize($event, { width: ApplyOperation.ADD }); | ||
| } | ||
| else if (this.dragBottom) { | ||
| this.deltaResize($event, { height: ApplyOperation.ADD }); | ||
| } | ||
| else if (this.dragStart) { | ||
| this.deltaResize($event, { left: ApplyOperation.ADD, width: ApplyOperation.SUBSTRACT }); | ||
| } | ||
| this.deltaResize($event); | ||
| return true; | ||
| }; | ||
| class_1.prototype.deltaMove = function ($event, attr) { | ||
| class_1.prototype.deltaMove = function ($event, top, left) { | ||
| var delta = this.getDelta($event); | ||
| if (attr.top === ApplyOperation.ADD) { | ||
| var deltaX = this.convertToUnit(delta.x, 'width'); | ||
| var deltaY = this.convertToUnit(delta.y, 'height'); | ||
| if (top) { | ||
| var maxTop = this.convertParentUnit(this.parentHeight) - this.startHeight; | ||
| this.top = this.startTop + delta.y > 0 ? (this.startTop + delta.y < maxTop ? this.startTop + delta.y : maxTop) : 0; | ||
| this.top = this.startTop + deltaY > 0 ? (this.startTop + deltaY < maxTop ? this.startTop + deltaY : maxTop) : 0; | ||
| } | ||
| if (attr.left === ApplyOperation.ADD) { | ||
| if (left) { | ||
| var maxLeft = this.convertParentUnit(this.parentWidth) - this.startWidth; | ||
| this.left = this.startLeft + delta.x > 0 ? (this.startLeft + delta.x < maxLeft ? this.startLeft + delta.x : maxLeft) : 0; | ||
| this.left = this.startLeft + deltaX > 0 ? (this.startLeft + deltaX < maxLeft ? this.startLeft + deltaX : maxLeft) : 0; | ||
| } | ||
| }; | ||
| class_1.prototype.deltaResize = function ($event, attr) { | ||
| class_1.prototype.deltaResize = function ($event) { | ||
| var delta = this.getDelta($event); | ||
| if (attr.width === ApplyOperation.ADD) { | ||
| var maxWidth = this.convertParentUnit(this.parentWidth) - this.startLeft; | ||
| this.width = this.startWidth + delta.x > this.minWidth ? (this.startWidth + delta.x < maxWidth ? this.startWidth + delta.x : maxWidth) : this.minWidth; | ||
| var qp_x = this.qp0_x + delta.x; | ||
| var qp_y = this.qp0_y + delta.y; | ||
| var cp_x = (qp_x + this.pp_x) / 2.0; | ||
| var cp_y = (qp_y + this.pp_y) / 2.0; | ||
| var mtheta = (-1 * Math.PI * 2 * this.rotate) / 360; | ||
| var cos_mt = Math.cos(mtheta); | ||
| var sin_mt = Math.sin(mtheta); | ||
| var q_x = qp_x * cos_mt - qp_y * sin_mt - cos_mt * cp_x + sin_mt * cp_y + cp_x; | ||
| var q_y = qp_x * sin_mt + qp_y * cos_mt - sin_mt * cp_x - cos_mt * cp_y + cp_y; | ||
| var p_x = this.pp_x * cos_mt - this.pp_y * sin_mt - cos_mt * cp_x + sin_mt * cp_y + cp_x; | ||
| var p_y = this.pp_x * sin_mt + this.pp_y * cos_mt - sin_mt * cp_x - cos_mt * cp_y + cp_y; | ||
| var matrix = this.resizeMatrix(); | ||
| var wtmp = matrix.a * (q_x - p_x) + matrix.c * (p_x - q_x); | ||
| var htmp = matrix.b * (q_y - p_y) + matrix.d * (p_y - q_y); | ||
| var w; | ||
| var h; | ||
| if (wtmp < this.minWidth || htmp < this.minHeight) { | ||
| w = Math.max(this.minWidth, wtmp); | ||
| h = Math.max(this.minHeight, htmp); | ||
| var theta = -1 * mtheta; | ||
| var cos_t = Math.cos(theta); | ||
| var sin_t = Math.sin(theta); | ||
| var dh_x = -sin_t * h; | ||
| var dh_y = cos_t * h; | ||
| var dw_x = cos_t * w; | ||
| var dw_y = sin_t * w; | ||
| var qp_x_min = this.pp_x + (matrix.a - matrix.c) * dw_x + (matrix.b - matrix.d) * dh_x; | ||
| var qp_y_min = this.pp_y + (matrix.a - matrix.c) * dw_y + (matrix.b - matrix.d) * dh_y; | ||
| var cp_x_min = (qp_x_min + this.pp_x) / 2.0; | ||
| var cp_y_min = (qp_y_min + this.pp_y) / 2.0; | ||
| q_x = qp_x_min * cos_mt - qp_y_min * sin_mt - cos_mt * cp_x_min + sin_mt * cp_y_min + cp_x_min; | ||
| q_y = qp_x_min * sin_mt + qp_y_min * cos_mt - sin_mt * cp_x_min - cos_mt * cp_y_min + cp_y_min; | ||
| p_x = this.pp_x * cos_mt - this.pp_y * sin_mt - cos_mt * cp_x_min + sin_mt * cp_y_min + cp_x_min; | ||
| p_y = this.pp_x * sin_mt + this.pp_y * cos_mt - sin_mt * cp_x_min - cos_mt * cp_y_min + cp_y_min; | ||
| } | ||
| else if (attr.width === ApplyOperation.SUBSTRACT) { | ||
| var maxWidth = this.startLeft + this.startWidth; | ||
| this.width = this.startWidth - delta.x > this.minWidth ? (this.startWidth - delta.x < maxWidth ? this.startWidth - delta.x : maxWidth) : this.minWidth; | ||
| else { | ||
| w = wtmp; | ||
| h = htmp; | ||
| } | ||
| if (attr.height === ApplyOperation.ADD) { | ||
| var maxHeight = this.convertParentUnit(this.parentHeight) - this.startTop; | ||
| this.height = | ||
| this.startHeight + delta.y > this.minHeight ? (this.startHeight + delta.y < maxHeight ? this.startHeight + delta.y : maxHeight) : this.minHeight; | ||
| } | ||
| else if (attr.height === ApplyOperation.SUBSTRACT) { | ||
| var maxHeight = this.startTop + this.startHeight; | ||
| this.height = | ||
| this.startHeight - delta.y > this.minHeight ? (this.startHeight - delta.y < maxHeight ? this.startHeight - delta.y : maxHeight) : this.minHeight; | ||
| } | ||
| if (attr.top === ApplyOperation.ADD) { | ||
| var maxTop = this.startTop + this.startHeight - this.minHeight; | ||
| this.top = this.startTop + delta.y > 0 ? (this.startTop + delta.y < maxTop ? this.startTop + delta.y : maxTop) : 0; | ||
| } | ||
| if (attr.left === ApplyOperation.ADD) { | ||
| var maxLeft = this.startLeft + this.startWidth - this.minWidth; | ||
| this.left = this.startLeft + delta.x > 0 ? (this.startLeft + delta.x < maxLeft ? this.startLeft + delta.x : maxLeft) : 0; | ||
| } | ||
| // TODO: Resize stick corner | ||
| // const currentX: number = unifyEvent($event).clientX; | ||
| // const currentY: number = unifyEvent($event).clientY; | ||
| // | ||
| // const phi: number = this.rotate !== undefined ? (this.rotate * Math.PI) / 180 : 0; | ||
| // | ||
| // const a = currentX; | ||
| // const b = -2 * (Math.cos(phi) * Math.sin(phi) * currentY); | ||
| // const c = -1 * Math.cos(phi) * this.width; | ||
| // const d = -1 * Math.sin(phi) * this.height; | ||
| // | ||
| // this.left = a + b + c + d; | ||
| // | ||
| // const e = 2 * (Math.cos(phi) * Math.sin(phi) * currentX); | ||
| // const f = currentY; | ||
| // const g = -1 * Math.cos(phi) * this.height; | ||
| // const h = -1 * Math.sin(phi) * this.width; | ||
| // | ||
| // this.top = -1 * (e + f + g + h); | ||
| var l = matrix.c * q_x + matrix.a * p_x; | ||
| var t = matrix.d * q_y + matrix.b * p_y; | ||
| this.left = this.convertToUnit(l, 'width'); | ||
| this.width = this.convertToUnit(w, 'width'); | ||
| this.top = this.convertToUnit(t, 'height'); | ||
| this.height = this.convertToUnit(h, 'height'); | ||
| }; | ||
@@ -350,7 +397,5 @@ class_1.prototype.rotateShape = function ($event) { | ||
| var currentY = unifyEvent($event).clientY; | ||
| var deltaX = this.convertToUnit(currentX - this.startX, 'width'); | ||
| var deltaY = this.convertToUnit(currentY - this.startY, 'height'); | ||
| return { | ||
| x: deltaX, | ||
| y: deltaY | ||
| x: this.dragBottom || this.dragTop ? 0 : currentX - this.startX, | ||
| y: this.dragStart || this.dragEnd ? 0 : currentY - this.startY | ||
| }; | ||
@@ -372,45 +417,2 @@ }; | ||
| }; | ||
| class_1.prototype.initStartPositions = function ($event) { | ||
| return __awaiter(this, void 0, void 0, function () { | ||
| return __generator(this, function (_a) { | ||
| switch (_a.label) { | ||
| case 0: | ||
| this.startX = unifyEvent($event).clientX; | ||
| this.startY = unifyEvent($event).clientY; | ||
| this.startWidth = this.width; | ||
| this.startHeight = this.height; | ||
| this.startTop = this.top; | ||
| this.startLeft = this.left; | ||
| return [4 /*yield*/, this.initParentSize()]; | ||
| case 1: | ||
| _a.sent(); | ||
| this.centerX = this.el.getBoundingClientRect().left + this.el.offsetWidth / 2; | ||
| this.centerY = this.el.getBoundingClientRect().top + this.el.offsetHeight / 2; | ||
| return [2 /*return*/]; | ||
| } | ||
| }); | ||
| }); | ||
| }; | ||
| class_1.prototype.initParentSize = function () { | ||
| return __awaiter(this, void 0, void 0, function () { | ||
| var parent; | ||
| return __generator(this, function (_a) { | ||
| switch (_a.label) { | ||
| case 0: | ||
| if (!(this.el.parentElement && typeof this.el.parentElement.getContainer === 'function')) return [3 /*break*/, 2]; | ||
| return [4 /*yield*/, this.el.parentElement.getContainer()]; | ||
| case 1: | ||
| parent = _a.sent(); | ||
| this.parentWidth = this.unit === 'percentage' ? parent.offsetWidth : this.convertToUnit(parent.offsetWidth, 'width'); | ||
| this.parentHeight = this.unit === 'percentage' ? parent.offsetHeight : this.convertToUnit(parent.offsetHeight, 'height'); | ||
| return [3 /*break*/, 3]; | ||
| case 2: | ||
| 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'); | ||
| _a.label = 3; | ||
| case 3: return [2 /*return*/]; | ||
| } | ||
| }); | ||
| }); | ||
| }; | ||
| class_1.prototype.startMove = function () { | ||
@@ -461,2 +463,14 @@ if (this.dragBottomEnd || this.dragTopEnd || this.dragBottomStart || this.dragTopStart) { | ||
| }; | ||
| class_1.prototype.resizeMatrix = function () { | ||
| var a = this.dragBottomEnd || this.dragTopEnd || this.dragEnd ? 1 : 0; | ||
| var b = this.dragBottomEnd || this.dragBottomStart || this.dragStart || this.dragBottom ? 1 : 0; | ||
| var c = a === 1 ? 0 : 1; | ||
| var d = b === 1 ? 0 : 1; | ||
| return { | ||
| a: a, | ||
| b: b, | ||
| c: c, | ||
| d: d | ||
| }; | ||
| }; | ||
| class_1.prototype.render = function () { | ||
@@ -463,0 +477,0 @@ var widthUnit = this.unit === 'percentage' ? '%' : this.unit === 'viewport' ? 'vw' : this.unit; |
@@ -7,7 +7,2 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './core-527d05e9.js'; | ||
| var ApplyOperation; | ||
| (function (ApplyOperation) { | ||
| ApplyOperation[ApplyOperation["ADD"] = 0] = "ADD"; | ||
| ApplyOperation[ApplyOperation["SUBSTRACT"] = 1] = "SUBSTRACT"; | ||
| })(ApplyOperation || (ApplyOperation = {})); | ||
| const DeckdeckgoDragResizeRotate = class { | ||
@@ -23,4 +18,4 @@ constructor(hostRef) { | ||
| this.rotation = true; | ||
| this.minWidth = 5; | ||
| this.minHeight = 5; | ||
| this.minWidth = 10; | ||
| this.minHeight = 10; | ||
| this.selected = false; | ||
@@ -119,4 +114,2 @@ this.updated = false; | ||
| this.rotate = this.el.style.getPropertyValue('--rotate') ? parseFloat(this.el.style.getPropertyValue('--rotate')) : 0; | ||
| this.minWidth = this.el.style.getPropertyValue('--min-width') ? parseFloat(this.el.style.getPropertyValue('--min-width')) : 5; | ||
| this.minHeight = this.el.style.getPropertyValue('--min-height') ? parseFloat(this.el.style.getPropertyValue('--min-height')) : 5; | ||
| resolve(); | ||
@@ -131,2 +124,52 @@ }); | ||
| } | ||
| async initStartPositions($event) { | ||
| this.startX = unifyEvent($event).clientX; | ||
| this.startY = unifyEvent($event).clientY; | ||
| await this.initParentSize(); | ||
| this.initStartPositionsMove(); | ||
| this.initStartPositionsRotation(); | ||
| this.initStartPositionsResize(); | ||
| } | ||
| initStartPositionsMove() { | ||
| this.startWidth = this.width; | ||
| this.startHeight = this.height; | ||
| this.startTop = this.top; | ||
| this.startLeft = this.left; | ||
| } | ||
| initStartPositionsRotation() { | ||
| this.centerX = this.el.getBoundingClientRect().left + this.el.offsetWidth / 2; | ||
| this.centerY = this.el.getBoundingClientRect().top + this.el.offsetHeight / 2; | ||
| } | ||
| initStartPositionsResize() { | ||
| const theta = (Math.PI * 2 * this.rotate) / 360; | ||
| const cos_t = Math.cos(theta); | ||
| 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 matrix = this.resizeMatrix(); | ||
| const c0_x = l + w / 2.0; | ||
| const c0_y = t + h / 2.0; | ||
| const q0_x = l + matrix.a * w; | ||
| const q0_y = t + matrix.b * h; | ||
| const p0_x = l + matrix.c * w; | ||
| const p0_y = t + matrix.d * h; | ||
| this.qp0_x = q0_x * cos_t - q0_y * sin_t - c0_x * cos_t + c0_y * sin_t + c0_x; | ||
| this.qp0_y = q0_x * sin_t + q0_y * cos_t - c0_x * sin_t - c0_y * cos_t + c0_y; | ||
| this.pp_x = p0_x * cos_t - p0_y * sin_t - c0_x * cos_t + c0_y * sin_t + c0_x; | ||
| this.pp_y = p0_x * sin_t + p0_y * cos_t - c0_x * sin_t - c0_y * cos_t + c0_y; | ||
| } | ||
| async initParentSize() { | ||
| // The deckgo-slide-aspect-ratio template exposes a getContainer function which return a reference to the effective container. | ||
| if (this.el.parentElement && typeof this.el.parentElement.getContainer === 'function') { | ||
| const parent = await this.el.parentElement.getContainer(); | ||
| this.parentWidth = this.unit === 'percentage' ? parent.offsetWidth : this.convertToUnit(parent.offsetWidth, 'width'); | ||
| this.parentHeight = this.unit === 'percentage' ? parent.offsetHeight : this.convertToUnit(parent.offsetHeight, 'height'); | ||
| } | ||
| 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'); | ||
| } | ||
| } | ||
| move($event) { | ||
@@ -137,9 +180,9 @@ if (!this.moving || this.drag === 'none') { | ||
| if (this.drag === 'x-axis') { | ||
| this.deltaMove($event, { left: ApplyOperation.ADD }); | ||
| this.deltaMove($event, false, true); | ||
| } | ||
| else if (this.drag === 'y-axis') { | ||
| this.deltaMove($event, { top: ApplyOperation.ADD }); | ||
| this.deltaMove($event, true, false); | ||
| } | ||
| else { | ||
| this.deltaMove($event, { top: ApplyOperation.ADD, left: ApplyOperation.ADD }); | ||
| this.deltaMove($event, true, true); | ||
| } | ||
@@ -152,94 +195,78 @@ return true; | ||
| } | ||
| if (!this.selected || !this.startX || !this.startY || !this.startWidth || !this.startHeight) { | ||
| if (!this.selected || !this.startX || !this.startY) { | ||
| return false; | ||
| } | ||
| if (this.dragBottomEnd) { | ||
| this.deltaResize($event, { width: ApplyOperation.ADD, height: ApplyOperation.ADD }); | ||
| if (!this.dragBottomEnd && | ||
| !this.dragTopEnd && | ||
| !this.dragBottomStart && | ||
| !this.dragTopStart && | ||
| !this.dragTop && | ||
| !this.dragEnd && | ||
| !this.dragBottom && | ||
| !this.dragStart) { | ||
| return false; | ||
| } | ||
| else if (this.dragTopEnd) { | ||
| this.deltaResize($event, { width: ApplyOperation.ADD, height: ApplyOperation.SUBSTRACT, top: ApplyOperation.ADD }); | ||
| } | ||
| else if (this.dragBottomStart) { | ||
| this.deltaResize($event, { width: ApplyOperation.SUBSTRACT, height: ApplyOperation.ADD, left: ApplyOperation.ADD }); | ||
| } | ||
| else if (this.dragTopStart) { | ||
| this.deltaResize($event, { | ||
| width: ApplyOperation.SUBSTRACT, | ||
| top: ApplyOperation.ADD, | ||
| height: ApplyOperation.SUBSTRACT, | ||
| left: ApplyOperation.ADD | ||
| }); | ||
| } | ||
| else if (this.dragTop) { | ||
| this.deltaResize($event, { top: ApplyOperation.ADD, height: ApplyOperation.SUBSTRACT }); | ||
| } | ||
| else if (this.dragEnd) { | ||
| this.deltaResize($event, { width: ApplyOperation.ADD }); | ||
| } | ||
| else if (this.dragBottom) { | ||
| this.deltaResize($event, { height: ApplyOperation.ADD }); | ||
| } | ||
| else if (this.dragStart) { | ||
| this.deltaResize($event, { left: ApplyOperation.ADD, width: ApplyOperation.SUBSTRACT }); | ||
| } | ||
| this.deltaResize($event); | ||
| return true; | ||
| } | ||
| deltaMove($event, attr) { | ||
| deltaMove($event, top, left) { | ||
| const delta = this.getDelta($event); | ||
| if (attr.top === ApplyOperation.ADD) { | ||
| const deltaX = this.convertToUnit(delta.x, 'width'); | ||
| const deltaY = this.convertToUnit(delta.y, 'height'); | ||
| if (top) { | ||
| const maxTop = this.convertParentUnit(this.parentHeight) - this.startHeight; | ||
| this.top = this.startTop + delta.y > 0 ? (this.startTop + delta.y < maxTop ? this.startTop + delta.y : maxTop) : 0; | ||
| this.top = this.startTop + deltaY > 0 ? (this.startTop + deltaY < maxTop ? this.startTop + deltaY : maxTop) : 0; | ||
| } | ||
| if (attr.left === ApplyOperation.ADD) { | ||
| if (left) { | ||
| const maxLeft = this.convertParentUnit(this.parentWidth) - this.startWidth; | ||
| this.left = this.startLeft + delta.x > 0 ? (this.startLeft + delta.x < maxLeft ? this.startLeft + delta.x : maxLeft) : 0; | ||
| this.left = this.startLeft + deltaX > 0 ? (this.startLeft + deltaX < maxLeft ? this.startLeft + deltaX : maxLeft) : 0; | ||
| } | ||
| } | ||
| deltaResize($event, attr) { | ||
| deltaResize($event) { | ||
| const delta = this.getDelta($event); | ||
| if (attr.width === ApplyOperation.ADD) { | ||
| const maxWidth = this.convertParentUnit(this.parentWidth) - this.startLeft; | ||
| this.width = this.startWidth + delta.x > this.minWidth ? (this.startWidth + delta.x < maxWidth ? this.startWidth + delta.x : maxWidth) : this.minWidth; | ||
| const qp_x = this.qp0_x + delta.x; | ||
| const qp_y = this.qp0_y + delta.y; | ||
| const cp_x = (qp_x + this.pp_x) / 2.0; | ||
| const cp_y = (qp_y + this.pp_y) / 2.0; | ||
| const mtheta = (-1 * Math.PI * 2 * this.rotate) / 360; | ||
| const cos_mt = Math.cos(mtheta); | ||
| const sin_mt = Math.sin(mtheta); | ||
| let q_x = qp_x * cos_mt - qp_y * sin_mt - cos_mt * cp_x + sin_mt * cp_y + cp_x; | ||
| let q_y = qp_x * sin_mt + qp_y * cos_mt - sin_mt * cp_x - cos_mt * cp_y + cp_y; | ||
| let p_x = this.pp_x * cos_mt - this.pp_y * sin_mt - cos_mt * cp_x + sin_mt * cp_y + cp_x; | ||
| let p_y = this.pp_x * sin_mt + this.pp_y * cos_mt - sin_mt * cp_x - cos_mt * cp_y + cp_y; | ||
| const matrix = this.resizeMatrix(); | ||
| const wtmp = matrix.a * (q_x - p_x) + matrix.c * (p_x - q_x); | ||
| const htmp = matrix.b * (q_y - p_y) + matrix.d * (p_y - q_y); | ||
| let w; | ||
| let h; | ||
| if (wtmp < this.minWidth || htmp < this.minHeight) { | ||
| w = Math.max(this.minWidth, wtmp); | ||
| h = Math.max(this.minHeight, htmp); | ||
| const theta = -1 * mtheta; | ||
| const cos_t = Math.cos(theta); | ||
| const sin_t = Math.sin(theta); | ||
| const dh_x = -sin_t * h; | ||
| const dh_y = cos_t * h; | ||
| const dw_x = cos_t * w; | ||
| const dw_y = sin_t * w; | ||
| const qp_x_min = this.pp_x + (matrix.a - matrix.c) * dw_x + (matrix.b - matrix.d) * dh_x; | ||
| const qp_y_min = this.pp_y + (matrix.a - matrix.c) * dw_y + (matrix.b - matrix.d) * dh_y; | ||
| const cp_x_min = (qp_x_min + this.pp_x) / 2.0; | ||
| const cp_y_min = (qp_y_min + this.pp_y) / 2.0; | ||
| q_x = qp_x_min * cos_mt - qp_y_min * sin_mt - cos_mt * cp_x_min + sin_mt * cp_y_min + cp_x_min; | ||
| q_y = qp_x_min * sin_mt + qp_y_min * cos_mt - sin_mt * cp_x_min - cos_mt * cp_y_min + cp_y_min; | ||
| p_x = this.pp_x * cos_mt - this.pp_y * sin_mt - cos_mt * cp_x_min + sin_mt * cp_y_min + cp_x_min; | ||
| p_y = this.pp_x * sin_mt + this.pp_y * cos_mt - sin_mt * cp_x_min - cos_mt * cp_y_min + cp_y_min; | ||
| } | ||
| else if (attr.width === ApplyOperation.SUBSTRACT) { | ||
| const maxWidth = this.startLeft + this.startWidth; | ||
| this.width = this.startWidth - delta.x > this.minWidth ? (this.startWidth - delta.x < maxWidth ? this.startWidth - delta.x : maxWidth) : this.minWidth; | ||
| else { | ||
| w = wtmp; | ||
| h = htmp; | ||
| } | ||
| if (attr.height === ApplyOperation.ADD) { | ||
| const maxHeight = this.convertParentUnit(this.parentHeight) - this.startTop; | ||
| this.height = | ||
| this.startHeight + delta.y > this.minHeight ? (this.startHeight + delta.y < maxHeight ? this.startHeight + delta.y : maxHeight) : this.minHeight; | ||
| } | ||
| else if (attr.height === ApplyOperation.SUBSTRACT) { | ||
| const maxHeight = this.startTop + this.startHeight; | ||
| this.height = | ||
| this.startHeight - delta.y > this.minHeight ? (this.startHeight - delta.y < maxHeight ? this.startHeight - delta.y : maxHeight) : this.minHeight; | ||
| } | ||
| if (attr.top === ApplyOperation.ADD) { | ||
| const maxTop = this.startTop + this.startHeight - this.minHeight; | ||
| this.top = this.startTop + delta.y > 0 ? (this.startTop + delta.y < maxTop ? this.startTop + delta.y : maxTop) : 0; | ||
| } | ||
| if (attr.left === ApplyOperation.ADD) { | ||
| const maxLeft = this.startLeft + this.startWidth - this.minWidth; | ||
| this.left = this.startLeft + delta.x > 0 ? (this.startLeft + delta.x < maxLeft ? this.startLeft + delta.x : maxLeft) : 0; | ||
| } | ||
| // TODO: Resize stick corner | ||
| // const currentX: number = unifyEvent($event).clientX; | ||
| // const currentY: number = unifyEvent($event).clientY; | ||
| // | ||
| // const phi: number = this.rotate !== undefined ? (this.rotate * Math.PI) / 180 : 0; | ||
| // | ||
| // const a = currentX; | ||
| // const b = -2 * (Math.cos(phi) * Math.sin(phi) * currentY); | ||
| // const c = -1 * Math.cos(phi) * this.width; | ||
| // const d = -1 * Math.sin(phi) * this.height; | ||
| // | ||
| // this.left = a + b + c + d; | ||
| // | ||
| // const e = 2 * (Math.cos(phi) * Math.sin(phi) * currentX); | ||
| // const f = currentY; | ||
| // const g = -1 * Math.cos(phi) * this.height; | ||
| // const h = -1 * Math.sin(phi) * this.width; | ||
| // | ||
| // this.top = -1 * (e + f + g + h); | ||
| const l = matrix.c * q_x + matrix.a * p_x; | ||
| const t = matrix.d * q_y + matrix.b * p_y; | ||
| this.left = this.convertToUnit(l, 'width'); | ||
| this.width = this.convertToUnit(w, 'width'); | ||
| this.top = this.convertToUnit(t, 'height'); | ||
| this.height = this.convertToUnit(h, 'height'); | ||
| } | ||
@@ -258,7 +285,5 @@ rotateShape($event) { | ||
| const currentY = unifyEvent($event).clientY; | ||
| const deltaX = this.convertToUnit(currentX - this.startX, 'width'); | ||
| const deltaY = this.convertToUnit(currentY - this.startY, 'height'); | ||
| return { | ||
| x: deltaX, | ||
| y: deltaY | ||
| x: this.dragBottom || this.dragTop ? 0 : currentX - this.startX, | ||
| y: this.dragStart || this.dragEnd ? 0 : currentY - this.startY | ||
| }; | ||
@@ -280,25 +305,2 @@ } | ||
| } | ||
| async initStartPositions($event) { | ||
| this.startX = unifyEvent($event).clientX; | ||
| this.startY = unifyEvent($event).clientY; | ||
| this.startWidth = this.width; | ||
| this.startHeight = this.height; | ||
| this.startTop = this.top; | ||
| this.startLeft = this.left; | ||
| await this.initParentSize(); | ||
| this.centerX = this.el.getBoundingClientRect().left + this.el.offsetWidth / 2; | ||
| this.centerY = this.el.getBoundingClientRect().top + this.el.offsetHeight / 2; | ||
| } | ||
| async initParentSize() { | ||
| // The deckgo-slide-aspect-ratio template exposes a getContainer function which return a reference to the effective container. | ||
| if (this.el.parentElement && typeof this.el.parentElement.getContainer === 'function') { | ||
| const parent = await this.el.parentElement.getContainer(); | ||
| this.parentWidth = this.unit === 'percentage' ? parent.offsetWidth : this.convertToUnit(parent.offsetWidth, 'width'); | ||
| this.parentHeight = this.unit === 'percentage' ? parent.offsetHeight : this.convertToUnit(parent.offsetHeight, 'height'); | ||
| } | ||
| 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'); | ||
| } | ||
| } | ||
| startMove() { | ||
@@ -349,2 +351,14 @@ if (this.dragBottomEnd || this.dragTopEnd || this.dragBottomStart || this.dragTopStart) { | ||
| } | ||
| resizeMatrix() { | ||
| const a = this.dragBottomEnd || this.dragTopEnd || this.dragEnd ? 1 : 0; | ||
| const b = this.dragBottomEnd || this.dragBottomStart || this.dragStart || this.dragBottom ? 1 : 0; | ||
| const c = a === 1 ? 0 : 1; | ||
| const d = b === 1 ? 0 : 1; | ||
| return { | ||
| a, | ||
| b, | ||
| c, | ||
| d | ||
| }; | ||
| } | ||
| render() { | ||
@@ -351,0 +365,0 @@ const widthUnit = this.unit === 'percentage' ? '%' : this.unit === 'viewport' ? 'vw' : this.unit; |
@@ -38,2 +38,6 @@ export declare class DeckdeckgoDragResizeRotate { | ||
| private centerY; | ||
| private qp0_x; | ||
| private qp0_y; | ||
| private pp_x; | ||
| private pp_y; | ||
| componentWillLoad(): Promise<void>; | ||
@@ -47,2 +51,7 @@ componentDidLoad(): Promise<void>; | ||
| private start; | ||
| private initStartPositions; | ||
| private initStartPositionsMove; | ||
| private initStartPositionsRotation; | ||
| private initStartPositionsResize; | ||
| private initParentSize; | ||
| private transform; | ||
@@ -57,4 +66,2 @@ private move; | ||
| private convertParentUnit; | ||
| private initStartPositions; | ||
| private initParentSize; | ||
| private startMove; | ||
@@ -66,2 +73,3 @@ private stop; | ||
| private stopResize; | ||
| private resizeMatrix; | ||
| render(): any; | ||
@@ -68,0 +76,0 @@ private renderEdgesAnchors; |
| { | ||
| "name": "@deckdeckgo/drag-resize-rotate", | ||
| "version": "1.0.0-beta.1", | ||
| "version": "1.0.0-beta.2", | ||
| "description": "A Web Component to drag, resize and rotate any element", | ||
@@ -5,0 +5,0 @@ "main": "dist/index.js", |
No alert changes
Improved metrics
- Lines of code
- increased by0.43%
14808
Worsened metrics
- Total package byte prevSize
- decreased by-0.04%
922112
No dependency changes