@meta2d/core 1.0.54 → 1.0.56

package/src/data.ts

@@ -0,0 +1,86 @@
+export enum HoverType {
+  None,
+  LineAnchor,
+  NodeAnchor,
+  Line,
+  Node,
+  Resize,
+  Rotate,
+  LineAnchorPrev,
+  LineAnchorNext,
+}
+
+export enum HotkeyType {
+  None,
+  Translate,
+  Select, // TODO: 未实现
+  Resize,
+  AddAnchor,
+}
+
+export enum MouseRight {
+  None,
+  Down,
+  Translate,
+}
+
+export enum Direction {
+  None = -1,
+  Up,
+  Right,
+  Bottom,
+  Left,
+}
+
+export const defaultCursors = [
+  'nw-resize',
+  'ne-resize',
+  'se-resize',
+  'sw-resize',
+] as const;
+export const rotatedCursors = [
+  'n-resize',
+  'e-resize',
+  's-resize',
+  'w-resize',
+] as const;
+
+export const defaultDrawLineFns = ['curve', 'polyline', 'line'];
+
+export const inheritanceProps = [
+  'dash',
+  'lineWidth',
+  'lineCap',
+  'lineJoin',
+  'strokeType',
+  'color',
+  'lineGradientFromColor',
+  'lineGradientToColor',
+  'lineGradientAngle',
+  'globalAlpha',
+  'bkType',
+  'background',
+  'gradientFromColor',
+  'gradientToColor',
+  'gradientAngle',
+  'gradientRadius',
+  'fontFamily',
+  'fontSize',
+  'textColor',
+  'hoverTextColor',
+  'activeTextColor',
+  'textBackground',
+  'fontStyle',
+  'fontWeight',
+  'textAlign',
+  'textBaseline',
+  'lineHeight',
+  'whiteSpace',
+  'textLeft',
+  'textTop',
+  'flipX',
+  'flipY',
+  'lineDash',
+  'visible',
+  'iconColor'
+];

package/src/diagrams/arrow.ts

@@ -0,0 +1,50 @@
+import { Pen } from '../pen';
+
+export function leftArrow(pen: Pen, ctx?: CanvasRenderingContext2D): Path2D {
+  const path = !ctx ? new Path2D() : ctx;
+  const { x, y, width, height } = pen.calculative.worldRect;
+
+  path.moveTo(x, y + height / 2);
+  path.lineTo(x + height / 2, y);
+  path.lineTo(x + height / 2, y + height / 3);
+  path.lineTo(x + width, y + height / 3);
+  path.lineTo(x + width, y + (height * 2) / 3);
+  path.lineTo(x + height / 2, y + (height * 2) / 3);
+  path.lineTo(x + height / 2, y + (height * 2) / 3);
+  path.lineTo(x + height / 2, y + height);
+  path.closePath();
+  if (path instanceof Path2D) return path;
+}
+
+export function rightArrow(pen: Pen, ctx?: CanvasRenderingContext2D): Path2D {
+  const path = !ctx ? new Path2D() : ctx;
+  const { x, y, width, height } = pen.calculative.worldRect;
+  path.moveTo(x, y + height / 3);
+  path.lineTo(x + (width - height / 2), y + height / 3);
+  path.lineTo(x + (width - height / 2), y);
+  path.lineTo(x + width, y + height / 2);
+  path.lineTo(x + (width - height / 2), y + height);
+  path.lineTo(x + (width - height / 2), y + (height * 2) / 3);
+  path.lineTo(x, y + (height * 2) / 3);
+
+  path.closePath();
+  if (path instanceof Path2D) return path;
+}
+
+export function twowayArrow(pen: Pen, ctx?: CanvasRenderingContext2D): Path2D {
+  const path = !ctx ? new Path2D() : ctx;
+  const { x, y, width, height } = pen.calculative.worldRect;
+
+  path.moveTo(x, y + height / 2);
+  path.lineTo(x + height / 2, y);
+  path.lineTo(x + height / 2, y + height / 3);
+  path.lineTo(x + (width - height / 2), y + height / 3);
+  path.lineTo(x + (width - height / 2), y);
+  path.lineTo(x + width, y + height / 2);
+  path.lineTo(x + (width - height / 2), y + height);
+  path.lineTo(x + (width - height / 2), y + (height * 2) / 3);
+  path.lineTo(x + height / 2, y + (height * 2) / 3);
+  path.lineTo(x + height / 2, y + height);
+  path.closePath();
+  if (path instanceof Path2D) return path;
+}

