mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-04-14 16:40:58 -04:00
* feat: support arrow with text * render arrow -> clear rect-> render text * move bound text when linear elements move * fix centering cursor when linear element rotated * fix y coord when new line added and container has 3 points * update text position when 2nd point moved * support adding label on top of 2nd point when 3 points are present * change linear element editor shortcut to cmd+enter and fix tests * scale bound text points when resizing via bounding box * ohh yeah rotation works :) * fix coords when updating text properties * calculate new position after rotation always from original position * rotate the bound text by same angle as parent * don't rotate text and make sure dimensions and coords are always calculated from original point * hardcoding the text width for now * Move the linear element when bound text hit * Rotation working yaay * consider text element angle when editing * refactor * update x2 coords if needed when text updated * simplify * consider bound text to be part of bounding box when hit * show bounding box correctly when multiple element selected * fix typo * support rotating multiple elements * support multiple element resizing * shift bound text to mid point when odd points * Always render linear element handles inside editor after element rendered so point is visible for bound text * Delete bound text when point attached to it deleted * move bound to mid segement mid point when points are even * shift bound text when points nearby deleted and handle segment deletion * Resize working :) * more resize fixes * don't update cache-its breaking delete points, look for better soln * update mid point cache for bound elements when updated * introduce wrapping when resizing * wrap when resize for 2 pointer linear elements * support adding text for linear elements with more than 3 points * export to svg working :) * clip from nearest enclosing element with non transparent color if present when exporting and fill with correct color in canvas * fix snap * use visible elements * Make export to svg work with Mask :) * remove id * mask canvas linear element area where label is added * decide the position of bound text during render * fix coords when editing * fix multiple resize * update cache when bound text version changes * fix masking when rotated * render text in correct position in preview * remove unnecessary code * fix masking when rotating linear element * fix masking with zoom * fix mask in preview for export * fix offsets in export view * fix coords on svg export * fix mask when element rotated in svg * enable double-click to enter text * fix hint * Position cursor correctly and text dimensiosn when height of element is negative * don't allow 2 pointer linear element with bound text width to go beyond min width * code cleanup * fix freedraw * Add padding * don't show vertical align action for linear element containers * Add specs for getBoundTextElementPosition * more specs * move some utils to linearElementEditor.ts * remove only :p * check absoulte coods in test * Add test to hide vertical align for linear eleemnt with bound text * improve export preview * support labels only for arrows * spec * fix large texts * fix tests * fix zooming * enter line editor with cmd+double click * Allow points to move beyond min width/height for 2 pointer arrow with bound text * fix hint for line editing * attempt to fix arrow getting deselected * fix hint and shortcut * Add padding of 5px when creating bound text and add spec * Wrap bound text when arrow binding containers moved * Add spec * remove * set boundTextElementVersion to null if not present * dont use cache when version mismatch * Add a padding of 5px vertically when creating text * Add box sizing content box * Set bound elements when text element created to fix the padding * fix zooming in editor * fix zoom in export * remove globalCompositeOperation and use clearRect instead of fillRect
154 lines
4.1 KiB
TypeScript
154 lines
4.1 KiB
TypeScript
import { AppState } from "../types";
|
|
import {
|
|
ExcalidrawElement,
|
|
ExcalidrawTextElement,
|
|
ExcalidrawLinearElement,
|
|
ExcalidrawBindableElement,
|
|
ExcalidrawGenericElement,
|
|
ExcalidrawFreeDrawElement,
|
|
InitializedExcalidrawImageElement,
|
|
ExcalidrawImageElement,
|
|
ExcalidrawTextElementWithContainer,
|
|
ExcalidrawTextContainer,
|
|
} from "./types";
|
|
|
|
export const isGenericElement = (
|
|
element: ExcalidrawElement | null,
|
|
): element is ExcalidrawGenericElement => {
|
|
return (
|
|
element != null &&
|
|
(element.type === "selection" ||
|
|
element.type === "rectangle" ||
|
|
element.type === "diamond" ||
|
|
element.type === "ellipse")
|
|
);
|
|
};
|
|
|
|
export const isInitializedImageElement = (
|
|
element: ExcalidrawElement | null,
|
|
): element is InitializedExcalidrawImageElement => {
|
|
return !!element && element.type === "image" && !!element.fileId;
|
|
};
|
|
|
|
export const isImageElement = (
|
|
element: ExcalidrawElement | null,
|
|
): element is ExcalidrawImageElement => {
|
|
return !!element && element.type === "image";
|
|
};
|
|
|
|
export const isTextElement = (
|
|
element: ExcalidrawElement | null,
|
|
): element is ExcalidrawTextElement => {
|
|
return element != null && element.type === "text";
|
|
};
|
|
|
|
export const isFreeDrawElement = (
|
|
element?: ExcalidrawElement | null,
|
|
): element is ExcalidrawFreeDrawElement => {
|
|
return element != null && isFreeDrawElementType(element.type);
|
|
};
|
|
|
|
export const isFreeDrawElementType = (
|
|
elementType: ExcalidrawElement["type"],
|
|
): boolean => {
|
|
return elementType === "freedraw";
|
|
};
|
|
|
|
export const isLinearElement = (
|
|
element?: ExcalidrawElement | null,
|
|
): element is ExcalidrawLinearElement => {
|
|
return element != null && isLinearElementType(element.type);
|
|
};
|
|
|
|
export const isArrowElement = (
|
|
element?: ExcalidrawElement | null,
|
|
): element is ExcalidrawLinearElement => {
|
|
return element != null && element.type === "arrow";
|
|
};
|
|
|
|
export const isLinearElementType = (
|
|
elementType: AppState["activeTool"]["type"],
|
|
): boolean => {
|
|
return (
|
|
elementType === "arrow" || elementType === "line" // || elementType === "freedraw"
|
|
);
|
|
};
|
|
|
|
export const isBindingElement = (
|
|
element?: ExcalidrawElement | null,
|
|
includeLocked = true,
|
|
): element is ExcalidrawLinearElement => {
|
|
return (
|
|
element != null &&
|
|
(!element.locked || includeLocked === true) &&
|
|
isBindingElementType(element.type)
|
|
);
|
|
};
|
|
|
|
export const isBindingElementType = (
|
|
elementType: AppState["activeTool"]["type"],
|
|
): boolean => {
|
|
return elementType === "arrow";
|
|
};
|
|
|
|
export const isBindableElement = (
|
|
element: ExcalidrawElement | null,
|
|
includeLocked = true,
|
|
): element is ExcalidrawBindableElement => {
|
|
return (
|
|
element != null &&
|
|
(!element.locked || includeLocked === true) &&
|
|
(element.type === "rectangle" ||
|
|
element.type === "diamond" ||
|
|
element.type === "ellipse" ||
|
|
element.type === "image" ||
|
|
(element.type === "text" && !element.containerId))
|
|
);
|
|
};
|
|
|
|
export const isTextBindableContainer = (
|
|
element: ExcalidrawElement | null,
|
|
includeLocked = true,
|
|
): element is ExcalidrawTextContainer => {
|
|
return (
|
|
element != null &&
|
|
(!element.locked || includeLocked === true) &&
|
|
(element.type === "rectangle" ||
|
|
element.type === "diamond" ||
|
|
element.type === "ellipse" ||
|
|
element.type === "image" ||
|
|
isArrowElement(element))
|
|
);
|
|
};
|
|
|
|
export const isExcalidrawElement = (element: any): boolean => {
|
|
return (
|
|
element?.type === "text" ||
|
|
element?.type === "diamond" ||
|
|
element?.type === "rectangle" ||
|
|
element?.type === "ellipse" ||
|
|
element?.type === "arrow" ||
|
|
element?.type === "freedraw" ||
|
|
element?.type === "line"
|
|
);
|
|
};
|
|
|
|
export const hasBoundTextElement = (
|
|
element: ExcalidrawElement | null,
|
|
): element is ExcalidrawBindableElement => {
|
|
return (
|
|
isBindableElement(element) &&
|
|
!!element.boundElements?.some(({ type }) => type === "text")
|
|
);
|
|
};
|
|
|
|
export const isBoundToContainer = (
|
|
element: ExcalidrawElement | null,
|
|
): element is ExcalidrawTextElementWithContainer => {
|
|
return (
|
|
element !== null &&
|
|
"containerId" in element &&
|
|
element.containerId !== null &&
|
|
isTextElement(element)
|
|
);
|
|
};
|