@excalidraw/excalidraw 0.17.1-7441-0269e5a → 0.17.1-7441-4c9a6f4

package/dist/packages/excalidraw/scene/Shape.js

@@ -0,0 +1,322 @@
+import { getDiamondPoints, getArrowheadPoints } from "../element";
+import { isPathALoop, getCornerRadius } from "../math";
+import { generateFreeDrawShape } from "../renderer/renderElement";
+import { isTransparent, assertNever } from "../utils";
+import { simplify } from "points-on-curve";
+import { ROUGHNESS } from "../constants";
+import { isEmbeddableElement, isIframeElement, isIframeLikeElement, isLinearElement, } from "../element/typeChecks";
+import { canChangeRoundness } from "./comparisons";
+const getDashArrayDashed = (strokeWidth) => [8, 8 + strokeWidth];
+const getDashArrayDotted = (strokeWidth) => [1.5, 6 + strokeWidth];
+function adjustRoughness(element) {
+    const roughness = element.roughness;
+    const maxSize = Math.max(element.width, element.height);
+    const minSize = Math.min(element.width, element.height);
+    // don't reduce roughness if
+    if (
+    // both sides relatively big
+    (minSize >= 20 && maxSize >= 50) ||
+        // is round & both sides above 15px
+        (minSize >= 15 &&
+            !!element.roundness &&
+            canChangeRoundness(element.type)) ||
+        // relatively long linear element
+        (isLinearElement(element) && maxSize >= 50)) {
+        return roughness;
+    }
+    return Math.min(roughness / (maxSize < 10 ? 3 : 2), 2.5);
+}
+export const generateRoughOptions = (element, continuousPath = false) => {
+    const options = {
+        seed: element.seed,
+        strokeLineDash: element.strokeStyle === "dashed"
+            ? getDashArrayDashed(element.strokeWidth)
+            : element.strokeStyle === "dotted"
+                ? getDashArrayDotted(element.strokeWidth)
+                : undefined,
+        // for non-solid strokes, disable multiStroke because it tends to make
+        // dashes/dots overlay each other
+        disableMultiStroke: element.strokeStyle !== "solid",
+        // for non-solid strokes, increase the width a bit to make it visually
+        // similar to solid strokes, because we're also disabling multiStroke
+        strokeWidth: element.strokeStyle !== "solid"
+            ? element.strokeWidth + 0.5
+            : element.strokeWidth,
+        // when increasing strokeWidth, we must explicitly set fillWeight and
+        // hachureGap because if not specified, roughjs uses strokeWidth to
+        // calculate them (and we don't want the fills to be modified)
+        fillWeight: element.strokeWidth / 2,
+        hachureGap: element.strokeWidth * 4,
+        roughness: adjustRoughness(element),
+        stroke: element.strokeColor,
+        preserveVertices: continuousPath || element.roughness < ROUGHNESS.cartoonist,
+    };
+    switch (element.type) {
+        case "rectangle":
+        case "iframe":
+        case "embeddable":
+        case "diamond":
+        case "ellipse": {
+            options.fillStyle = element.fillStyle;
+            options.fill = isTransparent(element.backgroundColor)
+                ? undefined
+                : element.backgroundColor;
+            if (element.type === "ellipse") {
+                options.curveFitting = 1;
+            }
+            return options;
+        }
+        case "line":
+        case "freedraw": {
+            if (isPathALoop(element.points)) {
+                options.fillStyle = element.fillStyle;
+                options.fill =
+                    element.backgroundColor === "transparent"
+                        ? undefined
+                        : element.backgroundColor;
+            }
+            return options;
+        }
+        case "arrow":
+            return options;
+        default: {
+            throw new Error(`Unimplemented type ${element.type}`);
+        }
+    }
+};
+const modifyIframeLikeForRoughOptions = (element, isExporting) => {
+    if (isIframeLikeElement(element) &&
+        (isExporting || (isEmbeddableElement(element) && !element.validated)) &&
+        isTransparent(element.backgroundColor) &&
+        isTransparent(element.strokeColor)) {
+        return {
+            ...element,
+            roughness: 0,
+            backgroundColor: "#d3d3d3",
+            fillStyle: "solid",
+        };
+    }
+    else if (isIframeElement(element)) {
+        return {
+            ...element,
+            strokeColor: isTransparent(element.strokeColor)
+                ? "#000000"
+                : element.strokeColor,
+            backgroundColor: isTransparent(element.backgroundColor)
+                ? "#f4f4f6"
+                : element.backgroundColor,
+        };
+    }
+    return element;
+};
+const getArrowheadShapes = (element, shape, position, arrowhead, generator, options, canvasBackgroundColor) => {
+    const arrowheadPoints = getArrowheadPoints(element, shape, position, arrowhead);
+    if (arrowheadPoints === null) {
+        return [];
+    }
+    switch (arrowhead) {
+        case "dot":
+        case "circle":
+        case "circle_outline": {
+            const [x, y, diameter] = arrowheadPoints;
+            // always use solid stroke for arrowhead
+            delete options.strokeLineDash;
+            return [
+                generator.circle(x, y, diameter, {
+                    ...options,
+                    fill: arrowhead === "circle_outline"
+                        ? canvasBackgroundColor
+                        : element.strokeColor,
+                    fillStyle: "solid",
+                    stroke: element.strokeColor,
+                    roughness: Math.min(0.5, options.roughness || 0),
+                }),
+            ];
+        }
+        case "triangle":
+        case "triangle_outline": {
+            const [x, y, x2, y2, x3, y3] = arrowheadPoints;
+            // always use solid stroke for arrowhead
+            delete options.strokeLineDash;
+            return [
+                generator.polygon([
+                    [x, y],
+                    [x2, y2],
+                    [x3, y3],
+                    [x, y],
+                ], {
+                    ...options,
+                    fill: arrowhead === "triangle_outline"
+                        ? canvasBackgroundColor
+                        : element.strokeColor,
+                    fillStyle: "solid",
+                    roughness: Math.min(1, options.roughness || 0),
+                }),
+            ];
+        }
+        case "diamond":
+        case "diamond_outline": {
+            const [x, y, x2, y2, x3, y3, x4, y4] = arrowheadPoints;
+            // always use solid stroke for arrowhead
+            delete options.strokeLineDash;
+            return [
+                generator.polygon([
+                    [x, y],
+                    [x2, y2],
+                    [x3, y3],
+                    [x4, y4],
+                    [x, y],
+                ], {
+                    ...options,
+                    fill: arrowhead === "diamond_outline"
+                        ? canvasBackgroundColor
+                        : element.strokeColor,
+                    fillStyle: "solid",
+                    roughness: Math.min(1, options.roughness || 0),
+                }),
+            ];
+        }
+        case "bar":
+        case "arrow":
+        default: {
+            const [x2, y2, x3, y3, x4, y4] = arrowheadPoints;
+            if (element.strokeStyle === "dotted") {
+                // for dotted arrows caps, reduce gap to make it more legible
+                const dash = getDashArrayDotted(element.strokeWidth - 1);
+                options.strokeLineDash = [dash[0], dash[1] - 1];
+            }
+            else {
+                // for solid/dashed, keep solid arrow cap
+                delete options.strokeLineDash;
+            }
+            options.roughness = Math.min(1, options.roughness || 0);
+            return [
+                generator.line(x3, y3, x2, y2, options),
+                generator.line(x4, y4, x2, y2, options),
+            ];
+        }
+    }
+};
+/**
+ * Generates the roughjs shape for given element.
+ *
+ * Low-level. Use `ShapeCache.generateElementShape` instead.
+ *
+ * @private
+ */
+export const _generateElementShape = (element, generator, { isExporting, canvasBackgroundColor, }) => {
+    switch (element.type) {
+        case "rectangle":
+        case "iframe":
+        case "embeddable": {
+            let shape;
+            // this is for rendering the stroke/bg of the embeddable, especially
+            // when the src url is not set
+            if (element.roundness) {
+                const w = element.width;
+                const h = element.height;
+                const r = getCornerRadius(Math.min(w, h), element);
+                shape = generator.path(`M ${r} 0 L ${w - r} 0 Q ${w} 0, ${w} ${r} L ${w} ${h - r} Q ${w} ${h}, ${w - r} ${h} L ${r} ${h} Q 0 ${h}, 0 ${h - r} L 0 ${r} Q 0 0, ${r} 0`, generateRoughOptions(modifyIframeLikeForRoughOptions(element, isExporting), true));
+            }
+            else {
+                shape = generator.rectangle(0, 0, element.width, element.height, generateRoughOptions(modifyIframeLikeForRoughOptions(element, isExporting), false));
+            }
+            return shape;
+        }
+        case "diamond": {
+            let shape;
+            const [topX, topY, rightX, rightY, bottomX, bottomY, leftX, leftY] = getDiamondPoints(element);
+            if (element.roundness) {
+                const verticalRadius = getCornerRadius(Math.abs(topX - leftX), element);
+                const horizontalRadius = getCornerRadius(Math.abs(rightY - topY), element);
+                shape = generator.path(`M ${topX + verticalRadius} ${topY + horizontalRadius} L ${rightX - verticalRadius} ${rightY - horizontalRadius}
+            C ${rightX} ${rightY}, ${rightX} ${rightY}, ${rightX - verticalRadius} ${rightY + horizontalRadius}
+            L ${bottomX + verticalRadius} ${bottomY - horizontalRadius}
+            C ${bottomX} ${bottomY}, ${bottomX} ${bottomY}, ${bottomX - verticalRadius} ${bottomY - horizontalRadius}
+            L ${leftX + verticalRadius} ${leftY + horizontalRadius}
+            C ${leftX} ${leftY}, ${leftX} ${leftY}, ${leftX + verticalRadius} ${leftY - horizontalRadius}
+            L ${topX - verticalRadius} ${topY + horizontalRadius}
+            C ${topX} ${topY}, ${topX} ${topY}, ${topX + verticalRadius} ${topY + horizontalRadius}`, generateRoughOptions(element, true));
+            }
+            else {
+                shape = generator.polygon([
+                    [topX, topY],
+                    [rightX, rightY],
+                    [bottomX, bottomY],
+                    [leftX, leftY],
+                ], generateRoughOptions(element));
+            }
+            return shape;
+        }
+        case "ellipse": {
+            const shape = generator.ellipse(element.width / 2, element.height / 2, element.width, element.height, generateRoughOptions(element));
+            return shape;
+        }
+        case "line":
+        case "arrow": {
+            let shape;
+            const options = generateRoughOptions(element);
+            // points array can be empty in the beginning, so it is important to add
+            // initial position to it
+            const points = element.points.length ? element.points : [[0, 0]];
+            // curve is always the first element
+            // this simplifies finding the curve for an element
+            if (!element.roundness) {
+                if (options.fill) {
+                    shape = [generator.polygon(points, options)];
+                }
+                else {
+                    shape = [generator.linearPath(points, options)];
+                }
+            }
+            else {
+                shape = [generator.curve(points, options)];
+            }
+            // add lines only in arrow
+            if (element.type === "arrow") {
+                const { startArrowhead = null, endArrowhead = "arrow" } = element;
+                if (startArrowhead !== null) {
+                    const shapes = getArrowheadShapes(element, shape, "start", startArrowhead, generator, options, canvasBackgroundColor);
+                    shape.push(...shapes);
+                }
+                if (endArrowhead !== null) {
+                    if (endArrowhead === undefined) {
+                        // Hey, we have an old arrow here!
+                    }
+                    const shapes = getArrowheadShapes(element, shape, "end", endArrowhead, generator, options, canvasBackgroundColor);
+                    shape.push(...shapes);
+                }
+            }
+            return shape;
+        }
+        case "freedraw": {
+            let shape;
+            generateFreeDrawShape(element);
+            if (isPathALoop(element.points)) {
+                // generate rough polygon to fill freedraw shape
+                const simplifiedPoints = simplify(element.points, 0.75);
+                shape = generator.curve(simplifiedPoints, {
+                    ...generateRoughOptions(element),
+                    stroke: "none",
+                });
+            }
+            else {
+                shape = null;
+            }
+            return shape;
+        }
+        case "frame":
+        case "magicframe":
+        case "text":
+        case "image": {
+            const shape = null;
+            // we return (and cache) `null` to make sure we don't regenerate
+            // `element.canvas` on rerenders
+            return shape;
+        }
+        default: {
+            assertNever(element, `generateElementShape(): Unimplemented type ${element?.type}`);
+            return null;
+        }
+    }
+};

