feat: pixi.js

.github/workflows/pixi-renderer.yml

@@ -0,0 +1,49 @@
+# This is a basic workflow to help you get started with Actions
+
+name: CI
+
+# Controls when the workflow will run
+on:
+  # Triggers the workflow on push or pull request events but only for the master branch
+  push:
+    branches: [feat/repalce-canvas2d-to-pixi]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+  # This workflow contains a single job called "build"
+  build:
+    # The type of runner that the job will run on
+    runs-on: ubuntu-latest
+
+    # Steps represent a sequence of tasks that will be executed as part of the job
+    steps:
+      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
+      - uses: actions/checkout@v2
+
+      # 安装依赖
+      - name: Install Dep
+        run: |
+          sudo apt-get install snapd
+          sudo snap install node --classic --channel=20
+          npm i -g [email protected]
+          echo 'pnpm version:'
+          pnpm -v
+          pnpm install
+      # 构建 html
+      - name: build static files
+        # Treating warnings as errors because process.env.CI = true.
+        # 暂时不处理 eslint 的 warn，改成 false
+        run: pnpm run all:build
+
+      # 部署到自己的服务器
+      - name: deploy file to server
+        uses: wlixcc/[email protected]
+        with:
+          username: ${{ secrets.USERNAME }}
+          server: ${{ secrets.REMOTE_IP }}
+          ssh_private_key: ${{ secrets.SSH_PRIVATE_KEY }}
+          local_path: './packages/suika/build/*'
+          remote_path: './www/app/suika-pixi'

package.json

@@ -20,8 +20,6 @@
     "core:dev": "pnpm -F @suika/core dev",
     "icons:dev": "pnpm -F @suika/icons dev",
     "components:dev": "pnpm -F @suika/components dev",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
     "prepare": "husky install",
     "eslint:check": "eslint packages"
   },
