feat: 图形选择更新时触发事件

JessYan0913 · Aug 2, 2023 · e9fd695 · e9fd695
1 parent 9d0f1d5
commit e9fd695
Show file tree

Hide file tree

Showing 9 changed files with 20 additions and 6 deletions.
diff --git a/main/src/view/canvas/index.vue b/main/src/view/canvas/index.vue
@@ -16,6 +16,9 @@ const containerRef = ref<HTMLDivElement>();
 
 const app = new App();
 app.use(new HistoryPlugin());
+app.on('selected:changed', ({ selected }) => {
+  console.log('---->', selected);
+});
 onMounted(() => {
   if (containerRef.value) {
     app.mount(containerRef.value);

diff --git a/packages/core/src/services/selector.ts b/packages/core/src/services/selector.ts
@@ -93,6 +93,7 @@ export class Selector extends Service {
     });
     this.transformer.nodes(children);
     this.app.render();
+    this.app.emit('selected:changed', { selected: [...this.selected.values()] });
   }
 
   public cancelSelect(...children: ChildType[]): void {
@@ -105,6 +106,7 @@ export class Selector extends Service {
     });
     removed.forEach((id) => this.selected.delete(id));
     this.transformer.nodes([...this.selected.values()]);
+    this.app.emit('selected:changed', { selected: [...this.selected.values()] });
   }
 
   public triggerSelector(enable?: boolean): void {

diff --git a/packages/core/src/tools/drawing-tool.ts b/packages/core/src/tools/drawing-tool.ts
@@ -1,12 +1,13 @@
 import { Line } from '../customs/line';
 import { Tool } from '../types';
-import { Point } from '../utils';
+import { guid, Point } from '../utils';
 
 import { selectTool } from './select-tool';
 
 export const drawingTool = (): Tool => {
   let points: Point[] = [];
   const line = new Line({
+    id: guid(),
     stroke: 'black',
     strokeWidth: 2,
     globalCompositeOperation: 'source-over',

diff --git a/packages/core/src/tools/ellipse-tool.ts b/packages/core/src/tools/ellipse-tool.ts
@@ -1,12 +1,13 @@
 import { Ellipse } from '../customs/ellipse';
 import { AppMouseEvent, Tool } from '../types';
-import { Point } from '../utils';
+import { guid, Point } from '../utils';
 
 import { selectTool } from './select-tool';
 
 export const ellipseTool = (): Tool => {
   const startPointer: Point = new Point(0, 0);
   const ellipse: Ellipse = new Ellipse({
+    id: guid(),
     radiusX: 0,
     radiusY: 0,
     fill: 'transparent',

diff --git a/packages/core/src/tools/image-tool.ts b/packages/core/src/tools/image-tool.ts
@@ -1,12 +1,13 @@
 import { Image as Img } from '../customs/image';
 import { Tool } from '../types';
-import { readeFile, selectFile } from '../utils';
+import { guid, readeFile, selectFile } from '../utils';
 
 import { selectTool } from './select-tool';
 
 export const imageTool = (): Tool => {
   const imageObject = new Image();
   const img = new Img({
+    id: guid(),
     image: imageObject,
   });
 

diff --git a/packages/core/src/tools/line-tool.ts b/packages/core/src/tools/line-tool.ts
@@ -1,6 +1,6 @@
 import { Line } from '../customs/line';
 import { Tool } from '../types';
-import { Point } from '../utils';
+import { guid, Point } from '../utils';
 
 import { selectTool } from './select-tool';
 
@@ -10,6 +10,7 @@ const flatPoints = (points: Point[]): number[] =>
 export const lineTool = (): Tool => {
   let points: Point[] = [];
   let line: Line = new Line({
+    id: guid(),
     points: flatPoints(points),
     fill: 'transparent',
     stroke: 'black',

diff --git a/packages/core/src/tools/rect-tool.ts b/packages/core/src/tools/rect-tool.ts
@@ -1,12 +1,13 @@
 import { Rect } from '../customs/rect';
 import { AppMouseEvent, Tool } from '../types';
-import { Point } from '../utils';
+import { guid, Point } from '../utils';
 
 import { selectTool } from './select-tool';
 
 export const rectTool = (): Tool => {
   const startPointer: Point = new Point(0, 0);
   const rectangle: Rect = new Rect({
+    id: guid(),
     fill: 'transparent',
     stroke: 'black',
     strokeWidth: 2,

diff --git a/packages/core/src/tools/regular-polygon-tool.ts b/packages/core/src/tools/regular-polygon-tool.ts
@@ -1,12 +1,13 @@
 import { RegularPolygon } from '../customs/regular-polygon';
 import { Tool } from '../types';
-import { Point } from '../utils';
+import { guid, Point } from '../utils';
 
 import { selectTool } from './select-tool';
 
 export const regularPolygonTool = (): Tool => {
   const startPointer: Point = new Point(0, 0);
   const regularPolygon: RegularPolygon = new RegularPolygon({
+    id: guid(),
     fill: 'transparent',
     stroke: 'black',
     strokeWidth: 2,

diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -51,6 +51,9 @@ export interface EventArgs {
   'canvas:rendered': {
     time: number;
   };
+  'selected:changed': {
+    selected: ChildType[];
+  };
   'shape:added': {
     object: ChildType[];
   };