From c6914031e75712eef6a574d6aaf04645535f59d3 Mon Sep 17 00:00:00 2001
From: Daybrush <daybrush@gmail.com>
Date: Sun, 17 Jul 2022 00:58:04 +0900
Subject: [PATCH] feat: add hideChildMoveableDefaultLines prop #692

---
 .../react-moveable/src/react-moveable/MoveableManager.tsx  | 4 +++-
 .../react-moveable/src/react-moveable/ables/Default.ts     | 1 +
 .../react-moveable/src/react-moveable/ables/Groupable.tsx  | 1 +
 packages/react-moveable/src/react-moveable/types.ts        | 5 +++++
 .../3-Group/1-DraggableResizableRotatable.stories.tsx      | 3 ++-
 .../3-Group/2-DraggableScalableRotatable.stories.tsx       | 3 ++-
 .../react-moveable/stories/3-Group/3-AllInOne.stories.tsx  | 2 ++
 .../stories/3-Group/apps/ReactAllInOneApp.tsx              | 1 +
 .../3-Group/apps/ReactDraggableResizableRotatableApp.tsx   | 1 +
 .../3-Group/apps/ReactDraggableScalableRotatableApp.tsx    | 1 +
 packages/react-moveable/stories/controls/group.ts          | 7 +++++++
 11 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/packages/react-moveable/src/react-moveable/MoveableManager.tsx b/packages/react-moveable/src/react-moveable/MoveableManager.tsx
index 3231d1e1d..ec680b14a 100644
--- 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
index ab03e7143..17913167f 100644
--- 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
index 37aa8aa4c..08933a961 100644
--- 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
index ac7c60861..c7b928e6e 100644
--- 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
index e73bdaa94..6ee341d5e 100644
--- a/packages/react-moveable/stories/3-Group/1-DraggableResizableRotatable.stories.tsx
+++ b/packages/react-moveable/stories/3-Group/1-DraggableResizableRotatable.stories.tsx
@@ -9,7 +9,7 @@ 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";
 
 
@@ -17,6 +17,7 @@ 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
index 0376fba25..f0ca3b340 100644
--- 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
index 9d0bf9064..22981f594 100644
--- 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
index cdb1e7c15..5020d6488 100644
--- 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
index 40c98e382..956b967a1 100644
--- 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
index 231ca4c82..bdff807ea 100644
--- 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
index 6b90b200f..7463fcb3a 100644
--- 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",