package/dist/packages/excalidraw/scene/ShapeCache.js

@@ -0,0 +1,42 @@
+import { RoughGenerator } from "roughjs/bin/generator";
+import { elementWithCanvasCache } from "../renderer/renderElement";
+import { _generateElementShape } from "./Shape";
+import { COLOR_PALETTE } from "../colors";
+export class ShapeCache {
+    static rg = new RoughGenerator();
+    static cache = new WeakMap();
+    /**
+     * Retrieves shape from cache if available. Use this only if shape
+     * is optional and you have a fallback in case it's not cached.
+     */
+    static get = (element) => {
+        return ShapeCache.cache.get(element);
+    };
+    static set = (element, shape) => ShapeCache.cache.set(element, shape);
+    static delete = (element) => ShapeCache.cache.delete(element);
+    static destroy = () => {
+        ShapeCache.cache = new WeakMap();
+    };
+    /**
+     * Generates & caches shape for element if not already cached, otherwise
+     * returns cached shape.
+     */
+    static generateElementShape = (element, renderConfig) => {
+        // when exporting, always regenerated to guarantee the latest shape
+        const cachedShape = renderConfig?.isExporting
+            ? undefined
+            : ShapeCache.get(element);
+        // `null` indicates no rc shape applicable for this element type,
+        // but it's considered a valid cache value (= do not regenerate)
+        if (cachedShape !== undefined) {
+            return cachedShape;
+        }
+        elementWithCanvasCache.delete(element);
+        const shape = _generateElementShape(element, ShapeCache.rg, renderConfig || {
+            isExporting: false,
+            canvasBackgroundColor: COLOR_PALETTE.white,
+        });
+        ShapeCache.cache.set(element, shape);
+        return shape;
+    };
+}