@@ -46,7 +44,7 @@
     "typescript": "^5.2.2"
   },
   "dependencies": {
-    "pixi.js": "^8.0.2",
+    "pixi.js": "^8.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

packages/common/src/common.ts

@@ -154,6 +154,9 @@ export const getDevicePixelRatio = () => {
   return window.devicePixelRatio || 1;
 };
 
+/**
+ * fill image with "cover" strategy
+ */
 export const calcCoverScale = (
   w: number,
   h: number,

packages/core/src/commands/remove_graphs.ts

@@ -29,6 +29,18 @@ export class RemoveGraphsCmd implements ICommand {
         nextElements.push(element);
       }
     }
+
+    console.log('removedIndexes', this.removedIndexes);
+    for (let i = this.removedIndexes.length - 1; i >= 0; i--) {
+      const index = this.removedIndexes[i];
+      const graphics = elements[index].getGraphics();
+      if (graphics) {
+        graphics.removeFromParent();
+      } else {
+        console.warn('graphics is empty');
+      }
+    }
+
     sceneGraph.children = nextElements;
 
     this.editor.selectedElements.clear();
@@ -45,13 +57,21 @@ export class RemoveGraphsCmd implements ICommand {
     const nextElements: Graph[] = new Array(
       elements.length + removedIndexes.length,
     );
+    const parent = this.editor.stageManager.getScene();
 
     let i = 0; // nextElements 的指针
     let j = 0; // elements
     let k = 0; // removedIndexes 和 removedElement 的指针
     while (i < nextElements.length) {
       if (i === removedIndexes[k]) {
         nextElements[i] = removedElements[k];
+        const graphics = removedElements[k].getGraphics();
+        if (graphics) {
+          parent.addChildAt(graphics, i);
+        } else {
+          console.warn('graphics is empty');
+        }
+
         k++;
       } else {
         nextElements[i] = elements[j];

packages/core/src/control_handle_manager/control_handle_manager.ts

@@ -7,7 +7,7 @@ import {
   rectToMidPoints,
   rectToVertices,
 } from '@suika/geo';
-import { Matrix } from 'pixi.js';
+import { Container, Matrix } from 'pixi.js';
 
 import { HALF_PI } from '../constant';
 import { type ICursor } from '../cursor_manager';
@@ -36,6 +36,7 @@ const types = [
  * Control Point Handle
  */
 export class ControlHandleManager {
+  private container = new Container();
   private transformHandles: Map<ITransformHandleType, ControlHandle>;
 
   private customHandlesVisible = false;
@@ -53,6 +54,12 @@ export class ControlHandleManager {
     });
   }
 
+  getGraphics() {
+    return this.container;
+  }
+
+  // 绘制时机。selected 有东西。
+
   private onHoverItemChange = () => {
     if (!this.editor.pathEditor.isActive()) {
       const hoverItem = this.editor.selectedElements.getHoverItem();
@@ -189,7 +196,13 @@ export class ControlHandleManager {
     s.rotation = heightRotate;
   }
 
+  clear() {
+    this.container.removeChildren();
+  }
+
   draw(rect: ITransformRect | null) {
+    this.container.removeChildren();
+
     this.selectedBoxRect = rect;
     if (rect) {
       this.updateTransformHandles(rect);
@@ -204,6 +217,7 @@ export class ControlHandleManager {
 
     const ctx = this.editor.ctx;
     const rotate = rect ? getTransformAngle(rect.transform) : 0;
+
     handles.forEach((handle) => {
       const graph = handle.graph;
       if (graph.type === GraphType.Path) {
@@ -234,9 +248,10 @@ export class ControlHandleManager {
       if (!graph.getVisible()) {
         return;
       }
-      ctx.save();
+      // ctx.save();
       graph.draw(ctx);
-      ctx.restore();
+      this.container.addChild(graph.getGraphics()!);
+      // ctx.restore();
     });
   }
 

packages/core/src/editor.ts

@@ -9,6 +9,7 @@ import { ClipboardManager } from './clipboard';
 import { CommandManager } from './commands/command_manager';
 import { ControlHandleManager } from './control_handle_manager';
 import { CursorManger, type ICursor } from './cursor_manager';
+import Grid from './grid';
 import { GroupManager } from './group_manager';
 import { HostEventManager } from './host_event_manager';
 import { ImgManager } from './Img_manager';
@@ -20,7 +21,9 @@ import Ruler from './ruler';
 import { SceneGraph } from './scene/scene_graph';
 import { SelectedBox } from './selected_box';
 import SelectedElements from './selected_elements';
+import { Selection } from './selection';
 import { Setting } from './setting';
+import { StageManager } from './stage_manger';
 import { AutoSaveGraphs } from './store/auto-save-graphs';
 import { TextEditor } from './text/text_editor';
 import { ToolManager } from './tools';
@@ -45,6 +48,10 @@ export class Editor {
   appVersion = 'suika-editor_0.0.1';
   paperId: string;
 
+  stageManager: StageManager;
+  selection: Selection;
+  grid: Grid;
+
   sceneGraph: SceneGraph;
   controlHandleManager: ControlHandleManager;
   groupManager: GroupManager;
@@ -74,11 +81,15 @@ export class Editor {
   autoSaveGraphs: AutoSaveGraphs;
   perfMonitor: PerfMonitor;
 
+  async init() {
+    // ...
+  }
+
   constructor(options: IEditorOptions) {
     this.containerElement = options.containerElement;
     this.canvasElement = document.createElement('canvas');
     this.containerElement.appendChild(this.canvasElement);
-    this.ctx = this.canvasElement.getContext('2d')!;
+    this.ctx = document.createElement('canvas').getContext('2d')!;
 
     this.setting = new Setting();
     if (options.offsetX) {
@@ -102,15 +113,11 @@ export class Editor {
     this.imgManager = new ImgManager();
 
     this.selectedElements = new SelectedElements(this);
-    this.selectedBox = new SelectedBox(this);
     this.ruler = new Ruler(this);
     this.refLine = new RefLine(this);
     this.textEditor = new TextEditor(this);
     this.pathEditor = new PathEditor(this);
 
-    this.controlHandleManager = new ControlHandleManager(this);
-    this.controlHandleManager.bindEvents();
-
     this.hostEventManager = new HostEventManager(this);
     this.hostEventManager.bindHotkeys();
 
@@ -126,6 +133,8 @@ export class Editor {
       this.render();
     });
 
+    this.stageManager = new StageManager(this);
+
     const data = this.autoSaveGraphs.load();
     if (data) {
       this.loadData(data);
@@ -143,6 +152,24 @@ export class Editor {
 
     this.zoomManager.zoomToFit(1);
 
+    this.stageManager.init(this.canvasElement);
+
+    // grid
+    this.grid = new Grid(this);
+    this.stageManager.addView(this.grid.getGraphics());
+
+    // selectedBox
+    this.selectedBox = new SelectedBox(this);
+    this.stageManager.addView(this.selectedBox.getGraphics());
+
+    this.controlHandleManager = new ControlHandleManager(this);
+    this.stageManager.addView(this.controlHandleManager.getGraphics());
+    this.controlHandleManager.bindEvents();
+
+    // selection rect
+    this.selection = new Selection(this);
+    this.stageManager.addView(this.selection.getGraphics());
+
     this.perfMonitor = new PerfMonitor();
     if (options.showPerfMonitor) {
       this.perfMonitor.start(this.containerElement);
@@ -167,6 +194,7 @@ export class Editor {
   }
   destroy() {
     this.containerElement.removeChild(this.canvasElement);
+    this.stageManager.destroy();
     this.textEditor.destroy();
     this.keybindingManager.destroy();
     this.hostEventManager.destroy();
@@ -176,6 +204,7 @@ export class Editor {
     this.toolManager.destroy();
     this.perfMonitor.destroy();
     this.controlHandleManager.unbindEvents();
+    this.grid.destroy();
   }
   setCursor(cursor: ICursor) {
     this.cursorManager.setCursor(cursor);