use element API to create regular text, diamond, ellipse and rectangle

This commit is contained in:
Aakansha Doshi 2023-08-03 11:53:54 +05:30
parent 685ece4b3a
commit e49c94f22f

View file

@ -489,64 +489,65 @@ export const convertToExcalidrawElements = (
elementStore.add(startBoundElement); elementStore.add(startBoundElement);
elementStore.add(endBoundElement); elementStore.add(endBoundElement);
} }
} else { } else if (elementWithId.type === "text") {
let excalidrawElement; const fontFamily = elementWithId?.fontFamily || DEFAULT_FONT_FAMILY;
if (elementWithId.type === "text") { const fontSize = elementWithId?.fontSize || DEFAULT_FONT_SIZE;
const fontFamily = elementWithId?.fontFamily || DEFAULT_FONT_FAMILY; const lineHeight =
const fontSize = elementWithId?.fontSize || DEFAULT_FONT_SIZE; elementWithId?.lineHeight || getDefaultLineHeight(fontFamily);
const lineHeight = const text = elementWithId.text ?? "";
elementWithId?.lineHeight || getDefaultLineHeight(fontFamily); const normalizedText = normalizeText(text);
const text = elementWithId.text ?? ""; const metrics = measureText(
const normalizedText = normalizeText(text); normalizedText,
const metrics = measureText( getFontString({ fontFamily, fontSize }),
normalizedText, lineHeight,
getFontString({ fontFamily, fontSize }), );
lineHeight,
);
excalidrawElement = {
width: metrics.width,
height: metrics.height,
fontFamily,
fontSize,
...elementWithId,
};
elementStore.add(excalidrawElement as ExcalidrawTextElement); const textElement = newTextElement({
} else if (elementWithId.type === "arrow") { width: metrics.width,
const { linearElement, startBoundElement, endBoundElement } = height: metrics.height,
bindLinearElementToElement(elementWithId, elementStore); fontFamily,
elementStore.add(linearElement); fontSize,
elementStore.add(startBoundElement); ...elementWithId,
elementStore.add(endBoundElement); });
} else if (elementWithId.type === "line") { elementStore.add(textElement);
const width = elementWithId.width || DEFAULT_LINEAR_ELEMENT_PROPS.width; } else if (elementWithId.type === "arrow") {
const height = const { linearElement, startBoundElement, endBoundElement } =
elementWithId.height || DEFAULT_LINEAR_ELEMENT_PROPS.height; bindLinearElementToElement(elementWithId, elementStore);
const lineElement = newLinearElement({ elementStore.add(linearElement);
width, elementStore.add(startBoundElement);
height, elementStore.add(endBoundElement);
points: [ } else if (elementWithId.type === "line") {
[0, 0], const width = elementWithId.width || DEFAULT_LINEAR_ELEMENT_PROPS.width;
[width, height], const height =
], elementWithId.height || DEFAULT_LINEAR_ELEMENT_PROPS.height;
...elementWithId, const lineElement = newLinearElement({
}); width,
elementStore.add(lineElement); height,
} else if (elementWithId.type === "image") { points: [
const imageElement = newImageElement({ [0, 0],
width: elementWithId?.width || DEFAULT_DIMENSION, [width, height],
height: elementWithId?.height || DEFAULT_DIMENSION, ],
...elementWithId, ...elementWithId,
}); });
elementStore.add(imageElement); elementStore.add(lineElement);
} else { } else if (elementWithId.type === "image") {
excalidrawElement = { const imageElement = newImageElement({
...elementWithId, width: elementWithId?.width || DEFAULT_DIMENSION,
width: elementWithId?.width || DEFAULT_DIMENSION, height: elementWithId?.height || DEFAULT_DIMENSION,
height: elementWithId?.height || DEFAULT_DIMENSION, ...elementWithId,
} as ExcalidrawGenericElement; });
elementStore.add(excalidrawElement); elementStore.add(imageElement);
} } else if (
elementWithId.type === "rectangle" ||
elementWithId.type === "ellipse" ||
elementWithId.type === "diamond"
) {
const element = newElement({
...elementWithId,
width: elementWithId?.width || DEFAULT_DIMENSION,
height: elementWithId?.height || DEFAULT_DIMENSION,
});
elementStore.add(element);
} }
}); });
return elementStore.get(); return elementStore.get();