修改link路径菜单定义位置

修改添加路径点bug
2023-06-20 09:16:49 +08:00 · 2023-06-20 09:16:49 +08:00 · 6d905a2fbe
commit 6d905a2fbe
parent ecfe1421bb
3 changed files with 111 additions and 80 deletions
--- a/src/graphics/link/LinkDrawAssistant.ts
+++ b/src/graphics/link/LinkDrawAssistant.ts
@ -30,12 +30,13 @@ import {
  ILineGraphic,
  PolylineEditPlugin,
  addWayPoint,
-  addWaypointConfig,
  clearWayPoint,
-  clearWaypointsConfig,
  getWaypointRangeIndex,
+  removeBezierWayPoint,
+  removeLineWayPoint,
 } from 'src/jlgraphic/plugins/GraphicEditPlugin';
 import { ContextMenu } from 'src/jlgraphic/ui/ContextMenu';
+import { MenuItemOptions, MenuOptions } from 'src/jlgraphic/ui/Menu';
 import { ILinkData, Link, LinkTemplate } from './Link';

 export interface ILinkDrawOptions {
@ -251,7 +252,7 @@ function buildAbsorbablePositions(link: Link): AbsorbablePosition[] {
 * @param dp
 * @param index
 */
-function onEditPointCreate(
+function onPolylineEditPointCreate(
  g: ILineGraphic,
  dp: DraggablePoint,
  index: number
@ -267,8 +268,78 @@ function onEditPointCreate(
      }
    });
  }
+  dp.on('rightclick', (e: FederatedMouseEvent) => {
+    // dp.getGraphicApp().openContextMenu(EditPointContextMenu.DefaultMenu);
+    // 路径中的点
+    const app = dp.getGraphicApp();
+    app.registerMenu(EditPointContextMenu);
+    removeWaypointConfig.handler = () => {
+      removeLineWayPoint(link, index);
+    };
+    clearWaypointsConfig.handler = () => {
+      clearWayPoint(link, false);
+    };
+    EditPointContextMenu.open(e.global);
+  });
 }

