feat: support frame

packages/core/src/canvas_dragger.ts

@@ -74,7 +74,7 @@ export class CanvasDragger {
       this.editor.setCursor('grabbing');
       const vwPos = this.editor.getCursorXY(event);
       this.onStart({
-        pos: this.editor.viewportCoordsToScene(vwPos.x, vwPos.y),
+        pos: this.editor.toScenePt(vwPos.x, vwPos.y),
         vwPos,
         nativeEvent: event,
       });

packages/core/src/clipboard.ts

@@ -8,8 +8,8 @@ import {
 import { generateNKeysBetween } from 'fractional-indexing';
 
 import { type SuikaEditor } from './editor';
-import { type GraphicsAttrs, isFrameGraphics, SuikaGraphics } from './graphs';
-import { isCanvasGraphics } from './graphs/canvas';
+import { type GraphicsAttrs, isFrameGraphics, SuikaGraphics } from './graphics';
+import { isCanvasGraphics } from './graphics/canvas';
 import { toSVG } from './to_svg';
 import { Transaction } from './transaction';
 import { type IEditorPaperData } from './type';

packages/core/src/commands/add_graphs.ts

@@ -1,5 +1,5 @@
 import { type SuikaEditor } from '../editor';
-import { type SuikaGraphics } from '../graphs';
+import { type SuikaGraphics } from '../graphics';
 import { type ICommand } from './type';
 
 export class AddGraphCmd implements ICommand {

packages/core/src/commands/reparent.ts

@@ -1,7 +1,7 @@
 import { cloneDeep } from '@suika/common';
 import { type IMatrixArr } from '@suika/geo';
 
-import { type IParentIndex, type SuikaGraphics } from '../graphs';
+import { type IParentIndex, type SuikaGraphics } from '../graphics';
 import { type ICommand } from './type';
 
 export type ISetElementsAttrsType = Partial<{

packages/core/src/commands/set_elements_attrs.ts

@@ -1,7 +1,7 @@
 import { cloneDeep } from '@suika/common';
 import { type IMatrixArr, type IPathItem } from '@suika/geo';
 
-import { type IParentIndex, type SuikaGraphics } from '../graphs';
+import { type IParentIndex, type SuikaGraphics } from '../graphics';
 import { type IPaint } from '../paint';
 import { type ICommand } from './type';
 

packages/core/src/commands/update_graphics_attrs_cmd.ts

@@ -1,5 +1,5 @@
 import { type SuikaEditor } from '../editor';
-import { type GraphicsAttrs } from '../graphs';
+import { type GraphicsAttrs } from '../graphics';
 import { type ICommand } from './type';
 
 export class UpdateGraphicsAttrsCmd implements ICommand {

packages/core/src/control_handle_manager/control_handle.ts

@@ -1,11 +1,10 @@
-import { type IMatrixArr, type ITransformRect } from '@suika/geo';
+import { type IMatrixArr, type IPoint, type ITransformRect } from '@suika/geo';
 
 import { type ICursor } from '../cursor_manager';
-import { type SuikaGraphics } from '../graphs';
+import { type SuikaGraphics } from '../graphics';
 
 type HitTest = (
-  x: number,
-  y: number,
+  point: IPoint,
   tol: number,
   rect: ITransformRect | null,
 ) => boolean;

packages/core/src/control_handle_manager/control_handle_manager.ts

@@ -212,10 +212,7 @@ export class ControlHandleManager {
       if (graphics.type === GraphicsType.Path) {
         // TODO:
       } else {
-        const { x, y } = this.editor.sceneCoordsToViewport(
-          handle.cx,
-          handle.cy,
-        );
+        const { x, y } = this.editor.toViewportPt(handle.cx, handle.cy);
         graphics.updateAttrs({
           transform: [
             1,
@@ -259,10 +256,7 @@ export class ControlHandleManager {
       return null;
     }
 
-    const hitPointVW = this.editor.sceneCoordsToViewport(
-      hitPoint.x,
-      hitPoint.y,
-    );
+    const hitPointVW = this.editor.toViewportPt(hitPoint.x, hitPoint.y);
 
     const selectedBox = this.editor.selectedBox.getBox();
 
@@ -275,13 +269,8 @@ export class ControlHandleManager {
       }
 
       const isHit = handle.hitTest
-        ? handle.hitTest(
-            hitPointVW.x,
-            hitPointVW.y,
-            handle.padding,
-            selectedBox,
-          )
-        : handle.graphics.hitTest(hitPointVW.x, hitPointVW.y, handle.padding);
+        ? handle.hitTest(hitPointVW, handle.padding, selectedBox)
+        : handle.graphics.hitTest(hitPointVW, handle.padding);
 
       if (isHit) {
         return {
@@ -303,8 +292,8 @@ export class ControlHandleManager {
   }
   getCustomHandlesIntersectedWithRect(rect: IRect) {
     // convert rect to viewport
-    const leftTop = this.editor.sceneCoordsToViewport(rect.x, rect.y);
-    const bottomRight = this.editor.sceneCoordsToViewport(
+    const leftTop = this.editor.toViewportPt(rect.x, rect.y);
+    const bottomRight = this.editor.toViewportPt(
       rect.x + rect.width,
       rect.y + rect.height,
     );

packages/core/src/control_handle_manager/util.ts

@@ -2,6 +2,7 @@ import { parseHexToRGBA } from '@suika/common';
 import {
   checkTransformFlip,
   getTransformAngle,
+  type IPoint,
   type ITransformRect,
   Matrix,
   normalizeDegree,
@@ -10,8 +11,8 @@ import {
 
 import { HALF_PI } from '../constant';
 import { type ICursor } from '../cursor_manager';
-import { SuikaRect } from '../graphs';
-import { type SuikaDocument } from '../graphs/document';
+import { SuikaRect } from '../graphics';
+import { type SuikaDocument } from '../graphics/document';
 import { type IPaint, PaintType } from '../paint';
 import { ControlHandle } from './control_handle';
 import { type ITransformHandleType } from './type';
@@ -272,15 +273,14 @@ export const createTransformHandles = (
   /************* north/south/west/east ************/
   const hitTest = function (
     this: ControlHandle,
-    x: number,
-    y: number,
+    point: IPoint,
     tol: number,
     rect: ITransformRect | null,
   ) {
     if (!rect || rect.width === 0 || rect.height === 0) {
       return false;
     }
-    return this.graphics.hitTest(x, y, tol);
+    return this.graphics.hitTest(point, tol);
   };
 
   const n = new ControlHandle({

packages/core/src/editor.ts

@@ -11,9 +11,9 @@ import { ClipboardManager } from './clipboard';
 import { CommandManager } from './commands/command_manager';
 import { ControlHandleManager } from './control_handle_manager';
 import { CursorManger, type ICursor } from './cursor_manager';
-import { type GraphicsAttrs } from './graphs';
-import { SuikaCanvas } from './graphs/canvas';
-import { SuikaDocument } from './graphs/document';
+import { type GraphicsAttrs } from './graphics';
+import { SuikaCanvas } from './graphics/canvas';
+import { SuikaDocument } from './graphics/document';
 import { HostEventManager, MouseEventManager } from './host_event_manager';
 import { ImgManager } from './Img_manager';
 import { KeyBindingManager } from './key_binding_manager';
@@ -220,21 +220,21 @@ export class SuikaEditor {
    *
    * reference: https://mp.weixin.qq.com/s/uvVXZKIMn1bjVZvUSyYZXA
    */
-  viewportCoordsToScene(x: number, y: number, round = false) {
+  toScenePt(x: number, y: number, round = false) {
     const zoom = this.zoomManager.getZoom();
     const { x: scrollX, y: scrollY } = this.viewportManager.getViewport();
     return viewportCoordsToSceneUtil(x, y, zoom, scrollX, scrollY, round);
   }
-  sceneCoordsToViewport(x: number, y: number) {
+  toViewportPt(x: number, y: number) {
     const zoom = this.zoomManager.getZoom();
     const { x: scrollX, y: scrollY } = this.viewportManager.getViewport();
     return sceneCoordsToViewportUtil(x, y, zoom, scrollX, scrollY);
   }
-  viewportSizeToScene(size: number) {
+  toSceneSize(size: number) {
     const zoom = this.zoomManager.getZoom();
     return size / zoom;
   }
-  sceneSizeToViewport(size: number) {
+  toViewportSize(size: number) {
     const zoom = this.zoomManager.getZoom();
     return size * zoom;
   }
@@ -248,7 +248,7 @@ export class SuikaEditor {
   /** get cursor scene xy */
   getSceneCursorXY(event: { clientX: number; clientY: number }, round = false) {
     const { x, y } = this.getCursorXY(event);
-    return this.viewportCoordsToScene(x, y, round);
+    return this.toScenePt(x, y, round);
   }
   render() {
     this.sceneGraph.render();

packages/core/src/graphs/canvas.ts → packages/core/src/graphics/canvas.ts

@@ -1,11 +1,12 @@
-import { identityMatrix } from '@suika/geo';
+import { identityMatrix, type IPoint } from '@suika/geo';
 
 import { GraphicsType, type Optional } from '../type';
 import {
   type GraphicsAttrs,
   type IGraphicsOpts,
   SuikaGraphics,
 } from './graphics';
+import { type IHitOptions } from './type';
 
 type SuikaCanvasAttrs = GraphicsAttrs;
 
@@ -23,6 +24,18 @@ export class SuikaCanvas extends SuikaGraphics<SuikaCanvasAttrs> {
   override getWorldTransform() {
     return identityMatrix();
   }
+
+  override getHitGraphics(point: IPoint, options: IHitOptions) {
+    const children = this.getChildren();
+    for (let i = children.length - 1; i >= 0; i--) {
+      const child = children[i];
+      const hitGraphics = child.getHitGraphics(point, options);
+      if (hitGraphics) {
+        return hitGraphics;
+      }
+    }
+    return null;
+  }
 }
 
 export const isCanvasGraphics = (

packages/core/src/graphs/document.ts → packages/core/src/graphics/document.ts

@@ -1,6 +1,6 @@
 import { EventEmitter, throttle } from '@suika/common';
 
-import { GraphicsStore } from '../graphics_manger';
+import { GraphicsStoreManager } from '../graphics_manger';
 import { GraphicsType, type Optional } from '../type';
 import {
   type GraphicsAttrs,
@@ -25,7 +25,7 @@ export class SuikaDocument extends SuikaGraphics<SuikaCanvasAttrs> {
   override type = GraphicsType.Document;
   protected override isContainer = true;
 
-  private graphicsStore = new GraphicsStore();
+  graphicsStoreManager = new GraphicsStoreManager();
   private emitter = new EventEmitter<Events>();
 
   private changes = {
@@ -40,15 +40,15 @@ export class SuikaDocument extends SuikaGraphics<SuikaCanvasAttrs> {
 
   clear() {
     // TODO: update doc.updateInfo
-    this.graphicsStore.clear();
+    this.graphicsStoreManager.clear();
   }
 
   getCanvas() {
-    return this.graphicsStore.getCanvas();
+    return this.graphicsStoreManager.getCanvas();
   }
 
   getGraphicsById(id: string) {
-    return this.graphicsStore.get(id);
+    return this.graphicsStoreManager.get(id);
   }
 
   getGraphicsArrByIds(ids: Set<string>) {
@@ -65,15 +65,15 @@ export class SuikaDocument extends SuikaGraphics<SuikaCanvasAttrs> {
   }
 
   getAllGraphicsArr() {
-    return this.graphicsStore.getAll();
+    return this.graphicsStoreManager.getAll();
   }
 
   getCurrCanvas() {
-    return this.graphicsStore.getCanvas();
+    return this.graphicsStoreManager.getCanvas();
   }
 
   addGraphics(graphics: SuikaGraphics) {
-    this.graphicsStore.add(graphics);
+    this.graphicsStoreManager.add(graphics);
     this.changes.added.set(graphics.attrs.id, graphics.getAttrs());
     this.emitSceneChangeThrottle();
   }

packages/core/src/graphs/ellipse.ts → packages/core/src/graphics/ellipse.ts

@@ -23,7 +23,7 @@ export class SuikaEllipse extends SuikaGraphics<EllipseAttrs> {
     super({ ...attrs, type: GraphicsType.Ellipse }, opts);
   }
 
-  override hitTest(x: number, y: number, padding = 0) {
+  override hitTest(point: IPoint, padding = 0) {
     const attrs = this.attrs;
     const cx = attrs.width / 2;
     const cy = attrs.height / 2;
@@ -33,7 +33,7 @@ export class SuikaEllipse extends SuikaGraphics<EllipseAttrs> {
     const h = attrs.height / 2 + padding;
 
     const tf = new Matrix(...this.getWorldTransform());
-    const rotatedHitPoint = tf.applyInverse({ x, y });
+    const rotatedHitPoint = tf.applyInverse(point);
 
     return (
       (rotatedHitPoint.x - cx) ** 2 / w ** 2 +