foss/excalidraw
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update config to use displayData

Browse Source
This commit is contained in:
ad1992 2022-04-27 14:03:42 +05:30
parent 1edde7291c
commit 128b7741c1
4 changed files with 62 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/constants.ts
View File

@ -156,7 +156,7 @@ export const DEFAULT_CUSTOM_ELEMENT_CONFIG: Required<CustomElementConfig> = {
type: "custom",
customType: "custom",
transformHandles: true,
svg: "",
displayData: { content: "", type: "svg" },
width: 40,
height: 40,
stackedOnTop: false,

56
src/packages/excalidraw/example/App.js
View File

@ -204,11 +204,12 @@ export default function App() {
{
type: "custom",
customType: "star",
svg: `data:${
MIME_TYPES.svg
}, ${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
displayData: {
type: "svg",
content: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M287.9 0C297.1 0 305.5 5.25 309.5 13.52L378.1 154.8L531.4 177.5C540.4 178.8 547.8 185.1 550.7 193.7C553.5 202.4 551.2 211.9 544.8 218.2L433.6 328.4L459.9 483.9C461.4 492.9 457.7 502.1 450.2 507.4C442.8 512.7 432.1 513.4 424.9 509.1L287.9 435.9L150.1 509.1C142.9 513.4 133.1 512.7 125.6 507.4C118.2 502.1 114.5 492.9 115.1 483.9L142.2 328.4L31.11 218.2C24.65 211.9 22.36 202.4 25.2 193.7C28.03 185.1 35.5 178.8 44.49 177.5L197.7 154.8L266.3 13.52C270.4 5.249 278.7 0 287.9 0L287.9 0zM287.9 78.95L235.4 187.2C231.9 194.3 225.1 199.3 217.3 200.5L98.98 217.9L184.9 303C190.4 308.5 192.9 316.4 191.6 324.1L171.4 443.7L276.6 387.5C283.7 383.7 292.2 383.7 299.2 387.5L404.4 443.7L384.2 324.1C382.9 316.4 385.5 308.5 391 303L476.9 217.9L358.6 200.5C350.7 199.3 343.9 194.3 340.5 187.2L287.9 78.95z" />
</svg>`)}`,
</svg>`,
},
width: 60,
height: 60,
disableContextMenu: true,
@ -216,11 +217,13 @@ export default function App() {
{
type: "custom",
customType: "comment",
svg: `data:${
MIME_TYPES.svg
}, ${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
displayData: {
type: "svg",
content: () =>
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M256 32C114.6 32 .0272 125.1 .0272 240c0 47.63 19.91 91.25 52.91 126.2c-14.88 39.5-45.87 72.88-46.37 73.25c-6.625 7-8.375 17.25-4.625 26C5.818 474.2 14.38 480 24 480c61.5 0 109.1-25.75 139.1-46.25C191.1 442.8 223.3 448 256 448c141.4 0 255.1-93.13 255.1-208S397.4 32 256 32zM256.1 400c-26.75 0-53.12-4.125-78.38-12.12l-22.75-7.125l-19.5 13.75c-14.25 10.12-33.88 21.38-57.5 29c7.375-12.12 14.37-25.75 19.88-40.25l10.62-28l-20.62-21.87C69.82 314.1 48.07 282.2 48.07 240c0-88.25 93.25-160 208-160s208 71.75 208 160S370.8 400 256.1 400z" />
</svg>`)}`,
</svg>`,
},
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);
});
},
},
},
];

50
src/renderer/renderElement.ts
View File

@ -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]) {

7
src/types.ts
View File

@ -228,7 +228,12 @@ export type CustomElementConfig = {
type: "custom";
customType: string;
transformHandles?: boolean;
svg: string | ((element?: ExcalidrawElement) => string | Promise<string>);
displayData: {
type: "svg" | "dataURL";
content:
| string
| ((element?: ExcalidrawElement) => string | Promise<string>);
};
width?: number;
height?: number;
stackedOnTop: boolean;