Use pointer capture

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<ConvertUnitsToPx, string>;
   /**
    * @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:

packages/core/src/utils/Resizer.ts

@@ -235,6 +235,8 @@ export interface ResizerOptions {
    * @default false
    */
   updateOnMove?: boolean;
+
+  docs?: Document[];
 }
 
 type Handlers = Record<string, HTMLElement | null>;
@@ -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();
     }