cbvirtua 1.0.48 → 1.0.49

package/canvas-example-main/canvas-example-main/src/pages/shape-editor/control.ts

@@ -0,0 +1,174 @@
+import { App, Ellipse, Line, UI } from 'leafer-ui';
+import Editor from './editor';
+
+export interface IControl {
+  offsetX: number;
+  offsetY: number;
+  effect?: string;
+}
+
+const circleRadius = 12;
+
+export interface IControlConfig {
+  points?: UI[];
+  controls?: IControl[][];
+  onMove?: (e) => void;
+  onMoveEnd?: (e) => void;
+}
+
+export default class Control {
+  config: IControlConfig;
+  app: App;
+  editor: Editor;
+  private controlEls: UI[] = [];
+
+  point: UI;
+  control: IControl[];
+
+  private pointsIdxMap: Map<number, number> = new Map();
+
+  private controlIdxMap: Map<number, number> = new Map();
+
+  constructor(app: App, config: IControlConfig) {
+    this.config = config;
+    this.app = app;
+
+    this.config.points.forEach((point, index) => {
+      this.pointsIdxMap.set(point.innerId, index);
+    });
+
+    const { onMove = () => {}, onMoveEnd = () => {} } = this.config;
+
+    this.editor = new Editor(this.app, {
+      onMove: (e) => {
+        const controlIdx = this.controlIdxMap.get(e.target.innerId);
+        const pointIdx = this.pointsIdxMap.get(e.target.innerId);
+
+        if (controlIdx !== undefined) {
+          const offsetX = e.x - this.point.x;
+          const offsetY = e.y - this.point.y;
+
+          this.control[controlIdx].offsetX = offsetX;
+          this.control[controlIdx].offsetY = offsetY;
+          this.draw();
+          onMove({ offsetX, offsetY });
+        }
+
+        if (pointIdx !== undefined) {
+          this.point = this.config.points[pointIdx];
+          this.control = this.config.controls[pointIdx];
+          this.draw();
+        }
+      },
+
+      onTap: (e) => {
+        const idx = this.pointsIdxMap.get(e.target.innerId);
+
+        if (idx !== undefined) {
+          if (this.point && this.point.innerId !== e.target.innerId) {
+            this.reset();
+          }
+
+          this.point = this.config.points[idx];
+          this.control = this.config.controls[idx];
+          this.draw();
+        } else {
+          this.reset();
+        }
+      },
+      onMoveEnd: (e) => {
+        onMoveEnd(e);
+      },
+    });
+    this.draw();
+  }
+
+  private draw() {
+    if (!this.point || !this.control?.length) return;
+
+    this.clear();
+
+    const [leftControl, rightControl] = this.control || [];
+    if (leftControl) {
+      const x = leftControl.offsetX + this.point.x;
+      const y = leftControl.offsetY + this.point.y;
+
+      const leftPoint = new Ellipse({
+        x,
+        y,
+        width: circleRadius,
+        height: circleRadius,
+        fill: 'rgb(50,205,121)',
+        cursor: 'move',
+      });
+
+      this.controlIdxMap.set(leftPoint.innerId, 0);
+
+      this.controlEls.push(leftPoint);
+      this.app.tree.add(leftPoint);
+
+      const leftLine = new Line({
+        points: [
+          x + circleRadius / 2,
+          y + circleRadius / 2,
+          this.point.x + this.point.width / 2,
+          this.point.y + this.point.height / 2,
+        ],
+        width: 1,
+        stroke: 'rgb(50,205,121)',
+      });
+
+      this.controlEls.push(leftLine);
+
+      this.app.tree.add(leftLine);
+    }
+    if (rightControl) {
+      const x = rightControl.offsetX + this.point.x;
+      const y = rightControl.offsetY + this.point.y;
+
+      const rightPoint = new Ellipse({
+        x: rightControl.offsetX + this.point.x,
+        y: rightControl.offsetY + this.point.y,
+        width: circleRadius,
+        height: circleRadius,
+        fill: 'rgb(50,205,121)',
+        cursor: 'move',
+      });
+      this.controlEls.push(rightPoint);
+
+      this.controlIdxMap.set(rightPoint.innerId, 1);
+      this.app.tree.add(rightPoint);
+
+      const rightLine = new Line({
+        points: [
+          this.point.x + this.point.width / 2,
+          this.point.y + this.point.height / 2,
+          x + circleRadius / 2,
+          y + circleRadius / 2,
+        ],
+        width: 1,
+        stroke: 'rgb(50,205,121)',
+      });
+
+      this.controlEls.push(rightLine);
+
+      this.app.tree.add(rightLine);
+    }
+  }
+
+  update(config: IControlConfig) {
+    this.config = { ...this.config, ...config };
+  }
+
+  clear() {
+    this.controlEls.forEach((el) => {
+      this.app.tree.remove(el);
+    });
+  }
+
+  reset() {
+    this.clear();
+    this.point = null;
+    this.control = [];
+  }
+}

