@meta2d/core 1.0.55 → 1.0.56

package/src/diagrams/svg/parse.ts

@@ -0,0 +1,319 @@
+import { Rect } from '../../rect';
+
+export interface SvgCommand {
+  key: string;
+  values: number[];
+  relative?: boolean;
+  worldPoints?: number[];
+}
+
+export interface SvgPath {
+  commands: SvgCommand[];
+}
+
+// This logic is shamelessly borrowed from Yqnn/svg-path-editor
+// https://github.com/Yqnn/svg-path-editor
+const commandRegex = /^[\t\n\f\r ]*([MLHVZCSQTAmlhvzcsqta])[\t\n\f\r ]*/;
+const flagRegex = /^[01]/;
+const numberRegex =
+  /^[+-]?(([0-9]*\.[0-9]+)|([0-9]+\.)|([0-9]+))([eE][+-]?[0-9]+)?/;
+const commaWsp = /^(([\t\n\f\r ]+,?[\t\n\f\r ]*)|(,[\t\n\f\r ]*))/;
+
+const grammar: { [key: string]: RegExp[] } = {
+  M: [numberRegex, numberRegex],
+  L: [numberRegex, numberRegex],
+  H: [numberRegex],
+  V: [numberRegex],
+  Z: [],
+  C: [
+    numberRegex,
+    numberRegex,
+    numberRegex,
+    numberRegex,
+    numberRegex,
+    numberRegex,
+  ],
+  S: [numberRegex, numberRegex, numberRegex, numberRegex],
+  Q: [numberRegex, numberRegex, numberRegex, numberRegex],
+  T: [numberRegex, numberRegex],
+  A: [
+    numberRegex,
+    numberRegex,
+    numberRegex,
+    flagRegex,
+    flagRegex,
+    numberRegex,
+    numberRegex,
+  ],
+};
+
+export function parseSvgPath(path: string): SvgPath {
+  let cursor = 0;
+  const commands: SvgCommand[] = [];
+  while (cursor < path.length) {
+    const match = path.slice(cursor).match(commandRegex);
+    if (match !== null) {
+      const command = match[1];
+      cursor += match[0].length;
+      const parser = parseCommands(command, path, cursor);
+      cursor = parser.cursor;
+      commands.push(...parser.commands);
+    } else {
+      throw new Error('malformed path (first error at ' + cursor + ')');
+    }
+  }
+  return { commands };
+}
+
+export function getRect(path: SvgPath): Rect {
+  let x = Infinity;
+  let y = Infinity;
+  let ex = -Infinity;
+  let ey = -Infinity;
+
+  calcWorldPositions(path);
+
+  path.commands.forEach((item) => {
+    item.worldPoints.forEach((num: number, index: number) => {
+      if (index % 2 === 0) {
+        if (num < x) {
+          x = num;
+        }
+        if (num > ex) {
+          ex = num;
+        }
+      } else {
+        if (num < y) {
+          y = num;
+        }
+        if (num > ey) {
+          ey = num;
+        }
+      }
+    });
+  });
+
+  --x;
+  --y;
+  return {
+    x,
+    y,
+    ex,
+    ey,
+    width: ex - x + 1,
+    height: ey - y + 1,
+  };
+}
+
+export function translatePath(path: SvgPath, x: number, y?: number) {
+  if (y == null) {
+    y = x;
+  }
+
+  path.commands.forEach((item, index) => {
+    if (item.relative && index) {
+      return;
+    }
+
+    switch (item.key) {
+      case 'A':
+      case 'a':
+        item.values[5] += x;
+        item.values[6] += y;
+        break;
+      case 'V':
+      case 'v':
+        item.values[0] += y;
+        break;
+      default:
+        item.values.forEach((val, i) => {
+          item.values[i] = val + (i % 2 === 0 ? x : y);
+        });
+        break;
+    }
+  });
+}
+
+export function scalePath(path: SvgPath, x: number, y?: number) {
+  if (y == null) {
+    y = x;
+  }
+
+  path.commands.forEach((item) => {
+    switch (item.key) {
+      case 'A':
+      case 'a':
+        const a = item.values[0];
+        const b = item.values[1];
+        const angle = (Math.PI * item.values[2]) / 180;
+        const cos = Math.cos(angle);
+        const sin = Math.sin(angle);
+        const A = b * b * y * y * cos * cos + a * a * y * y * sin * sin;
+        const B = 2 * x * y * cos * sin * (b * b - a * a);
+        const C = a * a * x * x * cos * cos + b * b * x * x * sin * sin;
+        const F = -(a * a * b * b * x * x * y * y);
+        const det = B * B - 4 * A * C;
+        const val1 = Math.sqrt((A - C) * (A - C) + B * B);
+
+        // New rotation:
+        item.values[2] =
+          B !== 0
+            ? (Math.atan((C - A - val1) / B) * 180) / Math.PI
+            : A < C
+            ? 0
+            : 90;
+
+        // New radius-x, radius-y
+        item.values[0] = -Math.sqrt(2 * det * F * (A + C + val1)) / det;
+        item.values[1] = -Math.sqrt(2 * det * F * (A + C - val1)) / det;
+
+        // New target
+        item.values[5] *= x;
+        item.values[6] *= y;
+
+        // New sweep flag
+        item.values[4] = x * y >= 0 ? item.values[4] : 1 - item.values[4];
+        break;
+      case 'V':
+      case 'v':
+        item.values[0] *= y;
+        break;
+      default:
+        item.values.forEach((val, index) => {
+          item.values[index] = val * (index % 2 === 0 ? x : y);
+        });
+        break;
+    }
+  });
+}
+
+export function pathToString(path: SvgPath): string {
+  let text = '';
+
+  path.commands.forEach((item) => {
+    text += item.key + ' ';
+    item.values.forEach((num) => {
+      text += num + ' ';
+    });
+  });
+  return text;
+}
+
+function parseCommands(
+  type: string,
+  path: string,
+  cursor: number
+): { cursor: number; commands: SvgCommand[] } {
+  const expectedRegexList = grammar[type.toUpperCase()];
+
+  const commands: SvgCommand[] = [];
+  while (cursor <= path.length) {
+    const command: SvgCommand = { key: type, values: [] };
+    for (const regex of expectedRegexList) {
+      const match = path.slice(cursor).match(regex);
+
+      if (match !== null) {
+        command.values.push(+match[0]);
+        cursor += match[0].length;
+        const ws = path.slice(cursor).match(commaWsp);
+        if (ws !== null) {
+          cursor += ws[0].length;
+        }
+      } else if (command.values.length === 0) {
+        return { cursor, commands };
+      } else {
+        throw new Error('malformed path (first error at ' + cursor + ')');
+      }
+    }
+    command.relative = command.key.toUpperCase() !== command.key;
+    commands.push(command);
+    if (expectedRegexList.length === 0) {
+      return { cursor, commands };
+    }
+    if (type === 'm') {
+      type = 'l';
+    }
+    if (type === 'M') {
+      type = 'L';
+    }
+  }
+  throw new Error('malformed path (first error at ' + cursor + ')');
+}
+
+function calcWorldPoints(command: SvgCommand, previous: SvgCommand) {
+  const worldPoints: number[] = [];
+  let current =
+    command.relative && previous
+      ? {
+          x: previous.worldPoints[previous.worldPoints.length - 2],
+          y: previous.worldPoints[previous.worldPoints.length - 1],
+        }
+      : { x: 0, y: 0 };
+  for (let i = 0; i < command.values.length - 1; i += 2) {
+    worldPoints.push(current.x + command.values[i]);
+    worldPoints.push(current.y + command.values[i + 1]);
+  }
+
+  command.worldPoints = worldPoints;
+}
+
+function calcWorldPositions(path: SvgPath) {
+  let previous: SvgCommand;
+  let x = 0;
+  let y = 0;
+  path.commands.forEach((item) => {
+    switch (item.key) {
+      case 'Z':
+      case 'z':
+        item.worldPoints = [x, y];
+        break;
+      case 'H':
+        item.worldPoints = [
+          item.values[0],
+          previous.worldPoints[previous.worldPoints.length - 1],
+        ];
+        break;
+      case 'h':
+        item.worldPoints = [
+          item.values[0] +
+            previous.worldPoints[previous.worldPoints.length - 2],
+          previous.worldPoints[previous.worldPoints.length - 1],
+        ];
+        break;
+      case 'V':
+        item.worldPoints = [
+          previous.worldPoints[previous.worldPoints.length - 2],
+          item.values[0],
+        ];
+        break;
+      case 'v':
+        item.worldPoints = [
+          previous.worldPoints[previous.worldPoints.length - 2],
+          item.values[0] +
+            previous.worldPoints[previous.worldPoints.length - 1],
+        ];
+        break;
+      case 'A':
+        item.worldPoints = [
+          previous.worldPoints[previous.worldPoints.length - 2],
+          item.values[0] +
+            previous.worldPoints[previous.worldPoints.length - 1],
+        ];
+        break;
+      default:
+        calcWorldPoints(item, previous);
+        break;
+    }
+
+    if (
+      item.key === 'M' ||
+      item.key === 'm' ||
+      item.key === 'Z' ||
+      item.key === 'z'
+    ) {
+      x = item.worldPoints[item.worldPoints.length - 2];
+      y = item.worldPoints[item.worldPoints.length - 1];
+    }
+    previous = item;
+  });
+}

