@meta2d/core 1.0.56 → 1.0.58

package/src/diagrams/iframe.ts

@@ -1,365 +0,0 @@
-import { Pen, setElemPosition } from '../pen';
-import { Point } from '../point';
-import { deepClone, getRootDomain } from '../utils';
-
-export function iframe(pen: Pen) {
-  if (!pen.onDestroy) {
-    pen.onDestroy = destory;
-    pen.onMove = move;
-    pen.onResize = move;
-    pen.onRotate = move;
-    pen.onValue = move;
-    pen.onMouseMove = mouseMove;
-    pen.onBeforeValue = beforeValue;
-    pen.onRenderPenRaw = renderPenRaw;
-  }
-  if (!pen.calculative.singleton) {
-    pen.calculative.singleton = {};
-  }
-  const worldRect = pen.calculative.worldRect;
-
-  if (!pen.calculative.singleton.div) {
-    const div = document.createElement('div');
-    div.style.position = 'absolute';
-    div.style.outline = 'none';
-    div.style.left = '-9999px';
-    div.style.top = '-9999px';
-    div.style.width = worldRect.width + 'px';
-    div.style.height = worldRect.height + 'px';
-    document.body.appendChild(div);
-    pen.calculative.canvas.externalElements?.parentElement.appendChild(div);
-    setElemPosition(pen, div);
-    pen.calculative.singleton.div = div;
-    const iframe = document.createElement('iframe');
-    iframe.style.width = '100%';
-    iframe.style.height = '100%';
-    iframe.scrolling = pen.scrolling || 'no';
-    iframe.frameBorder = '0';
-    iframe.style.border = 'none';
-    iframe.src = pen.iframe;
-    pen.calculative.iframe = pen.iframe;
-    div.appendChild(iframe);
-    generateAroundDiv(pen);
-    iframe.onload = () => {
-      iframe.setAttribute('document.domain', '');
-    };
-  }
-
-  if (pen.calculative.patchFlags) {
-    setElemPosition(pen, pen.calculative.singleton.div);
-  }
-  pen.onRenderPenRaw(pen);
-  return new Path2D();
-}
-
-function destory(pen: Pen) {
-  updatePointerEvents(pen);
-  if (pen.calculative.singleton && pen.calculative.singleton.div) {
-    pen.calculative.singleton.div.remove();
-    delete pen.calculative.singleton.div;
-  }
-}
-
-function move(pen: Pen) {
-  pen.calculative.singleton.div &&
-    setElemPosition(pen, pen.calculative.singleton.div);
-}
-
-function beforeValue(pen: Pen, value: any) {
-  if (value.iframe) {
-    if (pen.calculative.singleton.div) {
-      pen.calculative.singleton.div.children[0].src = value.iframe;
-      pen.calculative.iframe = value.iframe;
-    }
-  }
-
-  if (
-    value.operationalRect ||
-    value['operationalRect.x'] !== undefined ||
-    value['operationalRect.y'] !== undefined ||
-    value['operationalRect.width'] !== undefined ||
-    value['operationalRect.height'] !== undefined
-  ) {
-    if (!pen.operationalRect) {
-      pen.operationalRect = {};
-    }
-    let _value = deepClone(value);
-    if (!_value.operationalRect) {
-      _value.operationalRect = {};
-    }
-    if (_value['operationalRect.x'] !== undefined) {
-      _value.operationalRect.x = _value['operationalRect.x'];
-    }
-    if (_value['operationalRect.y'] !== undefined) {
-      _value.operationalRect.y = _value['operationalRect.y'];
-    }
-    if (_value['operationalRect.width'] !== undefined) {
-      _value.operationalRect.width = _value['operationalRect.width'];
-    }
-    if (_value['operationalRect.height'] !== undefined) {
-      _value.operationalRect.height = _value['operationalRect.height'];
-    }
-    Object.assign(pen.operationalRect, _value.operationalRect);
-    if (pen.calculative.singleton.div) {
-      let length = pen.calculative.singleton.div.children.length;
-      if (length === 1) {
-        //没有创建
-        generateAroundDiv(pen);
-      } else {
-        //有更新值
-        pen.calculative.singleton.div.children[1].style.height =
-          pen.operationalRect.y * 100 + '%';
-        pen.calculative.singleton.div.children[1].style.left =
-          pen.operationalRect.x * 100 + '%';
-        pen.calculative.singleton.div.children[1].style.width =
-          pen.operationalRect.width * 100 + '%';
-        pen.calculative.singleton.div.children[2].style.width =
-          (1 - pen.operationalRect.x - pen.operationalRect.width) * 100 + '%';
-
-        pen.calculative.singleton.div.children[3].style.height =
-          (1 - pen.operationalRect.y - pen.operationalRect.height) * 100 + '%';
-        pen.calculative.singleton.div.children[3].style.left =
-          pen.operationalRect.x * 100 + '%';
-        pen.calculative.singleton.div.children[3].style.width =
-          pen.operationalRect.width * 100 + '%';
-
-        pen.calculative.singleton.div.children[4].style.width =
-          pen.operationalRect.x * 100 + '%';
-      }
-    }
-  }
-  if (value.blur !== undefined) {
-    for (let i = 1; i < 5; i++) {
-      pen.calculative.singleton.div.children[i].style[
-        'backdrop-filter'
-      ] = `blur(${value.blur || 2}px)`;
-    }
-  }
-  if (value.blurBackground !== undefined) {
-    for (let i = 1; i < 5; i++) {
-      pen.calculative.singleton.div.children[i].style.backgroundColor =
-        value.blurBackground;
-    }
-  }
-  return value;
-}
-
-function mouseMove(pen: Pen, e: Point) {
-  if (!pen.calculative.canvas.store.data.locked && !pen.locked) {
-    return;
-  }
-  if (initOperationalRect(pen.operationalRect)) {
-    if (
-      pen.calculative.zIndex < 5 &&
-      e.x > pen.x + pen.width * pen.operationalRect.x &&
-      e.x <
-        pen.x +
-          pen.width * (pen.operationalRect.x + pen.operationalRect.width) &&
-      e.y > pen.y + pen.height * pen.operationalRect.y &&
-      e.y <
-        pen.y +
-          pen.height * (pen.operationalRect.y + pen.operationalRect.height)
-    ) {
-      if (pen.calculative.singleton.div) {
-        let children: HTMLElement[] =
-          pen.calculative.singleton.div.parentNode.children;
-        for (let i = 0; i < 6; i++) {
-          children[i].style.pointerEvents = 'none';
-        }
-      }
-    }
-  }
-}
-
-function initOperationalRect(operationalRect) {
-  if (operationalRect) {
-    if (!operationalRect.width || !operationalRect.height) {
-      return false;
-    }
-    //默认居中
-    if (operationalRect.x === undefined) {
-      operationalRect.x = (1 - operationalRect.width) / 2;
-    }
-    if (operationalRect.y === undefined) {
-      operationalRect.y = (1 - operationalRect.height) / 2;
-    }
-    return true;
-  } else {
-    return false;
-  }
-}
-
-function generateAroundDiv(pen: Pen) {
-  if (!initOperationalRect(pen.operationalRect)) {
-    return;
-  }
-  const div = pen.calculative.singleton.div;
-  if (!div) {
-    return;
-  }
-  const top = document.createElement('div');
-  top.style.position = 'absolute';
-  top.style.left = pen.operationalRect.x * 100 + '%';
-  top.style.top = '0px';
-  top.style.width = pen.operationalRect.width * 100 + '%';
-  top.style.height = pen.operationalRect.y * 100 + '%';
-  top.style['backdrop-filter'] = `blur(${pen.blur || 2}px)`;
-  top.style.backgroundColor = pen.blurBackground;
-  div.appendChild(top);
-
-  const right = document.createElement('div');
-  right.style.position = 'absolute';
-  right.style.right = '0px';
-  right.style.top = '0px';
-  right.style.width =
-    (1 - pen.operationalRect.x - pen.operationalRect.width) * 100 + '%';
-  right.style.height = '100%';
-  right.style['backdrop-filter'] = `blur(${pen.blur || 2}px)`;
-  right.style.backgroundColor = pen.blurBackground;
-  div.appendChild(right);
-
-  const bottom = document.createElement('div');
-  bottom.style.position = 'absolute';
-  bottom.style.left = pen.operationalRect.x * 100 + '%';
-  bottom.style.bottom = '0px';
-  bottom.style.width = pen.operationalRect.width * 100 + '%';
-  bottom.style.height =
-    (1 - pen.operationalRect.y - pen.operationalRect.height) * 100 + '%';
-  bottom.style['backdrop-filter'] = `blur(${pen.blur || 2}px)`;
-  bottom.style.backgroundColor = pen.blurBackground;
-  div.appendChild(bottom);
-
-  const left = document.createElement('div');
-  left.style.position = 'absolute';
-  left.style.left = '0px';
-  left.style.top = '0px';
-  left.style.width = pen.operationalRect.x * 100 + '%';
-  left.style.height = '100%';
-  left.style['backdrop-filter'] = `blur(${pen.blur || 2}px)`;
-  left.style.backgroundColor = pen.blurBackground;
-  div.appendChild(left);
-
-  let mouseEnter = () => {
-    updatePointerEvents(pen);
-  };
-
-  top.onmouseenter = mouseEnter;
-  bottom.onmouseenter = mouseEnter;
-  right.onmouseenter = mouseEnter;
-  left.onmouseenter = mouseEnter;
-  div.onmouseleave = mouseEnter;
-  // }
-}
-
-function updatePointerEvents(pen: Pen) {
-  if (!pen.calculative.canvas.store.data.locked && !pen.locked) {
-    return;
-  }
-  if (pen.calculative.zIndex < 5) {
-    let children: any = pen.calculative.singleton.div.parentNode.children;
-    for (let i = 1; i < 6; i++) {
-      children[i].style.pointerEvents = 'initial';
-    }
-  }
-}
-
-function renderPenRaw(pen: Pen) {
-  if (pen.thumbImg) {
-    if (!pen.calculative.img) {
-      const img = new Image();
-      img.crossOrigin =
-        pen.crossOrigin === 'undefined'
-          ? undefined
-          : pen.crossOrigin || 'anonymous';
-      if (
-        pen.calculative.canvas.store.options.cdn &&
-        !(
-          pen.thumbImg.startsWith('http') ||
-          pen.thumbImg.startsWith('//') ||
-          pen.thumbImg.startsWith('data:image')
-        )
-      ) {
-        img.src = pen.calculative.canvas.store.options.cdn + pen.thumbImg;
-      } else {
-        img.src = pen.thumbImg;
-      }
-      img.onerror = (e) => {
-        img.remove();
-        pen.calculative.img = undefined;
-      };
-      pen.calculative.img = img;
-    }
-  } else {
-    // if (pen.calculative.singleton && pen.calculative.singleton.div) {
-    //   try {
-    //     // handleSaveImg(pen);
-    //   } catch (e) {
-    //     console.warn(e);
-    //     pen.calculative.img = null;
-    //   }
-    // }
-  }
-}
-
-async function handleSaveImg(pen: Pen) {
-  let iframeHtml = pen.calculative.singleton.div.children[0].contentWindow;
-  const iframeBody = iframeHtml.document.getElementsByTagName('body')[0];
-  const iframeScrollY = iframeHtml.document.documentElement.scrollTop;
-  const iframeScrollX = iframeHtml.document.documentElement.scrollLeft;
-  var fillContent = document.createElement('div');
-  // 把需要转换成图片的元素内容赋给创建的元素
-  fillContent.innerHTML = iframeBody.outerHTML;
-  document.body.appendChild(fillContent);
-  iframeHtml.document.domain = getRootDomain();
-  if (globalThis.html2canvas) {
-    const canvas = await globalThis.html2canvas(fillContent, {
-      allowTaint: true,
-      useCORS: true,
-      width: pen.width, // TODO 截屏按照1920*1080分辨率下的预览窗口宽高
-      height: pen.height,
-      x: iframeScrollX,
-      y: iframeScrollY,
-      // foreignObjectRendering: true,
-    });
-    // canvas.getContext('2d', {
-    //   willReadFrequently: true,
-    // });
-    const img = new Image();
-    img.crossOrigin =
-      pen.crossOrigin === 'undefined'
-        ? undefined
-        : pen.crossOrigin || 'anonymous';
-    img.src = canvas.toDataURL('image/png', 0.1);
-    if (img.src.length > 10) {
-      pen.calculative.img = img;
-    }
-    document.body.removeChild(fillContent);
-  }
-  // globalThis.html2canvas &&
-  //   globalThis
-  //     .html2canvas(iframeBody, {
-  //       allowTaint: true,
-  //       useCORS: true,
-  //       width: pen.width, // TODO 截屏按照1920*1080分辨率下的预览窗口宽高
-  //       height: pen.height,
-  //       x: iframeScrollX,
-  //       y: iframeScrollY,
-  //       foreignObjectRendering: true,
-  //     })
-  //     .then((canvas) => {
-  //       // 转成图片，生成图片地址
-  //       // imgBase64 = canvas.toDataURL('image/png');
-  //       const img = new Image();
-  //       img.crossOrigin =
-  //         pen.crossOrigin === 'undefined'
-  //           ? undefined
-  //           : pen.crossOrigin || 'anonymous';
-  //       img.src = canvas.toDataURL('image/png', 0.1);
-  //       if (img.src.length > 10) {
-  //         pen.calculative.img = img;
-  //       }
-  //     })
-  //     .catch((e) => {
-  //       console.warn(e);
-  //     });
-}

