@meta2d/core 1.0.56 → 1.0.57

package/src/title/title.ts

@@ -1,115 +0,0 @@
-import { Pen } from '../pen';
-import { Point } from '../point';
-
-export class Title {
-  box: HTMLElement;
-  private currentAnchor: Point; // 本次 tooltip 在哪个画笔上
-  constructor(public parentElement: HTMLElement) {
-    this.box = document.createElement('div');
-    this.box.className = 'meta2d-title';
-
-    parentElement.appendChild(this.box);
-
-    // this.box.onmouseleave = () => {
-    //   this.hide();
-    // };
-
-    let sheet: any;
-    for (let i = 0; i < document.styleSheets.length; i++) {
-      if (document.styleSheets[i].title === 'le5le.com/title') {
-        sheet = document.styleSheets[i];
-      }
-    }
-
-    if (!sheet) {
-      let style = document.createElement('style');
-      style.type = 'text/css';
-      style.title = 'le5le.com/title';
-      document.head.appendChild(style);
-
-      style = document.createElement('style');
-      style.type = 'text/css';
-      document.head.appendChild(style);
-      sheet = style.sheet;
-      sheet.insertRule(
-        '.meta2d-title{position:absolute;padding:0;z-index:10;left: -9999px;top: -9999px;background:#fff;color:#000; cursor: crosshair;border: 1px solid black;}'
-      );
-    }
-  }
-
-  /**
-   * @returns 此次应该展示的 title
-   */
-  private static getTitle(anchor: Point) {
-    // if (anchor.titleFnJs && !anchor.titleFn) {
-    //   try {
-    //     anchor.titleFn = new Function('anchor', anchor.titleFnJs) as (
-    //       anchor: Point
-    //     ) => string;
-    //   } catch (error) {
-    //     console.log('titleFnJs', error);
-    //   }
-    // }
-    // return anchor.titleFn ? anchor.titleFn(anchor) : String(anchor.title);
-  }
-
-  /**
-   * @returns 返回设置前的 rect
-   */
-  private setText(anchor: Point) {
-    // this.box.title = anchor.title;
-    this.box.innerText = anchor.title;
-  }
-
-  /**
-   * 更新文字
-   */
-  updateText(anchor: Point) {
-    if (this.currentAnchor?.id !== anchor.id) {
-      return;
-    }
-    if (Title.titleEmpty(anchor)) {
-      return;
-    }
-
-    this.setText(anchor);
-    this.changePositionByAnchor(anchor);
-  }
-
-  /**
-   * 改变文字会 影响 box 的大小，需要重新设置位置
-   * @param oldRect 原
-   * @param newRect 新
-   */
-  private changePositionByAnchor(anchor: Point) {
-    this.box.style.left = anchor.x + 10 + 'px';
-    this.box.style.top = anchor.y + 10 + 'px';
-  }
-
-  private static titleEmpty(anchor: Point) {
-    return !anchor.title; // && !anchor.titleFn && !anchor.titleFnJs;
-  }
-
-  show(anchor: Point, pen: Pen) {
-    if (Title.titleEmpty(anchor)) {
-      return;
-    }
-    this.currentAnchor = anchor;
-    this.setText(anchor);
-    let pos = {
-      x: pen.calculative.canvas.store.data.x + anchor.x,
-      y: pen.calculative.canvas.store.data.y + anchor.y,
-    };
-    this.changePositionByAnchor(pos);
-  }
-
-  hide() {
-    this.box.style.left = '-9999px';
-    this.box.innerText = '';
-    this.currentAnchor = null;
-  }
-
-  destroy() {
-    this.box.onmouseleave = null;
-  }
-}

package/src/tooltip/tooltip.ts

