cbvirtua 1.0.57 → 1.0.59

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

@@ -1,174 +0,0 @@
-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

@@ -1,91 +0,0 @@
-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

@@ -1,159 +0,0 @@
-// 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

@@ -1,36 +0,0 @@
-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

@@ -1,248 +0,0 @@
-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();
-  }
-}