refactor: refactor select element class

F-star · Jan 1, 2024 · 51b372c · 51b372c
1 parent 06bdc13
commit 51b372c
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 68 deletions.
diff --git a/packages/suika/src/components/Cards/AlignCard/AlignCard.tsx b/packages/suika/src/components/Cards/AlignCard/AlignCard.tsx
@@ -5,7 +5,15 @@ import { AlignType } from '../../../editor/commands/align';
 import { Graph } from '../../../editor/scene/graph';
 import { BaseCard } from '../BaseCard';
 import './AlignCard.scss';
-import { AlignHCenter, AlignLeft, AlignRight, AlignTop, AlignVCenter, IconAlignBottom } from '@suika/icons';
+import {
+  AlignHCenter,
+  AlignLeft,
+  AlignRight,
+  AlignTop,
+  AlignVCenter,
+  IconAlignBottom,
+} from '@suika/icons';
+import { alignAndRecord } from '../../../editor/service';
 
 export const AlignCard: FC = () => {
   const editor = useContext(EditorContext);
@@ -33,44 +41,47 @@ export const AlignCard: FC = () => {
         <div
           className="align-item"
           onClick={() => {
-            editor?.selectedElements.align(AlignType.Left);
+            editor && alignAndRecord(editor, AlignType.Left);
           }}
         >
           <AlignLeft />
         </div>
         <div
           className="align-item"
           onClick={() => {
-            editor?.selectedElements.align(AlignType.HCenter);
+            editor && alignAndRecord(editor, AlignType.HCenter);
           }}
         >
           <AlignHCenter />
         </div>
         <div
           className="align-item"
           onClick={() => {
-            editor?.selectedElements.align(AlignType.Right);
+            editor && alignAndRecord(editor, AlignType.Right);
           }}
         >
           <AlignRight />
         </div>
-        <div className="align-item"
+        <div
+          className="align-item"
           onClick={() => {
-            editor?.selectedElements.align(AlignType.Top);
+            editor && alignAndRecord(editor, AlignType.Top);
           }}
         >
           <AlignTop />
         </div>
-        <div className="align-item"
+        <div
+          className="align-item"
           onClick={() => {
-            editor?.selectedElements.align(AlignType.VCenter);
+            editor && alignAndRecord(editor, AlignType.VCenter);
           }}
         >
           <AlignVCenter />
         </div>
-        <div className="align-item"
+        <div
+          className="align-item"
           onClick={() => {
-            editor?.selectedElements.align(AlignType.Bottom);
+            editor && alignAndRecord(editor, AlignType.Bottom);
           }}
         >
           <IconAlignBottom />

diff --git a/packages/suika/src/components/Cards/ElementsInfoCard/ElementsInfoCard.tsx b/packages/suika/src/components/Cards/ElementsInfoCard/ElementsInfoCard.tsx
@@ -1,6 +1,6 @@
 import { FC, useContext, useEffect, useState } from 'react';
 import { EditorContext } from '../../../context';
-import { MutateGraphsAndRecord } from '../../../editor/service/mutate_graphs_and_record';
+import { MutateGraphsAndRecord } from '../../../editor/service';
 import { remainDecimal } from '../../../utils/common';
 import { getRectRotatedXY } from '../../../utils/geo';
 import { deg2Rad, normalizeRadian, rad2Deg } from '@suika/geo';

diff --git a/packages/suika/src/components/ContextMenu/ContextMenu.tsx b/packages/suika/src/components/ContextMenu/ContextMenu.tsx
@@ -8,7 +8,7 @@ import './ContextMenu.scss';
 import { FormattedMessage } from 'react-intl';
 import { IHistoryStatus } from '../../editor/commands/command_manager';
 import { isWindows } from '../../utils/common';
-import { MutateGraphsAndRecord } from '../../editor/service/mutate_graphs_and_record';
+import { MutateGraphsAndRecord, arrangeAndRecord } from '../../editor/service';
 
 const OFFSET_X = 2;
 const OFFSET_Y = -5;
@@ -154,9 +154,7 @@ export const ContextMenu: FC = () => {
           suffix={isWindows ? 'Ctrl+]' : '⌘]'}
           onClick={() => {
             setVisible(false);
-            if (editor) {
-              editor.selectedElements.arrange(ArrangeType.Forward);
-            }
+            editor && arrangeAndRecord(editor, ArrangeType.Forward);
           }}
         >
           <FormattedMessage id="arrange.forward" />
@@ -165,9 +163,7 @@ export const ContextMenu: FC = () => {
           suffix={isWindows ? 'Ctrl+[' : '⌘['}
           onClick={() => {
             setVisible(false);
-            if (editor) {
-              editor.selectedElements.arrange(ArrangeType.Backward);
-            }
+            editor && arrangeAndRecord(editor, ArrangeType.Backward);
           }}
         >
           <FormattedMessage id="arrange.backward" />
@@ -176,9 +172,7 @@ export const ContextMenu: FC = () => {
           suffix="]"
           onClick={() => {
             setVisible(false);
-            if (editor) {
-              editor.selectedElements.arrange(ArrangeType.Front);
-            }
+            editor && arrangeAndRecord(editor, ArrangeType.Front);
           }}
         >
           <FormattedMessage id="arrange.front" />
@@ -187,9 +181,7 @@ export const ContextMenu: FC = () => {
           suffix="["
           onClick={() => {
             setVisible(false);
-            if (editor) {
-              editor.selectedElements.arrange(ArrangeType.Back);
-            }
+            editor && arrangeAndRecord(editor, ArrangeType.Back);
           }}
         >
           <FormattedMessage id="arrange.back" />

diff --git a/packages/suika/src/components/LayerPanel/LayerPanel.tsx b/packages/suika/src/components/LayerPanel/LayerPanel.tsx
@@ -3,7 +3,7 @@ import { EditorContext } from '../../context';
 import { IObject } from '../../type';
 import './LayerPanel.scss';
 import { Tree } from './LayerItem/tree';
-import { MutateGraphsAndRecord } from '../../editor/service/mutate_graphs_and_record';
+import { MutateGraphsAndRecord } from '../../editor/service';
 
 export const LayerPanel: FC = () => {
   const editor = useContext(EditorContext);

diff --git a/packages/suika/src/editor/host_event_manager/command_key_binding.ts b/packages/suika/src/editor/host_event_manager/command_key_binding.ts
@@ -1,6 +1,6 @@
 import { ArrangeType } from '../commands/arrange';
 import { Editor } from '../editor';
-import { MutateGraphsAndRecord } from '../service/mutate_graphs_and_record';
+import { MutateGraphsAndRecord, arrangeAndRecord } from '../service';
 
 export class CommandKeyBinding {
   private isBound = false;
@@ -185,7 +185,7 @@ export class CommandKeyBinding {
     /********** Arrange *******/
     // front
     const frontAction = () => {
-      editor.selectedElements.arrange(ArrangeType.Front);
+      arrangeAndRecord(editor, ArrangeType.Front);
       editor.sceneGraph.render();
     };
     editor.keybindingManager.register({
@@ -197,7 +197,7 @@ export class CommandKeyBinding {
 
     // back
     const backAction = () => {
-      editor.selectedElements.arrange(ArrangeType.Back);
+      arrangeAndRecord(editor, ArrangeType.Back);
       editor.sceneGraph.render();
     };
     editor.keybindingManager.register({
@@ -209,7 +209,7 @@ export class CommandKeyBinding {
 
     // forward
     const forwardAction = () => {
-      editor.selectedElements.arrange(ArrangeType.Forward);
+      arrangeAndRecord(editor, ArrangeType.Forward);
       editor.sceneGraph.render();
     };
     editor.keybindingManager.register({
@@ -222,7 +222,7 @@ export class CommandKeyBinding {
 
     // backward
     const backwardAction = () => {
-      editor.selectedElements.arrange(ArrangeType.Backward);
+      arrangeAndRecord(editor, ArrangeType.Backward);
       editor.sceneGraph.render();
     };
     editor.keybindingManager.register({

diff --git a/packages/suika/src/editor/selected_elements.ts b/packages/suika/src/editor/selected_elements.ts
@@ -6,8 +6,6 @@ import { getRectCenterPoint } from '../utils/geo';
 import { getMergedRect } from '@suika/geo';
 import { RemoveElement } from './commands/remove_element';
 import { Editor } from './editor';
-import { AlignCmd, AlignType } from './commands/align';
-import { ArrangeCmd, ArrangeType } from './commands/arrange';
 import { GroupElements } from './commands/group';
 
 interface Events {
@@ -137,42 +135,6 @@ class SelectedElements {
     );
     this.editor.sceneGraph.render();
   }
-  setRotateXY(rotatedX: number, rotatedY: number) {
-    const items = this.items;
-    for (let i = 0, len = items.length; i < len; i++) {
-      const element = items[i];
-      element.setRotateXY(rotatedX, rotatedY);
-    }
-  }
-  align(type: AlignType) {
-    if (this.size() < 2) {
-      console.warn('can align zero or two elements, fail silently');
-      return;
-    }
-    this.editor.commandManager.pushCommand(
-      new AlignCmd('Align ' + type, this.editor, this.items, type),
-    );
-    this.editor.sceneGraph.render();
-  }
-
-  arrange(type: ArrangeType) {
-    if (this.size() === 0) {
-      console.warn("can't arrange, no element");
-    }
-
-    if (
-      ArrangeCmd.shouldExecCmd(
-        type,
-        this.editor.sceneGraph.children,
-        new Set(this.items),
-      )
-    ) {
-      this.editor.commandManager.pushCommand(
-        new ArrangeCmd('Arrange ' + type, this.editor, this.items, type),
-      );
-    }
-    this.editor.sceneGraph.render();
-  }
 
   selectAll() {
     this.setItems(

diff --git a/packages/suika/src/editor/service/align_and_record.ts b/packages/suika/src/editor/service/align_and_record.ts
@@ -0,0 +1,18 @@
+import { AlignCmd, AlignType } from '../commands/align';
+import { Editor } from '../editor';
+
+export const alignAndRecord = (editor: Editor, type: AlignType) => {
+  if (editor.selectedElements.size() < 2) {
+    console.warn('can align zero or two elements, fail silently');
+    return;
+  }
+  editor.commandManager.pushCommand(
+    new AlignCmd(
+      'Align ' + type,
+      editor,
+      editor.selectedElements.getItems(),
+      type,
+    ),
+  );
+  editor.sceneGraph.render();
+};
diff --git a/packages/suika/src/editor/service/arrange_and_record.ts b/packages/suika/src/editor/service/arrange_and_record.ts
@@ -0,0 +1,18 @@
+import { ArrangeCmd, ArrangeType } from '../commands/arrange';
+import { Editor } from '../editor';
+
+export const arrangeAndRecord = (editor: Editor, type: ArrangeType) => {
+  if (editor.selectedElements.size() === 0) {
+    console.warn("can't arrange, no element");
+  }
+
+  const items = editor.selectedElements.getItems();
+  if (
+    ArrangeCmd.shouldExecCmd(type, editor.sceneGraph.children, new Set(items))
+  ) {
+    editor.commandManager.pushCommand(
+      new ArrangeCmd('Arrange ' + type, editor, items, type),
+    );
+  }
+  editor.sceneGraph.render();
+};
diff --git a/packages/suika/src/editor/service/index.ts b/packages/suika/src/editor/service/index.ts
@@ -0,0 +1,3 @@
+export * from './arrange_and_record';
+export * from './mutate_graphs_and_record';
+export * from './align_and_record';