@@ -1,199 +0,0 @@
-import { Pen } from '../pen';
-import { Point } from '../point';
-import { Meta2dStore } from '../store';
-import type { marked as Marked } from 'marked';
-import { getParent } from '../pen';
-
-export class Tooltip {
-  box: HTMLElement;
-  text: HTMLElement;
-  arrowUp: HTMLElement;
-  arrowDown: HTMLElement;
-  x: number;
-  y: number;
-  private currentPen: Pen; // 本次 tooltip 在哪个画笔上
-  constructor(public parentElement: HTMLElement, private store: Meta2dStore) {
-    this.box = document.createElement('div');
-    this.text = document.createElement('div');
-    this.arrowUp = document.createElement('div');
-    this.arrowDown = document.createElement('div');
-
-    this.box.className = 'meta2d-tooltip';
-    this.text.className = 'text';
-    this.arrowUp.className = 'arrow';
-    this.arrowDown.className = 'arrow down';
-
-    this.box.appendChild(this.text);
-    this.box.appendChild(this.arrowUp);
-    this.box.appendChild(this.arrowDown);
-    parentElement.appendChild(this.box);
-
-    this.box.onmouseleave = () => {
-      this.hide();
-      this.store.lastHover = undefined;
-    };
-
-    let sheet: any;
-    for (let i = 0; i < document.styleSheets.length; i++) {
-      if (document.styleSheets[i].title === 'le5le.com/tooltip') {
-        sheet = document.styleSheets[i];
-      }
-    }
-
-    if (!sheet) {
-      let style = document.createElement('style');
-      style.type = 'text/css';
-      style.title = 'le5le.com/tooltip';
-      document.head.appendChild(style);
-
-      style = document.createElement('style');
-      style.type = 'text/css';
-      document.head.appendChild(style);
-      sheet = style.sheet;
-      sheet.insertRule(
-        '.meta2d-tooltip{position:absolute;padding:8px 0;z-index:10;left: -9999px;top: -9999px;}'
-      );
-      sheet.insertRule(
-        '.meta2d-tooltip .text{max-width:320px;min-height:30px;max-height:400px;outline:none;padding:8px 16px;border-radius:4px;background:#777777;color:#ffffff;line-height:1.8;overflow-y:auto;}'
-      );
-      sheet.insertRule(
-        '.meta2d-tooltip .arrow{position:absolute;border:10px solid transparent;background:transparent;top:-5px;left:50%;transform:translateX(-50%)}'
-      );
-      sheet.insertRule(
-        '.meta2d-tooltip .arrow.down{top:initial;bottom: -1px;}'
-      );
-    }
-  }
-
-  /**
-   * 通过 pen 的 titleFn titleFnJs title 来获取 title
-   * @returns 此次应该展示的 title
-   */
-  private static getTitle(pen: Pen) {
-    if (pen.titleFnJs && !pen.titleFn) {
-      try {
-        pen.titleFn = new Function('pen', pen.titleFnJs) as (
-          pen: Pen
-        ) => string;
-      } catch (error) {
-        console.log('titleFnJs', error);
-      }
-    }
-    return pen.titleFn ? pen.titleFn(pen) : String(pen.title);
-  }
-
-  /**
-   * 更改 tooltip dom 的文本
-   * @returns 返回设置前的 rect
-   */
-  private setText(pen: Pen): DOMRect {
-    const oldElemRect = this.box.getBoundingClientRect();
-    let marked: typeof Marked = globalThis.marked;
-    const title = Tooltip.getTitle(pen);
-    if (marked) {
-      this.text.innerHTML = marked(title);
-      const a = this.text.getElementsByTagName('A');
-      for (let i = 0; i < a.length; ++i) {
-        a[i].setAttribute('target', '_blank');
-      }
-    } else {
-      this.text.innerHTML = title;
-    }
-    return oldElemRect;
-  }
-
-  /**
-   * 更新文字
-   */
-  updateText(pen: Pen) {
-    if (this.currentPen?.id !== pen.id) {
-      return;
-    }
-
-    if (Tooltip.titleEmpty(pen)) {
-      return;
-    }
-
-    const oldRect = this.setText(pen);
-    const newRect = this.box.getBoundingClientRect();
-    this.changePositionByText(oldRect, newRect);
-  }
-
-  /**
-   * 改变文字会 影响 box 的大小，需要重新设置位置
-   * @param oldRect 原
-   * @param newRect 新
-   */
-  private changePositionByText(oldRect: DOMRect, newRect: DOMRect) {
-    this.x -= (newRect.width - oldRect.width) / 2;
-    this.y -= newRect.height - oldRect.height;
-    this.box.style.left = this.x + 'px';
-    this.box.style.top = this.y + 'px';
-  }
-
-  private static titleEmpty(pen: Pen) {
-    return !pen.title && !pen.titleFn && !pen.titleFnJs;
-  }
-
-  show(pen: Pen, pos: Point) {
-    this.currentPen = pen;
-    if (Tooltip.titleEmpty(pen)) {
-      let parent = getParent(pen, true);
-      if (parent) {
-        this.show(parent, pos);
-      }
-      return;
-    }
-
-    this.setText(pen);
-    const elemRect = this.box.getBoundingClientRect();
-    const rect = pen.calculative.worldRect;
-    let x = pen.calculative.canvas.store.data.x + pos.x - elemRect.width / 2;
-    let y = pen.calculative.canvas.store.data.y + pos.y - elemRect.height;
-    if (!pen.type) {
-      x =
-        pen.calculative.canvas.store.data.x +
-        rect.x -
-        (elemRect.width - rect.width) / 2;
-      y =
-        pen.calculative.canvas.store.data.y +
-        rect.ey -
-        elemRect.height -
-        rect.height;
-    }
-
-    if (y > 0) {
-      this.arrowUp.style.borderBottomColor = 'transparent';
-      this.arrowDown.style.borderTopColor = '#777777';
-    } else {
-      y += elemRect.height + rect.height + 5;
-      this.arrowUp.style.borderBottomColor = '#777777';
-      this.arrowDown.style.borderTopColor = 'transparent';
-    }
-
-    this.x = x;
-    this.y = y;
-    this.box.style.left = this.x + 'px';
-    this.box.style.top = this.y + 'px';
-  }
-
-  hide() {
-    this.currentPen = null;
-    this.x = -9999;
-    this.box.style.left = '-9999px';
-  }
-
-  translate(x: number, y: number) {
-    if (this.x < -1000) {
-      return;
-    }
-    this.x += x;
-    this.y += y;
-    this.box.style.left = this.x + 'px';
-    this.box.style.top = this.y + 'px';
-  }
-
-  destroy() {
-    this.box.onmouseleave = null;
-  }
-}