package/dist/packages/excalidraw/scene/comparisons.js

@@ -0,0 +1,67 @@
+import { isIframeElement } from "../element/typeChecks";
+export const hasBackground = (type) => type === "rectangle" ||
+    type === "iframe" ||
+    type === "embeddable" ||
+    type === "ellipse" ||
+    type === "diamond" ||
+    type === "line" ||
+    type === "freedraw";
+export const hasStrokeColor = (type) => type !== "image" && type !== "frame" && type !== "magicframe";
+export const hasStrokeWidth = (type) => type === "rectangle" ||
+    type === "iframe" ||
+    type === "embeddable" ||
+    type === "ellipse" ||
+    type === "diamond" ||
+    type === "freedraw" ||
+    type === "arrow" ||
+    type === "line";
+export const hasStrokeStyle = (type) => type === "rectangle" ||
+    type === "iframe" ||
+    type === "embeddable" ||
+    type === "ellipse" ||
+    type === "diamond" ||
+    type === "arrow" ||
+    type === "line";
+export const canChangeRoundness = (type) => type === "rectangle" ||
+    type === "iframe" ||
+    type === "embeddable" ||
+    type === "arrow" ||
+    type === "line" ||
+    type === "diamond";
+export const canHaveArrowheads = (type) => type === "arrow";
+export const getElementAtPosition = (elements, isAtPositionFn) => {
+    let hitElement = null;
+    // We need to to hit testing from front (end of the array) to back (beginning of the array)
+    // because array is ordered from lower z-index to highest and we want element z-index
+    // with higher z-index
+    for (let index = elements.length - 1; index >= 0; --index) {
+        const element = elements[index];
+        if (element.isDeleted) {
+            continue;
+        }
+        if (isAtPositionFn(element)) {
+            hitElement = element;
+            break;
+        }
+    }
+    return hitElement;
+};
+export const getElementsAtPosition = (elements, isAtPositionFn) => {
+    const iframeLikes = [];
+    // The parameter elements comes ordered from lower z-index to higher.
+    // We want to preserve that order on the returned array.
+    // Exception being embeddables which should be on top of everything else in
+    // terms of hit testing.
+    const elsAtPos = elements.filter((element) => {
+        const hit = !element.isDeleted && isAtPositionFn(element);
+        if (hit) {
+            if (isIframeElement(element)) {
+                iframeLikes.push(element);
+                return false;
+            }
+            return true;
+        }
+        return false;
+    });
+    return elsAtPos.concat(iframeLikes);
+};