Skip to content

Commit 609c488

Browse files
huanghaiyanghuanghaiyang
committed
update
1 parent 9c34c87 commit 609c488

File tree

2 files changed

+53
-56
lines changed

2 files changed

+53
-56
lines changed

‎src/modules/stage/StageEvent.ts

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import { TaskQueue } from "@/modules/render/RenderQueue";
88
import { QueueTask } from "@/modules/render/RenderTask";
99
import FileUtils from "@/utils/FileUtils";
1010
import TimeUtils from "@/utils/TimerUtils";
11-
import { throttle } from "lodash";
1211

1312
export default class StageEvent extends EventEmitter implements IStageEvent {
1413
shield: IStageShield;
@@ -32,7 +31,6 @@ export default class StageEvent extends EventEmitter implements IStageEvent {
3231
private _isShift1Event: (e: KeyboardEvent) => boolean;
3332
private _isDeleteEvent: (e: KeyboardEvent) => boolean;
3433
private _isEscEvent: (e: KeyboardEvent) => boolean;
35-
private _handleMouseMove: (e: MouseEvent) => void;
3634

3735
get isCtrl(): boolean {
3836
return this._isCtrl;
@@ -78,9 +76,6 @@ export default class StageEvent extends EventEmitter implements IStageEvent {
7876
this._isCtrlYEvent = isHotkey("ctrl+y");
7977
this._isCtrlShiftGEvent = isHotkey("ctrl+shift+g");
8078
this._isEscEvent = isHotkey("esc");
81-
this._handleMouseMove = throttle((e) => {
82-
this.emit("cursorMove", e);
83-
}, 1000 / 120)
8479
this.initEvents();
8580
}
8681

@@ -142,7 +137,7 @@ export default class StageEvent extends EventEmitter implements IStageEvent {
142137
*/
143138
async initMouseEvents(): Promise<void> {
144139
this.shield.canvas.addEventListener("mousemove", e => {
145-
this._handleMouseMove(e);
140+
this.emit("cursorMove", e);
146141
});
147142
this.shield.canvas.addEventListener("mouseleave", e => {
148143
this.emit("cursorLeave", e);

‎src/stores/stage.ts

Lines changed: 52 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ const shield = new StageShield();
1616
const container = new StageContainer();
1717
// 配置
1818
shield.configure.config({ rotationIconEnable: true });
19+
// 节流时间
20+
const ThrottleTime = 200;
1921

2022
// 舞台默认数据
2123
const DefaultStage = {
@@ -125,46 +127,46 @@ export const useStageStore = defineStore("stage", {
125127
shield.on(ShieldDispatcherNames.selectedChanged, this.onSelectedChanged);
126128
// 监听目标
127129
shield.on(ShieldDispatcherNames.targetChanged, this.onTargetChanged);
130+
// 监听多选状态
131+
shield.on(ShieldDispatcherNames.multiSelectedChanged, this.onMultiSelectedChanged.bind(this));
132+
// 监听主选中状态
133+
shield.on(ShieldDispatcherNames.primarySelectedChanged, this.onPrimarySelectedChanged.bind(this));
128134
// 监听位置
129-
shield.on(ShieldDispatcherNames.positionChanged, throttle(this.onPositionChanged.bind(this), 100));
135+
shield.on(ShieldDispatcherNames.positionChanged, throttle(this.onPositionChanged.bind(this), ThrottleTime, { leading: true, trailing: true }));
130136
// 监听宽度
131-
shield.on(ShieldDispatcherNames.widthChanged, throttle(this.onWidthChanged.bind(this), 100));
137+
shield.on(ShieldDispatcherNames.widthChanged, throttle(this.onWidthChanged.bind(this), ThrottleTime, { leading: true, trailing: true }));
132138
// 监听高度
133-
shield.on(ShieldDispatcherNames.heightChanged, throttle(this.onHeightChanged.bind(this), 100));
139+
shield.on(ShieldDispatcherNames.heightChanged, throttle(this.onHeightChanged.bind(this), ThrottleTime, { leading: true, trailing: true }));
134140
// 监听角度
135-
shield.on(ShieldDispatcherNames.angleChanged, throttle(this.onAngleChanged.bind(this), 100));
141+
shield.on(ShieldDispatcherNames.angleChanged, throttle(this.onAngleChanged.bind(this), ThrottleTime, { leading: true, trailing: true }));
136142
// 监听圆角
137-
shield.on(ShieldDispatcherNames.cornersChanged, throttle(this.onCornersChanged.bind(this), 100));
143+
shield.on(ShieldDispatcherNames.cornersChanged, throttle(this.onCornersChanged.bind(this), ThrottleTime, { leading: true, trailing: true }));
138144
// 监听X轴翻转
139-
shield.on(ShieldDispatcherNames.flipXChanged, throttle(this.onFlipXChanged.bind(this), 100));
145+
shield.on(ShieldDispatcherNames.flipXChanged, throttle(this.onFlipXChanged.bind(this), ThrottleTime, { leading: true, trailing: true }));
140146
// 监听Y偏移角度
141-
shield.on(ShieldDispatcherNames.leanYAngleChanged, throttle(this.onLeanYAngleChanged.bind(this), 100));
147+
shield.on(ShieldDispatcherNames.leanYAngleChanged, throttle(this.onLeanYAngleChanged.bind(this), ThrottleTime, { leading: true, trailing: true }));
142148
// 监听缩放
143-
shield.on(ShieldDispatcherNames.scaleChanged, throttle(this.onScaleChanged.bind(this), 100));
149+
shield.on(ShieldDispatcherNames.scaleChanged, throttle(this.onScaleChanged.bind(this), ThrottleTime, { leading: true, trailing: true }));
144150
// 监听描边
145-
shield.on(ShieldDispatcherNames.strokesChanged, throttle(this.onStrokesChanged.bind(this), 100));
151+
shield.on(ShieldDispatcherNames.strokesChanged, throttle(this.onStrokesChanged.bind(this), ThrottleTime, { leading: true, trailing: true }));
146152
// 监听填充
147-
shield.on(ShieldDispatcherNames.fillsChanged, throttle(this.onFillsChanged.bind(this), 100));
153+
shield.on(ShieldDispatcherNames.fillsChanged, throttle(this.onFillsChanged.bind(this), ThrottleTime, { leading: true, trailing: true }));
148154
// 监听字体大小
149-
shield.on(ShieldDispatcherNames.fontSizeChanged, throttle(this.onFontSizeChanged.bind(this), 100));
155+
shield.on(ShieldDispatcherNames.fontSizeChanged, throttle(this.onFontSizeChanged.bind(this), ThrottleTime, { leading: true, trailing: true }));
150156
// 监听字体
151-
shield.on(ShieldDispatcherNames.fontFamilyChanged, throttle(this.onFontFamilyChanged.bind(this), 100));
157+
shield.on(ShieldDispatcherNames.fontFamilyChanged, throttle(this.onFontFamilyChanged.bind(this), ThrottleTime, { leading: true, trailing: true }));
152158
// 监听文本对齐方式
153-
shield.on(ShieldDispatcherNames.textAlignChanged, throttle(this.onTextAlignChanged.bind(this), 100));
159+
shield.on(ShieldDispatcherNames.textAlignChanged, throttle(this.onTextAlignChanged.bind(this), ThrottleTime, { leading: true, trailing: true }));
154160
// 监听文本基线
155-
shield.on(ShieldDispatcherNames.textBaselineChanged, throttle(this.onTextBaselineChanged.bind(this), 100));
161+
shield.on(ShieldDispatcherNames.textBaselineChanged, throttle(this.onTextBaselineChanged.bind(this), ThrottleTime, { leading: true, trailing: true }));
156162
// 监听宽高比锁定
157-
shield.on(ShieldDispatcherNames.ratioLockedChanged, throttle(this.onRatioLockedChanged.bind(this), 100));
163+
shield.on(ShieldDispatcherNames.ratioLockedChanged, throttle(this.onRatioLockedChanged.bind(this), ThrottleTime, { leading: true, trailing: true }));
158164
// 监听绘制工具
159-
shield.on(ShieldDispatcherNames.creatorChanged, throttle(this.onCreatorChanged.bind(this), 100));
160-
// 监听多选状态
161-
shield.on(ShieldDispatcherNames.multiSelectedChanged, throttle(this.onMultiSelectedChanged.bind(this), 100));
162-
// 监听主选中状态
163-
shield.on(ShieldDispatcherNames.primarySelectedChanged, throttle(this.onPrimarySelectedChanged.bind(this), 100));
165+
shield.on(ShieldDispatcherNames.creatorChanged, throttle(this.onCreatorChanged.bind(this), ThrottleTime, { leading: true, trailing: true }));
164166
// 监听层上移状态
165-
shield.on(ShieldDispatcherNames.layerShiftMoveEnableChanged, throttle(this.onLayerShiftMoveEnableChanged.bind(this), 100));
167+
shield.on(ShieldDispatcherNames.layerShiftMoveEnableChanged, throttle(this.onLayerShiftMoveEnableChanged.bind(this), ThrottleTime, { leading: true, trailing: true }));
166168
// 监听层下移状态
167-
shield.on(ShieldDispatcherNames.layerGoDownEnableChanged, throttle(this.onLayerGoDownEnableChanged.bind(this), 100));
169+
shield.on(ShieldDispatcherNames.layerGoDownEnableChanged, throttle(this.onLayerGoDownEnableChanged.bind(this), ThrottleTime, { leading: true, trailing: true }));
168170
},
169171
/**
170172
* 设置绘制工具
@@ -243,34 +245,34 @@ export const useStageStore = defineStore("stage", {
243245
onElementChanged(element: IElement) {
244246
if (!element) return;
245247
const { position, width, height, angle, corners, flipX, leanYAngle, strokes, fills, fontSize, fontFamily, textAlign, textBaseline, isRatioLocked } = element;
246-
// 组件位置
247-
this.onPositionChanged(element, position);
248-
// 组件宽度
249-
this.onWidthChanged(element, width);
250-
// 组件高度
251-
this.onHeightChanged(element, height);
252-
// 组件旋转角度
253-
this.onAngleChanged(element, angle);
254-
// 组件圆角
255-
this.onCornersChanged(element, corners);
256-
// X轴翻转
257-
this.onFlipXChanged(element, flipX);
258-
// Y轴偏移角度
259-
this.onLeanYAngleChanged(element, leanYAngle);
260-
// 描边
261-
this.onStrokesChanged(element, strokes);
262-
// 填充颜色
263-
this.onFillsChanged(element, fills);
264-
// 字体大小
265-
this.onFontSizeChanged(element, fontSize);
266-
// 字体
267-
this.onFontFamilyChanged(element, fontFamily);
268-
// 文本对齐方式
269-
this.onTextAlignChanged(element, textAlign);
270-
// 文本基线
271-
this.onTextBaselineChanged(element, textBaseline);
272-
// 宽高比锁定
273-
this.onRatioLockedChanged(element, isRatioLocked);
248+
// 组件位置
249+
this.onPositionChanged(element, position);
250+
// 组件宽度
251+
this.onWidthChanged(element, width);
252+
// 组件高度
253+
this.onHeightChanged(element, height);
254+
// 组件旋转角度
255+
this.onAngleChanged(element, angle);
256+
// 组件圆角
257+
this.onCornersChanged(element, corners);
258+
// X轴翻转
259+
this.onFlipXChanged(element, flipX);
260+
// Y轴偏移角度
261+
this.onLeanYAngleChanged(element, leanYAngle);
262+
// 描边
263+
this.onStrokesChanged(element, strokes);
264+
// 填充颜色
265+
this.onFillsChanged(element, fills);
266+
// 字体大小
267+
this.onFontSizeChanged(element, fontSize);
268+
// 字体
269+
this.onFontFamilyChanged(element, fontFamily);
270+
// 文本对齐方式
271+
this.onTextAlignChanged(element, textAlign);
272+
// 文本基线
273+
this.onTextBaselineChanged(element, textBaseline);
274+
// 宽高比锁定
275+
this.onRatioLockedChanged(element, isRatioLocked);
274276
},
275277
/**
276278
* 舞台组件命中状态改变

0 commit comments

Comments
 (0)