package/src/utils/clone.ts

@@ -1,79 +0,0 @@
-/**
- * 拷贝一个对象
- * @param o - object to clone
- * @param keepCalc 是否保留计算属性， false, 不保留， true, 保留（但 calculative.canvas 属性仍不保存）
- * @returns 拷贝后的对象
- */
-export function deepClone<T>(o: T, keepCalc = false): T {
-  if (Array.isArray(o)) {
-    const arr = [] as T & any[];
-    o.forEach((item) => {
-      arr.push(deepClone(item, keepCalc));
-    });
-    return arr;
-  } else if (typeof o === 'object') {
-    if (o === null) {
-      return null;
-    } else if (o.constructor === RegExp) {
-      return o;
-    }
-    const _o = {} as T;
-    for (const key in o) {
-      if (
-        ['canvas', 'lastFrame'].includes(key) ||
-        o[key] instanceof HTMLImageElement ||
-        o[key] instanceof HTMLMediaElement
-      ) {
-        continue;
-      } else if (key === 'calculative' && !keepCalc) {
-        continue;
-      } else if (key === 'singleton') {
-        if (keepCalc) {
-          _o[key] = {} as any;
-        } else {
-          _o[key] = o[key];
-        }
-        continue;
-      }
-      _o[key] = deepClone(o[key], keepCalc);
-    }
-    return _o;
-  }
-
-  return o;
-}
-
-export function deepSetValue<T>(o: any, keyWords: string[], value: number): T {
-  if (Array.isArray(o)) {
-    const arr = [] as T & any[];
-    o.forEach((item) => {
-      arr.push(deepSetValue(item, keyWords, value));
-    });
-    return arr;
-  } else if (typeof o === 'object') {
-    if (o === null) {
-      return null;
-    }
-    // const _o = {} as any;
-    for (const key in o) {
-      if (keyWords.includes(key)) {
-        if(Array.isArray(o[key])){
-          o[key].forEach((i,index)=>{
-            if(!Number.isNaN(Number(i))){
-              o[key][index] = Number(i * value);
-            }
-          });
-        }else {
-          if(Number.isNaN(Number(o[key]))){
-            continue;
-          }
-          o[key] = Number(o[key]) * value;
-        }
-      } else {
-        o[key] = deepSetValue(o[key], keyWords, value);
-      }
-    }
-    return o;
-  }
-  return o;
-}

