joylink/graphic-pixi
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

增加左键托画布配置

Browse Source
This commit is contained in:
joylink_zhaoerwei 2023-11-01 14:22:43 +08:00
parent 460a6237e3
commit 9e6e72cbf0
1 changed files with 46 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/jlgraphic/plugins/CommonMousePlugin.ts
View File

@ -24,6 +24,10 @@ export interface IMouseToolOptions {
* 是否启用视口拖拽(默认右键),默认启用
*/
viewportDrag?: boolean;
/**
* 是否启用左键视口拖拽
*/
viewportDragLeft?: boolean;
/**
* 是否启用鼠标滚轮缩放,默认启用
*/
@ -37,12 +41,14 @@ export interface IMouseToolOptions {
class CompleteMouseToolOptions implements IMouseToolOptions {
boxSelect: boolean;
viewportDrag: boolean;
viewportDragLeft: boolean;
wheelZoom: boolean;
selectFilter?: GraphicSelectFilter | undefined;
constructor() {
this.boxSelect = true;
this.viewportDrag = true;
this.wheelZoom = true;
this.viewportDragLeft = false;
}
update(options: IMouseToolOptions) {
if (options.boxSelect != undefined) {
@ -51,6 +57,9 @@ class CompleteMouseToolOptions implements IMouseToolOptions {
if (options.viewportDrag != undefined) {
this.viewportDrag = options.viewportDrag;
}
if (options.viewportDragLeft != undefined) {
this.viewportDragLeft = options.viewportDragLeft;
}
if (options.wheelZoom != undefined) {
this.wheelZoom = options.wheelZoom;
}
@ -132,6 +141,14 @@ export class CommonMouseTool extends AppInteractionPlugin {
this.app.on('drag_op_move', this.onDragMove, this);
this.app.on('drag_op_end', this.onDragEnd, this);
if (this.options.viewportDrag) {
if (this.options.viewportDragLeft) {
this.app.viewport.drag({
mouseButtons: 'left',
});
canvas.on('mousedown', this.setLeftCursor, this);
canvas.on('mouseup', this.resumeLeftCursor, this);
canvas.on('mouseupoutside', this.resumeLeftCursor, this);
} else {
this.app.viewport.drag({
mouseButtons: 'right',
});
@ -139,6 +156,7 @@ export class CommonMouseTool extends AppInteractionPlugin {
canvas.on('rightup', this.resumeCursor, this);
canvas.on('rightupoutside', this.resumeCursor, this);
}
}
if (this.options.wheelZoom) {
this.app.viewport.wheel({
percent: 0.01,
@ -156,6 +174,9 @@ export class CommonMouseTool extends AppInteractionPlugin {
this.app.off('drag_op_end', this.onDragEnd, this);
this.app.viewport.plugins.remove('drag');
canvas.off('mousedown', this.setLeftCursor, this);
canvas.off('mouseup', this.resumeLeftCursor, this);
canvas.off('mouseupoutside', this.resumeLeftCursor, this);
canvas.off('rightdown', this.setCursor, this);
canvas.off('rightup', this.resumeCursor, this);
canvas.off('rightupoutside', this.resumeCursor, this);
@ -199,6 +220,25 @@ export class CommonMouseTool extends AppInteractionPlugin {
}
}
setLeftCursor(e: FederatedMouseEvent) {
const target = e.target as DisplayObject;
this.leftDownTarget = target;
if (target.isCanvas() && this.app.pixi.view.style) {
this.app.pixi.view.style.cursor = 'grab';
}
}
resumeLeftCursor() {
if (
this.leftDownTarget &&
this.leftDownTarget.isCanvas() &&
this.app.pixi.view.style
) {
this.app.pixi.view.style.cursor = 'inherit';
}
this.leftDownTarget = null;
}
setCursor(e: FederatedMouseEvent) {
const target = e.target as DisplayObject;
this.rightTarget = target;