package/canvas-example-main/canvas-example-main/src/pages/shape-editor/editor.ts

@@ -0,0 +1,91 @@
+import { App, PointerEvent, UI } from 'leafer-ui';
+
+export interface IEditorConfig {
+  onMove?: (e) => void;
+  onMoveEnd?: (e) => void;
+  onTap?: (e) => void;
+  onDown?: (e) => void;
+}
+
+interface ISelector {
+  _offsetX: number;
+  _offsetY: number;
+  target: UI;
+}
+
+export default class Editor {
+  app: App;
+  config: IEditorConfig;
+  isMouseDown: boolean;
+  isMoving: boolean;
+  selector: ISelector;
+
+  constructor(app: App, config: IEditorConfig) {
+    this.app = app;
+    this.config = config;
+
+    const {
+      onMove = () => {},
+      onMoveEnd = () => {},
+      onTap = () => {},
+      onDown = () => {},
+    } = this.config;
+
+    this.app.on(PointerEvent.MOVE, (e) => {
+      const { x, y } = e;
+
+      if (this.isMouseDown) {
+        if (this.selector && this.selector.target.cursor === 'move') {
+          this.isMoving = true;
+
+          const { _offsetX, _offsetY } = this.selector;
+
+          this.selector.target.x = x - _offsetX;
+          this.selector.target.y = y - _offsetY;
+
+          onMove({
+            target: this.selector.target,
+            x,
+            y,
+            offsetX: x - this.selector.target.x,
+            offsetY: y - this.selector.target.y,
+          });
+        }
+      }
+    });
+
+    this.app.on(PointerEvent.DOWN, (e) => {
+      this.isMouseDown = true;
+
+      if (this.app !== e.target) {
+        const { x, y } = e.target;
+
+        const _offsetX = e.x - x;
+        const _offsetY = e.y - y;
+
+        this.selector = { target: e.target, _offsetX, _offsetY };
+        onDown({ target: e.target });
+      }
+    });
+
+    this.app.on(PointerEvent.UP, (e) => {
+      if (this.isMoving) {
+        onMoveEnd({ target: e.target });
+      }
+      this.isMouseDown = false;
+      this.isMoving = false;
+    });
+
+    this.app.on(PointerEvent.TAP, (e) => {
+      const { x, y } = e;
+
+      if (this.app === e.target) {
+        this.selector = null;
+        onTap({ target: e.target, x, y });
+      } else {
+        this.selector.target = e.target;
+        onTap({ target: e.target, x, y });
+      }
+    });
+  }
+}

package/canvas-example-main/canvas-example-main/src/pages/shape-editor/index.raw.tsx