package/src/diagrams/svgPath.ts

@@ -0,0 +1,53 @@
+import { Meta2dStore } from './../store/store';
+import { Pen } from '../pen';
+import { calcCenter } from '../rect';
+import {
+  getRect,
+  parseSvgPath,
+  pathToString,
+  scalePath,
+  translatePath,
+} from './svg/parse';
+
+export function svgPath(pen: Pen, ctx?: CanvasRenderingContext2D): Path2D {
+  const store: Meta2dStore = pen.calculative.canvas.store;
+  const pathText = store.data.paths[pen.pathId];
+  if (!pathText) {
+    return new Path2D();
+  }
+
+  const path = parseSvgPath(pathText);
+  pen.calculative.svgRect = getRect(path);
+  calcCenter(pen.calculative.svgRect);
+
+  if (
+    pen.calculative.svgRect.width !== pen.calculative.worldRect.width ||
+    pen.calculative.svgRect.height !== pen.calculative.worldRect.height
+  ) {
+    scalePath(
+      path,
+      pen.calculative.worldRect.width / pen.calculative.svgRect.width,
+      pen.calculative.worldRect.height / pen.calculative.svgRect.height
+    );
+  }
+
+  const rect = getRect(path);
+  calcCenter(rect);
+  translatePath(
+    path,
+    pen.calculative.worldRect.x - rect.x,
+    pen.calculative.worldRect.y - rect.y
+  );
+
+  const pathStr = pathToString(path);
+  if (ctx) {
+    (ctx as any).svgPath?.(pathStr);
+    return;
+  }
+
+  const path2D = new Path2D(pathStr);
+  // TODO: 为何要闭合曲线
+  // path2D.closePath();
+
+  return path2D;
+}

