@meta2d/core 1.0.54 → 1.0.56

package/src/diagrams/iframe.ts

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

@@ -16,6 +16,7 @@ export * from './line';
 export * from './iframe';
 export * from './video';
 export * from './panel';
+
 import { rectangle, square } from './rectangle';
 import { circle } from './circle';
 import { svgPath } from './svgPath';
@@ -37,41 +38,42 @@ import { gif } from './gif';
 import { mindNode, mindNodeAnchors } from './mindNode';
 import { mindLine, mindLineAnchors } from './mindLine';
 import { panel } from './panel';
+
 export function commonPens() {
-    return {
-        rectangle: rectangle,
-        square: square,
-        circle: circle,
-        svgPath: svgPath,
-        diamond: diamond,
-        triangle: triangle,
-        pentagon: pentagon,
-        pentagram: pentagram,
-        hexagon: hexagon,
-        leftArrow: leftArrow,
-        rightArrow: rightArrow,
-        twowayArrow: twowayArrow,
-        message: message,
-        cloud: cloud,
-        file: file,
-        people: people,
-        line: line,
-        iframe: iframe,
-        video: video,
-        gif: gif,
-        mindNode: mindNode,
-        mindLine: mindLine,
-        mindNode2: rectangle,
-        panel: panel
-    };
+  return {
+    rectangle,
+    square,
+    circle,
+    svgPath,
+    diamond,
+    triangle,
+    pentagon,
+    pentagram,
+    hexagon,
+    leftArrow,
+    rightArrow,
+    twowayArrow,
+    message,
+    cloud,
+    file,
+    people,
+    line,
+    iframe,
+    video,
+    gif,
+    mindNode,
+    mindLine,
+    mindNode2:rectangle,
+    panel
+  };
 }
+
 export function commonAnchors() {
-    return {
-        triangle: triangleAnchors,
-        pentagon: pentagonAnchors,
-        pentagram: pentagramAnchors,
-        mindNode: mindNodeAnchors,
-        mindLine: mindLineAnchors,
-    };
+  return {
+    triangle: triangleAnchors,
+    pentagon: pentagonAnchors,
+    pentagram: pentagramAnchors,
+    mindNode: mindNodeAnchors,
+    mindLine: mindLineAnchors,
+  };
 }
-//# sourceMappingURL=index.js.map

package/src/diagrams/line/arrow.ts

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