feat: add hideChildMoveableDefaultLines prop #692

daybrush · Jul 16, 2022 · c691403 · c691403
1 parent eb0a71c
commit c691403
Show file tree

Hide file tree

Showing 11 changed files with 26 additions and 3 deletions.
diff --git a/packages/react-moveable/src/react-moveable/MoveableManager.tsx b/packages/react-moveable/src/react-moveable/MoveableManager.tsx
@@ -749,9 +749,11 @@ export default class MoveableManager<T = {}>
             edge,
             zoom,
             hideDefaultLines,
+            hideChildMoveableDefaultLines,
+            parentMoveable,
         } = props;
 
-        if (hideDefaultLines) {
+        if (hideDefaultLines || (parentMoveable && hideChildMoveableDefaultLines)) {
             return [];
         }
         const renderPoses = this.state.renderPoses;

diff --git a/packages/react-moveable/src/react-moveable/ables/Default.ts b/packages/react-moveable/src/react-moveable/ables/Default.ts
@@ -19,6 +19,7 @@ export default {
         cspNonce: String,
         translateZ: Number,
         hideDefaultLines: Boolean,
+        hideChildMoveableDefaultLines: Boolean,
         props: Object,
         flushSync: Function,
     } as const,

diff --git a/packages/react-moveable/src/react-moveable/ables/Groupable.tsx b/packages/react-moveable/src/react-moveable/ables/Groupable.tsx
@@ -27,6 +27,7 @@ export default {
                 cssStyled={props.cssStyled}
                 customStyledMap={props.customStyledMap}
                 useResizeObserver={props.useResizeObserver}
+                hideChildMoveableDefaultLines={props.hideChildMoveableDefaultLines}
                 parentMoveable={moveable}
                 parentPosition={position}
             />;

diff --git a/packages/react-moveable/src/react-moveable/types.ts b/packages/react-moveable/src/react-moveable/types.ts
@@ -126,6 +126,11 @@ export interface DefaultOptions {
      * @default false
      */
     hideDefaultLines?: boolean;
+    /**
+     * Whether to hide the line in child moveable for group corresponding to the rect of the target.
+     * @default false
+     */
+    hideChildMoveableDefaultLines?: boolean;
     /**
      * You can use props in object format or custom props.
      * @default empty object

diff --git a/packages/react-moveable/stories/3-Group/1-DraggableResizableRotatable.stories.tsx b/packages/react-moveable/stories/3-Group/1-DraggableResizableRotatable.stories.tsx
@@ -9,14 +9,15 @@ import {
     DEFAULT_RESIZABLE_CONTROLS,
     DEFAULT_ROTATABLE_CONTROLS,
 } from "../controls/default";
-import { DEFAULT_RESIZABLE_GROUP_CONTROLS } from "../controls/group";
+import { DEFAULT_GROUPPABLE_GROUP_CONTROLS, DEFAULT_RESIZABLE_GROUP_CONTROLS } from "../controls/group";
 import { DEFAULT_CSS_TEMPLATE } from "../templates/default";
 
 
 export const DraggableResizableGroupTemplate = App as any;
 
 DraggableResizableGroupTemplate.storyName = "Draggable & Resizable & Rotatable";
 DraggableResizableGroupTemplate.argTypes = {
+    ...DEFAULT_GROUPPABLE_GROUP_CONTROLS,
     ...DEFAULT_RESIZABLE_CONTROLS,
     ...DEFAULT_ROTATABLE_CONTROLS,
     ...DEFAULT_DRAGGABLE_CONTROLS,

diff --git a/packages/react-moveable/stories/3-Group/2-DraggableScalableRotatable.stories.tsx b/packages/react-moveable/stories/3-Group/2-DraggableScalableRotatable.stories.tsx
@@ -10,13 +10,14 @@ import {
     DEFAULT_ROTATABLE_CONTROLS,
 } from "../controls/default";
 import { DEFAULT_CSS_TEMPLATE } from "../templates/default";
-import { DEFAULT_SCALABLE_GROUP_CONTROLS } from "../controls/group";
+import { DEFAULT_GROUPPABLE_GROUP_CONTROLS, DEFAULT_SCALABLE_GROUP_CONTROLS } from "../controls/group";
 
 
 export const DraggableScalableGroupTemplate = App as any;
 
 DraggableScalableGroupTemplate.storyName = "Draggable & Scalable & Rotatable";
 DraggableScalableGroupTemplate.argTypes = {
+    ...DEFAULT_GROUPPABLE_GROUP_CONTROLS,
     ...DEFAULT_SCALABLE_CONTROLS,
     ...DEFAULT_SCALABLE_GROUP_CONTROLS,
     ...DEFAULT_ROTATABLE_CONTROLS,

diff --git a/packages/react-moveable/stories/3-Group/3-AllInOne.stories.tsx b/packages/react-moveable/stories/3-Group/3-AllInOne.stories.tsx
@@ -8,12 +8,14 @@ import {
     DEFAULT_DRAGGABLE_CONTROLS,
     DEFAULT_ROTATABLE_CONTROLS, DEFAULT_SCALABLE_CONTROLS,
 } from "../controls/default";
+import { DEFAULT_GROUPPABLE_GROUP_CONTROLS } from "../controls/group";
 // import  from "../controls/default";
 
 export const AllInOneTemplate = App as any;
 
 AllInOneTemplate.storyName = "All In One";
 AllInOneTemplate.argTypes = {
+    ...DEFAULT_GROUPPABLE_GROUP_CONTROLS,
     ...DEFAULT_DRAGGABLE_CONTROLS,
     ...DEFAULT_SCALABLE_CONTROLS,
     ...DEFAULT_ROTATABLE_CONTROLS,

diff --git a/packages/react-moveable/stories/3-Group/apps/ReactAllInOneApp.tsx b/packages/react-moveable/stories/3-Group/apps/ReactAllInOneApp.tsx
@@ -16,6 +16,7 @@ export default function App(props: Record<string, any>) {
                 }}>Target3</div>
                 <Moveable
                     target={".target"}
+                    hideChildMoveableDefaultLines={props.hideChildMoveableDefaultLines}
                     draggable={props.draggable}
                     throttleDrag={props.throttleDrag}
                     edgeDraggable={props.edgeDraggable}

diff --git a/packages/react-moveable/stories/3-Group/apps/ReactDraggableResizableRotatableApp.tsx b/packages/react-moveable/stories/3-Group/apps/ReactDraggableResizableRotatableApp.tsx
@@ -11,6 +11,7 @@ export default function App(props: Record<string, any>) {
         <div className="target target3">Target3</div>
         <Moveable
             target={".target"}
+            hideChildMoveableDefaultLines={props.hideChildMoveableDefaultLines}
             draggable={props.draggable}
             throttleDrag={props.throttleDrag}
             edgeDraggable={props.edgeDraggable}

diff --git a/packages/react-moveable/stories/3-Group/apps/ReactDraggableScalableRotatableApp.tsx b/packages/react-moveable/stories/3-Group/apps/ReactDraggableScalableRotatableApp.tsx
@@ -8,6 +8,7 @@ export default function App(props: Record<string, any>) {
         <div className="target target3">Target3</div>
         <Moveable
             target={".target"}
+            hideChildMoveableDefaultLines={props.hideChildMoveableDefaultLines}
             draggable={props.draggable}
             throttleDrag={props.throttleDrag}
             edgeDraggable={props.edgeDraggable}

diff --git a/packages/react-moveable/stories/controls/group.ts b/packages/react-moveable/stories/controls/group.ts
@@ -1,5 +1,12 @@
 import { makeArgType, makeLink } from "../utils";
 
+export const DEFAULT_GROUPPABLE_GROUP_CONTROLS = {
+    hideChildMoveableDefaultLines: makeArgType({
+        type: "boolean",
+        description: makeLink("Grouppable", "hideChildMoveableDefaultLines"),
+        defaultValue: false,
+    }),
+}
 export const DEFAULT_RESIZABLE_GROUP_CONTROLS = {
     maxWidth: makeArgType({
         type: "number",