@@ -0,0 +1,159 @@
+// import { useEffect, useRef } from 'react';
+
+// const canvasWidth = 800;
+// const canvasHeight = 800;
+
+// export default function ShapeEditor() {
+//   const canvasRef = useRef<HTMLCanvasElement>();
+
+//   useEffect(() => {
+//     const canvas = canvasRef.current;
+//     const ctx = canvasRef.current.getContext('2d');
+
+//     const points = [
+//       [300, 300],
+//       [240, 400],
+//       [300, 500],
+//       [400, 500],
+//       [460, 400],
+//       [400, 400],
+//     ];
+
+//     const radius = 8;
+
+//     const drawArc = (x, y) => {
+//       ctx.beginPath();
+//       ctx.arc(x, y, radius, 0, Math.PI * 2);
+//       ctx.strokeStyle = 'lime';
+//       ctx.lineWidth = 2;
+//       ctx.stroke();
+//     };
+
+//     const drawPol = () => {
+//       ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+//       ctx.beginPath();
+
+//       ctx.moveTo(points[0][0], points[0][1]);
+
+//       const P1 = points[0];
+//       const P2 = points[1];
+//       const P3 = points[2];
+
+//       const AC = { x: P3[0] - P1[0], y: P3[1] - P1[1] };
+
+//       const ACLen = Math.sqrt(AC.x ** 2 + AC.y ** 2);
+
+//       const u = { x: AC.x / ACLen, y: AC.y / ACLen };
+
+//       const P21 = { x: P2[0] - 100 * u.x, y: P2[1] - 100 * u.y };
+//       const P22 = { x: P2[0] + 50 * u.x, y: P2[1] + 50 * u.y };
+
+//       drawArc(P21.x, P21.y);
+//       drawArc(P22.x, P22.y);
+
+//       ctx.moveTo(P1[0], P1[1]);
+//       ctx.quadraticCurveTo(P21.x, P21.y, P2[0], P2[1]);
+//       ctx.quadraticCurveTo(P22.x, P22.y, P3[0], P3[1]);
+
+//       points.slice(3).forEach((point) => {
+//         ctx.lineTo(point[0], point[1]);
+//       });
+//       ctx.strokeStyle = 'red';
+//       ctx.lineWidth = 1;
+//       ctx.closePath();
+//       ctx.stroke();
+
+//       points.forEach((point) => {
+//         drawArc(point[0], point[1]);
+//       });
+//     };
+
+//     let isEnter = false;
+//     let isDown = false;
+
+//     let moveX = null,
+//       moveY = null;
+
+//     let movePoint = null;
+
+//     const handleMousemove = (e) => {
+//       const rect = canvas.getBoundingClientRect();
+//       const x = e.clientX - rect.left;
+//       const y = e.clientY - rect.top;
+
+//       if (isDown) {
+//         canvas.style.cursor = 'pointer';
+//         if (!movePoint || moveX === null || moveY === null) return;
+//         movePoint[0] = movePoint[0] - moveX + x;
+//         movePoint[1] = movePoint[1] - moveY + y;
+//         moveX = movePoint[0];
+//         moveY = movePoint[1];
+//         drawPol();
+//       } else if (isEnter) {
+//         canvas.style.cursor = 'pointer';
+//       } else {
+//         for (const point of points) {
+//           const dx = x - point[0];
+//           const dy = y - point[1];
+//           const _isEnter = Math.sqrt(dx * dx + dy * dy) <= radius;
+
+//           if (_isEnter) {
+//             isEnter = _isEnter;
+//             canvas.style.cursor = 'pointer';
+//             return;
+//           }
+//         }
+//       }
+//       canvas.style.cursor = 'default';
+//     };
+
+//     const handleMouseDown = (e) => {
+//       if (!isEnter) return;
+//       isDown = true;
+//       const rect = canvas.getBoundingClientRect();
+//       const x = e.clientX - rect.left;
+//       const y = e.clientY - rect.top;
+
+//       for (const point of points) {
+//         const dx = x - point[0];
+//         const dy = y - point[1];
+//         const _isEnter = Math.sqrt(dx * dx + dy * dy) <= radius;
+
+//         if (_isEnter) {
+//           moveX = x;
+//           moveY = y;
+//           movePoint = point;
+//           break;
+//         }
+//       }
+//     };
+//     const handleMouseUp = (e) => {
+//       isDown = false;
+//       moveX = null;
+//       moveY = null;
+//       movePoint = null;
+//     };
+
+//     canvas.addEventListener('mousemove', handleMousemove);
+//     canvas.addEventListener('mousedown', handleMouseDown);
+//     canvas.addEventListener('mouseup', handleMouseUp);
+
+//     drawPol();
+
+//     return () => {
+//       canvas.removeEventListener('mousemove', handleMousemove);
+//       canvas.removeEventListener('mousedown', handleMouseDown);
+//       canvas.removeEventListener('mouseup', handleMouseUp);
+//     };
+//   }, []);
+
+//   return (
+//     <div className="w-[100vw] h-[100vh] flex items-center justify-center background-[#aaa] flex-col">
+//       <canvas
+//         width={canvasWidth}
+//         height={canvasHeight}
+//         ref={canvasRef}
+//       ></canvas>
+//     </div>
+//   );
+// }

