From 128b7741c13304380fd80fc986aa50d3d2465b20 Mon Sep 17 00:00:00 2001 From: ad1992 Date: Wed, 27 Apr 2022 14:03:42 +0530 Subject: [PATCH] update config to use displayData --- src/constants.ts | 2 +- src/packages/excalidraw/example/App.js | 56 ++++++++++++++------------ src/renderer/renderElement.ts | 50 +++++++++++------------ src/types.ts | 7 +++- 4 files changed, 62 insertions(+), 53 deletions(-) diff --git a/src/constants.ts b/src/constants.ts index 797eda501..3645e2e41 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -156,7 +156,7 @@ export const DEFAULT_CUSTOM_ELEMENT_CONFIG: Required = { type: "custom", customType: "custom", transformHandles: true, - svg: "", + displayData: { content: "", type: "svg" }, width: 40, height: 40, stackedOnTop: false, diff --git a/src/packages/excalidraw/example/App.js b/src/packages/excalidraw/example/App.js index a082ca5f6..70915224b 100644 --- a/src/packages/excalidraw/example/App.js +++ b/src/packages/excalidraw/example/App.js @@ -204,11 +204,12 @@ export default function App() { { type: "custom", customType: "star", - svg: `data:${ - MIME_TYPES.svg - }, ${encodeURIComponent(` + displayData: { + type: "svg", + content: ` - `)}`, + `, + }, width: 60, height: 60, disableContextMenu: true, @@ -216,11 +217,13 @@ export default function App() { { type: "custom", customType: "comment", - svg: `data:${ - MIME_TYPES.svg - }, ${encodeURIComponent(` + displayData: { + type: "svg", + content: () => + ` - `)}`, + `, + }, transformHandles: false, stackedOnTop: true, onCreate, @@ -229,24 +232,27 @@ export default function App() { { type: "custom", customType: "thumbsup", - svg: () => { - return new Promise((resolve, reject) => { - const image = document.createElement("img"); - image.crossOrigin = "Anonymous"; - image.src = - "https://upload.wikimedia.org/wikipedia/commons/1/1f/SMirC-thumbsup.svg"; + displayData: { + type: "dataURL", + content: () => { + return new Promise((resolve, reject) => { + const image = document.createElement("img"); + image.crossOrigin = "Anonymous"; + image.src = + "https://upload.wikimedia.org/wikipedia/commons/1/1f/SMirC-thumbsup.svg"; - image.onload = function () { - const canvas = document.createElement("canvas"); - canvas.width = 30 * window.devicePixelRatio; - canvas.height = 30 * window.devicePixelRatio; - const context = canvas.getContext("2d"); - context.scale(window.devicePixelRatio, window.devicePixelRatio); - context.drawImage(image, 5, 5, 20, 20); - resolve(canvas.toDataURL()); - }; - image.onerror = (err) => reject(err); - }); + image.onload = function () { + const canvas = document.createElement("canvas"); + canvas.width = 30 * window.devicePixelRatio; + canvas.height = 30 * window.devicePixelRatio; + const context = canvas.getContext("2d"); + context.scale(window.devicePixelRatio, window.devicePixelRatio); + context.drawImage(image, 5, 5, 20, 20); + resolve(canvas.toDataURL()); + }; + image.onerror = (err) => reject(err); + }); + }, }, }, ]; diff --git a/src/renderer/renderElement.ts b/src/renderer/renderElement.ts index 92d140ecf..bdf11dc29 100644 --- a/src/renderer/renderElement.ts +++ b/src/renderer/renderElement.ts @@ -269,36 +269,34 @@ const drawElementOnCanvas = ( if (!config) { break; } - if (typeof config.svg === "string") { + const cacheImage = (data: string, type: "svg" | "dataURL") => { if (!customElementImgCache[element.id]) { + let url: string; + if (type === "svg") { + url = `data:${MIME_TYPES.svg}, ${encodeURIComponent(data)}`; + } else { + url = data; + } const img = document.createElement("img"); - img.src = config.svg; + img.src = url; img.id = element.id; - customElementImgCache[img.id] = img; + customElementImgCache[element.id] = img; } - } else if (typeof config.svg === "function") { - const svg = config.svg(element); - if (svg instanceof Promise) { - svg.then((res) => { - if (!customElementImgCache[element.id]) { - const img = document.createElement("img"); - img.id = element.id; - img.src = res; - customElementImgCache[img.id] = img; - context.drawImage( - customElementImgCache[element.id], - 0, - 0, - element.width, - element.height, - ); - } - }); - } else if (!customElementImgCache[element.id]) { - const img = document.createElement("img"); - img.id = element.id; - img.src = svg; - customElementImgCache[img.id] = img; + }; + const { type, content } = config.displayData; + if (typeof content === "string") { + cacheImage(content, type); + } else { + const contentData = content(element); + if (contentData instanceof Promise) { + contentData.then( + (res) => { + cacheImage(res, type); + }, + (err) => console.error(err), + ); + } else { + cacheImage(contentData, type); } } if (customElementImgCache[element.id]) { diff --git a/src/types.ts b/src/types.ts index 2bb059c0d..877f3a4d4 100644 --- a/src/types.ts +++ b/src/types.ts @@ -228,7 +228,12 @@ export type CustomElementConfig = { type: "custom"; customType: string; transformHandles?: boolean; - svg: string | ((element?: ExcalidrawElement) => string | Promise); + displayData: { + type: "svg" | "dataURL"; + content: + | string + | ((element?: ExcalidrawElement) => string | Promise); + }; width?: number; height?: number; stackedOnTop: boolean;