Improve cut and paste

lancemk · Mar 23, 2023 · b8691b4 · b8691b4
1 parent 09e7f47
commit b8691b4
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 11 deletions.
diff --git a/packages/noya-canvas/src/components/SimpleCanvas.tsx b/packages/noya-canvas/src/components/SimpleCanvas.tsx
@@ -80,7 +80,10 @@ export const SimpleCanvas = memo(
     useCopyHandler();
 
     usePasteHandler<SupportedImageUploadType>({
-      onPasteLayers: actions.addLayer,
+      onPasteLayers: (layers) =>
+        actions.addLayer(layers, {
+          useOriginalDimensions: true,
+        }),
     });
 
     // When canvasSize changes, zoom to fit the isolated layer

diff --git a/packages/noya-canvas/src/hooks/useCopyHandler.tsx b/packages/noya-canvas/src/hooks/useCopyHandler.tsx
@@ -11,7 +11,7 @@ export type NoyaClipboardData = {
 };
 
 export function useCopyHandler() {
-  const [state] = useApplicationState();
+  const [state, dispatch] = useApplicationState();
   const selectedLayers = getSelectedLayers(state);
 
   useEffect(() => {
@@ -31,10 +31,21 @@ export function useCopyHandler() {
         'text/html',
         ClipboardUtils.toEncodedHTML(data),
       );
+
+      if (event.type === 'cut') {
+        dispatch(
+          'deleteLayer',
+          selectedLayers.map((layer) => layer.do_objectID),
+        );
+      }
     };
 
     document.addEventListener('copy', handler);
+    document.addEventListener('cut', handler);
 
-    return () => document.removeEventListener('copy', handler);
-  }, [selectedLayers]);
+    return () => {
+      document.removeEventListener('copy', handler);
+      document.removeEventListener('cut', handler);
+    };
+  }, [dispatch, selectedLayers]);
 }
diff --git a/packages/noya-canvas/src/hooks/useInteractionHandlers.tsx b/packages/noya-canvas/src/hooks/useInteractionHandlers.tsx
@@ -181,7 +181,7 @@ export function useInteractionHandlers({
       setLayerY: (value: number, mode: SetNumberMode) =>
         dispatch('setLayerY', value, mode),
       selectAllLayers: () => dispatch('selectAllLayers'),
-      addLayer: (layer) => dispatch('addLayer', layer),
+      addLayer: (layer, options) => dispatch('addLayer', layer, options),
       highlightLayer: (layerHighlight) =>
         dispatch('highlightLayer', layerHighlight),
       enterInsertMode: (layerType, method) =>

diff --git a/packages/noya-canvas/src/interactions/clipboard.ts b/packages/noya-canvas/src/interactions/clipboard.ts
@@ -1,12 +1,16 @@
 import { ReactEventHandlers } from 'noya-designsystem';
 import Sketch from 'noya-file-format';
-import { handleActionType, InteractionState } from 'noya-state';
+import {
+  AddLayerOptions,
+  handleActionType,
+  InteractionState,
+} from 'noya-state';
 import { ClipboardUtils } from 'noya-utils';
 import { NoyaClipboardData } from '../hooks/useCopyHandler';
 import { InteractionAPI } from './types';
 
 export interface ClipboardActions {
-  addLayer: (layers: Sketch.AnyLayer[]) => void;
+  addLayer: (layers: Sketch.AnyLayer[], options?: AddLayerOptions) => void;
 }
 
 type MenuItemType = 'copy' | 'paste';

diff --git a/packages/noya-state/src/index.ts b/packages/noya-state/src/index.ts
@@ -13,6 +13,7 @@ export * from './reducers/blockReducer';
 export * from './reducers/canvasReducer';
 export * from './reducers/historyReducer';
 export * from './reducers/interactionReducer';
+export type { AddLayerOptions } from './reducers/layerReducer';
 export type { SelectedPoint } from './reducers/pointReducer';
 export * from './reducers/styleReducer';
 export * from './reducers/workspaceReducer';

diff --git a/packages/noya-state/src/reducers/layerReducer.ts b/packages/noya-state/src/reducers/layerReducer.ts
@@ -46,6 +46,11 @@ import { createPage } from '../selectors/pageSelectors';
 import { SelectionType, updateSelection } from '../utils/selection';
 import type { ApplicationState } from './applicationReducer';
 
+export type AddLayerOptions = {
+  point?: Point;
+  useOriginalDimensions?: boolean;
+};
+
 export type LayerAction =
   | [
       type: 'moveLayer',
@@ -62,7 +67,11 @@ export type LayerAction =
   | [type: 'detachSymbol', layerId: string | string[]]
   | [type: 'deleteSymbol', ids: string[]]
   | [type: 'duplicateLayer', ids: string[]]
-  | [type: 'addLayer', data: Sketch.AnyLayer | Sketch.AnyLayer[], point?: Point]
+  | [
+      type: 'addLayer',
+      data: Sketch.AnyLayer | Sketch.AnyLayer[],
+      options?: AddLayerOptions,
+    ]
   | [
       type: 'selectLayer',
       layerId: string | string[] | undefined,
@@ -469,7 +478,9 @@ export function layerReducer(
       });
     }
     case 'addLayer': {
-      const [, layer, point] = action;
+      const [, layer, options = {}] = action;
+      const { useOriginalDimensions = false, point } = options;
+
       const layers = Array.isArray(layer) ? layer : [layer];
       const currentPageIndex = getCurrentPageIndex(state);
       const selectedLayerIndexPath =
@@ -556,6 +567,8 @@ export function layerReducer(
               });
 
               newLayer = produce(newLayer, (draftLayer) => {
+                if (useOriginalDimensions) return;
+
                 const targetPoint = point
                   ? point
                   : { x: parentBounds.midX, y: parentBounds.midY };

diff --git a/packages/site/src/ayon/Content.tsx b/packages/site/src/ayon/Content.tsx
@@ -103,7 +103,7 @@ export const Content = memo(function Content({
       'canvas',
     );
 
-    dispatch('addLayer', layers, point);
+    dispatch('addLayer', layers, { point });
   };
 
   useEffect(() => {

diff --git a/packages/site/src/ayon/Widget.tsx b/packages/site/src/ayon/Widget.tsx
@@ -406,7 +406,11 @@ export const Widget = forwardRef(function Widget(
     layersToInsert.forEach((child) => {
       const bounds = createBounds(child.frame);
 
-      actions.push(['addLayer', child, { x: bounds.midX, y: bounds.midY }]);
+      actions.push([
+        'addLayer',
+        child,
+        { point: { x: bounds.midX, y: bounds.midY } },
+      ]);
     });
 
     dispatch('batch', actions);