feat: add onBound event #970

packages/moveable/test/manual/groupDragTarget.html

@@ -141,8 +141,9 @@ <h1 contenteditable="true">Lorem ipsum dolor sit amet.</h1>
   </div>
 </div>
   <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js'></script>
-<script src='../../dist/moveable.min.js'></script>
-<script src='https://cdnjs.cloudflare.com/ajax/libs/selecto/1.22.6/selecto.min.js'></script>
+<script src='../../dist/moveable.js'></script>
+<script src='../../../../../selecto/packages/selecto/dist/selecto.js'></script>
+<!-- <script src='https://cdnjs.cloudflare.com/ajax/libs/selecto/1.22.6/selecto.min.js'></script> -->
 <script src='https://daybrush.com/moveable-helper/release/latest/dist/moveable-helper.js'></script>
 <script src='https://unpkg.com/tagged-jsx/dist/tagged-jsx.js'></script>
       <script id="rendered-js" >
@@ -391,6 +392,7 @@ <h1 contenteditable="true">Lorem ipsum dolor sit amet.</h1>
         center: true,
         middle: true },
 
+        // preventDefault: false,
       isDisplaySnapDigit: true,
       isDisplayInnerSnapDigit: true,
       isDisplayGridGuidelines: true,
@@ -502,7 +504,8 @@ <h1 contenteditable="true">Lorem ipsum dolor sit amet.</h1>
       preventClickEventOnDrag: true,
       selectFromInside: false,
       toggleContinueSelect: ["shift"],