package/src/diagrams/circle.ts

@@ -0,0 +1,19 @@
+import { Pen } from '../pen';
+
+export function circle(pen: Pen, ctx?: CanvasRenderingContext2D): Path2D {
+  const path = !ctx ? new Path2D() : ctx;
+  const { x, y, width, height } = pen.calculative.worldRect;
+  path.ellipse(
+    x + width / 2,
+    y + height / 2,
+    width / 2,
+    height / 2,
+    0,
+    0,
+    Math.PI * 2
+  );
+
+  if (path instanceof Path2D) {
+    return path;
+  }
+}

package/src/diagrams/cloud.ts

@@ -0,0 +1,34 @@
+import { Pen } from '../pen';
+
+export function cloud(pen: Pen, ctx?: CanvasRenderingContext2D): Path2D {
+  const path = !ctx ? new Path2D() : ctx;
+  const { x, y, width, height } = pen.calculative.worldRect;
+
+  path.moveTo(x + width / 5, y + (height * 13) / 16);
+  path.bezierCurveTo(
+    x - width / 15,
+    y + (height * 13) / 16,
+    x - width / 15,
+    y + (height * 7) / 16,
+    x + width / 5,
+    y + (height * 7) / 16
+  );
+  path.bezierCurveTo(
+    x + width / 5,
+    y,
+    x + (width * 4) / 5,
+    y,
+    x + (width * 4) / 5,
+    y + (height * 7) / 16
+  );
+  path.bezierCurveTo(
+    x + (width * 16) / 15,
+    y + (height * 7) / 16,
+    x + (width * 16) / 15,
+    y + (height * 13) / 16,
+    x + (width * 4) / 5,
+    y + (height * 13) / 16
+  );
+  path.closePath();
+  if (path instanceof Path2D) return path;
+}

package/src/diagrams/cube.ts

@@ -0,0 +1,94 @@
+import { Pen } from '../pen';
+import { Point } from '../point';
+
+export function cube(ctx: CanvasRenderingContext2D, pen: Pen) {
+  const { x, y, width, ex, ey } = pen.calculative.worldRect;
+  let offset = width * 0.25;
+
+  const z: number = (pen as any).z;
+  if (z > 1) {
+    offset = z;
+  } else if (z > 0) {
+    offset = width * z;
+  }
+
+  const p1 = {
+    x: x,
+    y: y + offset,
+  };
+  const p2 = {
+    x: ex - offset,
+    y: y + offset,
+  };
+  const p3 = {
+    x: ex - offset,
+    y: ey,
+  };
+  const p4 = {
+    x: x,
+    y: ey,
+  };
+
+  // front
+  face(
+    ctx,
+    [p1, p2, p3, p4],
+    (pen as any).backgroundFront || pen.background,
+    pen.color
+  );
+
+  // up
+  face(
+    ctx,
+    [
+      p1,
+      {
+        x: x + offset,
+        y: y,
+      },
+      { x: ex, y: y },
+      p2,
+    ],
+    (pen as any).backgroundUp || pen.background,
+    pen.color
+  );
+
+  // right
+  face(
+    ctx,
+    [
+      p2,
+      { x: ex, y: y },
+      {
+        x: ex,
+        y: ey - offset,
+      },
+      p3,
+    ],
+    (pen as any).backgroundRight || pen.background,
+    pen.color
+  );
+}
+
+function face(
+  ctx: CanvasRenderingContext2D,
+  points: Point[],
+  fillStyle = '',
+  strokeStyle = ''
+) {
+  ctx.save();
+  fillStyle && (ctx.fillStyle = fillStyle);
+  strokeStyle && (ctx.strokeStyle = strokeStyle);
+  ctx.beginPath();
+  for (let i = 0; i < points.length; ++i) {
+    if (i) {
+      ctx.lineTo(points[i].x, points[i].y);
+    } else {
+      ctx.moveTo(points[i].x, points[i].y);
+    }
+  }
+  ctx.closePath();
+  fillStyle && ctx.fill();
+  ctx.stroke();
+  ctx.restore();
+}

