fix: fix warpSelf

packages/helper/package.json

@@ -81,7 +81,7 @@
         "typescript": "^4.5.0 <4.6.0"
     },
     "dependencies": {
-        "@daybrush/utils": "^1.10.3"
+        "@daybrush/utils": "^1.11.0"
     },
     "browserslist": {
         "production": [

packages/lit-moveable/package.json

@@ -60,7 +60,7 @@
         "typescript": "^4.5.0 <4.6.0"
     },
     "dependencies": {
-        "@daybrush/utils": "^1.10.3",
+        "@daybrush/utils": "^1.11.0",
         "framework-utils": "^1.1.0",
         "moveable": "~0.45.0"
     }

packages/lit-moveable/src/LitMoveable.ts

@@ -48,7 +48,7 @@ export class LitMoveable extends LitElement {
         });
 
         this.moveable = new VanillaMoveable(this, {
-            portalContainer: this,
+            warpSelf: true,
             ...options,
         });
 

packages/moveable/package.json

@@ -64,7 +64,7 @@
     "@scena/event-emitter": "^1.0.5",
     "react-compat-moveable": "~0.33.0",
     "react-moveable": "~0.48.0",
-    "react-simple-compat": "^1.3.0-beta.1"
+    "react-simple-compat": "^1.3.0-beta.3"
   },
   "devDependencies": {
     "@daybrush/builder": "^0.1.2",

packages/moveable/src/InnerMoveable.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { createPortal } from "react-dom";
 import Moveable from "react-moveable";
 import { ref } from "framework-utils";
 
@@ -11,6 +10,6 @@ export default class InnerMoveable extends React.Component<any> {
         this.state = this.props;
     }
     public render(): React.ReactNode {
-        return createPortal(<Moveable ref={ref(this, "moveable")} {...this.state} />, this.state.parentElement);
+        return <Moveable ref={ref(this, "moveable")} {...this.state} />;
     }
 }

packages/moveable/src/MoveableManager.tsx

@@ -1,6 +1,6 @@
 import { ref, Properties } from "framework-utils";
 import * as React from "react";