-      ratio: 0 });
+      ratio: 0,
+    });
 
     window.objSelecto.on("dragStart", e => {
       //console.log("dragStart");
@@ -513,13 +516,16 @@ <h1 contenteditable="true">Lorem ipsum dolor sit amet.</h1>
       target.tagName === "BUTTON" ||
       target.isContentEditable)
       {
+        // console.log("스탑");
         e.stop();
       }
     }).on("select", e => {
-      //console.log("select");
+      console.log("select");
+      targets = e.selected;
       window.objMoveable.target = e.selected;
     }).on("selectEnd", e => {
-      if (e.isDragStart) {
+      if (e.isDragStart ) {
+        // console.log("???");
         e.inputEvent.preventDefault();
 
         setTimeout(() => {

packages/moveable/test/manual/groupandsnappable.html

@@ -137,6 +137,23 @@
       delta[1] && (target.style.height = `${height}px`);
       target.style.transform = drag.transform;
     }).
+    on("beforeResizeGroup", e => {
+        const throttle = num => Math.round(num / 50) * 50;
+        const ratio = e.boundingWidth / e.boundingHeight;
+
+        if (ratio < 1) {
+            const nextBoundingWidth = throttle(e.boundingWidth);
+            const nextBoundingHeight = nextBoundingWidth / ratio;
+
+            e.setSize([nextBoundingWidth, nextBoundingHeight]);
+        } else {
+            const nextBoundingHeight = throttle(e.boundingHeight);
+            const nextBoundingWidth = nextBoundingHeight * ratio;
+
+            e.setSize([nextBoundingWidth, nextBoundingHeight]);
+        }
+
+    }).
 
     on("resizeGroup", e => {
       e.events.forEach(

packages/react-moveable/src/ables/Groupable.tsx

@@ -33,15 +33,14 @@ export default {
         } else {
             persistDatChildren = [];
         }
-        const store = (moveable as any)._store;
         const parentPosition = watchValue(
-            store,
+            moveable,
             "parentPosition",
             [left, top],
             styles => styles.join(","),
         );
         const requestStyles = watchValue(
-            store,
+            moveable,
             "requestStyles",
             moveable.getRequestChildStyles(),
             styles => styles.join(","),

packages/react-moveable/src/ables/Snappable.tsx

@@ -25,6 +25,7 @@ import {
     triggerEvent,
     getDirectionCondition,
     abs,
+    watchValue,
 } from "../utils";
 import {
     find,
@@ -62,6 +63,7 @@ import {
     renderGapGuidelines,
 } from "./snappable/render";
 import {
+    getInitialBounds,
     hasGuidelines,
 } from "./snappable/utils";
 import {
@@ -531,8 +533,18 @@ function addBoundGuidelines(
         verticalPoses,
         horizontalPoses
     );
+
+    const boundMap = getInitialBounds();
+
+
     verticalBoundInfos.forEach((info) => {
         if (info.isBound) {
+            if (info.direction === "start") {
+                boundMap.left = true;
+            }
+            if (info.direction === "end") {
+                boundMap.right = true;
+            }
             verticalSnapPoses.push({
                 type: "bounds",
                 pos: info.pos,
@@ -541,13 +553,20 @@ function addBoundGuidelines(
     });
     horizontalBoundInfos.forEach((info) => {
         if (info.isBound) {
+            if (info.direction === "start") {
+                boundMap.top = true;
+            }
+            if (info.direction === "end") {
+                boundMap.bottom = true;
+            }
             horizontalSnapPoses.push({
                 type: "bounds",
                 pos: info.pos,
             });
         }
     });
     const {
+        boundMap: innerBoundMap,
         vertical: verticalInnerBoundPoses,
         horizontal: horizontalInnerBoundPoses,
     } = checkInnerBoundPoses(moveable);
@@ -581,6 +600,11 @@ function addBoundGuidelines(
             pos: innerPos,
         });
     });
+
+    return {
+        boundMap,
+        innerBoundMap,
+    };
 }
 
 const directionCondition = getDirectionCondition("", ["resizable", "scalable"]);
@@ -688,6 +712,19 @@ color: #f55;
         } = moveable.props;
 
         if (!snapRenderInfo || !snapRenderInfo.render || !hasGuidelines(moveable, "")) {
+            // reset store
+            watchValue(
+                moveable,
+                "boundMap",
+                getInitialBounds(),
+                v => JSON.stringify(v),
+            );
+            watchValue(
+                moveable,
+                "innerBoundMap",
+                getInitialBounds(),
+                v => JSON.stringify(v),
+            );
             return [];
         }
         state.guidelines = getTotalGuidelines(moveable);
@@ -771,7 +808,10 @@ color: #f55;
             });
         }
 
-        addBoundGuidelines(
+        const {
+            boundMap,
+            innerBoundMap,
+        } = addBoundGuidelines(
             moveable,
             [left, right],
             [top, bottom],
@@ -804,6 +844,37 @@ color: #f55;
             },
             true
         );
+
+        const nextBoundMap = watchValue(
+            moveable,
+            "boundMap",
+            boundMap,
+            v => JSON.stringify(v),
+            getInitialBounds(),
+        );
+        const nextInnerBoundMap = watchValue(
+            moveable,
+            "innerBoundMap",
+            innerBoundMap,
+            v => JSON.stringify(v),
+            getInitialBounds(),
+        );
+
+        if (boundMap === nextBoundMap || innerBoundMap === nextInnerBoundMap) {
+            triggerEvent(
+                moveable,
+                "onBound",
+                {
+                    bounds: boundMap,
+                    innerBounds: innerBoundMap,
+                },
+                true
+            );
+        }
+
+
+
+        // verticalSnapPoses.
         return [
             ...renderDashedGuidelines(
                 moveable,
@@ -991,7 +1062,7 @@ color: #f55;
  */
 
 /**
- * You can specify the snap directions of elements. (default: { left: true, top: true, right: true, bottom: true })
+ * You can specify the snap directions of elements. (default: { left: true, ftrue, right: true, bottom: true })
  * @name Moveable.Snappable#elementSnapDirections
  * @see {@link https://daybrush.com/moveable/release/latest/doc/Moveable.Snappable.html#.SnappableOptions}
  * @example

packages/react-moveable/src/ables/snappable/bounds.ts

@@ -202,13 +202,15 @@ function checkBounds(
 
     if (startBoundPos + 1 > minPos) {
         boundInfos.push({
+            direction: "start",
             isBound: true,
             offset: minPos - startBoundPos,
             pos: startBoundPos,
         });
     }
     if (endBoundPos - 1 < maxPos) {
         boundInfos.push({
+            direction: "end",
             isBound: true,
             offset: maxPos - endBoundPos,
             pos: endBoundPos,

packages/react-moveable/src/ables/snappable/innerBounds.ts

@@ -6,7 +6,7 @@ import { SnappableProps, DraggableProps, RotatableProps, MoveableManagerInterfac
 import { getDragDist, getPosByDirection, getInverseDragDist } from "../../gesto/GestoUtils";
 import { getNearOffsetInfo } from "./snap";
 import { TINY_NUM } from "../../consts";
-import { solveLineConstants } from "./utils";
+import { getInitialBounds, solveLineConstants } from "./utils";
 
 function isStartLine(dot: number[], line: number[][]) {
     // l    o     => true
@@ -538,9 +538,11 @@ export function checkInnerBoundPoses(
     moveable: MoveableManagerInterface<SnappableProps>,
 ) {
     const innerBounds = moveable.props.innerBounds;
+    const boundMap = getInitialBounds();
 
     if (!innerBounds) {
         return {
+            boundMap,
             vertical: [],
             horizontal: [],
         };
@@ -563,12 +565,6 @@ export function checkInnerBoundPoses(
     const horizontalPoses: number[] = [];
     const verticalPoses: number[] = [];
 
-    const boundMap = {
-        top: false,
-        bottom: false,
-        left: false,
-        right: false,
-    };
 
     lineInfos.forEach(lineInfo => {
         const { line, lineConstants } = lineInfo;
@@ -604,6 +600,7 @@ export function checkInnerBoundPoses(
     });
 
     return {
+        boundMap,
         horizontal: horizontalPoses,
         vertical: verticalPoses,
     };

packages/react-moveable/src/ables/snappable/utils.ts

@@ -23,6 +23,17 @@ export const HORIZONTAL_NAMES_MAP = {
 } as const;
 
 
+
+export function getInitialBounds() {
+    return {
+        left: false,
+        top: false,
+        right: false,
+        bottom: false,
+    };
+}
+
+
 export function hasGuidelines(
     moveable: MoveableManagerInterface<any, any>,
     ableName: string

packages/react-moveable/src/types.ts

@@ -357,6 +357,7 @@ export interface SnapBoundInfo {
     snap?: SnapInfo;
 }
 export interface BoundInfo {
+    direction?: "start" | "end";
     isBound: boolean;
     offset: number;
     pos: number;
@@ -2811,9 +2812,9 @@ export interface ElementGuidelineValue extends SnapDirections {
 }
 export interface SnappableEvents {
     onSnap: OnSnap;
+    onBound: OnBound;
 }
 export interface SnappableProps extends SnappableOptions, EventInterface<SnappableEvents> {
-    onSnap?: (e: OnSnap) => any;
 }
 
 /**
@@ -2834,6 +2835,25 @@ export interface OnSnap {
      */
     gaps: SnapGuideline[];
 }
+
+/**
+ * @typedef
+ * @memberof Moveable.Snappable
+ */
+export interface OnBound {
+    bounds: {
+        left: boolean;
+        top: boolean;
+        right: boolean;
+        bottom: boolean;
+    };
+    innerBounds: {
+        left: boolean;
+        top: boolean;
+        right: boolean;
+        bottom: boolean;
+    };
+}
 /**
  * @typedef
  * @memberof Moveable.Snappable

packages/react-moveable/src/utils.tsx

@@ -1670,17 +1670,19 @@ export function isDeepArrayEquals(arr1: any[], arr2: any[]): boolean {
 
 
 export function watchValue<T>(
-    store: Record<string, any>,
+    moveable: any,
     property: string,
     nextValue: T,
     valueKey: (value: T) => string | number,
+    defaultValue?: T,
 ): T {
+    const store = (moveable as any)._store;
     const prevValue = store[property];
 
-    if (
-        property in store
-        && (prevValue === nextValue || valueKey(prevValue) === valueKey(nextValue))
-    ) {
+    if (!(property in store)) {
+        store.property = defaultValue;
+    }
+    if (prevValue === nextValue || valueKey(prevValue) === valueKey(nextValue)) {
         return prevValue;
     }
 

packages/react-moveable/stories/5-Snap&Bound/ReactBoundResizableApp.tsx

@@ -34,6 +34,9 @@ export default function App(props: Record<string, any>) {
                         e.target.style.height = `${e.height}px`;
                         e.target.style.transform = e.drag.transform;
                     }}
+                    onBound={e => {
+                        console.log(e);
+                    }}
                 />
             </div>
         </div>