package/src/diagrams/line/arrow.ts

@@ -1,175 +0,0 @@
-import { Pen, LineAnimateType } from '../../pen';
-import { Point } from '../../point';
-
-//箭头动画
-export function drawArrow(
-  pen: Pen,
-  ctx?: CanvasRenderingContext2D | Path2D
-): Path2D {
-  const path = !ctx ? new Path2D() : ctx;
-  const worldAnchors = pen.calculative.worldAnchors;
-  let scale = pen.calculative.canvas.store.data.scale;
-  let size = (pen.calculative.animateLineWidth || 6) * scale; // 箭头大小
-  let arrowLength = (pen.animateLineWidth*2 || 12) * scale; // 箭头长度
-  if(pen.lineAnimateType === LineAnimateType.WaterDrop){
-    arrowLength = (pen.animateLineWidth*4 || 24) * scale; // 水滴长度
-  }
-  let d = (pen.animateInterval || 100) * scale; // 箭头间距
-  let smoothLenth = pen.calculative.lineWidth *(pen.calculative.lineSmooth || 0)//*scale;
-  let lineWidth = (pen.calculative.animateLineWidth/2 || 3) * scale;
-  if (pen.animateReverse) {
-    //箭头反向
-    arrowLength = -arrowLength;
-    size = -size;
-  }
-  if (worldAnchors.length > 1) {
-    let from: Point; // 上一个点
-    let lastLength = 0;
-    for (let i = 0; i < worldAnchors.length; i++) {
-      let pt = worldAnchors[i];
-      //获取箭头角度
-      if (from) {
-        let angle = getAngle(from, pt);
-        let newP = {
-          x:
-            from.x +
-            ((pen.calculative.animatePos - lastLength) % d) *
-              Math.cos((angle * Math.PI) / 180),
-          y:
-            from.y -
-            ((pen.calculative.animatePos - lastLength) % d) *
-              Math.sin((angle * Math.PI) / 180),
-        };
-        if (pen.animateReverse) {
-          newP = {
-            x:
-              from.x +
-              ((pen.length - (pen.calculative.animatePos + lastLength)) % d) *
-                Math.cos((angle * Math.PI) / 180),
-            y:
-              from.y -
-              ((pen.length - (pen.calculative.animatePos + lastLength)) % d) *
-                Math.sin((angle * Math.PI) / 180),
-          };
-        }
-        let newPTFrom = Math.sqrt(
-          (newP.x - from.x) ** 2 + (newP.y - from.y) ** 2
-        );
-        let ptTFrom = Math.sqrt((pt.x - from.x) ** 2 + (pt.y - from.y) ** 2);
-        while (newPTFrom < ptTFrom) {
-          if (
-            ((pen.animateReverse && newPTFrom - arrowLength < ptTFrom) || //不允许超出连线绘制
-            (!pen.animateReverse &&
-              newPTFrom > arrowLength)) &&
-              newPTFrom > (smoothLenth+arrowLength) &&
-              ptTFrom - newPTFrom > smoothLenth
-          ) {
-            if(pen.lineAnimateType === LineAnimateType.Arrow){
-              arrow(path, newP, size, angle, lineWidth, arrowLength);
-            }else if(pen.lineAnimateType === LineAnimateType.WaterDrop){
-              waterDrop(path, newP, pen.animateReverse, angle, lineWidth, arrowLength);
-            }
-          }
-          newP.x += d * Math.cos((angle * Math.PI) / 180);
-          newP.y -= d * Math.sin((angle * Math.PI) / 180);
-          newPTFrom = Math.sqrt(
-            (newP.x - from.x) ** 2 + (newP.y - from.y) ** 2
-          );
-        }
-        // lastLength += ptTFrom-newPTFrom;
-      }
-      from = pt;
-    }
-  }
-  if (path instanceof Path2D) return path;
-}
-
-//获取两点连线和水平线的夹角
-function getAngle(p1, p2) {
-  let dx = p2.x - p1.x;
-  let dy = p2.y - p1.y;
-  let angle = (Math.atan(dy / dx) * 180) / Math.PI;
-  if (p2.x >= p1.x) {
-    angle = -angle;
-  } else {
-    angle = 180 - angle;
-  }
-  return angle;
-}
-
-//获取p相对rp旋转_angle后的点坐标
-function getRotatePoint(p: Point, rp: Point, _angle: number) {
-  let angle = ((180 - _angle) * Math.PI) / 180;
-  return {
-    x: (p.x - rp.x) * Math.cos(angle) - (p.y - rp.y) * Math.sin(angle) + rp.x,
-    y: (p.x - rp.x) * Math.sin(angle) + (p.y - rp.y) * Math.cos(angle) + rp.y,
-  };
-}
-
-//标准箭头
-function arrow(path:CanvasRenderingContext2D |Path2D, newP:Point, size:number, angle:number, lineWidth:number, arrowLength:number){
-  let pr = getRotatePoint(
-    { x: newP.x + size, y: newP.y + 0.57*size },
-    { x: newP.x, y: newP.y },
-    angle
-  );
-  let pl = getRotatePoint(
-    { x: newP.x + size, y: newP.y - 0.57*size },
-    { x: newP.x, y: newP.y },
-    angle
-  );
-  let pr1 = getRotatePoint(
-    { x: newP.x + size, y: newP.y + lineWidth/2 },
-    { x: newP.x, y: newP.y },
-    angle
-  );
-  let pr2 = getRotatePoint(
-    { x: newP.x + arrowLength, y: newP.y + lineWidth/2},
-    { x: newP.x, y: newP.y },
-    angle
-  );
-  let pl1 = getRotatePoint(
-    { x: newP.x + size, y: newP.y - lineWidth/2 },
-    { x: newP.x, y: newP.y },
-    angle
-  );
-  let pl2 = getRotatePoint(
-    { x: newP.x + arrowLength, y: newP.y - lineWidth/2 },
-    { x: newP.x, y: newP.y },
-    angle
-  );
-  path.moveTo(pr.x, pr.y);
-  path.lineTo(newP.x, newP.y);
-  path.lineTo(pl.x, pl.y);
-  path.lineTo(pl1.x, pl1.y);
-  path.lineTo(pl2.x, pl2.y);
-  path.lineTo(pr2.x, pr2.y);
-  path.lineTo(pr1.x, pr1.y);
-  path.lineTo(pr.x, pr.y);
-}
-
-//水滴
-function waterDrop(path:CanvasRenderingContext2D |Path2D, newP:Point, reverse:boolean, angle:number, lineWidth:number, arrowLength:number){
-  let dis = lineWidth/2;
-  if(reverse){
-    dis = -lineWidth/2;
-  }
-  let pl1 = getRotatePoint(
-    { x: newP.x, y: newP.y + dis },
-    { x: newP.x, y: newP.y },
-    angle
-  );
-  let pE = getRotatePoint(
-    { x: newP.x + arrowLength, y: newP.y  },
-    { x: newP.x, y: newP.y },
-    angle
-  );
-  let rAngle =Math.PI/2;
-  if(reverse){
-    rAngle = -Math.PI/2;
-  }
-  path.moveTo(newP.x, newP.y);
-  path.arc(newP.x, newP.y, lineWidth/2, -rAngle-angle/180*Math.PI, rAngle-angle/180*Math.PI, false);
-  path.lineTo(pE.x, pE.y);
-  path.lineTo(pl1.x, pl1.y);
-}