package/src/diagrams/diamond.ts

@@ -0,0 +1,14 @@
+import { Pen } from '../pen';
+
+export function diamond(pen: Pen, ctx?: CanvasRenderingContext2D): Path2D {
+  const path = !ctx ? new Path2D() : ctx;
+  const { x, y, width, height } = pen.calculative.worldRect;
+  path.moveTo(x + width / 2, y);
+  path.lineTo(x + width, y + height / 2);
+  path.lineTo(x + width / 2, y + height);
+  path.lineTo(x, y + height / 2);
+  path.lineTo(x + width / 2, y);
+  path.closePath();
+
+  if (path instanceof Path2D) return path;
+}

package/src/diagrams/file.ts

@@ -0,0 +1,19 @@
+import { Pen } from '../pen';
+
+export function file(pen: Pen, ctx?: CanvasRenderingContext2D): Path2D {
+  const path = !ctx ? new Path2D() : ctx;
+  const { x, y, width, ex, ey } = pen.calculative.worldRect;
+  const offsetX = width / 6;
+  path.moveTo(x, y);
+  path.lineTo(ex - offsetX, y);
+  path.lineTo(ex, y + offsetX);
+  path.lineTo(ex, ey);
+  path.lineTo(x, ey);
+  path.closePath();
+  path.moveTo(ex - offsetX, y);
+  path.lineTo(ex - offsetX, y + offsetX);
+  path.lineTo(ex, y + offsetX);
+
+  path.closePath();
+  if (path instanceof Path2D) return path;
+}

package/src/diagrams/gif.ts

@@ -0,0 +1,105 @@
+import { Pen, setElemPosition } from '../pen';
+
+export const gifsList: {
+  [key: string]: HTMLImageElement;
+} = {};
+
+export function gif(pen: Pen): Path2D {
+  if (!pen.onDestroy) {
+    pen.onDestroy = destory;
+    pen.onMove = move;
+    pen.onResize = resize;
+    pen.onRotate = move;
+    pen.onValue = value;
+    pen.onChangeId = changeId;
+  }
+
+  const path = new Path2D();
+  if (!pen.image) {
+    return;
+  }
+
+  if (!gifsList[pen.id]) {
+    const img = new Image();
+    img.crossOrigin = 'anonymous';
+    img.src = pen.image;
+    if (
+      pen.calculative.canvas.parent.store.options.cdn &&
+      !(
+        pen.image.startsWith('http') ||
+        pen.image.startsWith('//') ||
+        pen.image.startsWith('data:image')
+      )
+    ) {
+      img.src = pen.calculative.canvas.parent.store.options.cdn + pen.image;
+    }
+    gifsList[pen.id] = img; // 提前赋值，避免重复创建
+    img.onload = () => {
+      if (gifsList[pen.id] !== img) {
+        return;
+      }
+      pen.calculative.img = img;
+      pen.calculative.imgNaturalWidth = img.naturalWidth || pen.iconWidth;
+      pen.calculative.imgNaturalHeight = img.naturalHeight || pen.iconHeight;
+      // pen.calculative.canvas.externalElements?.appendChild(img);
+      pen.calculative.canvas.externalElements?.parentElement.appendChild(img);
+      setImagePosition(pen, img);
+    };
+  }
+
+  if (pen.calculative.patchFlags && gifsList[pen.id]) {
+    setImagePosition(pen, gifsList[pen.id]);
+  }
+  return path;
+}
+
+function destory(pen: Pen) {
+  if (gifsList[pen.id]) {
+    gifsList[pen.id].remove();
+    gifsList[pen.id] = undefined;
+  }
+}
+
+function move(pen: Pen) {
+  if (!gifsList[pen.id]) {
+    return;
+  }
+  setImagePosition(pen, gifsList[pen.id]);
+}
+
+function resize(pen: Pen) {
+  if (!gifsList[pen.id]) {
+    return;
+  }
+  setImagePosition(pen, gifsList[pen.id]);
+}
+
+function value(pen: Pen) {
+  if (!gifsList[pen.id]) {
+    return;
+  }
+  setImagePosition(pen, gifsList[pen.id]);
+  if (gifsList[pen.id].getAttribute('src') !== pen.image) {
+    gifsList[pen.id].src = pen.image;
+  }
+}
+
+function changeId(pen: Pen, oldId: string, newId: string) {
+  if (!gifsList[oldId]) {
+    return;
+  }
+  gifsList[newId] = gifsList[oldId];
+  delete gifsList[oldId];
+}
+
+/**
+ * gif 保持比例，除了更改 position ，还需要是否可保持比例
+ * @param pen 画笔
+ * @param elem 图片 dom
+ */
+function setImagePosition(pen: Pen, elem: HTMLImageElement) {
+  // meta2d canvas 绘制图片 drawImage 保持比例，是短边填充
+  elem.style.objectFit = pen.imageRatio ? 'contain' : 'fill';
+  // elem.style.opacity = pen.globalAlpha + '';
+  setElemPosition(pen, elem);
+}