package/src/diagrams/triangle.ts

@@ -0,0 +1,43 @@
+import { Pen } from '../pen';
+import { Point } from '../point';
+
+export function triangle(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);
+  path.lineTo(x, y + height);
+  path.lineTo(x + width / 2, y);
+
+  path.closePath();
+  if (path instanceof Path2D) return path;
+}
+
+export function triangleAnchors(pen: Pen) {
+  const points = [
+    {
+      x: 0.5,
+      y: 0,
+    },
+    {
+      x: 0.75,
+      y: 0.5,
+    },
+    {
+      x: 0.5,
+      y: 1,
+    },
+    {
+      x: 0.25,
+      y: 0.5,
+    },
+  ] as const;
+  pen.anchors = points.map(({ x, y }, index) => {
+    return {
+      id: `${index}`,
+      penId: pen.id,
+      x,
+      y,
+    };
+  });
+}

package/src/diagrams/video.ts

@@ -0,0 +1,202 @@
+import { Pen, setElemPosition } from '../pen';
+
+export const videos: {
+  [id: string]: HTMLDivElement;
+} = {};
+
+const mutedIcons =['<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M473.088 125.44L256 256H52.224C23.552 256 0 279.552 0 308.224V716.8c0 28.16 23.04 51.2 51.2 51.2h204.8l217.088 130.56c16.896 10.24 38.912-2.048 38.912-22.016V147.456c0-19.968-21.504-32.256-38.912-22.016zM699.904 320.512c-20.992-18.944-53.248-17.408-72.192 3.584-18.944 20.992-17.408 53.248 3.584 72.192 0.512 0.512 58.368 54.784 58.368 121.344 0 37.888-19.456 74.752-58.368 110.08-20.992 18.944-22.528 51.2-3.584 72.192 10.24 11.264 24.064 16.896 37.888 16.896 12.288 0 24.576-4.608 34.304-13.312 61.44-55.296 92.16-117.76 92.16-185.856 0-112.64-88.576-193.536-92.16-197.12z" fill="" p-id="2434"></path><path d="M853.504 166.4c-20.992-18.944-53.248-16.896-72.192 4.096-18.944 20.992-16.896 53.248 4.096 72.192 1.536 1.024 135.68 122.88 135.68 280.576 0 90.624-45.568 177.152-135.68 257.536-20.992 18.944-23.04 51.2-4.096 72.192 10.24 11.264 24.064 16.896 38.4 16.896 12.288 0 24.576-4.096 34.304-12.8 112.64-100.864 169.984-212.992 169.984-333.824-1.024-202.752-163.84-350.208-170.496-356.864z"></path></svg>','<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" ><path d="M256 768H51.2c-28.16 0-51.2-23.04-51.2-51.2V308.224C0 279.552 23.552 256 52.224 256H256v512zM512 147.456v728.576c0 19.968-21.504 32.256-38.912 22.016L256 768V256l217.088-130.56c17.408-10.24 38.912 2.048 38.912 22.016zM623.104 656.896c-19.968-19.968-19.968-52.224 0-72.192l217.088-217.088c19.968-19.968 52.224-19.968 72.192 0 19.968 19.968 19.968 52.224 0 72.192l-217.088 217.088c-19.456 19.968-52.224 19.968-72.192 0z" fill="" p-id="2582"></path><path d="M623.104 367.104c19.968-19.968 52.224-19.968 72.192 0l217.088 217.088c19.968 19.968 19.968 52.224 0 72.192-19.968 19.968-52.224 19.968-72.192 0l-217.088-217.088c-19.968-19.456-19.968-52.224 0-72.192z"></path></svg>'];
+
+export function video(pen: Pen) {
+  if (!pen.onDestroy) {
+    pen.onDestroy = destory;
+    pen.onMove = move;
+    pen.onResize = move;
+    pen.onRotate = move;
+    pen.onClick = click;
+    pen.onValue = value;
+    pen.onChangeId = changeId;
+  }
+
+  if (!videos[pen.id]) {
+    const player = document.createElement('div');
+
+    const progress = document.createElement('div');
+    progress.style.position = 'absolute';
+    progress.style.outline = 'none';
+    progress.style.left = '0';
+    progress.style.bottom = '0';
+    progress.style.width = '0';
+    progress.style.height = '2px';
+    progress.style.background = '#52c41a';
+    progress.style.zIndex = '1';
+    if((pen as any).hideProgress){
+      progress.style.display = 'none';
+    }
+    const muted = document.createElement('div');
+    muted.innerHTML = mutedIcons[1];
+    muted.style.position = 'absolute';
+    muted.style.right = '0';
+    muted.style.bottom = '0';
+    muted.style.width = '20px';
+    muted.style.height = '20px';
+    muted.style.fill = 'hsla(0, 0%, 100%, .8)';
+    muted.style.zIndex = '1';
+    muted.style.display = 'none';
+    player.appendChild(progress);
+    player.appendChild(muted);
+
+    muted.onclick = (e)=>{
+      e.stopPropagation();
+      if(pen.calculative.media.muted){
+        muted.innerHTML = mutedIcons[0];
+        pen.calculative.media.muted = false;
+      }else{
+        muted.innerHTML = mutedIcons[1];
+        pen.calculative.media.muted = true;
+      }
+    }
+    if(!pen.calculative.singleton){
+      pen.calculative.singleton = {};
+    }
+    pen.calculative.singleton.muted = muted;
+    player.onmouseenter = (e)=>{
+      muted.style.display = 'block';
+    }
+    player.onmouseleave = (e)=>{
+      muted.style.display = 'none';
+    }
+    player.onclick = (e)=>{
+      e.stopPropagation();
+      click(pen);
+    }
+    let media: HTMLMediaElement;
+    if (pen.video) {
+      media = document.createElement('video');
+      media.src = pen.video;
+    } else if (pen.audio) {
+      media = document.createElement('audio');
+      media.src = pen.audio;
+    }
+    media.loop = pen.playLoop;
+    media.ontimeupdate = () => {
+      resizeProcessWidth(progress, media, pen.calculative.worldRect.width);
+    };
+    media.onended = () => {
+      pen.calculative.onended && pen.calculative.onended(pen);
+    };
+    pen.calculative.media = media;
+    media.style.position = 'absolute';
+    media.style.outline = 'none';
+    media.style.left = '0';
+    media.style.top = '0';
+    media.style.width = '100%';
+    media.style.height = '100%';
+    player.appendChild(media);
+    videos[pen.id] = player;
+    pen.calculative.canvas.externalElements?.parentElement.appendChild(player);
+    setElemPosition(pen, player);
+    if (pen.autoPlay) {
+      media.autoplay = true;
+      media.muted = true;
+    }
+  } else if (
+    pen.video &&
+    pen.calculative.media &&
+    pen.video !== pen.calculative.video
+  ) {
+    console.warn('video 更改, 此处是否执行？');
+    pen.calculative.media.src = pen.video;
+    if (pen.autoPlay) {
+      pen.calculative.media.muted = true;
+      pen.calculative.media.autoplay = true;
+    }
+    pen.calculative.media.loop = pen.playLoop;
+    pen.calculative.video = pen.video;
+  } else if (
+    pen.audio &&
+    pen.calculative.media &&
+    pen.audio !== pen.calculative.audio
+  ) {
+    pen.calculative.media.src = pen.audio;
+    if (pen.autoPlay) {
+      pen.calculative.media.muted = true;
+      pen.calculative.media.autoplay = true;
+    }
+    pen.calculative.media.loop = pen.playLoop;
+    pen.calculative.audio = pen.audio;
+  }
+  if (pen.calculative.patchFlags) {
+    setElemPosition(pen, videos[pen.id]);
+  }
+  return new Path2D();
+}
+
+function destory(pen: Pen) {
+  videos[pen.id].onclick = null;
+  videos[pen.id].remove();
+  videos[pen.id] = undefined;
+}
+
+function move(pen: Pen) {
+  setElemPosition(pen, videos[pen.id]);
+  const progress = videos[pen.id].children[0];
+  const media = videos[pen.id].children[1];
+  resizeProcessWidth(
+    progress as HTMLDivElement,
+    media as HTMLMediaElement,
+    pen.calculative.worldRect.width
+  );
+}
+
+function click(pen: Pen) {
+  if (pen.calculative.media) {
+    pen.calculative.media.muted = false;
+    pen.calculative.singleton.muted.innerHTML = mutedIcons[0];
+    if (pen.calculative.media.paused) {
+      pen.calculative.media.play();
+    } else {
+      pen.calculative.media.pause();
+    }
+  }
+}
+function resizeProcessWidth(
+  progress: HTMLDivElement,
+  media: HTMLMediaElement,
+  width: number
+) {
+  // worldRect 会重新赋值，而 pen 不会变，这里才能取到实时的 worldRect
+  progress.style.width = (media.currentTime / media.duration) * width + 'px';
+}
+
+function changeId(pen: Pen, oldId: string, newId: string) {
+  if (!videos[oldId]) {
+    return;
+  }
+  videos[newId] = videos[oldId];
+  delete videos[oldId];
+}
+
+function value(pen: Pen) {
+  const video = videos[pen.id];
+  if (!video) {
+    return;
+  }
+  setElemPosition(pen, video);
+  const currentSrc = pen.calculative.media.getAttribute('src');
+  if (pen.video) {
+    if (currentSrc !== pen.video) {
+      pen.calculative.media.src = pen.video;
+    }
+  } else if (pen.audio) {
+    if (currentSrc !== pen.audio) {
+      pen.calculative.media.src = pen.audio;
+    }
+  }
+  // TODO: 下面每次都改动，是否影响性能？
+  if (pen.autoPlay) {
+    pen.calculative.media.muted = true;
+    // TODO: 自动播放何时关？
+    pen.calculative.media.autoplay = true;
+  }
+  pen.calculative.media.loop = pen.playLoop;
+}