package/canvas-example-main/canvas-example-main/src/pages/shape-editor/index.tsx

@@ -0,0 +1,36 @@
+import { useEffect } from 'react';
+import { useWindowSize } from 'react-use';
+import ShapeEditor from './shape';
+
+export default function Component() {
+  const { width, height } = useWindowSize();
+  const centerX = width / 2,
+    centerY = height / 2;
+
+  const initPoints = [
+    { x: centerX - 40, y: centerY - 80 },
+    { x: centerX + 80, y: centerY },
+    { x: centerX + 80, y: centerY + 80 },
+    { x: centerX - 40, y: centerY + 160 },
+    { x: centerX + 200 - 160, y: centerY + 200 + 160 },
+    { x: centerX + 200 - 200, y: centerY + 200 + 80 },
+    { x: centerX + 200 - 200, y: centerY + 200 },
+    { x: 500, y: 500 },
+  ];
+
+  useEffect(() => {
+    const shapeEditor = new ShapeEditor({
+      points: initPoints.reduce((acc, point) => {
+        acc.push(point.x, point.y);
+        return acc;
+      }, []),
+    });
+    return () => {
+      shapeEditor.destroy();
+    };
+  }, []);
+
+  return (
+    <div className="w-[100vw] h-[100vh] flex items-center justify-center background-[#aaa] flex-col"></div>
+  );
+}

package/canvas-example-main/canvas-example-main/src/pages/shape-editor/shape.ts