-import { render } from "react-dom";
+import { renderSelf } from "react-simple-compat";
 import InnerMoveable from "./InnerMoveable";
 import {
     MoveableInterface,
@@ -10,6 +10,7 @@ import { camelize, isArray } from "@daybrush/utils";
 import { MoveableEventsParameters } from "./types";
 import { PROPERTIES, EVENTS, METHODS } from "./consts";
 import EventEmitter from "@scena/event-emitter";
+import { ContainerProvider } from "react-simple-compat";
 /**
  * Moveable is Draggable! Resizable! Scalable! Rotatable!
  * @sort 1
@@ -45,12 +46,13 @@ import EventEmitter from "@scena/event-emitter";
 })
 class MoveableManager extends EventEmitter<MoveableEventsParameters> {
     private innerMoveable!: InnerMoveable | null;
-    private tempElement: HTMLElement | null = document.createElement("div");
-
+    private containerProvider: ContainerProvider | null = null;
+    private selfElement: HTMLElement | null = null;
+    private _warp = false;
     /**
      *
      */
-    constructor(parentElement: HTMLElement | SVGElement, options: MoveableOptions = {}) {
+    constructor(parentElement: HTMLElement, options: MoveableOptions = {}) {
         super();
         const nextOptions = { ...options };
 
@@ -59,15 +61,23 @@ class MoveableManager extends EventEmitter<MoveableEventsParameters> {
         EVENTS.forEach(name => {
             events[camelize(`on ${name}`)] = (e: any) => this.trigger<any>(name, e);
         });
+        let selfElement!: HTMLElement;
 
-        render(
+        if (options.warpSelf) {
+            delete options.warpSelf;
+            this._warp = true;
+            selfElement = parentElement;
+        } else {
+            selfElement = document.createElement("div");
+            parentElement.appendChild(selfElement);
+        }
+        this.containerProvider = renderSelf(
             <InnerMoveable
                 ref={ref(this, "innerMoveable")}
-                parentElement={parentElement}
                 {...nextOptions}
                 {...events}
-            />,
-            this.tempElement,
+            /> as any,
+            selfElement,
         );
         const target = nextOptions.target!;
         if (isArray(target) && target.length > 1) {
@@ -88,9 +98,20 @@ class MoveableManager extends EventEmitter<MoveableEventsParameters> {
         this.getMoveable().dragStart(e);
     }
     public destroy() {
-        render(null as any, this.tempElement!);
+        const selfElement = this.selfElement!;
+
+        renderSelf(
+            null,
+            selfElement!,
+            this.containerProvider,
+        );
+        if (!this._warp) {
+            selfElement?.parentElement?.removeChild(selfElement);
+        }
+        this.containerProvider = null;
+
         this.off();
-        this.tempElement = null;
+        this.selfElement = null;
         this.innerMoveable = null;
     }
     private getMoveable() {

packages/moveable/test/manual/input.html

@@ -1,17 +1,19 @@
 <body>
     <input class="target target1" />
     <input class="target target2" />
+    <div id="a", data-styled-id="rCS7rstfg" data-able-draggable="true" data-able-padding="true" data-able-origin="true" data-able-clickable="true" class="moveable-control-box     rCS7rstfg" style="position: absolute; display: block; visibility: visible; transform: translate3d(164px, 63px, 0px); --zoom:1; --zoompx:1px;"><div class="moveable-control moveable-origin" style="transform: translateZ(0px) translate(73.5px, 10.75px) rotate(0rad) scale(1);"></div><div data-rotation="-1" data-line-key="render-line-0" data-direction="" class="moveable-line moveable-direction  " style="transform: translateY(-50%) translate(0px, 0px) rotate(0rad) scaleY(1); width: 147px;"></div><div data-rotation="-1" data-line-key="render-line-1" data-direction="" class="moveable-line moveable-direction  " style="transform: translateY(-50%) translate(147px, 0px) rotate(1.5708rad) scaleY(1); width: 21.5px;"></div><div data-rotation="-1" data-line-key="render-line-2" data-direction="" class="moveable-line moveable-direction  " style="transform: translateY(-50%) translate(147px, 21.5px) rotate(3.14159rad) scaleY(1); width: 147px;"></div><div data-rotation="-1" data-line-key="render-line-3" data-direction="" class="moveable-line moveable-direction  " style="transform: translateY(-50%) translate(0px, 21.5px) rotate(4.71239rad) scaleY(1); width: 21.5px;"></div></div>
 </body>
 <script src ="../../dist/moveable.js"></script>
 <script>
-    new Moveable(document.body, {
-        draggable: true,
-        target: document.querySelector(".target1"),
-    }).on("drag", e => {
-        e.target.style.transform = e.transform;
-    });
-
-    new Moveable(document.body, {
+    // new Moveable(document.body, {
+    //     draggable: true,
+    //     target: document.querySelector(".target1"),
+    // }).on("drag", e => {
+    //     e.target.style.transform = e.transform;
+    // });
+    const target = document.querySelector("#a");
+    new Moveable(document.querySelector("#a"), {
+        portalContainer: document.querySelector("#a"),
         draggable: true,
         target: document.querySelector(".target2"),
     }).on("drag", e => {

packages/ngx-moveable/projects/ngx-moveable/src/consts.ts

@@ -1,4 +1,4 @@
 // auto
 // eslint-disable-next-line max-len
-export const ANGULAR_MOVEABLE_INPUTS: ["target","dragTarget","container","portalContainer","rootContainer","useResizeObserver","useMutationObserver","zoom","transformOrigin","edge","ables","className","pinchThreshold","pinchOutside","triggerAblesSimultaneously","checkInput","cspNonce","translateZ","hideDefaultLines","props","flushSync","stopPropagation","preventClickEventOnDrag","preventClickDefault","viewContainer","persistData","useAccuratePosition","firstRenderState","linePadding","displayAroundControls","controlPadding","preventDefault","requestStyles","snappable","snapContainer","snapDirections","elementSnapDirections","snapGap","snapGridWidth","snapGridHeight","isDisplaySnapDigit","isDisplayInnerSnapDigit","snapDigit","snapThreshold","snapRenderThreshold","horizontalGuidelines","verticalGuidelines","elementGuidelines","bounds","innerBounds","snapDistFormat","maxSnapElementGuidelineDistance","maxSnapElementGapDistance","pinchable","draggable","throttleDrag","throttleDragRotate","startDragRotate","edgeDraggable","resizable","throttleResize","renderDirections","keepRatio","resizeFormat","keepRatioFinally","checkResizableError","scalable","throttleScale","warpable","rotatable","rotationPosition","throttleRotate","rotationTarget","rotateAroundControls","resolveAblesWithRotatable","scrollable","scrollContainer","scrollThreshold","scrollThrottleTime","getScrollPosition","scrollOptions","originDraggable","originRelative","clippable","defaultClipPath","customClipPath","clipRelative","clipArea","dragWithClip","clipTargetBounds","clipVerticalGuidelines","clipHorizontalGuidelines","clipSnapThreshold","roundable","roundRelative","minRoundControls","maxRoundControls","roundClickable","roundPadding","isDisplayShadowRoundControls","defaultGroupRotate","defaultGroupOrigin","groupable","groupableProps","targetGroups","hideChildMoveableDefaultLines","individualGroupable","individualGroupableProps","clickable","dragArea","passDragArea"] = ["target","dragTarget","container","portalContainer","rootContainer","useResizeObserver","useMutationObserver","zoom","transformOrigin","edge","ables","className","pinchThreshold","pinchOutside","triggerAblesSimultaneously","checkInput","cspNonce","translateZ","hideDefaultLines","props","flushSync","stopPropagation","preventClickEventOnDrag","preventClickDefault","viewContainer","persistData","useAccuratePosition","firstRenderState","linePadding","displayAroundControls","controlPadding","preventDefault","requestStyles","snappable","snapContainer","snapDirections","elementSnapDirections","snapGap","snapGridWidth","snapGridHeight","isDisplaySnapDigit","isDisplayInnerSnapDigit","snapDigit","snapThreshold","snapRenderThreshold","horizontalGuidelines","verticalGuidelines","elementGuidelines","bounds","innerBounds","snapDistFormat","maxSnapElementGuidelineDistance","maxSnapElementGapDistance","pinchable","draggable","throttleDrag","throttleDragRotate","startDragRotate","edgeDraggable","resizable","throttleResize","renderDirections","keepRatio","resizeFormat","keepRatioFinally","checkResizableError","scalable","throttleScale","warpable","rotatable","rotationPosition","throttleRotate","rotationTarget","rotateAroundControls","resolveAblesWithRotatable","scrollable","scrollContainer","scrollThreshold","scrollThrottleTime","getScrollPosition","scrollOptions","originDraggable","originRelative","clippable","defaultClipPath","customClipPath","clipRelative","clipArea","dragWithClip","clipTargetBounds","clipVerticalGuidelines","clipHorizontalGuidelines","clipSnapThreshold","roundable","roundRelative","minRoundControls","maxRoundControls","roundClickable","roundPadding","isDisplayShadowRoundControls","defaultGroupRotate","defaultGroupOrigin","groupable","groupableProps","targetGroups","hideChildMoveableDefaultLines","individualGroupable","individualGroupableProps","clickable","dragArea","passDragArea"];
+export const ANGULAR_MOVEABLE_INPUTS: ["target","dragTarget","container","warpSelf","rootContainer","useResizeObserver","useMutationObserver","zoom","transformOrigin","edge","ables","className","pinchThreshold","pinchOutside","triggerAblesSimultaneously","checkInput","cspNonce","translateZ","hideDefaultLines","props","flushSync","stopPropagation","preventClickEventOnDrag","preventClickDefault","viewContainer","persistData","useAccuratePosition","firstRenderState","linePadding","displayAroundControls","controlPadding","preventDefault","requestStyles","snappable","snapContainer","snapDirections","elementSnapDirections","snapGap","snapGridWidth","snapGridHeight","isDisplaySnapDigit","isDisplayInnerSnapDigit","snapDigit","snapThreshold","snapRenderThreshold","horizontalGuidelines","verticalGuidelines","elementGuidelines","bounds","innerBounds","snapDistFormat","maxSnapElementGuidelineDistance","maxSnapElementGapDistance","pinchable","draggable","throttleDrag","throttleDragRotate","startDragRotate","edgeDraggable","resizable","throttleResize","renderDirections","keepRatio","resizeFormat","keepRatioFinally","checkResizableError","scalable","throttleScale","warpable","rotatable","rotationPosition","throttleRotate","rotationTarget","rotateAroundControls","resolveAblesWithRotatable","scrollable","scrollContainer","scrollThreshold","scrollThrottleTime","getScrollPosition","scrollOptions","originDraggable","originRelative","clippable","defaultClipPath","customClipPath","clipRelative","clipArea","dragWithClip","clipTargetBounds","clipVerticalGuidelines","clipHorizontalGuidelines","clipSnapThreshold","roundable","roundRelative","minRoundControls","maxRoundControls","roundClickable","roundPadding","isDisplayShadowRoundControls","defaultGroupRotate","defaultGroupOrigin","groupable","groupableProps","targetGroups","hideChildMoveableDefaultLines","individualGroupable","individualGroupableProps","clickable","dragArea","passDragArea"] = ["target","dragTarget","container","warpSelf","rootContainer","useResizeObserver","useMutationObserver","zoom","transformOrigin","edge","ables","className","pinchThreshold","pinchOutside","triggerAblesSimultaneously","checkInput","cspNonce","translateZ","hideDefaultLines","props","flushSync","stopPropagation","preventClickEventOnDrag","preventClickDefault","viewContainer","persistData","useAccuratePosition","firstRenderState","linePadding","displayAroundControls","controlPadding","preventDefault","requestStyles","snappable","snapContainer","snapDirections","elementSnapDirections","snapGap","snapGridWidth","snapGridHeight","isDisplaySnapDigit","isDisplayInnerSnapDigit","snapDigit","snapThreshold","snapRenderThreshold","horizontalGuidelines","verticalGuidelines","elementGuidelines","bounds","innerBounds","snapDistFormat","maxSnapElementGuidelineDistance","maxSnapElementGapDistance","pinchable","draggable","throttleDrag","throttleDragRotate","startDragRotate","edgeDraggable","resizable","throttleResize","renderDirections","keepRatio","resizeFormat","keepRatioFinally","checkResizableError","scalable","throttleScale","warpable","rotatable","rotationPosition","throttleRotate","rotationTarget","rotateAroundControls","resolveAblesWithRotatable","scrollable","scrollContainer","scrollThreshold","scrollThrottleTime","getScrollPosition","scrollOptions","originDraggable","originRelative","clippable","defaultClipPath","customClipPath","clipRelative","clipArea","dragWithClip","clipTargetBounds","clipVerticalGuidelines","clipHorizontalGuidelines","clipSnapThreshold","roundable","roundRelative","minRoundControls","maxRoundControls","roundClickable","roundPadding","isDisplayShadowRoundControls","defaultGroupRotate","defaultGroupOrigin","groupable","groupableProps","targetGroups","hideChildMoveableDefaultLines","individualGroupable","individualGroupableProps","clickable","dragArea","passDragArea"];
 export const ANGULAR_MOVEABLE_OUTPUTS: ["beforeRenderStart","beforeRender","beforeRenderEnd","beforeRenderGroupStart","beforeRenderGroup","beforeRenderGroupEnd","changeTargets","snap","pinchStart","pinch","pinchEnd","pinchGroupStart","pinchGroup","pinchGroupEnd","dragStart","drag","dragEnd","dragGroupStart","dragGroup","dragGroupEnd","resizeStart","beforeResize","resize","resizeEnd","resizeGroupStart","beforeResizeGroup","resizeGroup","resizeGroupEnd","scaleStart","beforeScale","scale","scaleEnd","scaleGroupStart","beforeScaleGroup","scaleGroup","scaleGroupEnd","warpStart","warp","warpEnd","rotateStart","beforeRotate","rotate","rotateEnd","rotateGroupStart","beforeRotateGroup","rotateGroup","rotateGroupEnd","scroll","scrollGroup","dragOriginStart","dragOrigin","dragOriginEnd","clipStart","clip","clipEnd","roundStart","round","roundEnd","roundGroupStart","roundGroup","roundGroupEnd","click","clickGroup","renderStart","render","renderEnd","renderGroupStart","renderGroup","renderGroupEnd"] = ["beforeRenderStart","beforeRender","beforeRenderEnd","beforeRenderGroupStart","beforeRenderGroup","beforeRenderGroupEnd","changeTargets","snap","pinchStart","pinch","pinchEnd","pinchGroupStart","pinchGroup","pinchGroupEnd","dragStart","drag","dragEnd","dragGroupStart","dragGroup","dragGroupEnd","resizeStart","beforeResize","resize","resizeEnd","resizeGroupStart","beforeResizeGroup","resizeGroup","resizeGroupEnd","scaleStart","beforeScale","scale","scaleEnd","scaleGroupStart","beforeScaleGroup","scaleGroup","scaleGroupEnd","warpStart","warp","warpEnd","rotateStart","beforeRotate","rotate","rotateEnd","rotateGroupStart","beforeRotateGroup","rotateGroup","rotateGroupEnd","scroll","scrollGroup","dragOriginStart","dragOrigin","dragOriginEnd","clipStart","clip","clipEnd","roundStart","round","roundEnd","roundGroupStart","roundGroup","roundGroupEnd","click","clickGroup","renderStart","render","renderEnd","renderGroupStart","renderGroup","renderGroupEnd"];

packages/ngx-moveable/projects/ngx-moveable/src/ngx-moveable.component.ts

@@ -47,7 +47,7 @@ export class NgxMoveableComponent
 
     this.moveable = new Moveable(container, {
       ...options,
-      portalContainer: container,
+      warpSelf: true,
     });
     this.moveable.on(events);
   }

packages/react-compat-moveable/package.json

@@ -58,14 +58,14 @@
         "keycon": "^0.3.0",
         "print-sizes": "^0.2.0",
         "pvu": "^0.6.1",
-        "react-simple-compat": "^1.3.0-beta.1",
+        "react-simple-compat": "^1.3.0-beta.3",
         "rollup-plugin-css-bundle": "^1.0.4",
         "rollup-plugin-react-compat": "^0.1.0",
         "tslint": "^5.16.0",
         "typescript": "^4.5.0 <4.6.0"
     },
     "dependencies": {
-        "@daybrush/utils": "^1.10.3",
+        "@daybrush/utils": "^1.11.0",
         "@egjs/agent": "^2.2.1",
         "@egjs/children-differ": "^1.0.1",
         "@egjs/list-differ": "^1.0.0",

packages/snappable/package.json

@@ -61,7 +61,7 @@
         "typescript": "^4.5.0 <4.6.0"
     },
     "dependencies": {
-        "@daybrush/utils": "^1.10.3",
+        "@daybrush/utils": "^1.11.0",
         "overlap-area": "^1.1.0"
     }
 }

packages/vue-moveable/src/Moveable.vue

@@ -44,7 +44,7 @@ export default {
 
     const moveable = new VanillaMoveable(moveableElement, {
       ...options,
-      portalContainer: moveableElement,
+      warpSelf: true,
     });
 
     EVENTS.forEach((name) => {

yarn.lock

@@ -23387,15 +23387,13 @@ react-simple-compat@^1.2.2:
     "@daybrush/utils" "^1.0.0"
     "@egjs/list-differ" "^1.0.0"
 
-react-simple-compat@^1.3.0-beta.1:
-  version "1.3.0-beta.1"
-  resolved "https://registry.npmjs.org/react-simple-compat/-/react-simple-compat-1.3.0-beta.1.tgz#a2043840c54dd40b1bb78687e438356ce0a10101"
-  integrity sha512-nqutuZn/u1vNpUjvL2gwRhYERgRWu6MZGo1UKT7zWRFXac4nQoUrFew5IWgSy/tWkets8oUprUVdrfZ+TIUn3w==
+react-simple-compat@^1.3.0-beta.3:
+  version "1.3.0-beta.3"
+  resolved "https://registry.npmjs.org/react-simple-compat/-/react-simple-compat-1.3.0-beta.3.tgz#ba57bc3954d10c06da907de211dc5a4da78c76b3"
+  integrity sha512-gRWyOo0FHd7DJYN9Uo9a+9xudZhpB+U+mPGZX4r8smBe25ZeMpTvZQMFOFWSk6tns1DVaO6SxjFIQbgBEq4jYQ==
   dependencies:
-    "@daybrush/utils" "^1.0.0"
+    "@daybrush/utils" "^1.11.0"
     "@egjs/list-differ" "^1.0.0"
-    "@scena/event-emitter" "^1.0.5"
-    tslib "^2.3.1"
 
 react-tabs@^3.0.0:
   version "3.2.3"