@excalidraw/excalidraw 0.17.1-c0b80a0 → 0.17.1-c329470

package/dist/excalidraw/renderer/interactiveScene.js

@@ -5,15 +5,25 @@ import { renderSelectionElement } from "../renderer/renderElement";
 import { getClientColor, renderRemoteCursors } from "../clients";
 import { isSelectedViaGroup, getSelectedGroupIds, getElementsInGroup, selectGroupsFromGivenElements, } from "../groups";
 import { getOmitSidesForDevice, shouldShowBoundingBox, } from "../element/transformHandles";
-import { arrayToMap, throttleRAF } from "../utils";
+import { arrayToMap, invariant, throttleRAF } from "../utils";
 import { DEFAULT_TRANSFORM_HANDLE_SPACING, FRAME_STYLE, THEME, } from "../constants";
 import { renderSnaps } from "../renderer/renderSnaps";
-import { maxBindingGap } from "../element/binding";
+import { BINDING_HIGHLIGHT_OFFSET, BINDING_HIGHLIGHT_THICKNESS, maxBindingGap, } from "../element/binding";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { bootstrapCanvas, fillCircle, getNormalizedCanvasDimensions, } from "./helpers";
 import oc from "open-color";
 import { isElbowArrow, isFrameLikeElement, isImageElement, isLinearElement, isTextElement, } from "../element/typeChecks";
+import { pointFrom, } from "../../math";
 import { getCornerRadius } from "../shapes";
