diff --git a/src/components/App.tsx b/src/components/App.tsx index 1bb9c7cce..1247ec53b 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -421,11 +421,11 @@ class App extends React.Component { renderCustomElement = ( coords: { x: number; y: number }, - name: string = "", + customType: string = "", ) => { const config = getCustomElementConfig( this.props.customElementsConfig, - name, + customType, ); if (!config) { return; @@ -438,7 +438,7 @@ class App extends React.Component { const width = config.width || 40; const height = config.height || 40; - const customElement = newCustomElement(name, { + const customElement = newCustomElement(customType, { type: "custom", x: gridX - width / 2, y: gridY - height / 2, @@ -3400,7 +3400,7 @@ class App extends React.Component { if (selectedElements[0].type === "custom") { const config = getCustomElementConfig( this.props.customElementsConfig, - selectedElements[0].name, + selectedElements[0].customType, ); if (!config?.transformHandles) { return false; diff --git a/src/constants.ts b/src/constants.ts index 257ad06bc..5bf8c3bb1 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -154,7 +154,7 @@ export const DEFAULT_UI_OPTIONS: AppProps["UIOptions"] = { export const DEFAULT_CUSTOM_ELEMENT_CONFIG: Required = { type: "custom", - name: "custom", + customType: "custom", transformHandles: true, svg: "", width: 40, diff --git a/src/data/restore.ts b/src/data/restore.ts index bb7952360..dc42554b8 100644 --- a/src/data/restore.ts +++ b/src/data/restore.ts @@ -195,7 +195,7 @@ const restoreElement = ( }); } case "custom": - return restoreElementWithProperties(element, { name: "custom" }); + return restoreElementWithProperties(element, { customType: "custom" }); // generic elements case "ellipse": return restoreElementWithProperties(element, {}); diff --git a/src/element/newElement.ts b/src/element/newElement.ts index ba5efff50..c70cec8be 100644 --- a/src/element/newElement.ts +++ b/src/element/newElement.ts @@ -320,14 +320,14 @@ export const newImageElement = ( }; export const newCustomElement = ( - name: string, + customType: string, opts: { type: ExcalidrawCustomElement["type"]; } & ElementConstructorOpts, ): NonDeleted => { return { ..._newElementBase("custom", opts), - name, + customType, }; }; // Simplified deep clone for the purpose of cloning ExcalidrawElement only diff --git a/src/element/types.ts b/src/element/types.ts index 62317c871..1427dc80e 100644 --- a/src/element/types.ts +++ b/src/element/types.ts @@ -84,7 +84,7 @@ export type ExcalidrawImageElement = _ExcalidrawElementBase & }>; export type ExcalidrawCustomElement = _ExcalidrawElementBase & - Readonly<{ type: "custom"; name: string }>; + Readonly<{ type: "custom"; customType: string }>; export type InitializedExcalidrawImageElement = MarkNonNullable< ExcalidrawImageElement, diff --git a/src/packages/excalidraw/example/App.js b/src/packages/excalidraw/example/App.js index e859ff78a..92096e28d 100644 --- a/src/packages/excalidraw/example/App.js +++ b/src/packages/excalidraw/example/App.js @@ -179,7 +179,7 @@ export default function App() { return [ { type: "custom", - name: "star", + customType: "star", svg: `data:${ MIME_TYPES.svg }, ${encodeURIComponent(` @@ -190,7 +190,7 @@ export default function App() { }, { type: "custom", - name: "comment", + customType: "comment", svg: `data:${ MIME_TYPES.svg }, ${encodeURIComponent(` diff --git a/src/renderer/renderElement.ts b/src/renderer/renderElement.ts index 3c3a8ad46..750ddb9ab 100644 --- a/src/renderer/renderElement.ts +++ b/src/renderer/renderElement.ts @@ -197,7 +197,7 @@ const drawImagePlaceholder = ( }; const customElementImgCache: { - [key: ExcalidrawCustomElement["name"]]: HTMLImageElement; + [key: ExcalidrawCustomElement["customType"]]: HTMLImageElement; } = {}; const drawElementOnCanvas = ( element: NonDeletedExcalidrawElement, @@ -264,19 +264,19 @@ const drawElementOnCanvas = ( case "custom": { const config = getCustomElementConfig( renderConfig.customElementsConfig, - element.name, + element.customType, ); if (!config) { break; } - if (!customElementImgCache[config.name]) { + if (!customElementImgCache[config.customType]) { const img = document.createElement("img"); - img.id = config.name; + img.id = config.customType; img.src = config.svg; customElementImgCache[img.id] = img; } context.drawImage( - customElementImgCache[config.name], + customElementImgCache[config.customType], 0, 0, element.width, diff --git a/src/renderer/renderScene.ts b/src/renderer/renderScene.ts index eeeabacbb..dd110848e 100644 --- a/src/renderer/renderScene.ts +++ b/src/renderer/renderScene.ts @@ -315,7 +315,7 @@ export const renderScene = ( if (element.type === "custom") { config = getCustomElementConfig( renderConfig.customElementsConfig, - element.name, + element.customType, )!; } if (!isCustom || (isCustom && config!.transformHandles)) { @@ -389,7 +389,7 @@ export const renderScene = ( if (locallySelectedElements[0].type === "custom") { const config = getCustomElementConfig( renderConfig.customElementsConfig, - locallySelectedElements[0].name, + locallySelectedElements[0].customType, ); if (!config || !config.transformHandles) { showTransformHandles = false; diff --git a/src/scene/selection.ts b/src/scene/selection.ts index 5de25cd8d..583519422 100644 --- a/src/scene/selection.ts +++ b/src/scene/selection.ts @@ -19,7 +19,7 @@ export const getElementsWithinSelection = ( getElementBounds(element); const isCustom = element.type === "custom"; const allowSelection = isCustom - ? getCustomElementConfig(customElementConfig, element.name) + ? getCustomElementConfig(customElementConfig, element.customType) ?.transformHandles : true; return ( diff --git a/src/types.ts b/src/types.ts index 52f9eca20..1a81c1c06 100644 --- a/src/types.ts +++ b/src/types.ts @@ -208,7 +208,7 @@ export type ExcalidrawAPIRefValue = export type CustomElementConfig = { type: "custom"; - name: string; + customType: string; transformHandles?: boolean; svg: string; width?: number; diff --git a/src/utils.ts b/src/utils.ts index c43bbe44f..5da1da4e4 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -615,10 +615,10 @@ export const updateObject = >( export const getCustomElementConfig = ( customElementConfig: ExcalidrawProps["customElementsConfig"], - name: string, + customType: string, ) => { if (!customElementConfig) { return null; } - return customElementConfig.find((config) => config.name === name); + return customElementConfig.find((config) => config.customType === customType); };