feat: support global snap align

VisActor · Jan 9, 2025 · aabd31c · aabd31c
1 parent 944c198
commit aabd31c
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 76 deletions.
diff --git a/packages/vstory-core/src/character/character-base.ts b/packages/vstory-core/src/character/character-base.ts
@@ -10,6 +10,7 @@ import type { IStory } from '../interface/story';
 import type { IStoryCanvas } from '../interface/canvas';
 import type { IConfigProcess } from './config-transform/interface';
 import type { IUpdateConfigParams } from './chart/interface/runtime';
+import { getLayoutLine } from '../utils/layout';
 
 export abstract class CharacterBase<T> implements ICharacter {
   readonly id: string;
@@ -117,7 +118,7 @@ export abstract class CharacterBase<T> implements ICharacter {
 
   getLayoutGuideLine(): ILayoutLine[] {
     const bounds = this._graphic.AABBBounds;
-    return CharacterBase.GetLayoutLine(bounds, {
+    return getLayoutLine(bounds, {
       id: this.id
     });
   }
@@ -131,64 +132,4 @@ export abstract class CharacterBase<T> implements ICharacter {
   protected _setAttributes(attr: T): void {
     this._graphic.setAttributes(attr);
   }
-
-  static GetLayoutLine(b: IAABBBounds, opt: any, orient: 'x' | 'y' | 'xy' = 'xy') {
-    const result: ILayoutLine[] = [];
-    if (orient === 'y' || orient === 'xy') {
-      const commonInY: Omit<ILayoutLine, 'value' | 'type'> = {
-        orient: 'y',
-        start: b.x1,
-        end: b.x1 + b.width(),
-        bounds: b.clone(),
-        ...opt
-      };
-      // top
-      result.push({
-        value: b.y1,
-        type: 'start',
-        ...commonInY
-      });
-      // bottom
-      result.push({
-        value: b.y2,
-        type: 'end',
-        ...commonInY
-      });
-      // middle
-      result.push({
-        value: (b.y1 + b.y2) * 0.5,
-        type: 'middle',
-        ...commonInY
-      });
-    }
-
-    if (orient === 'x' || orient === 'xy') {
-      const commonInX: Omit<ILayoutLine, 'value' | 'type'> = {
-        orient: 'x',
-        start: b.y1,
-        end: b.y2,
-        bounds: b.clone(),
-        ...opt
-      };
-      // left
-      result.push({
-        value: b.x1,
-        type: 'start',
-        ...commonInX
-      });
-      // right
-      result.push({
-        value: b.x2,
-        type: 'end',
-        ...commonInX
-      });
-      // middle
-      result.push({
-        value: (b.x1 + b.x2) * 0.5,
-        type: 'middle',
-        ...commonInX
-      });
-    }
-    return result;
-  }
 }
diff --git a/packages/vstory-core/src/core/canvas.ts b/packages/vstory-core/src/core/canvas.ts
@@ -3,9 +3,10 @@ import { createStage, ManualTicker, vglobal } from '@visactor/vrender-core';
 import type { IStoryCanvas } from '../interface/canvas';
 import type { IStory } from '../interface/story';
 import type { IStoryEvent } from '../interface/event';
-import type { ICharacter } from '../interface/character';
+import type { ICharacter, ILayoutLine } from '../interface/character';
 import type { IAABBBoundsLike } from '@visactor/vutils';
 import { isValidNumber } from '@visactor/vutils';
+import { getLayoutLine } from '../utils/layout';
 
 export class StoryCanvas implements IStoryCanvas {
   protected _story: IStory;
@@ -216,6 +217,16 @@ export class StoryCanvas implements IStoryCanvas {
     this._stage.defaultLayer.removeChild(g);
   }
 
+  getLayoutGuideLine(): ILayoutLine[] {
+    const layer = this._stage.defaultLayer;
+    const bounds = layer.AABBBounds.clone();
+    bounds.transformWithMatrix(layer.transMatrix.getInverse());
+
+    return getLayoutLine(bounds, {
+      id: this._stage.id
+    });
+  }
+
   release() {
     this._stage.release();
   }

diff --git a/packages/vstory-core/src/interface/canvas.ts b/packages/vstory-core/src/interface/canvas.ts
@@ -1,5 +1,5 @@
 import type { ICanvasLike, IGraphic, IStage } from '@visactor/vrender-core';
-import type { ICharacter } from './character';
+import type { ICharacter, ILayoutLine } from './character';
 import type { IStoryEvent } from './event';
 import type { IReleaseable } from './releaseable';
 
@@ -18,4 +18,5 @@ export interface IStoryCanvas extends IReleaseable {
   // 添加graphic到canvas中
   addGraphic: (g: IGraphic) => void;
   removeGraphic: (g: IGraphic) => void;
+  getLayoutGuideLine: () => ILayoutLine[];
 }
diff --git a/packages/vstory-core/src/utils/layout.ts b/packages/vstory-core/src/utils/layout.ts
@@ -1,6 +1,7 @@
 import type { IRect } from '@visactor/vrender-core';
 import type { IWidgetData } from '../interface/dsl/dsl';
-import type { ICharacter } from '../interface/character';
+import type { ICharacter, ILayoutLine } from '../interface/character';
+import type { IAABBBounds } from '@visactor/vutils';
 
 export interface ILayoutAttribute {
   x: number;
@@ -38,3 +39,63 @@ export function getLayoutFromWidget(w: Partial<IWidgetData> | IRect, character:
     anchor: [x + width / 2, y + height / 2].map(item => (isFinite(item) ? item : 0)) as [number, number]
   };
 }
+
+export function getLayoutLine(b: IAABBBounds, opt: any, orient: 'x' | 'y' | 'xy' = 'xy') {
+  const result: ILayoutLine[] = [];
+  if (orient === 'y' || orient === 'xy') {
+    const commonInY: Omit<ILayoutLine, 'value' | 'type'> = {
+      orient: 'y',
+      start: b.x1,
+      end: b.x1 + b.width(),
+      bounds: b.clone(),
+      ...opt
+    };
+    // top
+    result.push({
+      value: b.y1,
+      type: 'start',
+      ...commonInY
+    });
+    // bottom
+    result.push({
+      value: b.y2,
+      type: 'end',
+      ...commonInY
+    });
+    // middle
+    result.push({
+      value: (b.y1 + b.y2) * 0.5,
+      type: 'middle',
+      ...commonInY
+    });
+  }
+
+  if (orient === 'x' || orient === 'xy') {
+    const commonInX: Omit<ILayoutLine, 'value' | 'type'> = {
+      orient: 'x',
+      start: b.y1,
+      end: b.y2,
+      bounds: b.clone(),
+      ...opt
+    };
+    // left
+    result.push({
+      value: b.x1,
+      type: 'start',
+      ...commonInX
+    });
+    // right
+    result.push({
+      value: b.x2,
+      type: 'end',
+      ...commonInX
+    });
+    // middle
+    result.push({
+      value: (b.x1 + b.x2) * 0.5,
+      type: 'middle',
+      ...commonInX
+    });
+  }
+  return result;
+}
diff --git a/packages/vstory-editor/src/edit.ts b/packages/vstory-editor/src/edit.ts
@@ -1,6 +1,5 @@
 import { EditAction } from './edit-action';
 import { EventEmitter } from '@visactor/vutils';
-import type { ILayoutLine } from './interface';
 import {
   type IEditActionInfo,
   type IEditSelection,
@@ -10,7 +9,7 @@ import {
 import type { IGroup, IGraphic } from '@visactor/vrender';
 import { createGroup } from '@visactor/vrender';
 import { EditActionEnum, SeriesMarkMode } from './const';
-import type { ICharacter, IStoryEvent, Story } from '@visactor/vstory-core';
+import type { ICharacter, ILayoutLine, IStoryEvent, Story } from '@visactor/vstory-core';
 
 export class Edit extends EventEmitter {
   readonly editAction: EditAction;
@@ -185,6 +184,7 @@ export class Edit extends EventEmitter {
   getLayoutLineInLayer(ignoreIdList: string[]): ILayoutLine[] {
     const result: ILayoutLine[] = [];
     const characterList = this.story.getCharacterList();
+    result.push(...this.story.canvas.getLayoutGuideLine());
     characterList.forEach(c => {
       if (ignoreIdList.includes(c.id)) {
         return;

diff --git a/packages/vstory-editor/src/interface.ts b/packages/vstory-editor/src/interface.ts
@@ -76,15 +76,6 @@ export type IModelInfo = IModelInfoSpecKey & {
   id?: string | number; // id in spec, model.userId
 };
 
-export interface ILayoutLine extends Partial<IModelInfo> {
-  orient: 'x' | 'y';
-  type: 'start' | 'middle' | 'end';
-  value: number;
-  start: number;
-  end: number;
-  bounds: IAABBBounds;
-}
-
 export interface IEditSelectionConstructor {
   new (edit: Edit): IEditSelection;
 }

diff --git a/packages/vstory-editor/src/selection/edit-control/transform-control.ts b/packages/vstory-editor/src/selection/edit-control/transform-control.ts
@@ -19,8 +19,9 @@ import { AbstractComponent } from '@visactor/vrender-components';
 import { DRAG_ANCHOR_COLOR, SHAPE_SELECT_COLOR, MinSize } from './constants';
 import { DragComponent } from './transform-drag';
 import { transformDeltaWithStage, transformPointWithStage } from '../../utils/transform';
-import type { IEditSelection, ILayoutLine, VRenderPointerEvent } from '../../interface';
+import type { IEditSelection, VRenderPointerEvent } from '../../interface';
 import { min } from '@visactor/vchart/esm/util';
+import type { ILayoutLine } from '@visactor/vstory-core';
 
 const tempRect = createRect({});