package/src/utils/color.ts

@@ -1,126 +0,0 @@
-// pSBC - Shade Blend Convert - Version 4.0 - 02/18/2019
-// https://github.com/PimpTrizkit/PJs/edit/master/pSBC.js
-
-export function pSBCr(d) {
-  const i = parseInt,
-    m = Math.round;
-  let n = d.length,
-    x: any = {};
-  if (n > 9) {
-    const [r, g, b, a] = (d = d.split(','));
-    n = d.length;
-    if (n < 3 || n > 4) return null;
-    (x.r = i(r[3] == 'a' ? r.slice(5) : r.slice(4))),
-      (x.g = i(g)),
-      (x.b = i(b)),
-      (x.a = a ? parseFloat(a) : -1);
-  } else {
-    if (n == 8 || n == 6 || n < 4) return null;
-    if (n < 6)
-      d =
-        '#' +
-        d[1] +
-        d[1] +
-        d[2] +
-        d[2] +
-        d[3] +
-        d[3] +
-        (n > 4 ? d[4] + d[4] : '');
-    d = i(d.slice(1), 16);
-    if (n == 9 || n == 5)
-      (x.r = (d >> 24) & 255),
-        (x.g = (d >> 16) & 255),
-        (x.b = (d >> 8) & 255),
-        (x.a = m((d & 255) / 0.255) / 1000);
-    else (x.r = d >> 16), (x.g = (d >> 8) & 255), (x.b = d & 255), (x.a = -1);
-  }
-  return x;
-}
-
-/*
-example：
-pSBC ( 0.42, color1 ); // rgb(20,60,200) + [42% Lighter] => rgb(166,171,225)
-pSBC ( -0.4, color5 ); // #F3A + [40% Darker] => #c62884
-
-pSBC ( -0.5, color2, color8, true ); // rgba(20,60,200,0.67423) + rgba(200,60,20,0.98631) + [50% Blend] => rgba(110,60,110,0.83)
-pSBC ( 0.7, color2, color7, true ); // rgba(20,60,200,0.67423) + rgb(200,60,20) + [70% Blend] => rgba(146,60,74,0.67423)
-
-more:
-https://github-wiki-see.page/m/PimpTrizkit/PJs/wiki/12.-Shade%2C-Blend-and-Convert-a-Web-Color-%28pSBC.js%29
-*/
-
-export function pSBC(p, c0, c1?, l?) {
-  let r,
-    g,
-    b,
-    P,
-    f,
-    t,
-    h,
-    m = Math.round,
-    a: any = typeof c1 == 'string';
-  if (
-    typeof p != 'number' ||
-    p < -1 ||
-    p > 1 ||
-    typeof c0 != 'string' ||
-    (c0[0] != 'r' && c0[0] != '#') ||
-    (c1 && !a)
-  )
-    return null;
-  (h = c0.length > 9),
-    (h = a ? (c1.length > 9 ? true : c1 == 'c' ? !h : false) : h),
-    (f = pSBCr(c0)),
-    (P = p < 0),
-    (t =
-      c1 && c1 != 'c'
-        ? pSBCr(c1)
-        : P
-        ? { r: 0, g: 0, b: 0, a: -1 }
-        : { r: 255, g: 255, b: 255, a: -1 }),
-    (p = P ? p * -1 : p),
-    (P = 1 - p);
-  if (!f || !t) return null;
-  if (l)
-    (r = m(P * f.r + p * t.r)),
-      (g = m(P * f.g + p * t.g)),
-      (b = m(P * f.b + p * t.b));
-  else
-    (r = m((P * f.r ** 2 + p * t.r ** 2) ** 0.5)),
-      (g = m((P * f.g ** 2 + p * t.g ** 2) ** 0.5)),
-      (b = m((P * f.b ** 2 + p * t.b ** 2) ** 0.5));
-  (a = f.a),
-    (t = t.a),
-    (f = a >= 0 || t >= 0),
-    (a = f ? (a < 0 ? t : t < 0 ? a : a * P + t * p) : 0);
-  if (h)
-    return (
-      'rgb' +
-      (f ? 'a(' : '(') +
-      r +
-      ',' +
-      g +
-      ',' +
-      b +
-      (f ? ',' + m(a * 1000) / 1000 : '') +
-      ')'
-    );
-  else
-    return (
-      '#' +
-      (4294967296 + r * 16777216 + g * 65536 + b * 256 + (f ? m(a * 255) : 0))
-        .toString(16)
-        .slice(1, f ? undefined : -2)
-    );
-}
-
-globalThis.pSBC = pSBC;
-
-export function rgba(c: string, p: number) {
-  const f = pSBCr(c) || { r: 0, g: 0, b: 0 };
-  if (f.a < 0) {
-    return `rgba(${f.r},${f.g},${f.b},${p})`;
-  }
-
-  return `rgba(${f.r},${f.g},${f.b},${p + f.a})`;
-}