+function onCurveEditPointCreate(
+  g: ILineGraphic,
+  dp: DraggablePoint,
+  index: number
+): void {
+  const link = g as Link;
+  if (index === 0 || index == link.datas.points.length - 1) {
+    // 端点
+    dp.on('transformstart', (e: GraphicTransformEvent) => {
+      if (e.isShift()) {
+        link.getGraphicApp().setOptions({
+          absorbablePositions: buildAbsorbablePositions(link),
+        });
+      }
+    });
+  }
+  const c = index % 3;
+  dp.on('rightclick', (e: FederatedMouseEvent) => {
+    // dp.getGraphicApp().openContextMenu(EditPointContextMenu.DefaultMenu);
+    if (c === 0) {
+      // 路径中的点
+      const app = dp.getGraphicApp();
+      app.registerMenu(EditPointContextMenu);
+      removeWaypointConfig.handler = () => {
+        removeBezierWayPoint(link, index);
+      };
+      clearWaypointsConfig.handler = () => {
+        clearWayPoint(link, true);
+      };
+      EditPointContextMenu.open(e.global);
+    }
+  });
+}
+
+export const addWaypointConfig: MenuItemOptions = {
+  name: '添加路径点',
+};
+export const addWaySegmentingConfig: MenuItemOptions = {
+  name: '细分',
+};
+export const removeWaypointConfig: MenuItemOptions = {
+  name: '移除路径点',
+};
+export const clearWaypointsConfig: MenuItemOptions = {
+  name: '清除所有路径点',
+};
+const menuOptions: MenuOptions = {
+  name: '图形编辑点菜单',
+  groups: [
+    {
+      items: [removeWaypointConfig, clearWaypointsConfig],
+    },
+  ],
+};
+
+const EditPointContextMenu = ContextMenu.init(menuOptions);
+
 const LinkEditMenu: ContextMenu = ContextMenu.init({
  name: '轨道编辑菜单',
  groups: [
@ -311,14 +382,17 @@ export class LinkPointsEditPlugin extends GraphicInteractionPlugin<Link> {
    const target = e.target as DisplayObject;
    const link = target.getGraphic() as Link;
    this.app.updateSelected(link);
+    const p = link.getGraphicApp().toCanvasCoordinates(e.global);
+    console.log('右键坐标', p);

    addWaypointConfig.handler = () => {
      const linePoints = link.linePoints;
-      const p = link.screenToLocalPoint(e.global);
+      console.log('添加路径点', linePoints, p);
      const { start, end } = getWaypointRangeIndex(
        linePoints,
        link.datas.curve,
-        p
+        p,
+        link.datas.lineWidth
      );
      addWayPoint(link, link.datas.curve, start, end, p);
    };
@ -338,7 +412,7 @@ export class LinkPointsEditPlugin extends GraphicInteractionPlugin<Link> {
      );
      if (!lep) {
        lep = new BezierCurveEditPlugin(link, {
-          onEditPointCreate,
+          onEditPointCreate: onCurveEditPointCreate,
        });
        link.addAssistantAppend(lep);
      }
@ -348,7 +422,9 @@ export class LinkPointsEditPlugin extends GraphicInteractionPlugin<Link> {
        PolylineEditPlugin.Name
      );
      if (!lep) {
-        lep = new PolylineEditPlugin(link, { onEditPointCreate });
+        lep = new PolylineEditPlugin(link, {
+          onEditPointCreate: onPolylineEditPointCreate,
+        });
        link.addAssistantAppend(lep);
      }
    }
--- a/src/jlgraphic/plugins/GraphicEditPlugin.ts
+++ b/src/jlgraphic/plugins/GraphicEditPlugin.ts
@ -2,7 +2,6 @@ import {
  Color,
  Container,
  DisplayObject,
-  FederatedMouseEvent,
  Graphics,
  IDestroyOptions,
  IPointData,
@ -10,17 +9,16 @@ import {
 } from 'pixi.js';
 import { JlGraphic } from '../core';
 import { DraggablePoint } from '../graphic';
-import { ContextMenu } from '../ui/ContextMenu';
-import { MenuItemOptions, MenuOptions } from '../ui/Menu';
 import {
-  calculateFootPointFromPointToLine,
-  calculateMirrorPoint,
  assertBezierPoints,
+  calculateDistanceFromPointToLine,
+  calculateFootPointFromPointToLine,
+  calculateLineSegmentingPoint,
+  calculateMirrorPoint,
+  convertToBezierParams,
  distance2,
  linePoint,
  pointPolygon,
-  calculateLineSegmentingPoint,
-  calculateDistanceFromPointToLine,
 } from '../utils';
 import { GraphicTransformEvent, ShiftData } from './GraphicTransformPlugin';

@ -56,29 +54,6 @@ export abstract class GraphicEditPlugin<
  }
 }

-export const addWaypointConfig: MenuItemOptions = {
-  name: '添加路径点',
-};
-export const addWaySegmentingConfig: MenuItemOptions = {
-  name: '细分',
-};
-export const removeWaypointConfig: MenuItemOptions = {
-  name: '移除路径点',
-};
-export const clearWaypointsConfig: MenuItemOptions = {
-  name: '清除所有路径点',
-};
-const menuOptions: MenuOptions = {
-  name: '图形编辑点菜单',
-  groups: [
-    {
-      items: [removeWaypointConfig, clearWaypointsConfig],
-    },
-  ],
-};
-
-const EditPointContextMenu = ContextMenu.init(menuOptions);
-
 export interface ILineGraphic extends JlGraphic {
  get linePoints(): IPointData[];
  set linePoints(points: IPointData[]);
@ -150,7 +125,8 @@ export function getWayLineIndex(
 export function getWaypointRangeIndex(
  points: IPointData[],
  curve: boolean,
-  p: IPointData
+  p: IPointData,
+  lineWidth: number
 ): { start: number; end: number } {
  let start = 0;
  let end = 0;
@ -168,17 +144,25 @@ export function getWaypointRangeIndex(
    }
  } 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;
+    const bps = convertToBezierParams(points);
+    for (let i = 0; i < bps.length; i++) {
+      const bp = bps[i];
+      if (pointPolygon(p, [bp.p1, bp.cp1, bp.cp2, bp.p2], lineWidth)) {
+        start = i * 3;
+        end = start + 3;
      }
    }
+    // 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], lineWidth)) {
+    //     start = i;
+    //     end = i + 3;
+    //   }
+    // }
  }
  return { start, end };
 }
@ -214,19 +198,7 @@ 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];
@ -324,6 +296,7 @@ export function addBezierWayPoint(
  p: IPointData
 ) {
  if (start === end) {
+    console.error('添加贝塞尔曲线路径点开始结束点相等', start);
    throw new Error('开始结束点不能一致');
  }
  assertBezierWayPoint(start);
@ -453,21 +426,6 @@ export class BezierCurveEditPlugin extends LineEditPlugin {
        this.drawAuxiliaryLine(line, p, np);
        this.auxiliaryLines.push(line);
      }
-      dp.on('rightclick', (e: FederatedMouseEvent) => {
-        // dp.getGraphicApp().openContextMenu(EditPointContextMenu.DefaultMenu);
-        if (c === 0) {
-          // 路径中的点
-          const app = dp.getGraphicApp();
-          app.registerMenu(EditPointContextMenu);
-          removeWaypointConfig.handler = () => {
-            removeBezierWayPoint(this.graphic, i);
-          };
-          clearWaypointsConfig.handler = () => {
-            clearWayPoint(this.graphic, true);
-          };
-          EditPointContextMenu.open(e.global);
-        }
-      });
      dp.on('transforming', (e: GraphicTransformEvent) => {
        const tlp = this.graphic.canvasToLocalPoint(dp.position);
        const cp = this.linePoints[i];
--- a/src/layouts/DrawLayout.vue
+++ b/src/layouts/DrawLayout.vue
@ -134,11 +134,8 @@ onMounted(() => {
  const dom = document.getElementById('draw-app-container');
  if (dom) {
    const drawApp = drawStore.initDrawApp(dom);
-    drawApp.on('websocket-connected', (app) => {
-      console.log('应用websocket成功连接');
-    });
-    drawApp.on('websocket-disconnected', (app) => {
-      console.log('应用websocket断开连接');
+    drawApp.on('websocket-state-change', (app, connected) => {
+      console.log('应用websocket状态变更', connected);
    });
    loadDrawDatas(drawApp);
    onResize();