@meta2d/core 1.0.54 → 1.0.56

package/src/title/title.ts

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

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

@@ -0,0 +1,79 @@
+/**
+ * 拷贝一个对象
+ * @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

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

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

package/src/utils/file.ts

@@ -0,0 +1,46 @@
+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/{index.d.ts → index.ts}

@@ -6,3 +6,4 @@ export * from './clone';
 export * from './file';
 export * from './url';
 export * from './object';
+export * from './time';

package/src/utils/math.ts

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