package/src/utils/error.ts

@@ -1,7 +0,0 @@
-import { Meta2dStore } from '../store';
-
-export function lockedError(store: Meta2dStore) {
-  if (store.data.locked) {
-    throw new Error('canvas is locked');
-  }
-}

package/src/utils/file.ts

@@ -1,46 +0,0 @@
-export async function fileToBase64(file: File): Promise<string> {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = (e) => {
-      resolve(e.target.result as string);
-    };
-    reader.onerror = (e) => {
-      reject(e);
-    };
-    reader.readAsDataURL(file);
-  });
-}
-
-export async function uploadFile(
-  file: File,
-  url: string,
-  params: Record<string, any>,
-  headers: Record<string, string>
-): Promise<string> {
-  const formData = new FormData();
-  // 后端接受的 formData 文件属性名一定为 file
-  formData.append('file', file);
-  if (params) {
-    for (const key in params) {
-      if (params.hasOwnProperty(key)) {
-        formData.append(key, params[key]);
-      }
-    }
-  }
-  const res = await fetch(url, {
-    method: 'POST',
-    headers,
-    body: formData,
-  });
-  // 后端返回的一级属性中，必须包含一个名为url的属性
-  return (await res.json()).url;
-}
-
-export function loadCss(url: string, success?: any, error?: any) {
-  var link = document.createElement('link');
-  link.href = url;
-  link.rel = 'stylesheet';
-  success && (link.onload = success);
-  error && (link.onerror = error);
-  document.head.appendChild(link);
-}

package/src/utils/math.ts

