antd-solid 0.0.11 → 0.0.13

package/es/Transformer/index.js

@@ -0,0 +1,882 @@
+import { delegateEvents, createComponent, insert, memo, Portal, effect, setAttribute, spread, mergeProps, template } from 'solid-js/web';
+import { createMemo, createSignal, Show } from 'solid-js';
+import { inRange } from 'lodash-es';
+import NP from 'number-precision';
+import cs from 'classnames';
+import createControllableValue from '../hooks/createControllableValue.js';
+import Resize from '../assets/svg/Resize.js';
+import Element from '../Element/index.js';
+import { radToDeg } from '../utils/math.js';
+import RotateArrowSvg from '../assets/svg/RotateArrow.js';
+import CrosshairSvg from '../assets/svg/Crosshair.js';
+import { setRef } from '../utils/solid.js';
+import { setupGlobalDrag } from '../utils/setupGlobalDrag.js';
+import { subDOMPoint } from '../utils/domPoint.js';
+
+var _tmpl$ = /*#__PURE__*/template(`<svg><foreignObject class=overflow-visible></svg>`, false, true),
+  _tmpl$2 = /*#__PURE__*/template(`<svg><path class=pointer-events-initial opacity=0>`),
+  _tmpl$3 = /*#__PURE__*/template(`<svg><path stroke=var(--ant-color-primary) stroke-width=1></svg>`, false, true),
+  _tmpl$4 = /*#__PURE__*/template(`<svg><path class="pointer-events-initial cursor-none"opacity=0 stroke=var(--ant-color-primary) stroke-width=3></svg>`, false, true),
+  _tmpl$5 = /*#__PURE__*/template(`<svg><path class="pointer-events-initial cursor-none"opacity=0 fill=red></svg>`, false, true),
+  _tmpl$6 = /*#__PURE__*/template(`<svg><path class="pointer-events-initial cursor-none"fill=var(--ant-color-white) stroke=var(--ant-color-primary)></svg>`, false, true),
+  _tmpl$7 = /*#__PURE__*/template(`<svg><path class="pointer-events-initial cursor-none"opacity=0 fill=blue></svg>`, false, true);
+// 判断是否鼠标左键触发
+const isMainButton = e => e.button === 0;
+const Transformer = props => {
+  let ref;
+  const adsorbGap = createMemo(() => props.adsorb ? props.adsorb.gap ?? 5 : 0);
+  const getTransform = (value, transformOrigin) => new DOMMatrix().translate(value.x, value.y).translate(transformOrigin.x, transformOrigin.y).rotate(value.rotate).translate(-transformOrigin.x, -transformOrigin.y);
+  const [_value, setValue] = createControllableValue(props);
+  const value = createMemo(() => _value() ?? {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+    rotate: 0
+  });
+  const parseTransformOrigin = (width, height) => {
+    if (typeof props.transformOrigin === 'function') {
+      return new DOMPoint(...props.transformOrigin(width, height));
+    }
+    const [x, y] = props.transformOrigin ?? ['50%', '50%'];
+    return new DOMPoint(typeof x === 'string' ? width * parseFloat(x) / 100 : x, typeof y === 'string' ? height * parseFloat(y) / 100 : y);
+  };
+  const localToParent = (point, transformValue, transformOrigin) => {
+    transformValue = transformValue ?? value();
+    transformOrigin = transformOrigin ?? parseTransformOrigin(transformValue.width, transformValue.height);
+    if (props.localToParentPoint) {
+      return props.localToParentPoint(point, transformValue, transformOrigin);
+    }
+    return point.matrixTransform(getTransform(transformValue, transformOrigin));
+  };
+  const worldToParent = point => {
+    if (ref) {
+      const rect = ref.getBoundingClientRect();
+      point = new DOMPoint(point.x - rect.x, point.y - rect.y);
+    }
+    if (props.worldToParentPoint) return props.worldToParentPoint(point);
+    return point;
+  };
+  const localToWorld = (point, transformValue, transformOrigin) => {
+    const newPoint = localToParent(point, transformValue, transformOrigin);
+    if (!newPoint) return;
+    return props.parentToWorldPoint ? props.parentToWorldPoint(newPoint) : newPoint;
+  };
+  const worldToLocal = (point, transformValue, transformOrigin) => {
+    transformValue = transformValue ?? value();
+    transformOrigin = transformOrigin ?? parseTransformOrigin(transformValue.width, transformValue.height);
+    const newPoint = worldToParent(point);
+    if (!newPoint) return;
+    if (props.parentToLocalPoint) {
+      return props.parentToLocalPoint(newPoint, transformValue, transformOrigin);
+    }
+    return newPoint.matrixTransform(getTransform(transformValue, transformOrigin).inverse());
+  };
+  const [adsorbLine, setAdsorbLine] = createSignal({});
+  const onMoveMouseDown = e => {
+    if (!isMainButton(e)) return;
+    e.stopPropagation();
+    const startValue = value();
+    const startPoint = worldToParent(new DOMPoint(e.clientX, e.clientY));
+    if (!startPoint) return;
+    setupGlobalDrag(
+    // eslint-disable-next-line solid/reactivity
+    _e => {
+      const currentMousePoint = worldToParent(new DOMPoint(_e.clientX, _e.clientY));
+      if (!currentMousePoint) return;
+      const changedValue = {
+        x: startValue.x + (currentMousePoint.x - startPoint.x),
+        y: startValue.y + (currentMousePoint.y - startPoint.y)
+      };
+      if (props.adsorb) {
+        const _adsorbLine = {};
+        // x 轴
+        const right = props.adsorb.width - value().width;
+        const centerX = right / 2;
+        if (inRange(changedValue.x, centerX - adsorbGap(), centerX + adsorbGap())) {
+          changedValue.x = centerX;
+          _adsorbLine.centerX = true;
+        } else if (inRange(changedValue.x, -adsorbGap(), adsorbGap())) {
+          changedValue.x = 0;
+          _adsorbLine.left = true;
+        } else if (inRange(changedValue.x, right - adsorbGap(), right + adsorbGap())) {
+          changedValue.x = right;
+          _adsorbLine.right = true;
+        }
+        // y 轴
+        const bottom = props.adsorb.height - value().height;
+        const centerY = bottom / 2;
+        if (inRange(changedValue.y, centerY - adsorbGap(), centerY + adsorbGap())) {
+          changedValue.y = centerY;
+          _adsorbLine.centerY = true;
+        } else if (inRange(changedValue.y, -adsorbGap(), adsorbGap())) {
+          changedValue.y = 0;
+          _adsorbLine.top = true;
+        } else if (inRange(changedValue.y, bottom - adsorbGap(), bottom + adsorbGap())) {
+          changedValue.y = bottom;
+          _adsorbLine.bottom = true;
+        }
+        setAdsorbLine(_adsorbLine);
+      }
+      setValue({
+        ...value(),
+        ...changedValue
+      });
+      props.onMove?.(changedValue);
+    },
+    // eslint-disable-next-line solid/reactivity
+    () => {
+      props.onTransformEnd?.();
+      setAdsorbLine({});
+    });
+  };
+  let resizing = false;
+  const onResizeMouseDown = (e, direction) => {
+    if (!isMainButton(e)) return;
+    if (rotating) return;
+    e.stopPropagation();
+    const startValue = {
+      ...value()
+    };
+    const startPoint = worldToLocal(new DOMPoint(e.clientX, e.clientY));
+    if (!startPoint) return;
+    const getVertex = (width, height) => new DOMPoint(direction === 'right' || direction === 'bottomRight' || direction === 'topRight' ? 0 : width, direction === 'bottom' || direction === 'bottomRight' || direction === 'bottomLeft' ? 0 : height);
+    const startVertex = localToParent(getVertex(value().width, value().height));
+    if (!startVertex) return;
+    const startTransformOrigin = parseTransformOrigin(value().width, value().height);
+    resizing = true;
+    setupGlobalDrag(
+    // eslint-disable-next-line solid/reactivity
+    _e => {
+      const changedValue = value();
+      const currentPoint = worldToLocal(new DOMPoint(_e.clientX, _e.clientY), startValue, startTransformOrigin);
+      if (!currentPoint) return;
+      const offsetX = currentPoint.x - startPoint.x;
+      const offsetY = currentPoint.y - startPoint.y;
+      const _adsorbLine = {};
+      if (direction === 'left' || direction === 'right' || direction === 'topLeft' || direction === 'topRight' || direction === 'bottomLeft' || direction === 'bottomRight') {
+        const isLeft = direction === 'left' || direction === 'topLeft' || direction === 'bottomLeft';
+        let widthOffset = isLeft ? -offsetX : offsetX;
+        widthOffset = Math.max(-startValue.width, widthOffset);
+        changedValue.width = startValue.width + widthOffset;
+        if (props.adsorb) {
+          if (isLeft) {
+            let xOffset = isLeft ? -widthOffset : 0;
+            if (inRange(startValue.x + xOffset, -adsorbGap(), +adsorbGap())) {
+              xOffset = -startValue.x;
+              changedValue.width = NP.minus(startValue.width, xOffset);
+            }
+          } else {
+            if (inRange(startValue.x + changedValue.width, props.adsorb.width - adsorbGap(), props.adsorb.width + adsorbGap())) {
+              changedValue.width = NP.minus(props.adsorb.width, startValue.x);
+            }
+          }
+        }
+      }
+      if (direction === 'top' || direction === 'bottom' || direction === 'topLeft' || direction === 'topRight' || direction === 'bottomLeft' || direction === 'bottomRight') {
+        const isTop = direction === 'top' || direction === 'topLeft' || direction === 'topRight';
+        let heightOffset = isTop ? -offsetY : offsetY;
+        heightOffset = Math.max(-startValue.height, heightOffset);
+        changedValue.height = startValue.height + heightOffset;
+        if (props.adsorb) {
+          if (isTop) {
+            let yOffset = isTop ? -heightOffset : 0;
+            if (inRange(startValue.y + yOffset, -adsorbGap(), +adsorbGap())) {
+              yOffset = -startValue.y;
+              changedValue.height = NP.minus(startValue.height, yOffset);
+            }
+          } else {
+            if (inRange(startValue.y + changedValue.height, props.adsorb.height - adsorbGap(), props.adsorb.height + adsorbGap())) {
+              changedValue.height = NP.minus(props.adsorb.height, startValue.y);
+            }
+          }
+        }
+      }
+      setAdsorbLine(_adsorbLine);
+      const endWidth = changedValue.width ?? value().width;
+      const endHeight = changedValue.height ?? value().height;
+      const endTransformOrigin = parseTransformOrigin(endWidth, endHeight);
+      const endVertex = localToParent(getVertex(endWidth, endHeight), startValue, endTransformOrigin);
+      if (!endVertex) return;
+      changedValue.x = startValue.x + startVertex.x - endVertex.x;
+      changedValue.y = startValue.y + startVertex.y - endVertex.y;
+      setValue({
+        ...value(),
+        ...changedValue
+      });
+      props.onResize?.(changedValue);
+      updateResizeArrowPosition(_e);
+    },
+    // eslint-disable-next-line solid/reactivity
+    () => {
+      resizing = false;
+      setResizeDirection(false);
+      props.onTransformEnd?.();
+    }, 'none');
+  };
+  const getResizeHandlerProps = (direction, getMouseRotate) => {
+    return {
+      onMouseDown: e => {
+        onResizeMouseDown(e, direction);
+      },
+      onMouseEnter: e => {
+        if (resizing) return;
+        setResizeDirection(direction);
+        setMouseRotate(getMouseRotate());
+        updateResizeArrowPosition(e);
+      },
+      onMouseMove: e => {
+        if (resizing) return;
+        updateResizeArrowPosition(e);
+      },
+      onMouseLeave: () => {
+        if (resizing) return;
+        setResizeDirection(false);
+        setMouseRotate(0);
+      }
+    };
+  };
+  let rotating = false;
+  const onRotateMouseDown = e => {
+    if (!isMainButton(e)) return;
+    e.stopPropagation();
+    rotating = true;
+    const transformOrigin = parseTransformOrigin(value().width, value().height);
+    const startPoint = worldToLocal(new DOMPoint(e.clientX, e.clientY));
+    if (!startPoint) return;
+    const startAngle = Math.atan2(startPoint.y - transformOrigin.y, startPoint.x - transformOrigin.x);
+    setupGlobalDrag(
+    // eslint-disable-next-line solid/reactivity
+    _e => {
+      const currentPoint = worldToLocal(new DOMPoint(_e.clientX, _e.clientY));
+      if (!currentPoint) return;
+      const angle = Math.atan2(currentPoint.y - transformOrigin.y, currentPoint.x - transformOrigin.x);
+      const rotate = value().rotate + radToDeg(angle - startAngle);
+      setValue({
+        ...value(),
+        rotate
+      });
+      props.onRotate?.({
+        rotate
+      });
+      updateRotateArrowPosition(_e);
+    },
+    // eslint-disable-next-line solid/reactivity
+    () => {
+      rotating = false;
+      setRotateDirection(false);
+      props.onTransformEnd?.();
+    }, 'none');
+  };
+  const getRotateHandlerProps = (direction, getMouseRotate) => {
+    return {
+      onMouseDown: e => {
+        onRotateMouseDown(e);
+      },
+      onMouseEnter: e => {
+        if (rotating) return;
+        setRotateDirection(direction);
+        setMouseRotate(getMouseRotate());
+        updateRotateArrowPosition(e);
+      },
+      onMouseMove: e => {
+        if (rotating) return;
+        updateRotateArrowPosition(e);
+      },
+      onMouseLeave: () => {
+        if (rotating) return;
+        setRotateDirection(false);
+        setMouseRotate(0);
+      }
+    };
+  };
+  const [mouseRotate, setMouseRotate] = createSignal(0);
+  const [resizeDirection, setResizeDirection] = createSignal(false);
+  const [resizeArrowPosition, setResizeArrowPosition] = createSignal({
+    x: 0,
+    y: 0
+  });
+  const updateResizeArrowPosition = e => {
+    setResizeArrowPosition({
+      x: e.pageX,
+      y: e.pageY
+    });
+  };
+  const [rotateDirection, setRotateDirection] = createSignal(false);
+  const [rotateArrowPosition, setRotateArrowPosition] = createSignal({
+    x: 0,
+    y: 0
+  });
+  const updateRotateArrowPosition = e => {
+    setRotateArrowPosition({
+      x: e.pageX,
+      y: e.pageY
+    });
+  };
+  const convertLayout = (width, height, convertPoint, _convertLayout) => {
+    const topLeftPoint = new DOMPoint(0, 0);
+    const topRightPoint = new DOMPoint(width, 0);
+    const bottomRightPoint = new DOMPoint(width, height);
+    const bottomLeftPoint = new DOMPoint(0, height);
+    const leftCenterPoint = new DOMPoint((topLeftPoint.x + bottomLeftPoint.x) / 2, (topLeftPoint.y + bottomLeftPoint.y) / 2);
+    const rightCenterPoint = new DOMPoint((topRightPoint.x + bottomRightPoint.x) / 2, (topRightPoint.y + bottomRightPoint.y) / 2);
+    const xCenterLine = [leftCenterPoint, rightCenterPoint];
+    const topCenterPoint = new DOMPoint((topLeftPoint.x + topRightPoint.x) / 2, (topLeftPoint.y + topRightPoint.y) / 2);
+    const bottomCenterPoint = new DOMPoint((bottomLeftPoint.x + bottomRightPoint.x) / 2, (bottomLeftPoint.y + bottomRightPoint.y) / 2);
+    const yCenterLine = [topCenterPoint, bottomCenterPoint];
+    const layoutValue = {
+      topLeftPoint,
+      topRightPoint,
+      bottomRightPoint,
+      bottomLeftPoint,
+      xCenterLine,
+      yCenterLine
+    };
+    if (_convertLayout) return _convertLayout(layoutValue);
+    return {
+      topLeftPoint: convertPoint(layoutValue.topLeftPoint),
+      topRightPoint: convertPoint(layoutValue.topRightPoint),
+      bottomRightPoint: convertPoint(layoutValue.bottomRightPoint),
+      bottomLeftPoint: convertPoint(layoutValue.bottomLeftPoint),
+      xCenterLine: xCenterLine.map(point => convertPoint(point)),
+      yCenterLine: yCenterLine.map(point => convertPoint(point))
+    };
+  };
+  const layoutInWorld = createMemo(() => {
+    const {
+      width,
+      height
+    } = value();
+    return convertLayout(width, height, localToWorld, props.localToWorldLayout);
+  });
+  const parentToWorld = point => {
+    return props.parentToWorldPoint ? props.parentToWorldPoint(point) : point;
+  };
+  const parentLayoutInWorld = createMemo(() => {
+    const {
+      width = 0,
+      height = 0
+    } = props.adsorb ?? {};
+    return convertLayout(width, height, parentToWorld, props.parentToWorldLayout);
+  });
+  const pathD = createMemo(() => {
+    const {
+      topLeftPoint,
+      topRightPoint,
+      bottomRightPoint,
+      bottomLeftPoint
+    } = layoutInWorld();
+    const points = [topLeftPoint, topRightPoint, bottomRightPoint, bottomLeftPoint].flatMap(p => (Array.isArray(p) ? p : [p]).filter(v => v));
+    return `${points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x},${p.y}`).join(' ')} Z`;
+  });
+  const resizeArrowRotate = mouseRotate;
+  const rotateArrowRotate = createMemo(() => {
+    return mouseRotate() + Math.PI / 4;
+  });
+  const transformOrigin = createMemo(() => localToWorld(parseTransformOrigin(value().width, value().height)));
+  setRef(props, {
+    enterMove: onMoveMouseDown,
+    enterResize: onResizeMouseDown,
+    enterRotate: onRotateMouseDown
+  });
+  const viewBoxStr = createMemo(() => {
+    if (!props.viewBox) return;
+    const {
+      x,
+      y,
+      width,
+      height
+    } = props.viewBox;
+    return [x, y, width, height].join(' ');
+  });
+  return createComponent(Element, {
+    ref(r$) {
+      var _ref$ = ref;
+      typeof _ref$ === "function" ? _ref$(r$) : ref = r$;
+    },
+    "class": "relative",
+    get children() {
+      var _el$ = _tmpl$2(),
+        _el$2 = _el$.firstChild;
+      _el$2.$$mousedown = onMoveMouseDown;
+      insert(_el$, createComponent(Edge, {
+        direction: "top",
+        get layout() {
+          return layoutInWorld();
+        },
+        get centerLine() {
+          return layoutInWorld().yCenterLine;
+        },
+        getResizeHandlerProps: getResizeHandlerProps
+      }), null);
+      insert(_el$, createComponent(Edge, {
+        direction: "bottom",
+        get layout() {
+          return layoutInWorld();
+        },
+        get centerLine() {
+          return layoutInWorld().yCenterLine;
+        },
+        getResizeHandlerProps: getResizeHandlerProps
+      }), null);
+      insert(_el$, createComponent(Edge, {
+        direction: "left",
+        get layout() {
+          return layoutInWorld();
+        },
+        get centerLine() {
+          return layoutInWorld().xCenterLine;
+        },
+        getResizeHandlerProps: getResizeHandlerProps
+      }), null);
+      insert(_el$, createComponent(Edge, {
+        direction: "right",
+        get layout() {
+          return layoutInWorld();
+        },
+        get centerLine() {
+          return layoutInWorld().xCenterLine;
+        },
+        getResizeHandlerProps: getResizeHandlerProps
+      }), null);
+      insert(_el$, createComponent(Show, {
+        get when() {
+          return layoutInWorld().topLeftPoint instanceof DOMPoint;
+        },
+        get children() {
+          return createComponent(Vertex, {
+            direction: "topLeft",
+            get layout() {
+              return layoutInWorld();
+            },
+            getResizeHandlerProps: getResizeHandlerProps,
+            getRotateHandlerProps: getRotateHandlerProps
+          });
+        }
+      }), null);
+      insert(_el$, createComponent(Show, {
+        get when() {
+          return layoutInWorld().topRightPoint instanceof DOMPoint;
+        },
+        get children() {
+          return createComponent(Vertex, {
+            direction: "topRight",
+            get layout() {
+              return layoutInWorld();
+            },
+            getResizeHandlerProps: getResizeHandlerProps,
+            getRotateHandlerProps: getRotateHandlerProps
+          });
+        }
+      }), null);
+      insert(_el$, createComponent(Show, {
+        get when() {
+          return layoutInWorld().bottomLeftPoint instanceof DOMPoint;
+        },
+        get children() {
+          return createComponent(Vertex, {
+            direction: "bottomLeft",
+            get layout() {
+              return layoutInWorld();
+            },
+            getResizeHandlerProps: getResizeHandlerProps,
+            getRotateHandlerProps: getRotateHandlerProps
+          });
+        }
+      }), null);
+      insert(_el$, createComponent(Show, {
+        get when() {
+          return layoutInWorld().bottomRightPoint instanceof DOMPoint;
+        },
+        get children() {
+          return createComponent(Vertex, {
+            direction: "bottomRight",
+            get layout() {
+              return layoutInWorld();
+            },
+            getResizeHandlerProps: getResizeHandlerProps,
+            getRotateHandlerProps: getRotateHandlerProps
+          });
+        }
+      }), null);
+      insert(_el$, createComponent(Show, {
+        get when() {
+          return adsorbLine()?.top;
+        },
+        get children() {
+          return createComponent(ParentEdge, {
+            direction: "top",
+            get layout() {
+              return parentLayoutInWorld();
+            }
+          });
+        }
+      }), null);
+      insert(_el$, createComponent(Show, {
+        get when() {
+          return adsorbLine()?.bottom;
+        },
+        get children() {
+          return createComponent(ParentEdge, {
+            direction: "bottom",
+            get layout() {
+              return parentLayoutInWorld();
+            }
+          });
+        }
+      }), null);
+      insert(_el$, createComponent(Show, {
+        get when() {
+          return adsorbLine()?.left;
+        },
+        get children() {
+          return createComponent(ParentEdge, {
+            direction: "left",
+            get layout() {
+              return parentLayoutInWorld();
+            }
+          });
+        }
+      }), null);
+      insert(_el$, createComponent(Show, {
+        get when() {
+          return adsorbLine()?.right;
+        },
+        get children() {
+          return createComponent(ParentEdge, {
+            direction: "right",
+            get layout() {
+              return parentLayoutInWorld();
+            }
+          });
+        }
+      }), null);
+      insert(_el$, createComponent(Show, {
+        get when() {
+          return adsorbLine()?.centerX;
+        },
+        get children() {
+          return createComponent(ParentCenterLine, {
+            get line() {
+              return parentLayoutInWorld().xCenterLine;
+            }
+          });
+        }
+      }), null);
+      insert(_el$, createComponent(Show, {
+        get when() {
+          return adsorbLine()?.centerY;
+        },
+        get children() {
+          return createComponent(ParentCenterLine, {
+            get line() {
+              return parentLayoutInWorld().yCenterLine;
+            }
+          });
+        }
+      }), null);
+      insert(_el$, createComponent(Show, {
+        get when() {
+          return memo(() => !!props.transformOriginIcon)() && transformOrigin();
+        },
+        get children() {
+          var _el$3 = _tmpl$();
+          insert(_el$3, createComponent(CrosshairSvg, {
+            "class": "absolute [font-size:var(--size)] text-black pointer-events-none",
+            get style() {
+              return {
+                '--size': '14px',
+                top: `calc(${transformOrigin().y}px - var(--size) / 2)`,
+                left: `calc(${transformOrigin().x}px - var(--size) / 2)`
+              };
+            },
+            innerColor: "white",
+            outerColor: "black"
+          }));
+          return _el$3;
+        }
+      }), null);
+      insert(_el$, createComponent(Show, {
+        get when() {
+          return memo(() => !!!resizeDirection())() && rotateDirection();
+        },
+        get children() {
+          return createComponent(Portal, {
+            get children() {
+              return createComponent(RotateArrowSvg, {
+                "class": "absolute pointer-events-none text-24px",
+                get style() {
+                  return {
+                    top: `${rotateArrowPosition().y}px`,
+                    left: `${rotateArrowPosition().x}px`,
+                    transform: `translate(-50%, -50%) rotate(${rotateArrowRotate()}rad)`
+                  };
+                }
+              });
+            }
+          });
+        }
+      }), null);
+      insert(_el$, createComponent(Show, {
+        get when() {
+          return resizeDirection();
+        },
+        get children() {
+          return createComponent(Portal, {
+            get children() {
+              return createComponent(Resize, {
+                "class": "absolute pointer-events-none text-24px",
+                get style() {
+                  return {
+                    top: `${resizeArrowPosition().y}px`,
+                    left: `${resizeArrowPosition().x}px`,
+                    transform: `translate(-50%, -50%) rotate(${resizeArrowRotate()}rad)`
+                  };
+                }
+              });
+            }
+          });
+        }
+      }), null);
+      effect(_p$ => {
+        var _v$ = cs('absolute pointer-events-none', !props.viewBox && 'overflow-visible w-1px h-1px'),
+          _v$2 = viewBoxStr(),
+          _v$3 = pathD();
+        _v$ !== _p$.e && setAttribute(_el$, "class", _p$.e = _v$);
+        _v$2 !== _p$.t && setAttribute(_el$, "viewBox", _p$.t = _v$2);
+        _v$3 !== _p$.a && setAttribute(_el$2, "d", _p$.a = _v$3);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined,
+        a: undefined
+      });
+      return _el$;
+    }
+  });
+};
+/**
+ * 根据 point 获取 angle
+ * @param point
+ * @returns
+ */
+const getAngleOfDOMPoint = point => {
+  const angle = Math.atan2(point.y, point.x);
+  return angle < 0 ? Math.PI * 2 + angle : angle;
+};
+const Edge = props => {
+  const startPoint = createMemo(() => {
+    const layout = props.layout;
+    const p = {
+      top: layout.topLeftPoint,
+      right: layout.topRightPoint,
+      bottom: layout.bottomRightPoint,
+      left: layout.bottomLeftPoint
+    }[props.direction];
+    return (Array.isArray(p) ? p[1] : p) ?? new DOMPoint();
+  });
+  const endPoint = createMemo(() => {
+    const layout = props.layout;
+    const p = {
+      top: layout.topRightPoint,
+      right: layout.bottomRightPoint,
+      bottom: layout.bottomLeftPoint,
+      left: layout.topLeftPoint
+    }[props.direction];
+    return (Array.isArray(p) ? p[0] : p) ?? new DOMPoint();
+  });
+  const getMouseRotate = () => {
+    const centerLine = props.centerLine;
+    if (centerLine) {
+      return getAngleOfDOMPoint(subDOMPoint(centerLine[0], centerLine[1]));
+    }
+    return getAngleOfDOMPoint(subDOMPoint(endPoint(), startPoint()));
+  };
+  return [(() => {
+    var _el$4 = _tmpl$3();
+    effect(() => setAttribute(_el$4, "d", `M ${startPoint().x},${startPoint().y} L ${endPoint().x},${endPoint().y}`));
+    return _el$4;
+  })(), (() => {
+    var _el$5 = _tmpl$4();
+    spread(_el$5, mergeProps({
+      get d() {
+        return `M ${startPoint().x},${startPoint().y} L ${endPoint().x},${endPoint().y}`;
+      }
+    }, () => props.getResizeHandlerProps(props.direction, getMouseRotate)), true, false);
+    return _el$5;
+  })()];
+};
+const Vertex = props => {
+  const prevPoint = createMemo(() => {
+    const layout = props.layout;
+    const point = {
+      topLeft: layout.bottomLeftPoint,
+      topRight: layout.topLeftPoint,
+      bottomRight: layout.topRightPoint,
+      bottomLeft: layout.bottomRightPoint
+    }[props.direction];
+    return (Array.isArray(point) ? point[1] : point) ?? new DOMPoint();
+  });
+  const nextPoint = createMemo(() => {
+    const layout = props.layout;
+    const point = {
+      topLeft: layout.topRightPoint,
+      topRight: layout.bottomRightPoint,
+      bottomRight: layout.bottomLeftPoint,
+      bottomLeft: layout.topLeftPoint
+    }[props.direction];
+    return (Array.isArray(point) ? point[0] : point) ?? new DOMPoint();
+  });
+  const currentPoint = createMemo(() => {
+    const layout = props.layout;
+    const point = {
+      topLeft: layout.topLeftPoint,
+      topRight: layout.topRightPoint,
+      bottomRight: layout.bottomRightPoint,
+      bottomLeft: layout.bottomLeftPoint
+    }[props.direction];
+    // 如果 point 不是 DOMPoint 对象，则本组件不需要显示
+    return point instanceof DOMPoint ? point : new DOMPoint();
+  });
+  const startAngle = createMemo(() => getAngleOfDOMPoint(subDOMPoint(nextPoint(), currentPoint())));
+  const _endAngle = createMemo(() => getAngleOfDOMPoint(subDOMPoint(prevPoint(), currentPoint())));
+  const endAngle = createMemo(() => {
+    return _endAngle() < startAngle() ? _endAngle() + Math.PI * 2 : _endAngle();
+  });
+  const centerAngle = createMemo(() => (startAngle() + endAngle()) / 2);
+  const getLayout = size => {
+    const gap = endAngle() - startAngle();
+    let _size = gap > Math.PI / 2 ? size / Math.tan(gap / 2) : size;
+    let translate = {
+      x: Math.cos(centerAngle()) * _size,
+      y: Math.sin(centerAngle()) * _size
+    };
+    const {
+      x,
+      y
+    } = currentPoint();
+    const topLeftPoint = new DOMPoint(x + translate.x, y + translate.y);
+    const bottomRightPoint = new DOMPoint(x - translate.x, y - translate.y);
+    _size = gap > Math.PI / 2 ? size : size * Math.tan(gap / 2);
+    const angle = centerAngle() + Math.PI / 2;
+    translate = {
+      x: Math.cos(angle) * _size,
+      y: Math.sin(angle) * _size
+    };
+    const topRightPoint = new DOMPoint(x + translate.x, y + translate.y);
+    const bottomLeftPoint = new DOMPoint(x - translate.x, y - translate.y);
+    return {
+      topLeftPoint,
+      topRightPoint,
+      bottomRightPoint,
+      bottomLeftPoint
+    };
+  };
+  const layoutToPathD = _layout => {
+    const {
+      topLeftPoint,
+      topRightPoint,
+      bottomRightPoint,
+      bottomLeftPoint
+    } = _layout;
+    return `M ${topLeftPoint.x},${topLeftPoint.y} L ${topRightPoint.x},${topRightPoint.y} L ${bottomRightPoint.x},${bottomRightPoint.y} L ${bottomLeftPoint.x},${bottomLeftPoint.y} Z`;
+  };
+  const rotateSize = 24;
+  // 旋转部份的 layout
+  const rotateLayout = createMemo(() => getLayout(rotateSize));
+  // 显示部份的 layout
+  const displayLayout = createMemo(() => getLayout(8));
+  // 调整尺寸部份的 layout
+  const reseizLayout = createMemo(() => {
+    const {
+      topLeftPoint,
+      topRightPoint,
+      bottomRightPoint,
+      bottomLeftPoint
+    } = getLayout(rotateSize / 2);
+    const _rotateLayout = rotateLayout();
+    const translate = subDOMPoint(_rotateLayout.bottomRightPoint, bottomRightPoint);
+    return {
+      topLeftPoint: subDOMPoint(topLeftPoint, translate),
+      topRightPoint: subDOMPoint(topRightPoint, translate),
+      bottomRightPoint: subDOMPoint(bottomRightPoint, translate),
+      bottomLeftPoint: subDOMPoint(bottomLeftPoint, translate)
+    };
+  });
+  const getMouseRotate = () => {
+    const layout = props.layout;
+    // 相对的点
+    const oppositePoint = {
+      topLeft: layout.bottomRightPoint,
+      topRight: layout.bottomLeftPoint,
+      bottomRight: layout.topLeftPoint,
+      bottomLeft: layout.topRightPoint
+    }[props.direction];
+    if (oppositePoint instanceof DOMPoint) {
+      return getAngleOfDOMPoint(subDOMPoint(oppositePoint, currentPoint())) + Math.PI / 2;
+    }
+    return centerAngle() + Math.PI / 2;
+  };
+  return [(() => {
+    var _el$6 = _tmpl$5();
+    spread(_el$6, mergeProps({
+      get d() {
+        return layoutToPathD(rotateLayout());
+      }
+    }, () => props.getRotateHandlerProps(props.direction, getMouseRotate)), true, false);
+    return _el$6;
+  })(), (() => {
+    var _el$7 = _tmpl$6();
+    spread(_el$7, mergeProps({
+      get d() {
+        return layoutToPathD(displayLayout());
+      }
+    }, () => props.getResizeHandlerProps(props.direction, getMouseRotate)), true, false);
+    return _el$7;
+  })(), (() => {
+    var _el$8 = _tmpl$7();
+    spread(_el$8, mergeProps({
+      get d() {
+        return layoutToPathD(reseizLayout());
+      }
+    }, () => props.getResizeHandlerProps(props.direction, getMouseRotate)), true, false);
+    return _el$8;
+  })()];
+};
+const ParentEdge = props => {
+  const startPoint = createMemo(() => {
+    const layout = props.layout;
+    const p = {
+      top: layout.topLeftPoint,
+      right: layout.topRightPoint,
+      bottom: layout.bottomRightPoint,
+      left: layout.bottomLeftPoint
+    }[props.direction];
+    return (Array.isArray(p) ? p[1] : p) ?? new DOMPoint();
+  });
+  const endPoint = createMemo(() => {
+    const layout = props.layout;
+    const p = {
+      top: layout.topRightPoint,
+      right: layout.bottomRightPoint,
+      bottom: layout.bottomLeftPoint,
+      left: layout.topLeftPoint
+    }[props.direction];
+    return (Array.isArray(p) ? p[0] : p) ?? new DOMPoint();
+  });
+  return (() => {
+    var _el$9 = _tmpl$3();
+    effect(() => setAttribute(_el$9, "d", `M ${startPoint().x},${startPoint().y} L ${endPoint().x},${endPoint().y}`));
+    return _el$9;
+  })();
+};
+const ParentCenterLine = props => {
+  return memo(() => memo(() => !!props.line)() ? (() => {
+    var _el$10 = _tmpl$3();
+    effect(() => setAttribute(_el$10, "d", `M ${props.line[0].x},${props.line[0].y} L ${props.line[1].x},${props.line[1].y}`));
+    return _el$10;
+  })() : null);
+};
+delegateEvents(["mousedown"]);
+
+export { Transformer as default };