@meta2d/core 1.0.56 → 1.0.57

package/src/diagrams/svg/parse.ts

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

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

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

@@ -1,202 +0,0 @@
-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;
-}