package/src/diagrams/{hexagon.js → hexagon.ts}

@@ -1,17 +1,21 @@
-export function hexagon(pen, ctx) {
-    var path = !ctx ? new Path2D() : ctx;
-    var _a = pen.calculative.worldRect, x = _a.x, y = _a.y, width = _a.width, height = _a.height;
-    path.moveTo(x + width / 4, y);
-    path.lineTo(x + (width * 3) / 4, y);
-    path.lineTo(x + width, y + height / 2);
-    path.lineTo(x + (width * 3) / 4, y + height);
-    path.lineTo(x + (width * 1) / 4, y + height);
-    path.lineTo(x, y + height / 2);
-    path.lineTo(x + width / 4, y);
-    path.closePath();
-    if (path instanceof Path2D)
-        return path;
+import { Pen } from '../pen';
+import { Point } from '../point';
+
+export function hexagon(pen: Pen, ctx?: CanvasRenderingContext2D): Path2D {
+  const path = !ctx ? new Path2D() : ctx;
+  const { x, y, width, height } = pen.calculative.worldRect;
+  path.moveTo(x + width / 4, y);
+  path.lineTo(x + (width * 3) / 4, y);
+  path.lineTo(x + width, y + height / 2);
+  path.lineTo(x + (width * 3) / 4, y + height);
+  path.lineTo(x + (width * 1) / 4, y + height);
+  path.lineTo(x, y + height / 2);
+  path.lineTo(x + width / 4, y);
+
+  path.closePath();
+  if (path instanceof Path2D) return path;
 }
+
 // export function hexagonAnchors(pen: Pen) {
 //   const anchors: Point[] = [];
 //   anchors.push({
@@ -20,12 +24,14 @@ export function hexagon(pen, ctx) {
 //     x: 0.25,
 //     y: 0,
 //   });
+
 //   anchors.push({
 //     id: '1',
 //     penId: pen.id,
 //     x: 0.75,
 //     y: 0,
 //   });
+
 //   anchors.push({
 //     id: '2',
 //     penId: pen.id,
@@ -52,4 +58,3 @@ export function hexagon(pen, ctx) {
 //   });
 //   pen.anchors = anchors;
 // }
-//# sourceMappingURL=hexagon.js.map