+const renderElbowArrowMidPointHighlight = (context, appState) => {
+    invariant(appState.selectedLinearElement, "selectedLinearElement is null");
+    const { segmentMidPointHoveredCoords } = appState.selectedLinearElement;
+    invariant(segmentMidPointHoveredCoords, "midPointCoords is null");
+    context.save();
+    context.translate(appState.scrollX, appState.scrollY);
+    highlightPoint(segmentMidPointHoveredCoords, context, appState);
+    context.restore();
+};
 const renderLinearElementPointHighlight = (context, appState, elementsMap) => {
     const { elementId, hoverPointIndex } = appState.selectedLinearElement;
     if (appState.editingLinearElement?.selectedPointsIndices?.includes(hoverPointIndex)) {
@@ -83,16 +93,16 @@ const strokeEllipseWithRotation = (context, width, height, cx, cy, angle) => {
     context.ellipse(cx, cy, width / 2, height / 2, angle, 0, Math.PI * 2);
     context.stroke();
 };
-const renderBindingHighlightForBindableElement = (context, element, elementsMap) => {
+const renderBindingHighlightForBindableElement = (context, element, elementsMap, zoom) => {
     const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
     const width = x2 - x1;
     const height = y2 - y1;
-    const thickness = 10;
-    // So that we don't overlap the element itself
-    const strokeOffset = 4;
     context.strokeStyle = "rgba(0,0,0,.05)";
-    context.lineWidth = thickness - strokeOffset;
-    const padding = strokeOffset / 2 + thickness / 2;
+    // When zooming out, make line width greater for visibility
+    const zoomValue = zoom.value < 1 ? zoom.value : 1;
+    context.lineWidth = BINDING_HIGHLIGHT_THICKNESS / zoomValue;
+    // To ensure the binding highlight doesn't overlap the element itself
+    const padding = context.lineWidth / 2 + BINDING_HIGHLIGHT_OFFSET;
     const radius = getCornerRadius(Math.min(element.width, element.height), element);
     switch (element.type) {
         case "rectangle":
@@ -115,9 +125,9 @@ const renderBindingHighlightForBindableElement = (context, element, elementsMap)
             break;
     }
 };
-const renderBindingHighlightForSuggestedPointBinding = (context, suggestedBinding, elementsMap) => {
+const renderBindingHighlightForSuggestedPointBinding = (context, suggestedBinding, elementsMap, zoom) => {
     const [element, startOrEnd, bindableElement] = suggestedBinding;
-    const threshold = maxBindingGap(bindableElement, bindableElement.width, bindableElement.height);
+    const threshold = maxBindingGap(bindableElement, bindableElement.width, bindableElement.height, zoom);
     context.strokeStyle = "rgba(0,0,0,0)";
     context.fillStyle = "rgba(0,0,0,.05)";
     const pointIndices = startOrEnd === "both" ? [0, -1] : startOrEnd === "start" ? [0] : [-1];
@@ -157,7 +167,7 @@ const renderBindingHighlight = (context, appState, suggestedBinding, elementsMap
         : renderBindingHighlightForBindableElement;
     context.save();
     context.translate(appState.scrollX, appState.scrollY);
-    renderHighlight(context, suggestedBinding, elementsMap);
+    renderHighlight(context, suggestedBinding, elementsMap, appState.zoom);
     context.restore();
 };
 const renderFrameHighlight = (context, appState, frame, elementsMap) => {
@@ -219,28 +229,24 @@ const renderLinearPointHandles = (context, appState, element, elementsMap) => {
         const isSelected = !!appState.editingLinearElement?.selectedPointsIndices?.includes(idx);
         renderSingleLinearPoint(context, appState, point, radius, isSelected);
     });
-    //Rendering segment mid points
-    const midPoints = LinearElementEditor.getEditorMidPoints(element, elementsMap, appState).filter((midPoint) => midPoint !== null);
-    midPoints.forEach((segmentMidPoint) => {
-        if (appState?.selectedLinearElement?.segmentMidPointHoveredCoords &&
-            LinearElementEditor.arePointsEqual(segmentMidPoint, appState.selectedLinearElement.segmentMidPointHoveredCoords)) {
-            // The order of renderingSingleLinearPoint and highLight points is different
-            // inside vs outside editor as hover states are different,
-            // in editor when hovered the original point is not visible as hover state fully covers it whereas outside the
-            // editor original point is visible and hover state is just an outer circle.
-            if (appState.editingLinearElement) {
-                renderSingleLinearPoint(context, appState, segmentMidPoint, radius, false);
-                highlightPoint(segmentMidPoint, context, appState);
+    // Rendering segment mid points
+    if (isElbowArrow(element)) {
+        const fixedSegments = element.fixedSegments?.map((segment) => segment.index) || [];
+        points.slice(0, -1).forEach((p, idx) => {
+            if (!LinearElementEditor.isSegmentTooShort(element, points[idx + 1], points[idx], idx, appState.zoom)) {
+                renderSingleLinearPoint(context, appState, pointFrom((p[0] + points[idx + 1][0]) / 2, (p[1] + points[idx + 1][1]) / 2), POINT_HANDLE_SIZE / 2, false, !fixedSegments.includes(idx + 1));
             }
-            else {
-                highlightPoint(segmentMidPoint, context, appState);
-                renderSingleLinearPoint(context, appState, segmentMidPoint, radius, false);
+        });
+    }
+    else {
+        const midPoints = LinearElementEditor.getEditorMidPoints(element, elementsMap, appState).filter((midPoint, idx, midPoints) => midPoint !== null &&
+            !(isElbowArrow(element) && (idx === 0 || idx === midPoints.length - 1)));
+        midPoints.forEach((segmentMidPoint) => {
+            if (appState.editingLinearElement || points.length === 2) {
+                renderSingleLinearPoint(context, appState, segmentMidPoint, POINT_HANDLE_SIZE / 2, false, true);
             }
-        }
-        else if (appState.editingLinearElement || points.length === 2) {
-            renderSingleLinearPoint(context, appState, segmentMidPoint, POINT_HANDLE_SIZE / 2, false, true);
-        }
-    });
+        });
+    }
     context.restore();
 };
 const renderTransformHandles = (context, renderConfig, appState, transformHandles, angle) => {
@@ -421,7 +427,12 @@ const _renderInteractiveScene = ({ canvas, elementsMap, visibleElements, selecte
         appState.editingLinearElement?.elementId === selectedElements[0].id) {
         renderLinearPointHandles(context, appState, selectedElements[0], elementsMap);
     }
-    if (appState.selectedLinearElement &&
+    if (isElbowArrow(selectedElements[0]) &&
+        appState.selectedLinearElement &&
+        appState.selectedLinearElement.segmentMidPointHoveredCoords) {
+        renderElbowArrowMidPointHighlight(context, appState);
+    }
+    else if (appState.selectedLinearElement &&
         appState.selectedLinearElement.hoverPointIndex >= 0 &&
         !(isElbowArrow(selectedElements[0]) &&
             appState.selectedLinearElement.hoverPointIndex > 0 &&

package/dist/excalidraw/renderer/staticScene.js

@@ -1,6 +1,6 @@
 import { FRAME_STYLE } from "../constants";
 import { getElementAbsoluteCoords } from "../element";
-import { elementOverlapsWithFrame, getTargetFrame, isElementInFrame, } from "../frame";
+import { elementOverlapsWithFrame, getTargetFrame, shouldApplyFrameClip, } from "../frame";
 import { isEmbeddableElement, isIframeLikeElement, isTextElement, } from "../element/typeChecks";
 import { renderElement } from "../renderer/renderElement";
 import { createPlaceholderEmbeddableLabel } from "../element/embeddable";
@@ -148,6 +148,7 @@ const _renderStaticScene = ({ canvas, rc, elementsMap, allElementsMap, visibleEl
             element.groupIds.forEach((groupId) => groupsToBeAddedToFrame.add(groupId));
         }
     });
+    const inFrameGroupsMap = new Map();
     // Paint visible elements
     visibleElements
         .filter((el) => !isIframeLikeElement(el))
@@ -165,8 +166,8 @@ const _renderStaticScene = ({ canvas, rc, elementsMap, allElementsMap, visibleEl
                 appState.frameRendering.enabled &&
                 appState.frameRendering.clip) {
                 const frame = getTargetFrame(element, elementsMap, appState);
-                // TODO do we need to check isElementInFrame here?
-                if (frame && isElementInFrame(element, elementsMap, appState)) {
+                if (frame &&
+                    shouldApplyFrameClip(element, frame, appState, elementsMap, inFrameGroupsMap)) {
                     frameClip(frame, context, renderConfig, appState);
                 }
                 renderElement(element, elementsMap, allElementsMap, rc, context, renderConfig, appState);
@@ -217,7 +218,8 @@ const _renderStaticScene = ({ canvas, rc, elementsMap, allElementsMap, visibleEl
                 appState.frameRendering.clip) {
                 context.save();
                 const frame = getTargetFrame(element, elementsMap, appState);
-                if (frame && isElementInFrame(element, elementsMap, appState)) {
+                if (frame &&
+                    shouldApplyFrameClip(element, frame, appState, elementsMap, inFrameGroupsMap)) {
                     frameClip(frame, context, renderConfig, appState);
                 }
                 render();

package/dist/excalidraw/renderer/staticSvgScene.js

@@ -263,7 +263,7 @@ const renderElementToSvg = (element, elementsMap, rsvg, svgRoot, files, offsetX,
                         image.setAttribute("height", "100%");
                     }
                     symbol.appendChild(image);
-                    root.prepend(symbol);
+                    (root.querySelector("defs") || root).prepend(symbol);
                 }
                 const use = svgRoot.ownerDocument.createElementNS(SVG_NS, "use");
                 use.setAttribute("href", `#${symbolId}`);

package/dist/excalidraw/scene/Shape.js

@@ -5,8 +5,9 @@ import { simplify } from "points-on-curve";
 import { ROUGHNESS } from "../constants";
 import { isElbowArrow, isEmbeddableElement, isIframeElement, isIframeLikeElement, isLinearElement, } from "../element/typeChecks";
 import { canChangeRoundness } from "./comparisons";
-import { pointFrom, pointDistance, } from "../../math";
+import { pointFrom, pointDistance } from "../../math";
 import { getCornerRadius, isPathALoop } from "../shapes";
+import { headingForPointIsHorizontal } from "../element/heading";
 const getDashArrayDashed = (strokeWidth) => [8, 8 + strokeWidth];
 const getDashArrayDotted = (strokeWidth) => [1.5, 6 + strokeWidth];
 function adjustRoughness(element) {
@@ -117,6 +118,13 @@ const getArrowheadShapes = (element, shape, position, arrowhead, generator, opti
     if (arrowheadPoints === null) {
         return [];
     }
+    const generateCrowfootOne = (arrowheadPoints, options) => {
+        if (arrowheadPoints === null) {
+            return [];
+        }
+        const [, , x3, y3, x4, y4] = arrowheadPoints;
+        return [generator.line(x3, y3, x4, y4, options)];
+    };
     switch (arrowhead) {
         case "dot":
         case "circle":
@@ -179,8 +187,12 @@ const getArrowheadShapes = (element, shape, position, arrowhead, generator, opti
                 }),
             ];
         }
+        case "crowfoot_one":
+            return generateCrowfootOne(arrowheadPoints, options);
         case "bar":
         case "arrow":
+        case "crowfoot_many":
+        case "crowfoot_one_or_many":
         default: {
             const [x2, y2, x3, y3, x4, y4] = arrowheadPoints;
             if (element.strokeStyle === "dotted") {
@@ -196,6 +208,9 @@ const getArrowheadShapes = (element, shape, position, arrowhead, generator, opti
             return [
                 generator.line(x3, y3, x2, y2, options),
                 generator.line(x4, y4, x2, y2, options),
+                ...(arrowhead === "crowfoot_one_or_many"
+                    ? generateCrowfootOne(getArrowheadPoints(element, shape, position, "crowfoot_one"), options)
+                    : []),
             ];
         }
     }
@@ -339,36 +354,44 @@ const generateElbowArrowShape = (points, radius) => {
     for (let i = 1; i < points.length - 1; i += 1) {
         const prev = points[i - 1];
         const next = points[i + 1];
+        const point = points[i];
+        const prevIsHorizontal = headingForPointIsHorizontal(point, prev);
+        const nextIsHorizontal = headingForPointIsHorizontal(next, point);
         const corner = Math.min(radius, pointDistance(points[i], next) / 2, pointDistance(points[i], prev) / 2);
-        if (prev[0] < points[i][0] && prev[1] === points[i][1]) {
-            // LEFT
-            subpoints.push([points[i][0] - corner, points[i][1]]);
+        if (prevIsHorizontal) {
+            if (prev[0] < point[0]) {
+                // LEFT
+                subpoints.push([points[i][0] - corner, points[i][1]]);
+            }
+            else {
+                // RIGHT
+                subpoints.push([points[i][0] + corner, points[i][1]]);
+            }
         }
-        else if (prev[0] === points[i][0] && prev[1] < points[i][1]) {
+        else if (prev[1] < point[1]) {
             // UP
             subpoints.push([points[i][0], points[i][1] - corner]);
         }
-        else if (prev[0] > points[i][0] && prev[1] === points[i][1]) {
-            // RIGHT
-            subpoints.push([points[i][0] + corner, points[i][1]]);
-        }
         else {
             subpoints.push([points[i][0], points[i][1] + corner]);
         }
         subpoints.push(points[i]);
-        if (next[0] < points[i][0] && next[1] === points[i][1]) {
-            // LEFT
-            subpoints.push([points[i][0] - corner, points[i][1]]);
+        if (nextIsHorizontal) {
+            if (next[0] < point[0]) {
+                // LEFT
+                subpoints.push([points[i][0] - corner, points[i][1]]);
+            }
+            else {
+                // RIGHT
+                subpoints.push([points[i][0] + corner, points[i][1]]);
+            }
         }
-        else if (next[0] === points[i][0] && next[1] < points[i][1]) {
+        else if (next[1] < point[1]) {
             // UP
             subpoints.push([points[i][0], points[i][1] - corner]);
         }
-        else if (next[0] > points[i][0] && next[1] === points[i][1]) {
-            // RIGHT
-            subpoints.push([points[i][0] + corner, points[i][1]]);
-        }
         else {
+            // DOWN
             subpoints.push([points[i][0], points[i][1] + corner]);
         }
     }