76 feature 增加标尺功能 (#78)

* update: 创建标尺插件 * update: 更新代码结构 * update: 安装标尺插件 * update: 删除多余的监听 * update: 更新标尺内容 * update: 标尺自适应 * refactor: 重构ruler代码 * refactor: 重构标尺逻辑 * refactor: 重构部分代码 * refactor: 更新画布尺寸变化时标尺变化 * update: 更新drawTicks逻辑 * update: 更新刻度线绘制逻辑 * update: 更新drawTicks逻辑 * update: 更新标尺绘制逻辑 * update: 删除无用代码 * refactor: 提高可读性 * update: 更新标尺更新逻辑 * update: 更新标尺响应事件 * update: 添加注释 * update: 标尺增加间隔参数 * refactor: 重构app事件监听位置 * update: 更新标尺配置项 * update: 修复axis为y时标尺不显示问题 * update: 将操作层统一在app中管理 * update: 更新菜单中的标尺 * update: 更新标尺可见性切换逻辑 * update: 添加标尺切换快捷键 --------- Co-authored-by: yanheng <yanheng@siactpower.com>
JessYan0913 · Mar 21, 2024 · 544101d · 544101d
1 parent b351c18
commit 544101d
Show file tree

Hide file tree

Showing 28 changed files with 576 additions and 41 deletions.
diff --git a/packages/core/src/app.ts b/packages/core/src/app.ts
@@ -11,6 +11,7 @@ import { DEFAULT_APP_CONFIG, guid, Point } from './utils';
 export class App extends BaseService<EventArgs> {
   public stage: Konva.Stage;
   public mainLayer: Konva.Layer;
+  public optionLayer: Konva.Layer;
   public config: AppConfig;
 
   private mouse: Mouse;
@@ -28,9 +29,13 @@ export class App extends BaseService<EventArgs> {
       height: 500,
     });
     this.stage.container().style.backgroundColor = '#fff';
-    this.mainLayer = new Konva.Layer();
-    this.mainLayer.name('pictode:main:layer');
-    this.stage.add(this.mainLayer);
+    this.mainLayer = new Konva.Layer({
+      name: 'pictode:main:layer',
+    });
+    this.optionLayer = new Konva.Layer({
+      name: 'pictode:option:layer',
+    });
+    this.stage.add(this.mainLayer, this.optionLayer);
 
     this.tooler = new Tooler(this);
     this.mouse = new Mouse(this);
@@ -44,6 +49,7 @@ export class App extends BaseService<EventArgs> {
     this.stage.width(width);
     this.stage.height(height);
     this.render();
+    this.emit('canvas:resized', { width, height });
   };
 
   public get pointer(): Point {
@@ -292,6 +298,7 @@ export class App extends BaseService<EventArgs> {
 
   public render(): void {
     this.mainLayer.draw();
+    this.optionLayer.draw();
   }
 
   public scale(): number {

diff --git a/packages/core/src/services/mouse.ts b/packages/core/src/services/mouse.ts
@@ -8,6 +8,7 @@ export class Mouse extends Service {
 
     this.bindMouseEvent();
     this.app.stage.on<'dragstart'>('dragstart', this.onDragStart);
+    this.app.stage.on<'dragmove'>('dragmove', this.onDragMove);
     this.app.stage.on<'dragend'>('dragend', this.onDragEnd);
     this.app.stage.on<'wheel'>('wheel', this.onWheel);
   }
@@ -35,13 +36,19 @@ export class Mouse extends Service {
     this.app.stage.off('contextmenu', this.onMouseContextmenu);
   }
 
-  private onDragStart = (): void => {
+  private onDragStart = (event: KonvaMouseEvent): void => {
     this.unbindMouseEvent();
+    this.app.emit('canvas:drag:start', { event });
+  };
+
+  private onDragMove = (event: KonvaMouseEvent): void => {
+    this.app.emit('canvas:drag:move', { event });
   };
 
   private onDragEnd = (event: KonvaMouseEvent): void => {
     this.bindMouseEvent();
     this.app.emit('mouse:up', { event });
+    this.app.emit('canvas:drag:end', { event });
   };
 
   private onMouseDown = (event: KonvaMouseEvent): void => {
@@ -119,6 +126,7 @@ export class Mouse extends Service {
   public destroy(): void {
     this.unbindMouseEvent();
     this.app.stage.off('dragstart', this.onDragStart);
+    this.app.stage.off('dragmove', this.onDragMove);
     this.app.stage.off('dragend', this.onDragEnd);
     this.app.stage.off('wheel', this.onWheel);
   }

diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -84,7 +84,20 @@ export interface EventArgs {
   'canvas:rendered': {
     time: number;
   };
+  'canvas:resized': {
+    width: number;
+    height: number;
+  };
   'canvas:cleared': {};
+  'canvas:drag:start': {
+    event: KonvaMouseEvent;
+  };
+  'canvas:drag:move': {
+    event: KonvaMouseEvent;
+  };
+  'canvas:drag:end': {
+    event: KonvaMouseEvent;
+  };
   'canvas:zoom:start': {
     scale: number;
   };

diff --git a/packages/plugin-ruler/package.json b/packages/plugin-ruler/package.json
@@ -0,0 +1,54 @@
+{
+  "name": "@pictode/plugin-ruler",
+  "private": false,
+  "version": "1.0.0",
+  "main": "dist/pictode-plugin-ruler.umd.js",
+  "module": "dist/pictode-plugin-ruler.mjs",
+  "types": "types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/pictode-plugin-ruler.mjs",
+      "require": "./dist/pictode-plugin-ruler.umd.js",
+      "types": "./types/index.d.ts"
+    }
+  },
+  "files": [
+    "dist/**/*",
+    "types/**/*"
+  ],
+  "scripts": {
+    "build": "npm run build:type && vite build",
+    "build:type": "npm run clear:type && tsc --declaration --emitDeclarationOnly --project tsconfig.build.json",
+    "clear:type": "rimraf ./types"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/JessYan0913/pictode.git",
+    "directory": "packages/plugin-ruler"
+  },
+  "keywords": [
+    "pictode",
+    "konva.js",
+    "canvas"
+  ],
+  "author": "JessYan0913",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/JessYan0913/pictode/issues"
+  },
+  "homepage": "https://github.com/JessYan0913/pictode#readme",
+  "dependencies": {
+    "@pictode/core": "workspace:^",
+    "@pictode/utils": "workspace:^",
+    "dot": "2.0.0-beta.1",
+    "rimraf": "^3.0.2",
+    "roughjs": "^4.5.2"
+  },
+  "peerDependencies": {
+    "@pictode/core": "workspace:^"
+  },
+  "devDependencies": {
+    "typescript": "^4.9.3",
+    "vite": "^4.1.0"
+  }
+}
diff --git a/packages/plugin-ruler/src/index.ts b/packages/plugin-ruler/src/index.ts
@@ -0,0 +1,70 @@
+import { App, Plugin } from '@pictode/core';
+
+import './method';
+
+import { Ruler } from './ruler';
+import { Options, RulerAxis } from './types';
+
+const DEFAULT_OPTIONS: Options = {
+  enabled: true,
+  axis: 'x',
+  jump: 50,
+  thickness: 40,
+  fill: '#ffffff',
+};
+
+export class RulerPlugin implements Plugin {
+  public name: string = 'rulerPlugin';
+  public app?: App;
+  public options: Options;
+  public rulers: Ruler[];
+  private axis: RulerAxis[];
+
+  constructor(options?: Partial<Options>) {
+    this.options = { ...DEFAULT_OPTIONS, ...options };
+    this.axis = [];
+    this.rulers = [];
+    if (typeof this.options.axis === 'string') {
+      this.axis = [this.options.axis];
+    } else {
+      this.axis = this.options.axis;
+    }
+  }
+
+  public install(app: App) {
+    this.app = app;
+    for (const axis of this.axis) {
+      this.rulers = this.rulers || [];
+      this.rulers.push(new Ruler(this.app, axis, { ...this.options }));
+    }
+    this.app.emit('ruler:installed', { ruler: this });
+  }
+
+  public destroy(): void {
+    this.rulers.forEach((ruler) => ruler.destroy());
+    this.app?.emit('ruler:destroy', { ruler: this });
+  }
+
+  public enable(): void {
+    this.rulers.forEach((ruler) => ruler.triggerVisible(true));
+  }
+
+  public disable(): void {
+    this.rulers.forEach((ruler) => ruler.triggerVisible(false));
+  }
+
+  public isEnabled(): boolean {
+    return this.rulers.some((ruler) => ruler.enabled);
+  }
+
+  public triggerVisible(visible?: boolean): void {
+    const rulerVisible = visible || !this.isEnabled();
+    this.rulers.forEach((ruler) => ruler.triggerVisible(rulerVisible));
+  }
+
+  public update(): void {
+    this.rulers.forEach((ruler) => ruler.update());
+  }
+}
+
+export default RulerPlugin;
diff --git a/packages/plugin-ruler/src/method.ts b/packages/plugin-ruler/src/method.ts
@@ -0,0 +1,19 @@
+import { App } from '@pictode/core';
+
+import { RulerPlugin } from './index';
+
+App.prototype.triggerRulerVisible = function (enabled?: boolean) {
+  const rulerPlugin = this.getPlugin<RulerPlugin>('rulerPlugin');
+  if (rulerPlugin) {
+    rulerPlugin.triggerVisible(enabled);
+  }
+  return this;
+};
+
+App.prototype.rulerUpdate = function () {
+  const rulerPlugin = this.getPlugin<RulerPlugin>('rulerPlugin');
+  if (rulerPlugin) {
+    rulerPlugin.update();
+  }
+  return this;
+};