@@ -0,0 +1,248 @@
+import { App, Ellipse, Group, IGroupInputData, Pen, UI } from 'leafer-ui';
+import Editor from './editor';
+import Control, { IControl } from './control';
+
+const circleRadius = 14;
+
+interface IPoint {
+  x: number;
+  y: number;
+  controls: IControl[];
+}
+
+export interface IConfig extends IGroupInputData {
+  points: IPoint[];
+  onMoveEnd?: (e) => void;
+}
+
+export default class ShapeEditor {
+  app: App;
+  editor: Editor;
+
+  selector: Ellipse;
+  private points: Ellipse[] = [];
+
+  private controls: [IControl, IControl][] = [
+    [
+      { offsetX: -50, offsetY: 0 },
+      { offsetX: 50, offsetY: 0 },
+    ],
+    [
+      {
+        offsetX: -50,
+        offsetY: -50,
+      },
+      {
+        offsetX: 50,
+        offsetY: 50,
+      },
+    ],
+  ];
+
+  private pointsIdxMap: Map<number, number> = new Map();
+
+  config: IConfig = { points: [] };
+  private pen: Pen = new Pen({ fill: 'black' });
+
+  private selectBox: Ellipse = null;
+
+  private control: Control;
+
+  private container: Group;
+
+  constructor(config: IConfig) {
+    const { points, x, y } = config;
+    this.config = config;
+    this.app = new App({ view: window, tree: {} });
+
+    this.container = new Group({ x, y });
+
+    this.app.tree.add(this.container);
+    this.container.add(this.pen);
+
+    const { onMoveEnd = () => {} } = this.config;
+
+    this.editor = new Editor(this.app, {
+      onMove: (e) => {
+        const idx = this.pointsIdxMap.get(e.target.innerId);
+        if (idx !== undefined) {
+          this.selector = e.target;
+          this.drawSelectBox();
+          this.drawPolygon();
+        }
+      },
+      onTap: (e) => {
+        if (this.pointsIdxMap.get(e.target.innerId) !== undefined) {
+          this.selector = e.target;
+          this.drawSelectBox();
+          return;
+        }
+
+        if (e.target === this.pen.pathElement) {
+          const { x, y } = e;
+
+          this.addPoint(x - circleRadius / 2, y - circleRadius / 2);
+        }
+
+        this.selector = null;
+        this.clearSelectBox();
+      },
+      onMoveEnd(e) {
+        onMoveEnd(e);
+      },
+    });
+
+    this.drawPoints(points);
+
+    this.control = new Control(this.app, {
+      points: this.points,
+      controls: this.controls,
+      onMove: () => {
+        this.drawPolygon();
+      },
+      onMoveEnd: (e) => {
+        console.log(e);
+      },
+    });
+
+    this.drawPolygon();
+  }
+
+  private addPoint(x, y) {
+    const arc = new Ellipse({
+      x,
+      y,
+      width: circleRadius,
+      height: circleRadius,
+      fill: 'rgb(50,205,121)',
+      cursor: 'move',
+    });
+
+    this.points.push(arc);
+
+    this.pointsIdxMap.set(arc.innerId, this.points.length - 1);
+
+    this.control?.update({ points: this.points });
+
+    this.addEls(arc);
+  }
+
+  private addEls(nodes: UI | UI[]) {
+    if (!Array.isArray(nodes)) {
+      nodes = [nodes];
+    }
+
+    this.container.addMany(...nodes);
+  }
+
+  private removeEls(nodes: UI | UI[]) {
+    if (!Array.isArray(nodes)) {
+      nodes = [nodes];
+    }
+
+    nodes.forEach((node) => {
+      this.container.remove(node);
+    });
+  }
+
+  private drawPoints(points) {
+    this.removeEls(this.points);
+
+    for (let i = 1; i < points.length; i += 2) {
+      const x = points[i - 1],
+        y = points[i];
+      this.addPoint(x, y);
+    }
+
+    this.drawPolygon();
+  }
+
+  private drawPolygon() {
+    this.pen.clear();
+
+    const points = this.points.map(({ x, y }) => {
+      return { x: x + circleRadius / 2, y: y + circleRadius / 2 };
+    });
+
+    this.pen.setStyle({ stroke: 'lime', fill: '#FF4B4B' });
+
+    this.pen.moveTo(points[0].x, points[0].y);
+    points.forEach((point, index) => {
+      const controls = this.controls[index];
+
+      let nextIdx = index + 1;
+      if (nextIdx >= points.length) nextIdx = 0;
+
+      const leftPoint = point,
+        rightPoint = points[nextIdx];
+
+      let controlLeft = null,
+        controlRight = null;
+
+      if (controls) {
+        controlLeft = controls[1];
+      }
+      const nextControls = this.controls[nextIdx];
+
+      if (nextControls) {
+        controlRight = nextControls[0];
+      }
+
+      if (!controlLeft && !controlRight) {
+        rightPoint.x > 500
+          ? this.pen.moveTo(rightPoint.x, rightPoint.y)
+          : this.pen.lineTo(rightPoint.x, rightPoint.y);
+      } else if (controlLeft && !controlRight) {
+        this.pen.quadraticCurveTo(
+          controlLeft.offsetX + leftPoint.x,
+          controlLeft.offsetY + leftPoint.y,
+          rightPoint.x,
+          rightPoint.y
+        );
+      } else if (!controlLeft && controlRight) {
+        this.pen.quadraticCurveTo(
+          controlRight.offsetX + rightPoint.x,
+          controlRight.offsetY + rightPoint.y,
+          rightPoint.x,
+          rightPoint.y
+        );
+      } else {
+        this.pen.bezierCurveTo(
+          controlLeft.offsetX + leftPoint.x,
+          controlLeft.offsetY + leftPoint.y,
+          controlRight.offsetX + rightPoint.x,
+          controlRight.offsetY + rightPoint.y,
+          rightPoint.x,
+          rightPoint.y
+        );
+      }
+    });
+  }
+
+  private drawSelectBox() {
+    if (!this.selector) return;
+
+    if (this.selectBox) this.removeEls(this.selectBox);
+
+    const { x, y, width, height } = this.selector;
+
+    this.selectBox = new Ellipse({
+      x: x - 2,
+      y: y - 2,
+      width: width + 4,
+      height: height + 4,
+      stroke: '#FF4B4B',
+      strokeWidth: 1,
+    });
+
+    this.addEls(this.selectBox);
+  }
+
+  private clearSelectBox() {
+    if (this.selectBox) this.removeEls(this.selectBox);
+  }
+
+  destroy() {
+    this.app.destroy();
+  }
+}