diff --git a/packages/core/src/commands/view/Resize.ts b/packages/core/src/commands/view/Resize.ts index 63e9fed0a..4f43a8562 100644 --- a/packages/core/src/commands/view/Resize.ts +++ b/packages/core/src/commands/view/Resize.ts @@ -1,4 +1,4 @@ -import { Position } from '../../common'; +import { LiteralUnion, Position } from '../../common'; import Component from '../../dom_components/model/Component'; import { ComponentsEvents } from '../../dom_components/types'; import ComponentView from '../../dom_components/view/ComponentView'; @@ -65,7 +65,7 @@ export interface ComponentResizeEventUpdateProps extends ComponentResizeEventPro export interface ConvertPxToUnitProps { el: HTMLElement; valuePx: number; - unit?: string; + unit?: LiteralUnion; /** * @default 3 */ @@ -77,6 +77,25 @@ export interface ConvertPxToUnitProps { dpi?: number; } +export enum ConvertUnitsToPx { + pt = 'pt', + pc = 'pc', + in = 'in', + cm = 'cm', + mm = 'mm', + vw = 'vw', + vh = 'vh', + vmin = 'vmin', + vmax = 'vmax', + svw = 'svw', + lvw = 'lvw', + dvw = 'dvw', + svh = 'svh', + lvh = 'lvh', + dvh = 'dvh', + perc = '%', +} + export default { run(editor, _, options: ComponentResizeOptions) { const { Canvas, Utils, em } = editor; @@ -113,6 +132,7 @@ export default { prefix: editor.getConfig().stylePrefix, posFetcher: canvasView.getElementPos.bind(canvasView), mousePosFetcher: Canvas.getMouseRelativePos.bind(Canvas), + docs: [document], onStart(ev, opts) { onStart(ev, opts); const { el, config, resizer } = opts; @@ -295,50 +315,50 @@ export default { let untiResult = unit; switch (unit) { - case 'pt': + case ConvertUnitsToPx.pt: valueResult = valuePx * (72 / dpi); break; - case 'pc': + case ConvertUnitsToPx.pc: valueResult = valuePx * (6 / dpi); break; - case 'in': + case ConvertUnitsToPx.in: valueResult = valuePx / dpi; break; - case 'cm': + case ConvertUnitsToPx.cm: valueResult = valuePx / (dpi / 2.54); break; - case 'mm': + case ConvertUnitsToPx.mm: valueResult = valuePx / (dpi / 25.4); break; - case 'vw': + case ConvertUnitsToPx.vw: valueResult = (valuePx / winWidth) * 100; break; - case 'vh': + case ConvertUnitsToPx.vh: valueResult = (valuePx / winHeight) * 100; break; - case 'vmin': { + case ConvertUnitsToPx.vmin: { const vmin = Math.min(winWidth, winHeight); valueResult = (valuePx / vmin) * 100; break; } - case 'vmax': { + case ConvertUnitsToPx.vmax: { const vmax = Math.max(winWidth, winHeight); valueResult = (valuePx / vmax) * 100; break; } - case '%': { + case ConvertUnitsToPx.perc: { const parentSize = el.parentElement?.offsetWidth || 1; valueResult = (valuePx / parentSize) * 100; break; } - case 'svw': - case 'lvw': - case 'dvw': + case ConvertUnitsToPx.svw: + case ConvertUnitsToPx.lvw: + case ConvertUnitsToPx.dvw: valueResult = (valuePx / winWidth) * 100; break; - case 'svh': - case 'lvh': - case 'dvh': + case ConvertUnitsToPx.svh: + case ConvertUnitsToPx.lvh: + case ConvertUnitsToPx.dvh: valueResult = (valuePx / winHeight) * 100; break; default: diff --git a/packages/core/src/utils/Resizer.ts b/packages/core/src/utils/Resizer.ts index 09fe385da..beee114da 100644 --- a/packages/core/src/utils/Resizer.ts +++ b/packages/core/src/utils/Resizer.ts @@ -235,6 +235,8 @@ export interface ResizerOptions { * @default false */ updateOnMove?: boolean; + + docs?: Document[]; } type Handlers = Record; @@ -429,7 +431,7 @@ export default class Resizer { * Returns documents */ getDocumentEl() { - return [this.el!.ownerDocument, document]; + return this.opts.docs || [this.el!.ownerDocument, document]; } /** @@ -482,6 +484,7 @@ export default class Resizer { e.preventDefault(); e.stopPropagation(); + this.selectedHandler?.setPointerCapture(e.pointerId); const parentEl = this.getParentEl(); const resizer = this; const config = opts; @@ -572,6 +575,7 @@ export default class Resizer { this.updateRect(true, ev); } + this.selectedHandler?.releasePointerCapture(ev.pointerId); this.toggleFrames(); this.onEnd?.(ev, { docs, config, el, resizer: this }); this.moved = false; @@ -667,11 +671,9 @@ export default class Resizer { const el = e.target as HTMLElement; if (this.isHandler(el)) { - // el.setPointerCapture(e.pointerId); this.selectedHandler = el; this.start(e); } else if (el !== this.el) { - // el.releasePointerCapture(e.pointerId); delete this.selectedHandler; this.blur(); }