tldraw/dist-esm/lib/shapes/geo/GeoShapeUtil.mjs

A tiny little drawing editor.

import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import {
  BaseBoxShapeUtil,
  Box,
  Ellipse2d,
  Group2d,
  HALF_PI,
  HTMLContainer,
  PI2,
  Polygon2d,
  Polyline2d,
  Rectangle2d,
  SVGContainer,
  Stadium2d,
  Vec,
  exhaustiveSwitchError,
  geoShapeMigrations,
  geoShapeProps,
  getDefaultColorTheme,
  getFontsFromRichText,
  getPolygonVertices,
  lerp,
  toRichText,
  useValue
} from "@tldraw/editor";
import isEqual from "lodash.isequal";
import {
  isEmptyRichText,
  renderHtmlFromRichTextForMeasurement,
  renderPlaintextFromRichText
} from "../../utils/text/richText.mjs";
import { HyperlinkButton } from "../shared/HyperlinkButton.mjs";
import { RichTextLabel, RichTextSVG } from "../shared/RichTextLabel.mjs";
import {
  FONT_FAMILIES,
  LABEL_FONT_SIZES,
  LABEL_PADDING,
  STROKE_SIZES,
  TEXT_PROPS
} from "../shared/default-shape-constants.mjs";
import { getFillDefForCanvas, getFillDefForExport } from "../shared/defaultStyleDefs.mjs";
import { useDefaultColorTheme } from "../shared/useDefaultColorTheme.mjs";
import { useIsReadyForEditing } from "../shared/useEditablePlainText.mjs";
import { GeoShapeBody } from "./components/GeoShapeBody.mjs";
import {
  cloudOutline,
  getCloudPath,
  getEllipseDrawIndicatorPath,
  getHeartParts,
  getHeartPath,
  getRoundedInkyPolygonPath,
  getRoundedPolygonPoints
} from "./geo-shape-helpers.mjs";
import { getLines } from "./getLines.mjs";
const MIN_SIZE_WITH_LABEL = 17 * 3;
class GeoShapeUtil extends BaseBoxShapeUtil {
  static type = "geo";
  static props = geoShapeProps;
  static migrations = geoShapeMigrations;
  canEdit() {
    return true;
  }
  getDefaultProps() {
    return {
      w: 100,
      h: 100,
      geo: "rectangle",
      color: "black",
      labelColor: "black",
      fill: "none",
      dash: "draw",
      size: "m",
      font: "draw",
      align: "middle",
      verticalAlign: "middle",
      growY: 0,
      url: "",
      scale: 1,
      richText: toRichText("")
    };
  }
  getGeometry(shape) {
    const w = Math.max(1, shape.props.w);
    const h = Math.max(1, shape.props.h + shape.props.growY);
    const cx = w / 2;
    const cy = h / 2;
    const isFilled = shape.props.fill !== "none";
    let body;
    switch (shape.props.geo) {
      case "cloud": {
        body = new Polygon2d({
          points: cloudOutline(w, h, shape.id, shape.props.size, shape.props.scale),
          isFilled
        });
        break;
      }
      case "triangle": {
        body = new Polygon2d({
          points: [new Vec(cx, 0), new Vec(w, h), new Vec(0, h)],
          isFilled
        });
        break;
      }
      case "diamond": {
        body = new Polygon2d({
          points: [new Vec(cx, 0), new Vec(w, cy), new Vec(cx, h), new Vec(0, cy)],
          isFilled
        });
        break;
      }
      case "pentagon": {
        body = new Polygon2d({
          points: getPolygonVertices(w, h, 5),
          isFilled
        });
        break;
      }
      case "hexagon": {
        body = new Polygon2d({
          points: getPolygonVertices(w, h, 6),
          isFilled
        });
        break;
      }
      case "octagon": {
        body = new Polygon2d({
          points: getPolygonVertices(w, h, 8),
          isFilled
        });
        break;
      }
      case "ellipse": {
        body = new Ellipse2d({
          width: w,
          height: h,
          isFilled
        });
        break;
      }
      case "oval": {
        body = new Stadium2d({
          width: w,
          height: h,
          isFilled
        });
        break;
      }
      case "star": {
        const sides = 5;
        const step = PI2 / sides / 2;
        const rightMostIndex = Math.floor(sides / 4) * 2;
        const leftMostIndex = sides * 2 - rightMostIndex;
        const topMostIndex = 0;
        const bottomMostIndex = Math.floor(sides / 2) * 2;
        const maxX = Math.cos(-HALF_PI + rightMostIndex * step) * w / 2;
        const minX = Math.cos(-HALF_PI + leftMostIndex * step) * w / 2;
        const minY = Math.sin(-HALF_PI + topMostIndex * step) * h / 2;
        const maxY = Math.sin(-HALF_PI + bottomMostIndex * step) * h / 2;
        const diffX = w - Math.abs(maxX - minX);
        const diffY = h - Math.abs(maxY - minY);
        const offsetX = w / 2 + minX - (w / 2 - maxX);
        const offsetY = h / 2 + minY - (h / 2 - maxY);
        const ratio = 1;
        const cx2 = (w - offsetX) / 2;
        const cy2 = (h - offsetY) / 2;
        const ox = (w + diffX) / 2;
        const oy = (h + diffY) / 2;
        const ix = ox * ratio / 2;
        const iy = oy * ratio / 2;
        body = new Polygon2d({
          points: Array.from(Array(sides * 2)).map((_, i) => {
            const theta = -HALF_PI + i * step;
            return new Vec(
              cx2 + (i % 2 ? ix : ox) * Math.cos(theta),
              cy2 + (i % 2 ? iy : oy) * Math.sin(theta)
            );
          }),
          isFilled
        });
        break;
      }
      case "rhombus": {
        const offset = Math.min(w * 0.38, h * 0.38);
        body = new Polygon2d({
          points: [new Vec(offset, 0), new Vec(w, 0), new Vec(w - offset, h), new Vec(0, h)],
          isFilled
        });
        break;
      }
      case "rhombus-2": {
        const offset = Math.min(w * 0.38, h * 0.38);
        body = new Polygon2d({
          points: [new Vec(0, 0), new Vec(w - offset, 0), new Vec(w, h), new Vec(offset, h)],
          isFilled
        });
        break;
      }
      case "trapezoid": {
        const offset = Math.min(w * 0.38, h * 0.38);
        body = new Polygon2d({
          points: [new Vec(offset, 0), new Vec(w - offset, 0), new Vec(w, h), new Vec(0, h)],
          isFilled
        });
        break;
      }
      case "arrow-right": {
        const ox = Math.min(w, h) * 0.38;
        const oy = h * 0.16;
        body = new Polygon2d({
          points: [
            new Vec(0, oy),
            new Vec(w - ox, oy),
            new Vec(w - ox, 0),
            new Vec(w, h / 2),
            new Vec(w - ox, h),
            new Vec(w - ox, h - oy),
            new Vec(0, h - oy)
          ],
          isFilled
        });
        break;
      }
      case "arrow-left": {
        const ox = Math.min(w, h) * 0.38;
        const oy = h * 0.16;
        body = new Polygon2d({
          points: [
            new Vec(ox, 0),
            new Vec(ox, oy),
            new Vec(w, oy),
            new Vec(w, h - oy),
            new Vec(ox, h - oy),
            new Vec(ox, h),
            new Vec(0, h / 2)
          ],
          isFilled
        });
        break;
      }
      case "arrow-up": {
        const ox = w * 0.16;
        const oy = Math.min(w, h) * 0.38;
        body = new Polygon2d({
          points: [
            new Vec(w / 2, 0),
            new Vec(w, oy),
            new Vec(w - ox, oy),
            new Vec(w - ox, h),
            new Vec(ox, h),
            new Vec(ox, oy),
            new Vec(0, oy)
          ],
          isFilled
        });
        break;
      }
      case "arrow-down": {
        const ox = w * 0.16;
        const oy = Math.min(w, h) * 0.38;
        body = new Polygon2d({
          points: [
            new Vec(ox, 0),
            new Vec(w - ox, 0),
            new Vec(w - ox, h - oy),
            new Vec(w, h - oy),
            new Vec(w / 2, h),
            new Vec(0, h - oy),
            new Vec(ox, h - oy)
          ],
          isFilled
        });
        break;
      }
      case "check-box":
      case "x-box":
      case "rectangle": {
        body = new Rectangle2d({
          width: w,
          height: h,
          isFilled
        });
        break;
      }
      case "heart": {
        const parts = getHeartParts(w, h);
        const points = parts.reduce((acc, part) => {
          acc.push(...part.vertices);
          return acc;
        }, []);
        body = new Polygon2d({
          points,
          isFilled
        });
        break;
      }
      default: {
        exhaustiveSwitchError(shape.props.geo);
      }
    }
    const unscaledlabelSize = getUnscaledLabelSize(this.editor, shape);
    const unscaledW = w / shape.props.scale;
    const unscaledH = h / shape.props.scale;
    const unscaledminWidth = Math.min(100, unscaledW / 2);
    const unscaledMinHeight = Math.min(
      LABEL_FONT_SIZES[shape.props.size] * TEXT_PROPS.lineHeight + LABEL_PADDING * 2,
      unscaledH / 2
    );
    const unscaledLabelWidth = Math.min(
      unscaledW,
      Math.max(unscaledlabelSize.w, Math.min(unscaledminWidth, Math.max(1, unscaledW - 8)))
    );
    const unscaledLabelHeight = Math.min(
      unscaledH,
      Math.max(unscaledlabelSize.h, Math.min(unscaledMinHeight, Math.max(1, unscaledH - 8)))
    );
    const lines = getLines(shape.props, STROKE_SIZES[shape.props.size] * shape.props.scale);
    const edges = lines ? lines.map((line) => new Polyline2d({ points: line, isInternal: true })) : [];
    return new Group2d({
      children: [
        body,
        new Rectangle2d({
          x: shape.props.align === "start" ? 0 : shape.props.align === "end" ? (unscaledW - unscaledLabelWidth) * shape.props.scale : (unscaledW - unscaledLabelWidth) / 2 * shape.props.scale,
          y: shape.props.verticalAlign === "start" ? 0 : shape.props.verticalAlign === "end" ? (unscaledH - unscaledLabelHeight) * shape.props.scale : (unscaledH - unscaledLabelHeight) / 2 * shape.props.scale,
          width: unscaledLabelWidth * shape.props.scale,
          height: unscaledLabelHeight * shape.props.scale,
          isFilled: true,
          isLabel: true
        }),
        ...edges
      ]
    });
  }
  getHandleSnapGeometry(shape) {
    const geometry = this.getGeometry(shape);
    const outline = geometry.children[0];
    switch (shape.props.geo) {
      case "arrow-down":
      case "arrow-left":
      case "arrow-right":
      case "arrow-up":
      case "check-box":
      case "diamond":
      case "hexagon":
      case "octagon":
      case "pentagon":
      case "rectangle":
      case "rhombus":
      case "rhombus-2":
      case "star":
      case "trapezoid":
      case "triangle":
      case "x-box":
        return { outline, points: [...outline.vertices, geometry.bounds.center] };
      case "cloud":
      case "ellipse":
      case "heart":
      case "oval":
        return { outline, points: [geometry.bounds.center] };
      default:
        exhaustiveSwitchError(shape.props.geo);
    }
  }
  getText(shape) {
    return renderPlaintextFromRichText(this.editor, shape.props.richText);
  }
  getFontFaces(shape) {
    return getFontsFromRichText(this.editor, shape.props.richText, {
      family: `tldraw_${shape.props.font}`,
      weight: "normal",
      style: "normal"
    });
  }
  component(shape) {
    const { id, type, props } = shape;
    const { fill, font, align, verticalAlign, size, richText } = props;
    const theme = useDefaultColorTheme();
    const { editor } = this;
    const isOnlySelected = useValue(
      "isGeoOnlySelected",
      () => shape.id === editor.getOnlySelectedShapeId(),
      [editor]
    );
    const isReadyForEditing = useIsReadyForEditing(editor, shape.id);
    const isEmpty = isEmptyRichText(shape.props.richText);
    const showHtmlContainer = isReadyForEditing || !isEmpty;
    const isForceSolid = useValue("force solid", () => editor.getZoomLevel() < 0.2, [editor]);
    return /* @__PURE__ */ jsxs(Fragment, { children: [
      /* @__PURE__ */ jsx(SVGContainer, { children: /* @__PURE__ */ jsx(GeoShapeBody, { shape, shouldScale: true, forceSolid: isForceSolid }) }),
      showHtmlContainer && /* @__PURE__ */ jsx(
        HTMLContainer,
        {
          style: {
            overflow: "hidden",
            width: shape.props.w,
            height: shape.props.h + props.growY
          },
          children: /* @__PURE__ */ jsx(
            RichTextLabel,
            {
              shapeId: id,
              type,
              font,
              fontSize: LABEL_FONT_SIZES[size] * shape.props.scale,
              lineHeight: TEXT_PROPS.lineHeight,
              padding: LABEL_PADDING * shape.props.scale,
              fill,
              align,
              verticalAlign,
              richText,
              isSelected: isOnlySelected,
              labelColor: theme[props.labelColor].solid,
              wrap: true
            }
          )
        }
      ),
      shape.props.url && /* @__PURE__ */ jsx(HyperlinkButton, { url: shape.props.url })
    ] });
  }
  indicator(shape) {
    const geometry = this.editor.getShapeGeometry(shape);
    const isZoomedOut = useValue("isZoomedOut", () => this.editor.getZoomLevel() < 0.25, [
      this.editor
    ]);
    const path = getIndicatorPath(shape, geometry, isZoomedOut);
    return /* @__PURE__ */ jsx("path", { d: path });
  }
  toSvg(shape, ctx) {
    const newShape = {
      ...shape,
      props: {
        ...shape.props,
        w: shape.props.w / shape.props.scale,
        h: shape.props.h / shape.props.scale
      }
    };
    const props = newShape.props;
    ctx.addExportDef(getFillDefForExport(props.fill));
    let textEl;
    if (!isEmptyRichText(props.richText)) {
      const theme = getDefaultColorTheme(ctx);
      const bounds = new Box(0, 0, props.w, props.h + props.growY);
      textEl = /* @__PURE__ */ jsx(
        RichTextSVG,
        {
          fontSize: LABEL_FONT_SIZES[props.size],
          font: props.font,
          align: props.align,
          verticalAlign: props.verticalAlign,
          richText: props.richText,
          labelColor: theme[props.labelColor].solid,
          bounds,
          padding: LABEL_PADDING * shape.props.scale
        }
      );
    }
    return /* @__PURE__ */ jsxs(Fragment, { children: [
      /* @__PURE__ */ jsx(GeoShapeBody, { shouldScale: false, shape: newShape, forceSolid: false }),
      textEl
    ] });
  }
  getCanvasSvgDefs() {
    return [getFillDefForCanvas()];
  }
  onResize(shape, { handle, newPoint, scaleX, scaleY, initialShape }) {
    const unscaledInitialW = initialShape.props.w / initialShape.props.scale;
    const unscaledInitialH = initialShape.props.h / initialShape.props.scale;
    const unscaledGrowY = initialShape.props.growY / initialShape.props.scale;
    let unscaledW = unscaledInitialW * scaleX;
    let unscaledH = (unscaledInitialH + unscaledGrowY) * scaleY;
    let overShrinkX = 0;
    let overShrinkY = 0;
    const min = MIN_SIZE_WITH_LABEL;
    if (!isEmptyRichText(shape.props.richText)) {
      let newW = Math.max(Math.abs(unscaledW), min);
      let newH = Math.max(Math.abs(unscaledH), min);
      if (newW < min && newH === min) newW = min;
      if (newW === min && newH < min) newH = min;
      const unscaledLabelSize = getUnscaledLabelSize(this.editor, {
        ...shape,
        props: {
          ...shape.props,
          w: newW * shape.props.scale,
          h: newH * shape.props.scale
        }
      });
      const nextW = Math.max(Math.abs(unscaledW), unscaledLabelSize.w) * Math.sign(unscaledW);
      const nextH = Math.max(Math.abs(unscaledH), unscaledLabelSize.h) * Math.sign(unscaledH);
      overShrinkX = Math.abs(nextW) - Math.abs(unscaledW);
      overShrinkY = Math.abs(nextH) - Math.abs(unscaledH);
      unscaledW = nextW;
      unscaledH = nextH;
    }
    const scaledW = unscaledW * shape.props.scale;
    const scaledH = unscaledH * shape.props.scale;
    const offset = new Vec(0, 0);
    if (scaleX < 0) {
      offset.x += scaledW;
    }
    if (handle === "left" || handle === "top_left" || handle === "bottom_left") {
      offset.x += scaleX < 0 ? overShrinkX : -overShrinkX;
    }
    if (scaleY < 0) {
      offset.y += scaledH;
    }
    if (handle === "top" || handle === "top_left" || handle === "top_right") {
      offset.y += scaleY < 0 ? overShrinkY : -overShrinkY;
    }
    const { x, y } = offset.rot(shape.rotation).add(newPoint);
    return {
      x,
      y,
      props: {
        w: Math.max(Math.abs(scaledW), 1),
        h: Math.max(Math.abs(scaledH), 1),
        growY: 0
      }
    };
  }
  onBeforeCreate(shape) {
    if (isEmptyRichText(shape.props.richText)) {
      if (shape.props.growY) {
        return {
          ...shape,
          props: {
            ...shape.props,
            growY: 0
          }
        };
      } else {
        return;
      }
    }
    const unscaledPrevHeight = shape.props.h / shape.props.scale;
    const unscaledNextHeight = getUnscaledLabelSize(this.editor, shape).h;
    let growY = null;
    if (unscaledNextHeight > unscaledPrevHeight) {
      growY = unscaledNextHeight - unscaledPrevHeight;
    } else {
      if (shape.props.growY) {
        growY = 0;
      }
    }
    if (growY !== null) {
      return {
        ...shape,
        props: {
          ...shape.props,
          // scale the growY
          growY: growY * shape.props.scale
        }
      };
    }
  }
  onBeforeUpdate(prev, next) {
    if (isEqual(prev.props.richText, next.props.richText) && prev.props.font === next.props.font && prev.props.size === next.props.size) {
      return;
    }
    const wasEmpty = isEmptyRichText(prev.props.richText);
    const isEmpty = isEmptyRichText(next.props.richText);
    if (!wasEmpty && isEmpty) {
      return {
        ...next,
        props: {
          ...next.props,
          growY: 0
        }
      };
    }
    const unscaledPrevWidth = prev.props.w / prev.props.scale;
    const unscaledPrevHeight = prev.props.h / prev.props.scale;
    const unscaledPrevGrowY = prev.props.growY / prev.props.scale;
    const unscaledNextLabelSize = getUnscaledLabelSize(this.editor, next);
    if (wasEmpty && !isEmpty && renderPlaintextFromRichText(this.editor, next.props.richText)) {
      let unscaledW = Math.max(unscaledPrevWidth, unscaledNextLabelSize.w);
      let unscaledH = Math.max(unscaledPrevHeight, unscaledNextLabelSize.h);
      const min = MIN_SIZE_WITH_LABEL;
      if (unscaledPrevWidth < min && unscaledPrevHeight < min) {
        unscaledW = Math.max(unscaledW, min);
        unscaledH = Math.max(unscaledH, min);
        unscaledW = Math.max(unscaledW, unscaledH);
        unscaledH = Math.max(unscaledW, unscaledH);
      }
      return {
        ...next,
        props: {
          ...next.props,
          // Scale the results
          w: unscaledW * next.props.scale,
          h: unscaledH * next.props.scale,
          growY: 0
        }
      };
    }
    let growY = null;
    if (unscaledNextLabelSize.h > unscaledPrevHeight) {
      growY = unscaledNextLabelSize.h - unscaledPrevHeight;
    } else {
      if (unscaledPrevGrowY) {
        growY = 0;
      }
    }
    if (growY !== null) {
      const unscaledNextWidth = next.props.w / next.props.scale;
      return {
        ...next,
        props: {
          ...next.props,
          // Scale the results
          growY: growY * next.props.scale,
          w: Math.max(unscaledNextWidth, unscaledNextLabelSize.w) * next.props.scale
        }
      };
    }
    if (unscaledNextLabelSize.w > unscaledPrevWidth) {
      return {
        ...next,
        props: {
          ...next.props,
          // Scale the results
          w: unscaledNextLabelSize.w * next.props.scale
        }
      };
    }
  }
  onDoubleClick(shape) {
    if (this.editor.inputs.altKey) {
      switch (shape.props.geo) {
        case "rectangle": {
          return {
            ...shape,
            props: {
              geo: "check-box"
            }
          };
        }
        case "check-box": {
          return {
            ...shape,
            props: {
              geo: "rectangle"
            }
          };
        }
      }
    }
    return;
  }
  getInterpolatedProps(startShape, endShape, t) {
    return {
      ...(t > 0.5 ? endShape.props : startShape.props),
      w: lerp(startShape.props.w, endShape.props.w, t),
      h: lerp(startShape.props.h, endShape.props.h, t),
      scale: lerp(startShape.props.scale, endShape.props.scale, t)
    };
  }
}
function getUnscaledLabelSize(editor, shape) {
  const { richText, font, size, w } = shape.props;
  if (!richText || isEmptyRichText(richText)) {
    return { w: 0, h: 0 };
  }
  const minSize = editor.textMeasure.measureText("w", {
    ...TEXT_PROPS,
    fontFamily: FONT_FAMILIES[font],
    fontSize: LABEL_FONT_SIZES[size],
    maxWidth: 100
    // ?
  });
  const sizes = {
    s: 2,
    m: 3.5,
    l: 5,
    xl: 10
  };
  const html = renderHtmlFromRichTextForMeasurement(editor, richText);
  const textSize = editor.textMeasure.measureHtml(html, {
    ...TEXT_PROPS,
    fontFamily: FONT_FAMILIES[font],
    fontSize: LABEL_FONT_SIZES[size],
    minWidth: minSize.w,
    maxWidth: Math.max(
      // Guard because a DOM nodes can't be less 0
      0,
      // A 'w' width that we're setting as the min-width
      Math.ceil(minSize.w + sizes[size]),
      // The actual text size
      Math.ceil(w / shape.props.scale - LABEL_PADDING * 2)
    )
  });
  return {
    w: textSize.w + LABEL_PADDING * 2,
    h: textSize.h + LABEL_PADDING * 2
  };
}
function getIndicatorPath(shape, geometry, isZoomedOut) {
  const { id } = shape;
  const { w, size, geo, dash, scale, growY } = shape.props;
  const strokeWidth = STROKE_SIZES[size];
  const h = shape.props.h + growY;
  switch (geo) {
    case "ellipse": {
      if (dash === "draw") {
        return getEllipseDrawIndicatorPath(id, w, h, strokeWidth);
      }
      return geometry.getSvgPathData(true);
    }
    case "heart": {
      return getHeartPath(w, h);
    }
    case "oval": {
      return geometry.getSvgPathData(true);
    }
    case "cloud": {
      return getCloudPath(w, h, id, size, shape.props.scale);
    }
    default: {
      const outline = geometry instanceof Group2d ? geometry.children[0].vertices : geometry.vertices;
      let path;
      if (dash === "draw" && !isZoomedOut) {
        const polygonPoints = getRoundedPolygonPoints(id, outline, 0, strokeWidth * 2 * scale, 1);
        path = getRoundedInkyPolygonPath(polygonPoints);
      } else {
        path = "M" + outline[0] + "L" + outline.slice(1) + "Z";
      }
      const lines = getLines(shape.props, strokeWidth);
      if (lines) {
        for (const [A, B] of lines) {
          path += `M${A.x},${A.y}L${B.x},${B.y}`;
        }
      }
      return path;
    }
  }
}
export {
  GeoShapeUtil
};
//# sourceMappingURL=GeoShapeUtil.mjs.map