Merge pull request noya-app#385 from noya-app/improve-selection-paste

Improve selection & paste behavior
lancemk · Mar 23, 2023 · 51363a0 · 51363a0
2 parents ef6287c + 9d6d2d4
commit 51363a0
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 3 deletions.
diff --git a/packages/noya-canvas/src/interactions/drawing.ts b/packages/noya-canvas/src/interactions/drawing.ts
@@ -81,6 +81,7 @@ export const createDrawingInteraction =
               groups: event[api.platformModKey] ? 'childrenOnly' : 'groupOnly',
               artboards: 'childrenOnly',
               includeLockedLayers: false,
+              includeLayersOutsideArtboardBounds: true,
             },
           );
 

diff --git a/packages/noya-canvas/src/interactions/editBlock.ts b/packages/noya-canvas/src/interactions/editBlock.ts
@@ -47,6 +47,7 @@ export const createEditBlockInteraction = ({
               groups: event[api.platformModKey] ? 'childrenOnly' : 'groupOnly',
               artboards: 'emptyOrContainedArtboardOrChildren',
               includeLockedLayers: false,
+              includeLayersOutsideArtboardBounds: true,
             },
           );
 

diff --git a/packages/noya-canvas/src/interactions/marquee.ts b/packages/noya-canvas/src/interactions/marquee.ts
@@ -66,6 +66,7 @@ export function marqueeInteraction(actions: MarqueeActions) {
           artboards: 'childrenOnly',
           includeLockedLayers: false,
           includePartiallyContainedLayers: origin.x < current.x,
+          includeLayersOutsideArtboardBounds: true,
         });
 
         selectLayer(layerIds);
@@ -82,6 +83,7 @@ export function marqueeInteraction(actions: MarqueeActions) {
             groups: event[api.platformModKey] ? 'childrenOnly' : 'groupOnly',
             artboards: 'childrenOnly',
             includeLockedLayers: false,
+            includeLayersOutsideArtboardBounds: true,
           });
 
           const layerIds = layerId ? [layerId] : [];
@@ -96,6 +98,7 @@ export function marqueeInteraction(actions: MarqueeActions) {
             artboards: 'childrenOnly',
             includeLockedLayers: false,
             includePartiallyContainedLayers: origin.x < current.x,
+            includeLayersOutsideArtboardBounds: true,
           });
 
           reset();

diff --git a/packages/noya-canvas/src/interactions/move.ts b/packages/noya-canvas/src/interactions/move.ts
@@ -65,6 +65,7 @@ export const createMoveInteraction = (
               ? 'childrenOnly'
               : 'emptyOrContainedArtboardOrChildren',
             includeLockedLayers: false,
+            includeLayersOutsideArtboardBounds: true,
           });
 
           if (layerId) {

diff --git a/packages/noya-canvas/src/interactions/selection.ts b/packages/noya-canvas/src/interactions/selection.ts
@@ -64,6 +64,7 @@ export function selectionInteraction({
               ? 'childrenOnly'
               : 'emptyOrContainedArtboardOrChildren',
             includeLockedLayers: false,
+            includeLayersOutsideArtboardBounds: true,
           },
         );
 
@@ -90,6 +91,7 @@ export function selectionInteraction({
               ? 'childrenOnly'
               : 'emptyOrContainedArtboardOrChildren',
             includeLockedLayers: false,
+            includeLayersOutsideArtboardBounds: true,
           },
         );
 

diff --git a/packages/noya-state/src/reducers/layerReducer.ts b/packages/noya-state/src/reducers/layerReducer.ts
@@ -5,7 +5,9 @@ import {
   AffineTransform,
   createBounds,
   Point,
+  rectContainsRect,
   transformRect,
+  unionRects,
 } from 'noya-geometry';
 import { SketchModel } from 'noya-sketch-model';
 import {
@@ -504,6 +506,10 @@ export function layerReducer(
           )
         : undefined;
 
+      const newLayersBoundingRect = unionRects(
+        ...layers.map((layer) => layer.frame),
+      );
+
       return produce(state, (draft) => {
         const draftPage = draft.sketch.pages[currentPageIndex];
         draft.selectedLayerIds = [];
@@ -567,8 +573,26 @@ export function layerReducer(
               });
 
               newLayer = produce(newLayer, (draftLayer) => {
-                if (useOriginalDimensions) return;
+                // TODO: We may not need this flag. But need to test this behavior on noya.design.
+                if (useOriginalDimensions) {
+                  const newLayersFitWithinParent = rectContainsRect(
+                    selectedLayer.frame,
+                    newLayersBoundingRect,
+                  );
+
+                  if (newLayersFitWithinParent) return;
+
+                  // Center all layers within parent
+                  draftLayer.frame.x +=
+                    parentBounds.midX -
+                    createBounds(newLayersBoundingRect).midX;
+                  draftLayer.frame.y +=
+                    parentBounds.midY -
+                    createBounds(newLayersBoundingRect).midY;
+                  return;
+                }
 
+                // Center layers individually at target point or within parent
                 const targetPoint = point
                   ? point
                   : { x: parentBounds.midX, y: parentBounds.midY };

diff --git a/packages/noya-state/src/selectors/geometrySelectors.ts b/packages/noya-state/src/selectors/geometrySelectors.ts
@@ -59,6 +59,11 @@ export type LayerTraversalOptions = {
    */
   includePartiallyContainedLayers?: boolean;
 
+  /**
+   * The default is false
+   */
+  includeLayersOutsideArtboardBounds?: boolean;
+
   /**
    * The default is `groupOnly`
    */
@@ -82,6 +87,7 @@ const DEFAULT_TRAVERSAL_OPTIONS: Required<LayerTraversalOptions> = {
   includeHiddenLayers: false,
   includeLockedLayers: true,
   includePartiallyContainedLayers: true,
+  includeLayersOutsideArtboardBounds: false,
   groups: 'groupOnly',
   artboards: 'childrenOnly',
 };
@@ -170,7 +176,12 @@ export function getLayersInRect(
     // TODO: Handle rotated rectangle collision
     const hasIntersect = rectsIntersect(screenRect, transformedFrame);
 
-    if (!hasIntersect) return SKIP;
+    const visitChildrenEvenWhenNotIntersecting =
+      Layers.isArtboard(layer) && options.includeLayersOutsideArtboardBounds;
+
+    if (!hasIntersect && !visitChildrenEvenWhenNotIntersecting) {
+      return SKIP;
+    }
 
     const includeSelf =
       (Layers.isGroup(layer) && options.groups === 'groupAndChildren') ||
@@ -251,7 +262,10 @@ export function getLayerAtPoint(
       screenPoint,
     );
 
-    if (!frameContainsPoint) {
+    const visitChildrenEvenWhenNotIntersecting =
+      Layers.isArtboard(layer) && options.includeLayersOutsideArtboardBounds;
+
+    if (!frameContainsPoint && !visitChildrenEvenWhenNotIntersecting) {
       if (
         Layers.isSymbolMasterOrArtboard(layer) &&
         options.artboards === 'emptyOrContainedArtboardOrChildren' &&