@@ -1,120 +0,0 @@
-export function abs(num: number, percent: number | string): number {
-  if (+percent) {
-    return +percent;
-  }
-
-  if (!percent || percent[(percent as string).length - 1] !== '%') {
-    return 0;
-  }
-
-  percent = (percent as string).substr(0, (percent as string).length - 1);
-
-  return (num * +percent) / 100;
-}
-
-/**
- * 实际值是否在范围中, 数学上的开闭
- * @param realValue 实际值
- * @param collection 集合规范，与数学上相同，如[0, 100]，前闭后闭；如[0, 100)，前闭后开；
- * @returns undefined 说明参数不规范 ，true 说明在范围内，false 说明不在范围内
- */
-export function valueInRange(realValue: number, collection: unknown): boolean {
-  if (isNaN(realValue)) {
-    console.warn(`realValue not number`);
-    return;
-  }
-  if (typeof collection !== 'string') {
-    console.warn('collection must be string');
-    return;
-  }
-  const [start, end] = [collection[0], collection[collection.length - 1]];
-  if (!['[', '('].includes(start)) {
-    console.warn('collection must start with "[" or "("');
-    return;
-  }
-  if (![']', ')'].includes(end)) {
-    console.warn('collection must end with "]" or ")"');
-    return;
-  }
-  const nums = collection.substring(1, collection.length - 1).split(',');
-  if (nums.length !== 2) {
-    console.warn('collection must have 2 numbers');
-    return;
-  }
-  const [startNum, endNum] = [+nums[0], +nums[1]];
-  if (startNum >= endNum) {
-    console.warn('startNum must less than endNum');
-    return;
-  }
-  // 大于 startNum 左肯定成立
-  const left =
-    realValue > startNum || (start === '[' && realValue === startNum)
-      ? true
-      : false;
-  if (!left) {
-    return false;
-  }
-  // 执行到这，左边已经是true了，判断右边
-  const right =
-    realValue < endNum || (end === ']' && realValue === endNum) ? true : false;
-
-  return right;
-}
-
-/**
- * 实际值是否在数组中，即是否属于
- * 例如: [1,2,3] 只有 1 2 3 是属于 collection 的
- * .. 范围值 30..50 等于 闭区间的 [30,50] ，即范围值
- * [1,20,30..50,65] 只有 1 20 30..50 65 是属于 collection 的
- * @param realValue 实际值
- * @param collection 集合
- * @returns undefined 说明参数不规范 ，true 说明在范围内，false 说明不在范围内
- */
-export function valueInArray(realValue: any, collection: unknown): boolean {
-  // if (isNaN(realValue)) {
-  //   console.warn(`realValue not number`);
-  //   return;
-  // }
-  //允许字符串的情况
-  if (typeof collection !== 'string') {
-    console.warn('collection must be string');
-    return;
-  }
-  const [start, end] = [collection[0], collection[collection.length - 1]];
-  if (start !== '[' || end !== ']') {
-    console.warn('collection must start with "[" and end with "]"');
-    return;
-  }
-  const numStrs = collection.substring(1, collection.length - 1).split(',');
-  for (const numStr of numStrs) {
-    if (numStr.includes('..')) {
-      // 范围值
-      const [start, end] = numStr.split('..');
-      const [startNum, endNum] = [+start, +end];
-      if (startNum >= endNum) {
-        console.warn('startNum must less than endNum');
-        return;
-      }
-      if (realValue >= startNum && realValue <= endNum) {
-        return true;
-      }
-    } else {
-      // 单个值
-      // let num:any = +numStr;
-      // if(Number.isNaN(num)){
-      //   num = numStr;
-      //   const [start, end] = [num[0], num[num.length - 1]];
-      //   if (!((start !== '"' && end !== '"')||(start !== "'" && end !== "'"))) {
-      //     console.warn('Not a valid string');
-      //     return;
-      //   }else{
-      //     num = num.substring(1, num.length - 1)
-      //   }
-      // }
-      if (realValue == numStr) {
-        return true;
-      }
-    }
-  }
-  return false;
-}