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

菜单功能完善

Browse Source 
直线/曲线编辑右键菜单功能完善
添加_rightclick和_leftclick事件（原始事件无法区别拖拽）
This commit is contained in:
walker 2023-05-12 18:17:13 +08:00
parent df3522e205
commit 3454739356
14 changed files with 470 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -14,7 +14,7 @@ viewport 使用的 github 开源的 pixi-viewport[pixi-viewport](https://github.
- 绘制增加吸附功能（移动到特定位置附近吸附）（完成）
- 图形动画抽象
- 添加公用动画逻辑(如按指定路径位移，按角度旋转、按比例缩放、透明度控制等)
- 菜单事件及处理
- 菜单事件及处理，功能：菜单更新、菜单项显隐控制、菜单执行前后事件回调
- 打包
- 添加拖拽轨迹限制功能
- 添加图形对象 可编辑属性 定义功能

47
src/examples/app/index.ts
View File

@ -1,5 +1,7 @@
import { fromUint8Array, toUint8Array } from 'js-base64';
import { IPointData, Point } from 'pixi.js';
import { IscsFan } from 'src/graphics/iscs-fan/IscsFan';
import { IscsFanDraw } from 'src/graphics/iscs-fan/IscsFanDrawAssistant';
import { Link } from 'src/graphics/link/Link';
import { LinkDraw } from 'src/graphics/link/LinkDrawAssistant';
import {
@ -10,11 +12,11 @@ import {
JlDrawApp,
KeyListener,
} from 'src/jlgraphic';
import { ContextMenu } from 'src/jlgraphic/ui/ContextMenu';
import { MenuItemOptions } from 'src/jlgraphic/ui/Menu';
import { IscsFanData } from './graphics/IscsFanInteraction';
import { LinkData } from './graphics/LinkInteraction';
import { graphicData } from './protos/draw_data_storage';
import { IscsFanDraw } from 'src/graphics/iscs-fan/IscsFanDrawAssistant';
import { IscsFanData } from './graphics/IscsFanInteraction';
import { IscsFan } from 'src/graphics/iscs-fan/IscsFan';
export function fromStoragePoint(p: graphicData.Point): Point {
return new Point(p.x, p.y);
@ -46,6 +48,28 @@ export function toStorageTransform(
});
}
const UndoOptions: MenuItemOptions = {
name: '撤销',
};
const RedoOptions: MenuItemOptions = {
name: '重做',
};
const SelectAllOptions: MenuItemOptions = {
name: '全选',
};
export const DefaultCanvasMenu = new ContextMenu({
name: '绘制-画布菜单',
groups: [
{
items: [UndoOptions, RedoOptions],
},
{
items: [SelectAllOptions],
},
],
});
export function initDrawApp(app: JlDrawApp) {
app.setOptions({
drawAssistants: [
@ -58,6 +82,23 @@ export function initDrawApp(app: JlDrawApp) {
],
});
// 画布右键菜单
app.registerMenu(DefaultCanvasMenu);
app.canvas.on('_rightclick', (e) => {
UndoOptions.disabled = !app.opRecord.hasUndo;
RedoOptions.disabled = !app.opRecord.hasRedo;
UndoOptions.handler = () => {
app.opRecord.undo();
};
RedoOptions.handler = () => {
app.opRecord.redo();
};
SelectAllOptions.handler = () => {
app.selectAllGraphics();
};
DefaultCanvasMenu.open(e.global);
});
app.addKeyboardListener(
new KeyListener({
value: 'KeyL',

39
src/graphics/link/LinkDrawAssistant.ts
View File

@ -29,7 +29,13 @@ import {
BezierCurveEditPlugin,
ILineGraphic,
PolylineEditPlugin,
addWayPoint,
addWaypointConfig,
clearWayPoint,
clearWaypointsConfig,
getWaypointRangeIndex,
} from 'src/jlgraphic/plugins/GraphicEditPlugin';
import { ContextMenu } from 'src/jlgraphic/ui/ContextMenu';
import { ILinkData, Link, LinkTemplate } from './Link';
export interface ILinkDrawOptions {
@ -263,6 +269,15 @@ function onEditPointCreate(
}
}
const LinkEditMenu: ContextMenu = ContextMenu.init({
name: '轨道编辑菜单',
groups: [
{
items: [addWaypointConfig, clearWaypointsConfig],
},
],
});
/**
* link路径编辑
*/
@ -270,6 +285,7 @@ export class LinkPointsEditPlugin extends GraphicInteractionPlugin<Link> {
static Name = 'LinkPointsDrag';
constructor(app: GraphicApp) {
super(LinkPointsEditPlugin.Name, app);
app.registerMenu(LinkEditMenu);
}
static init(app: GraphicApp): LinkPointsEditPlugin {
return new LinkPointsEditPlugin(app);
@ -281,14 +297,37 @@ export class LinkPointsEditPlugin extends GraphicInteractionPlugin<Link> {
g.lineGraphic.eventMode = 'static';
g.lineGraphic.cursor = 'pointer';
g.lineGraphic.hitArea = new LinkGraphicHitArea(g);
g.on('_rightclick', this.onContextMenu, this);
g.on('selected', this.onSelected, this);
g.on('unselected', this.onUnselected, this);
}
unbind(g: Link): void {
g.off('_rightclick', this.onContextMenu, this);
g.off('selected', this.onSelected, this);
g.off('unselected', this.onUnselected, this);
}
onContextMenu(e: FederatedMouseEvent) {
const target = e.target as DisplayObject;
const link = target.getGraphic() as Link;
this.app.updateSelected(link);
addWaypointConfig.handler = () => {
const linePoints = link.linePoints;
const p = link.screenToLocalPoint(e.global);
const { start, end } = getWaypointRangeIndex(
linePoints,
link.datas.curve,
p
);
addWayPoint(link, link.datas.curve, start, end, p);
};
clearWaypointsConfig.handler = () => {
clearWayPoint(link, link.datas.curve);
};
LinkEditMenu.open(e.global);
}
onSelected(g: DisplayObject): void {
const link = g as Link;
let lep;

84
src/jlgraphic/app/JlDrawApp.ts
View File

@ -35,6 +35,8 @@ import {
ICanvasProperties,
JlCanvas,
} from './JlGraphicApp';
import { ContextMenu } from '../ui/ContextMenu';
import { MenuItemOptions, MenuOptions } from '../ui/Menu';
/**
* 图形绘制助手
@ -240,7 +242,7 @@ export class JlDrawApp extends GraphicApp {
this.selectedData = null;
this.initSelectedDataUpdateListen();
// 拖拽操作记录
this.appDragRecord();
this.appOperationRecord();
// 绑定通用键盘操作
this.bindKeyboardOperation();
}
@ -269,7 +271,7 @@ export class JlDrawApp extends GraphicApp {
return sda as DA;
}
private appDragRecord() {
private appOperationRecord() {
let dragStartDatas: GraphicData[] = [];
this.on('drag_op_start', (e: AppDragEvent) => {
// 图形拖拽，记录初始数据
@ -283,7 +285,7 @@ export class JlDrawApp extends GraphicApp {
if (dragStartDatas.length > 0) {
const newData = this.selectedGraphics.map((g) => g.saveData());
this.opRecord.record(
new DragOperation(
new GraphicDataUpdateOperation(
this,
this.selectedGraphics,
dragStartDatas,
@ -293,6 +295,28 @@ export class JlDrawApp extends GraphicApp {
dragStartDatas = [];
}
});
// 菜单操作
let preMenuHandleDatas: GraphicData[] = [];
this.on('pre-menu-handle', (menu: MenuItemOptions) => {
if (menu.name === '撤销' || menu.name === '重做') {
return;
}
preMenuHandleDatas = this.selectedGraphics.map((g) => g.saveData());
});
this.on('post-menu-handle', () => {
if (preMenuHandleDatas.length > 0) {
const newData = this.selectedGraphics.map((g) => g.saveData());
this.opRecord.record(
new GraphicDataUpdateOperation(
this,
this.selectedGraphics,
preMenuHandleDatas,
newData
)
);
preMenuHandleDatas = [];
}
});
}
/**
@ -346,7 +370,6 @@ export class JlDrawApp extends GraphicApp {
this.app.stage.addChild(this.scaleText);
const bound = this.coordinates.getLocalBounds();
this.scaleText.position.set(bound.width + 10, 0);
this.canvas.interactive = true;
this.canvas.on('mousemove', (e) => {
if (e.target) {
const { x, y } = this.toCanvasCoordinates(e.global);
@ -517,11 +540,11 @@ export class JlDrawApp extends GraphicApp {
const data = g.saveData();
g.updateData(this.selectedData as GraphicData);
this.opRecord.record(
new UpdateDataOperation(
new GraphicDataUpdateOperation(
this,
g,
data,
this.selectedData as GraphicData
[g],
[data],
[this.selectedData as GraphicData]
)
);
}
@ -604,7 +627,12 @@ function recordGraphicMoveOperation(app: GraphicApp) {
) {
const newData = app.selectedGraphics.map((g) => g.saveData());
app.opRecord.record(
new DragOperation(app, app.selectedGraphics, dragStartDatas, newData)
new GraphicDataUpdateOperation(
app,
app.selectedGraphics,
dragStartDatas,
newData
)
);
handleArrowKeyMoveGraphics(app, (g) => {
@ -695,39 +723,7 @@ export class GraphicDeleteOperation extends JlOperation {
}
}
/**
* 更新数据操作
*/
export class UpdateDataOperation extends JlOperation {
obj: JlGraphic;
data: GraphicData; // 更新为data的protobuf数据
old: GraphicData; // 更新前data的protobuf数据
description = '';
constructor(
app: GraphicApp,
obj: JlGraphic,
old: GraphicData,
data: GraphicData
) {
super(app, 'update-payload');
this.app = app;
this.obj = obj;
this.old = old;
this.data = data;
}
undo(): JlGraphic[] {
this.obj.updateData(this.old);
return [this.obj];
}
redo(): JlGraphic[] {
this.obj.updateData(this.data);
return [this.obj];
}
}
export class DragOperation extends JlOperation {
export class GraphicDataUpdateOperation extends JlOperation {
obj: JlGraphic[];
oldData: GraphicData[];
newData: GraphicData[];
@ -746,7 +742,7 @@ export class DragOperation extends JlOperation {
undo(): void | JlGraphic[] {
for (let i = 0; i < this.obj.length; i++) {
const g = this.obj[i];
g.exitChildEdit();
// g.exitChildEdit();
g.updateData(this.oldData[i]);
}
return this.obj;
@ -754,7 +750,7 @@ export class DragOperation extends JlOperation {
redo(): void | JlGraphic[] {
for (let i = 0; i < this.obj.length; i++) {
const g = this.obj[i];
g.exitChildEdit();
// g.exitChildEdit();
g.updateData(this.newData[i]);
}
return this.obj;

3
src/jlgraphic/app/JlGraphicApp.ts
View File

@ -45,6 +45,7 @@ import {
} from '../plugins/KeyboardPlugin';
import { ContextMenu, ContextMenuPlugin } from '../ui/ContextMenu';
import { getRectangleCenter, recursiveChildren } from '../utils/GraphicUtils';
import { MenuItemOptions } from '../ui/Menu';
export const AppConsts = {
viewportname: '__viewport',
@ -284,6 +285,8 @@ export interface GraphicAppEvents extends GlobalMixins.GraphicAppEvents {
drag_op_start: [event: AppDragEvent];
drag_op_move: [event: AppDragEvent];
drag_op_end: [event: AppDragEvent];
'pre-menu-handle': [menu: MenuItemOptions];
'post-menu-handle': [menu: MenuItemOptions];
destroy: [app: GraphicApp];
}

10
src/jlgraphic/core/JlGraphic.ts
View File

@ -305,6 +305,16 @@ DisplayObject.prototype.localToScreenPoints = function localToScreenPoints(
): Point[] {
return points.map((p) => this.toGlobal(p));
};
DisplayObject.prototype.screenToLocalPoint = function screenToLocalPoint(
p: IPointData
): Point {
return this.toLocal(p);
}
DisplayObject.prototype.screenToLocalPoints = function screenToLocalPoints(
...points: IPointData[]
): Point[] {
return points.map((p) => this.toLocal(p));
}
DisplayObject.prototype.localBoundsToCanvasPoints =
function localBoundsToCanvasPoints() {

3
src/jlgraphic/global.d.ts vendored
View File

@ -11,6 +11,7 @@ declare namespace GlobalMixins {
type BoundsGraphic = import('./plugins').BoundsGraphic;
type IPointDataType = import('pixi.js').IPointData;
type PointType = import('pixi.js').Point;
type FederatedMouseEvent = import('pixi.js').FederatedMouseEvent;
type DisplayObjectType = import('pixi.js').DisplayObject;
type ContainerType = import('pixi.js').Container;
interface DisplayObjectEvents {
@ -22,6 +23,8 @@ declare namespace GlobalMixins {
transformstart: [e: GraphicTransformEvent];
transforming: [e: GraphicTransformEvent];
transformend: [e: GraphicTransformEvent];
_rightclick: [e: FederatedMouseEvent];
_leftclick: [e: FederatedMouseEvent];
selected: [DisplayObjectType];
unselected: [DisplayObjectType];
childselected: [DisplayObjectType];

8
src/jlgraphic/operation/JlOperation.ts
View File

@ -46,6 +46,14 @@ export class OperationRecord {
this.maxLen = maxLen;
}
public get hasUndo(): boolean {
return this.undoStack.length > 0;
}
public get hasRedo(): boolean {
return this.redoStack.length > 0;
}
setMaxLen(v: number) {
this.maxLen = v;
const len = this.undoStack.length;

233
src/jlgraphic/plugins/GraphicEditPlugin.ts
View File

@ -6,12 +6,20 @@ import {
Graphics,
IDestroyOptions,
IPointData,
Point,
} from 'pixi.js';
import { JlGraphic } from '../core';
import { DraggablePoint } from '../graphic';
import { calculateMirrorPoint, distance2 } from '../utils';
import { MenuItemOptions, MenuOptions } from '../ui/Menu';
import { ContextMenu } from '../ui/ContextMenu';
import { MenuItemOptions, MenuOptions } from '../ui/Menu';
import {
calculateFootPointFromPointToLine,
calculateMirrorPoint,
assertBezierPoints,
distance2,
linePoint,
pointPolygon,
} from '../utils';
import { GraphicTransformEvent, ShiftData } from './GraphicTransformPlugin';
export abstract class GraphicEditPlugin<
@ -22,6 +30,7 @@ export abstract class GraphicEditPlugin<
super();
this.graphic = g;
this.zIndex = 2;
this.sortableChildren = true;
this.graphic.on('transformstart', this.hideAll, this);
this.graphic.on('transformend', this.showAll, this);
this.graphic.on('repaint', this.showAll, this);
@ -45,20 +54,20 @@ export abstract class GraphicEditPlugin<
}
}
const addWaypoint: MenuItemOptions = {
export const addWaypointConfig: MenuItemOptions = {
name: '添加路径点',
};
const removeWaypoint: MenuItemOptions = {
export const removeWaypointConfig: MenuItemOptions = {
name: '移除路径点',
};
const clearWaypoints: MenuItemOptions = {
export const clearWaypointsConfig: MenuItemOptions = {
name: '清除所有路径点',
};
const menuOptions: MenuOptions = {
name: '图形编辑点菜单',
groups: [
{
items: [addWaypoint, removeWaypoint, clearWaypoints],
items: [removeWaypointConfig, clearWaypointsConfig],
},
],
};
@ -94,6 +103,42 @@ export abstract class LineEditPlugin extends GraphicEditPlugin<ILineGraphic> {
abstract initEditPoints(): void;
}
export function getWaypointRangeIndex(
points: IPointData[],
curve: boolean,
p: IPointData
): { start: number; end: number } {
let start = 0;
let end = 0;
if (!curve) {
// 直线
for (let i = 1; i < points.length; i++) {
const sp = points[i - 1];
const ep = points[i];
const fp = calculateFootPointFromPointToLine(sp, ep, p);
if (linePoint(sp, ep, fp, 1, true)) {
start = i - 1;
end = i;
break;
}
}
} else {
// 贝塞尔曲线
assertBezierPoints(points);
for (let i = 0; i < points.length - 3; i += 3) {
const p1 = points[i];
const cp1 = points[i + 1];
const cp2 = points[i + 2];
const p2 = points[i + 3];
if (pointPolygon(p, [p1, cp1, cp2, p2], 1)) {
start = i;
end = i + 3;
}
}
}
return { start, end };
}
export type onEditPointCreate = (
g: ILineGraphic,
dp: DraggablePoint,
@ -125,6 +170,19 @@ export class PolylineEditPlugin extends LineEditPlugin {
for (let i = 0; i < cps.length; i++) {
const p = cps[i];
const dp = new DraggablePoint(p);
dp.on('rightclick', (e: FederatedMouseEvent) => {
// dp.getGraphicApp().openContextMenu(EditPointContextMenu.DefaultMenu);
// 路径中的点
const app = dp.getGraphicApp();
app.registerMenu(EditPointContextMenu);
removeWaypointConfig.handler = () => {
removeLineWayPoint(this.graphic, i);
};
clearWaypointsConfig.handler = () => {
clearWayPoint(this.graphic, false);
};
EditPointContextMenu.open(e.global);
});
dp.on('transforming', () => {
const tlp = this.graphic.canvasToLocalPoint(dp.position);
const cp = this.linePoints[i];
@ -166,6 +224,133 @@ export interface ICompleteBezierCurveEditPointOptions
smooth: boolean;
}
export function addWayPoint(
graphic: ILineGraphic,
curve: boolean,
start: number,
end: number,
p: IPointData
) {
if (!curve) {
addLineWayPoint(graphic, start, end, p);
} else {
addBezierWayPoint(graphic, start, end, p);
}
}
export function addLineWayPoint(
graphic: ILineGraphic,
start: number,
end: number,
p: IPointData
) {
const linePoints = graphic.linePoints;
const points = linePoints.slice(0, start + 1);
points.push(new Point(p.x, p.y));
points.push(...linePoints.slice(end));
graphic.linePoints = points;
}
function assertBezierWayPoint(i: number) {
const c = i % 3;
if (c !== 0) {
throw new Error(`i=${i}的点不是路径点`);
}
}
export function addBezierWayPoint(
graphic: ILineGraphic,
start: number,
end: number,
p: IPointData
) {
if (start === end) {
throw new Error('开始结束点不能一致');
}
assertBezierWayPoint(start);
assertBezierWayPoint(end);
const linePoints = graphic.linePoints;
const points = linePoints.slice(0, start + 2);
const ap = new Point(p.x, p.y);
points.push(ap.clone(), ap.clone(), ap.clone());
points.push(...linePoints.slice(end - 1));
graphic.linePoints = points;
}
export function removeWayPoint(
graphic: ILineGraphic,
curve: boolean,
i: number
) {
if (!curve) {
removeLineWayPoint(graphic, i);
} else {
removeBezierWayPoint(graphic, i);
}
}
export function removeLineWayPoint(graphic: ILineGraphic, i: number) {
const linePoints = graphic.linePoints;
if (linePoints.length > 2) {
const points = linePoints.slice(0, i);
points.push(...linePoints.slice(i + 1));
graphic.linePoints = points;
}
}
export function removeBezierWayPoint(graphic: ILineGraphic, i: number) {
let points;
const linePoints = graphic.linePoints;
const c = i % 3;
if (c !== 0) {
throw new Error(`i=${i}的点${linePoints[i]}不是路径点`);
}
if (i === 0) {
// 第一个点
if (linePoints.length > 4) {
points = linePoints.slice(3);
} else {
console.error('不能移除:剩余点数不足');
}
} else if (i === linePoints.length - 1) {
// 最后一个点
if (linePoints.length > 4) {
points = linePoints.slice(0, linePoints.length - 3);
} else {
console.error('无法移除:剩余点数不足');
}
} else {
// 中间点
points = linePoints.slice(0, i - 1);
points.push(...linePoints.slice(i + 2));
}
if (points) {
graphic.linePoints = points;
}
}
/**
* 清除路径点(只留端点),适用于直线和贝塞尔曲线
* @param graphic
* @param curve
*/
export function clearWayPoint(graphic: ILineGraphic, curve: boolean) {
const linePoints = graphic.linePoints;
if (!curve) {
if (linePoints.length > 2) {
const points = linePoints.slice(0, 1);
points.push(...linePoints.slice(-1));
graphic.linePoints = points;
}
} else {
if (linePoints.length > 4) {
const points = linePoints.slice(0, 2);
points.push(...linePoints.slice(-2));
graphic.linePoints = points;
}
}
}
/**
* 贝塞尔曲线编辑
*/
@ -195,11 +380,15 @@ export class BezierCurveEditPlugin extends LineEditPlugin {
const startOrEnd = i == 0 || i == cps.length - 1;
const c = i % 3;
if (c === 1) {
// 前一路径点的控制点
dp.zIndex = 2;
const fp = cps[i - 1];
const line = new Graphics();
this.drawAuxiliaryLine(line, fp, p);
this.auxiliaryLines.push(line);
} else if (c === 2) {
// 后一路径点的控制点
dp.zIndex = 3;
const np = cps[i + 1];
const line = new Graphics();
this.drawAuxiliaryLine(line, p, np);
@ -208,34 +397,14 @@ export class BezierCurveEditPlugin extends LineEditPlugin {
dp.on('rightclick', (e: FederatedMouseEvent) => {
// dp.getGraphicApp().openContextMenu(EditPointContextMenu.DefaultMenu);
if (c === 0) {
// 路径中的点
const app = dp.getGraphicApp();
app.registerMenu(EditPointContextMenu);
removeWaypoint.onClick = () => {
let points;
if (i === 0) {
// 第一个点
if (this.linePoints.length > 4) {
points = this.linePoints.slice(3);
} else {
console.error('无法移除');
}
} else if (i === cps.length - 1) {
// 最后一个点
if (this.linePoints.length > 4) {
points = this.linePoints.slice(0, this.linePoints.length - 3);
} else {
console.error('无法移除');
}
} else {
// 中间点
points = [];
points.push(...this.linePoints.slice(0, i - 1));
points.push(...this.linePoints.slice(i + 2));
}
if (points) {
console.log('points', points);
this.graphic.linePoints = points;
}
removeWaypointConfig.handler = () => {
removeBezierWayPoint(this.graphic, i);
};
clearWaypointsConfig.handler = () => {
clearWayPoint(this.graphic, true);
};
EditPointContextMenu.open(e.global);
}

6
src/jlgraphic/plugins/GraphicTransformPlugin.ts
View File

@ -225,7 +225,7 @@ export class GraphicTransformPlugin extends BaseInteractionPlugin {
return targets;
}
onDragStart(e: AppDragEvent) {
if (!e.target.isCanvas()) {
if (!e.target.isCanvas() && e.isLeftButton) {
const targets: DisplayObject[] = this.getDraggedTargets(e);
if (targets.length > 0) {
targets.forEach((target) => {
@ -248,7 +248,7 @@ export class GraphicTransformPlugin extends BaseInteractionPlugin {
}
onDragMove(e: AppDragEvent) {
if (!e.target.isCanvas()) {
if (!e.target.isCanvas() && e.isLeftButton) {
const targets: DisplayObject[] = this.getDraggedTargets(e);
if (targets.length > 0) {
// 处理位移
@ -291,7 +291,7 @@ export class GraphicTransformPlugin extends BaseInteractionPlugin {
}
onDragEnd(e: AppDragEvent) {
if (!e.target.isCanvas()) {
if (!e.target.isCanvas() && e.isLeftButton) {
const targets: DisplayObject[] = this.getDraggedTargets(e);
targets.forEach((target) => {
if (target.shiftStartPoint) {

29
src/jlgraphic/plugins/InteractionPlugin.ts
View File

@ -165,9 +165,10 @@ export class AppDragEvent {
*/
export class DragPlugin extends BaseInteractionPlugin {
static Name = '__drag_operation_plugin';
threshold = 3;
private threshold = 3;
target: DisplayObject | null = null;
start: Point | null = null;
startClientPoint: Point | null = null;
drag = false;
constructor(app: GraphicApp) {
super(app, DragPlugin.Name, InteractionPluginType.Other);
@ -193,17 +194,19 @@ export class DragPlugin extends BaseInteractionPlugin {
onPointerDown(e: FederatedPointerEvent) {
this.target = e.target as DisplayObject;
this.start = this.app.toCanvasCoordinates(e.global);
this.startClientPoint = e.global.clone();
const canvas = this.app.canvas;
canvas.on('pointermove', this.onPointerMove, this);
canvas.on('pointerup', this.onPointerUp, this);
canvas.on('pointerupoutside', this.onPointerUp, this);
}
onPointerMove(e: FederatedPointerEvent) {
if (this.start) {
const current = this.app.toCanvasCoordinates(e.global);
if (this.start && this.startClientPoint) {
const current = e.global;
const sgp = this.startClientPoint;
const dragStart =
Math.abs(current.x - this.start.x) > this.threshold ||
Math.abs(current.y - this.start.y) > this.threshold;
Math.abs(current.x - sgp.x) > this.threshold ||
Math.abs(current.y - sgp.y) > this.threshold;
if (this.target && this.start && !this.drag && dragStart) {
this.app.emit(
'drag_op_start',
@ -230,6 +233,21 @@ export class DragPlugin extends BaseInteractionPlugin {
'drag_op_end',
new AppDragEvent(this.app, 'end', this.target, e, this.start)
);
} else if (this.target && this.start && !this.drag) {
// this.target.emit('click', this.target);
const ade = new AppDragEvent(this.app, 'end', this.target, e, this.start);
const graphic = this.target.getGraphic();
if (ade.isRightButton) {
this.target.emit('_rightclick', e);
if (graphic != null) {
graphic.emit('_rightclick', e);
}
} else if (ade.isLeftButton) {
this.target.emit('_leftclick', e);
if (graphic != null) {
graphic.emit('_leftclick', e);
}
}
}
const canvas = this.app.canvas;
canvas.off('mousemove', this.onPointerMove, this);
@ -243,6 +261,7 @@ export class DragPlugin extends BaseInteractionPlugin {
clearCache() {
this.drag = false;
this.start = null;
this.startClientPoint = null;
this.target = null;
}
}

109
src/jlgraphic/ui/ContextMenu.ts
View File

@ -17,6 +17,12 @@ export class ContextMenuPlugin {
constructor(app: GraphicApp) {
this.app = app;
const canvas = this.app.canvas;
canvas.on('pointerdown', () => {
this.contextMenuMap.forEach((menu) => {
menu.close();
});
});
}
registerMenu(menu: ContextMenu) {
@ -262,7 +268,7 @@ export class ContextMenu extends Container {
this.addChild(...this.groups);
this.interactive = true;
this.eventMode = 'static';
this.on('pointerover', () => {
this.active = true;
});
@ -288,6 +294,7 @@ export class ContextMenu extends Container {
}
updateBg() {
this.bg.clear();
const options = this.menuOptions;
let maxItemWidth = 0;
let borderHeight = 0;
@ -422,10 +429,7 @@ class MenuGroup extends Container {
config.items.forEach((item) => {
this.items.push(new ContextMenuItem(menu, item));
});
for (let i = 0; i < this.items.length; i++) {
const item = this.items[i];
item.position.y = i * item.totalHeight;
}
this.addChild(...this.items);
}
@ -464,7 +468,21 @@ class MenuGroup extends Container {
}
update() {
this.items.forEach((item) => item.update());
let i = 0;
this.items.forEach((item) => {
item.update();
if (item.visible) {
item.position.y = i * item.totalHeight;
i++;
}
});
// this.items.forEach()
// for (let i = 0; i < this.items.length; i++) {
// const item = this.items[i];
// if (item.visible) {
// item.position.y = i * item.totalHeight;
// }
// }
}
updateItemBox(maxItemWidth: number) {
@ -511,6 +529,42 @@ class ContextMenuItem extends Container {
this.initSubMenu();
}
registerEventHandler() {
this.eventMode = 'static';
this.cursor = 'pointer';
this.on('pointerover', () => {
this.active = true;
if (this.config.disabled) {
this.cursor = 'not-allowed';
} else {
this.cursor = 'pointer';
}
if (this.subMenu) {
const p = this.toGlobal(new Point(this.width));
this.subMenu.open(p);
}
});
this.on('pointerout', () => {
this.active = false;
});
this.on('pointertap', () => {
if (this.config.disabled) {
// 禁用，不处理
return;
}
if (this.config.handler) {
this.menu.plugin.app.emit('pre-menu-handle', this.config);
this.config.handler();
this.menu.plugin.app.emit('post-menu-handle', this.config);
}
if (!this.config.subMenu || this.config.subMenu.length === 0) {
this.active = false;
this.menu.active = false;
this.menu.rootMenu.close();
}
});
}
public get active(): boolean {
return this._active || (this.subMenu != undefined && this.subMenu.active);
}
@ -543,7 +597,11 @@ class ContextMenuItem extends Container {
}
public get totalHeight(): number {
return this.paddingTop + this.paddingBottom + this.nameGraphic.height;
if (this.config.visible === false) {
return 0;
} else {
return this.paddingTop + this.paddingBottom + this.nameGraphic.height;
}
}
public get nameBounds(): Rectangle {
@ -683,41 +741,16 @@ class ContextMenuItem extends Container {
}
// 事件监听
this.interactive = true;
this.hitArea = new Rectangle(0, 0, width, height);
this.cursor = 'pointer';
this.on('pointerover', () => {
this.active = true;
if (this.config.disabled) {
this.cursor = 'not-allowed';
} else {
this.cursor = 'pointer';
}
if (this.subMenu) {
const p = this.toGlobal(new Point(this.width));
this.subMenu.open(p);
}
});
this.on('pointerout', () => {
this.active = false;
});
this.on('pointertap', () => {
if (this.config.disabled) {
// 禁用，不处理
return;
}
if (this.config.onClick) {
this.config.onClick();
}
if (!this.config.subMenu || this.config.subMenu.length === 0) {
this.active = false;
this.menu.active = false;
this.menu.rootMenu.close();
}
});
this.registerEventHandler();
}
update() {
if (this.config.visible === false) {
this.visible = false;
return;
}
this.visible = true;
this.nameText.text = this.config.name;
this.nameText.style.fontSize = this.fontSize;
this.nameText.style.fill = this.fontColor;

12
src/jlgraphic/ui/Menu.ts
View File

@ -23,6 +23,10 @@ export interface MenuOptions {
* 菜单分组
*/
export interface MenuGroupOptions {
/**
* 分组命名
*/
name?: string;
/**
* 菜单项
*/
@ -53,7 +57,7 @@ export interface MenuStyleOptions {
*/
borderColor?: string;
/**
* 包围框是否圆角，小于等于0为直角，圆角的半径
* 包围框是否圆角，圆角的半径,0为直角
*/
borderRoundRadius?: number;
/**
@ -90,9 +94,9 @@ export interface MenuItemOptions {
*/
shortcutKeys?: string[];
/**
* 点击处理
* 菜单逻辑处理
*/
onClick?: () => void;
handler?: () => void;
fontColor?: string;
/**
* 子菜单
@ -151,7 +155,7 @@ export const DefaultWhiteStyleOptions: MenuCompletionStyleOptions = {
borderWidth: 1,
borderColor: '#4C4C4C',
/**
* 默认直角
* 默认圆角
*/
borderRoundRadius: 5,
itemStyle: {

34
src/jlgraphic/utils/GraphicUtils.ts
View File

@ -2,12 +2,11 @@ import {
Container,
DisplayObject,
IPointData,
Matrix,
Point,
Rectangle,
} from 'pixi.js';
import Vector2 from '../math/Vector2';
import { floatEquals, isZero } from '../math';
import Vector2 from '../math/Vector2';
/**
* 递归父节点执行逻辑
@ -86,10 +85,23 @@ export interface BezierParam {
cp2: IPointData;
}
export function convertToBezierParams(points: IPointData[]): BezierParam[] {
/**
* 判断贝塞尔曲线数据是否正确
* @param points
*/
export function assertBezierPoints(points: IPointData[]) {
if (points.length < 4 || points.length % 3 !== 1) {
throw new Error(`bezierCurve 数据错误: ${points}`);
}
}
/**
* 转换为贝塞尔曲线参数
* @param points
* @returns
*/
export function convertToBezierParams(points: IPointData[]): BezierParam[] {
assertBezierPoints(points);
const bps: BezierParam[] = [];
for (let i = 0; i < points.length - 3; i += 3) {
const p1 = new Point(points[i].x, points[i].y);
@ -240,22 +252,6 @@ export function deserializeTransformInto(
}
}
/**
* 计算变换后的点坐标
* @param point 坐标点
* @param transform 变换矩阵
* @returns
*/
export function calculateTransformedPoint(
point: IPointData,
transform: Matrix
): Point {
const { a, b, c, d, tx, ty } = transform;
const x = a * point.x + c * point.y + tx;
const y = b * point.x + d * point.y + ty;
return new Point(x, y);
}
/**
* 将直线转换为多边形
* @param p1