mirror of
https://github.com/zsviczian/obsidian-excalidraw-plugin.git
synced 2025-08-06 05:46:28 +00:00
567 lines
17 KiB
TypeScript
567 lines
17 KiB
TypeScript
import { FileId } from "@zsviczian/excalidraw/types/element/types";
|
|
import { BinaryFileData, DataURL } from "@zsviczian/excalidraw/types/types";
|
|
import { App, MarkdownRenderer, Notice, TFile } from "obsidian";
|
|
import {
|
|
CASCADIA_FONT,
|
|
fileid,
|
|
FRONTMATTER_KEY_FONT,
|
|
FRONTMATTER_KEY_FONTCOLOR,
|
|
FRONTMATTER_KEY_MD_STYLE,
|
|
IMAGE_TYPES,
|
|
nanoid,
|
|
VIRGIL_FONT,
|
|
} from "./constants";
|
|
import { createSVG } from "./ExcalidrawAutomate";
|
|
import { ExcalidrawData, getTransclusion } from "./ExcalidrawData";
|
|
import { ExportSettings } from "./ExcalidrawView";
|
|
import { t } from "./lang/helpers";
|
|
import { tex2dataURL } from "./LaTeX";
|
|
import ExcalidrawPlugin from "./main";
|
|
import {
|
|
errorlog,
|
|
getDataURL,
|
|
getFontDataURL,
|
|
getImageSize,
|
|
getLinkParts,
|
|
LinkParts,
|
|
svgToBase64,
|
|
} from "./Utils";
|
|
|
|
export declare type MimeType =
|
|
| "image/svg+xml"
|
|
| "image/png"
|
|
| "image/jpeg"
|
|
| "image/gif"
|
|
| "application/octet-stream";
|
|
export type FileData = BinaryFileData & {
|
|
size: Size;
|
|
hasSVGwithBitmap: boolean;
|
|
};
|
|
|
|
export type Size = {
|
|
height: number;
|
|
width: number;
|
|
};
|
|
|
|
export class EmbeddedFile {
|
|
public file: TFile = null;
|
|
public isSVGwithBitmap: boolean = false;
|
|
private img: string = ""; //base64
|
|
private imgInverted: string = ""; //base64
|
|
public mtime: number = 0; //modified time of the image
|
|
private plugin: ExcalidrawPlugin;
|
|
public mimeType: MimeType = "application/octet-stream";
|
|
public size: Size = { height: 0, width: 0 };
|
|
public linkParts: LinkParts;
|
|
/*public isHyperlink: boolean = false;*/
|
|
|
|
constructor(plugin: ExcalidrawPlugin, hostPath: string, imgPath: string) {
|
|
this.plugin = plugin;
|
|
this.resetImage(hostPath, imgPath);
|
|
}
|
|
|
|
public resetImage(hostPath: string, imgPath: string) {
|
|
/*if(imgPath.startsWith("https://") || imgPath.startsWith("http://")) {
|
|
this.img=imgPath;
|
|
this.imgInverted=imgPath;
|
|
this.isHyperlink = true;
|
|
return;
|
|
}*/
|
|
this.imgInverted = this.img = "";
|
|
this.mtime = 0;
|
|
this.linkParts = getLinkParts(imgPath);
|
|
if (!this.linkParts.path) {
|
|
new Notice(`Excalidraw Error\nIncorrect embedded filename: ${imgPath}`);
|
|
return;
|
|
}
|
|
if (!this.linkParts.width) {
|
|
this.linkParts.width = this.plugin.settings.mdSVGwidth;
|
|
}
|
|
if (!this.linkParts.height) {
|
|
this.linkParts.height = this.plugin.settings.mdSVGmaxHeight;
|
|
}
|
|
this.file = this.plugin.app.metadataCache.getFirstLinkpathDest(
|
|
this.linkParts.path,
|
|
hostPath,
|
|
);
|
|
if (!this.file) {
|
|
new Notice(
|
|
`Excalidraw Warning: could not find image file: ${imgPath}`,
|
|
5000,
|
|
);
|
|
}
|
|
}
|
|
|
|
private fileChanged(): boolean {
|
|
if (!this.file) {
|
|
return false;
|
|
}
|
|
return this.mtime != this.file.stat.mtime;
|
|
}
|
|
|
|
public setImage(
|
|
imgBase64: string,
|
|
mimeType: MimeType,
|
|
size: Size,
|
|
isDark: boolean,
|
|
isSVGwithBitmap: boolean,
|
|
) {
|
|
if (!this.file) {
|
|
return;
|
|
}
|
|
if (this.fileChanged()) {
|
|
this.imgInverted = this.img = "";
|
|
}
|
|
this.mtime = this.file.stat.mtime;
|
|
this.size = size;
|
|
this.mimeType = mimeType;
|
|
switch (isDark && isSVGwithBitmap) {
|
|
case true:
|
|
this.imgInverted = imgBase64;
|
|
break;
|
|
case false:
|
|
this.img = imgBase64;
|
|
break; //bitmaps and SVGs without an embedded bitmap do not need a negative image
|
|
}
|
|
this.isSVGwithBitmap = isSVGwithBitmap;
|
|
}
|
|
|
|
public isLoaded(isDark: boolean): boolean {
|
|
if (!this.file) {
|
|
return true;
|
|
}
|
|
if (this.fileChanged()) {
|
|
return false;
|
|
}
|
|
if (this.isSVGwithBitmap && isDark) {
|
|
return this.imgInverted !== "";
|
|
}
|
|
return this.img !== "";
|
|
}
|
|
|
|
public getImage(isDark: boolean) {
|
|
/*if(this.isHyperlink) {
|
|
return this.img;
|
|
}*/
|
|
if (!this.file) {
|
|
return "";
|
|
}
|
|
if (isDark && this.isSVGwithBitmap) {
|
|
return this.imgInverted;
|
|
}
|
|
return this.img; //images that are not SVGwithBitmap, only the light string is stored, since inverted and non-inverted are ===
|
|
}
|
|
}
|
|
|
|
export class EmbeddedFilesLoader {
|
|
private plugin: ExcalidrawPlugin;
|
|
private processedFiles: Map<string, number> = new Map<string, number>();
|
|
private isDark: boolean;
|
|
public terminate = false;
|
|
public uid: string;
|
|
|
|
constructor(plugin: ExcalidrawPlugin, isDark?: boolean) {
|
|
this.plugin = plugin;
|
|
this.isDark = isDark;
|
|
this.uid = nanoid();
|
|
}
|
|
|
|
public async getObsidianImage(inFile: TFile | EmbeddedFile): Promise<{
|
|
mimeType: MimeType;
|
|
fileId: FileId;
|
|
dataURL: DataURL;
|
|
created: number;
|
|
hasSVGwithBitmap: boolean;
|
|
size: { height: number; width: number };
|
|
}> {
|
|
if (!this.plugin || !inFile) {
|
|
return null;
|
|
}
|
|
const file: TFile = inFile instanceof EmbeddedFile ? inFile.file : inFile;
|
|
const linkParts =
|
|
inFile instanceof EmbeddedFile
|
|
? inFile.linkParts
|
|
: {
|
|
original: file.path,
|
|
path: file.path,
|
|
isBlockRef: false,
|
|
ref: null,
|
|
width: this.plugin.settings.mdSVGwidth,
|
|
height: this.plugin.settings.mdSVGmaxHeight,
|
|
};
|
|
//to block infinite loop of recursive loading of images
|
|
const count = this.processedFiles.has(file.path)
|
|
? this.processedFiles.get(file.path)
|
|
: 0;
|
|
if (file.extension === "md" && count > 2) {
|
|
new Notice(t("INFINITE_LOOP_WARNING") + file.path, 6000);
|
|
return null;
|
|
}
|
|
this.processedFiles.set(file.path, count + 1);
|
|
let hasSVGwithBitmap = false;
|
|
const app = this.plugin.app;
|
|
const isExcalidrawFile = this.plugin.isExcalidrawFile(file);
|
|
if (
|
|
!(
|
|
IMAGE_TYPES.contains(file.extension) ||
|
|
isExcalidrawFile ||
|
|
file.extension === "md"
|
|
)
|
|
) {
|
|
return null;
|
|
}
|
|
const ab = await app.vault.readBinary(file);
|
|
|
|
const getExcalidrawSVG = async (isDark: boolean) => {
|
|
//debug({where:"EmbeddedFileLoader.getExcalidrawSVG",uid:this.uid,file:file.name});
|
|
const exportSettings: ExportSettings = {
|
|
withBackground: false,
|
|
withTheme: false,
|
|
};
|
|
const svg = await createSVG(
|
|
file.path,
|
|
true,
|
|
exportSettings,
|
|
this,
|
|
null,
|
|
null,
|
|
null,
|
|
[],
|
|
this.plugin,
|
|
);
|
|
//https://stackoverflow.com/questions/51154171/remove-css-filter-on-child-elements
|
|
const imageList = svg.querySelectorAll(
|
|
"image:not([href^='data:image/svg'])",
|
|
);
|
|
if (imageList.length > 0) {
|
|
hasSVGwithBitmap = true;
|
|
}
|
|
if (hasSVGwithBitmap && isDark) {
|
|
const THEME_FILTER = "invert(100%) hue-rotate(180deg) saturate(1.25)";
|
|
imageList.forEach((i) => {
|
|
const id = i.parentElement?.id;
|
|
svg.querySelectorAll(`use[href='#${id}']`).forEach((u) => {
|
|
u.setAttribute("filter", THEME_FILTER);
|
|
});
|
|
});
|
|
}
|
|
if (!hasSVGwithBitmap && svg.getAttribute("hasbitmap")) {
|
|
hasSVGwithBitmap = true;
|
|
}
|
|
const dURL = svgToBase64(svg.outerHTML) as DataURL;
|
|
return dURL as DataURL;
|
|
};
|
|
|
|
const excalidrawSVG = isExcalidrawFile
|
|
? await getExcalidrawSVG(this.isDark)
|
|
: null;
|
|
let mimeType: MimeType = "image/svg+xml";
|
|
if (!isExcalidrawFile) {
|
|
switch (file.extension) {
|
|
case "png":
|
|
mimeType = "image/png";
|
|
break;
|
|
case "jpeg":
|
|
mimeType = "image/jpeg";
|
|
break;
|
|
case "jpg":
|
|
mimeType = "image/jpeg";
|
|
break;
|
|
case "gif":
|
|
mimeType = "image/gif";
|
|
break;
|
|
case "svg":
|
|
case "md":
|
|
mimeType = "image/svg+xml";
|
|
break;
|
|
default:
|
|
mimeType = "application/octet-stream";
|
|
}
|
|
}
|
|
const dataURL =
|
|
excalidrawSVG ??
|
|
(file.extension === "svg"
|
|
? await getSVGData(app, file)
|
|
: file.extension === "md"
|
|
? await convertMarkdownToSVG(this.plugin, file, linkParts)
|
|
: await getDataURL(ab, mimeType));
|
|
const size = await getImageSize(
|
|
excalidrawSVG ??
|
|
(file.extension === "md" ? dataURL : app.vault.getResourcePath(file)),
|
|
);
|
|
return {
|
|
mimeType,
|
|
fileId: await generateIdFromFile(ab),
|
|
dataURL,
|
|
created: file.stat.mtime,
|
|
hasSVGwithBitmap,
|
|
size,
|
|
};
|
|
}
|
|
|
|
public async loadSceneFiles(
|
|
excalidrawData: ExcalidrawData,
|
|
addFiles: Function,
|
|
) {
|
|
const entries = excalidrawData.getFileEntries();
|
|
//debug({where:"EmbeddedFileLoader.loadSceneFiles",uid:this.uid,isDark:this.isDark,sceneTheme:excalidrawData.scene.appState.theme});
|
|
if (this.isDark === undefined) {
|
|
this.isDark = excalidrawData.scene.appState.theme === "dark";
|
|
}
|
|
let entry;
|
|
const files: FileData[] = [];
|
|
while (!this.terminate && !(entry = entries.next()).done) {
|
|
const embeddedFile: EmbeddedFile = entry.value[1];
|
|
if (!embeddedFile.isLoaded(this.isDark)) {
|
|
//debug({where:"EmbeddedFileLoader.loadSceneFiles",uid:this.uid,status:"embedded Files are not loaded"});
|
|
const data = await this.getObsidianImage(embeddedFile);
|
|
if (data) {
|
|
files.push({
|
|
mimeType: data.mimeType,
|
|
id: entry.value[0],
|
|
dataURL: data.dataURL,
|
|
created: data.created,
|
|
size: data.size,
|
|
hasSVGwithBitmap: data.hasSVGwithBitmap,
|
|
});
|
|
}
|
|
} else if (embeddedFile.isSVGwithBitmap) {
|
|
files.push({
|
|
mimeType: embeddedFile.mimeType,
|
|
id: entry.value[0],
|
|
dataURL: embeddedFile.getImage(this.isDark) as DataURL,
|
|
created: embeddedFile.mtime,
|
|
size: embeddedFile.size,
|
|
hasSVGwithBitmap: embeddedFile.isSVGwithBitmap,
|
|
});
|
|
}
|
|
}
|
|
|
|
let equation;
|
|
const equations = excalidrawData.getEquationEntries();
|
|
while (!this.terminate && !(equation = equations.next()).done) {
|
|
if (!excalidrawData.getEquation(equation.value[0]).isLoaded) {
|
|
const latex = equation.value[1].latex;
|
|
const data = await tex2dataURL(latex, this.plugin);
|
|
if (data) {
|
|
files.push({
|
|
mimeType: data.mimeType,
|
|
id: equation.value[0],
|
|
dataURL: data.dataURL,
|
|
created: data.created,
|
|
size: data.size,
|
|
hasSVGwithBitmap: false,
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
if (this.terminate) {
|
|
return;
|
|
}
|
|
//debug({where:"EmbeddedFileLoader.loadSceneFiles",uid:this.uid,status:"add Files"});
|
|
try {
|
|
//in try block because by the time files are loaded the user may have closed the view
|
|
addFiles(files, this.isDark);
|
|
} catch (e) {
|
|
errorlog({ where: "EmbeddedFileLoader.loadSceneFiles", error: e });
|
|
}
|
|
}
|
|
}
|
|
|
|
const getSVGData = async (app: App, file: TFile): Promise<DataURL> => {
|
|
const svg = await app.vault.read(file);
|
|
return svgToBase64(svg) as DataURL;
|
|
};
|
|
|
|
const convertMarkdownToSVG = async (
|
|
plugin: ExcalidrawPlugin,
|
|
file: TFile,
|
|
linkParts: LinkParts,
|
|
): Promise<DataURL> => {
|
|
//1.
|
|
//get the markdown text
|
|
let text = (await getTransclusion(linkParts, plugin.app, file)).contents;
|
|
if (text === "") {
|
|
text =
|
|
"# Empty markdown file\nCTRL+Click here to open the file for editing in the current active pane, or CTRL+SHIFT+Click to open it in an adjacent pane.";
|
|
}
|
|
|
|
//2.
|
|
//get styles
|
|
const fileCache = plugin.app.metadataCache.getFileCache(file);
|
|
let fontDef: string;
|
|
let fontName = plugin.settings.mdFont;
|
|
if (
|
|
fileCache?.frontmatter &&
|
|
fileCache.frontmatter[FRONTMATTER_KEY_FONT] != null
|
|
) {
|
|
fontName = fileCache.frontmatter[FRONTMATTER_KEY_FONT];
|
|
}
|
|
switch (fontName) {
|
|
case "Virgil":
|
|
fontDef = VIRGIL_FONT;
|
|
break;
|
|
case "Cascadia":
|
|
fontDef = CASCADIA_FONT;
|
|
break;
|
|
case "":
|
|
fontDef = "";
|
|
break;
|
|
default:
|
|
const font = await getFontDataURL(plugin.app, fontName, file.path);
|
|
fontDef = font.fontDef;
|
|
fontName = font.fontName;
|
|
}
|
|
|
|
const fontColor = fileCache?.frontmatter
|
|
? fileCache.frontmatter[FRONTMATTER_KEY_FONTCOLOR] ??
|
|
plugin.settings.mdFontColor
|
|
: plugin.settings.mdFontColor;
|
|
|
|
let style = fileCache?.frontmatter
|
|
? fileCache.frontmatter[FRONTMATTER_KEY_MD_STYLE] ?? ""
|
|
: "";
|
|
let frontmatterCSSisAfile = false;
|
|
if (style && style != "") {
|
|
const f = plugin.app.metadataCache.getFirstLinkpathDest(style, file.path);
|
|
if (f) {
|
|
style = await plugin.app.vault.read(f);
|
|
frontmatterCSSisAfile = true;
|
|
}
|
|
}
|
|
if (
|
|
!frontmatterCSSisAfile &&
|
|
plugin.settings.mdCSS &&
|
|
plugin.settings.mdCSS != ""
|
|
) {
|
|
const f = plugin.app.metadataCache.getFirstLinkpathDest(
|
|
plugin.settings.mdCSS,
|
|
file.path,
|
|
);
|
|
if (f) {
|
|
style += `\n${await plugin.app.vault.read(f)}`;
|
|
}
|
|
}
|
|
|
|
//3.
|
|
//SVG helper functions
|
|
//the SVG will first have ~infinite height. After sizing this will be reduced
|
|
let svgStyle = ` width="${linkParts.width}px" height="100000"`;
|
|
let foreignObjectStyle = ` width="${linkParts.width}px" height="100%"`;
|
|
|
|
const svg = (xml: string, xmlFooter: string, style?: string) =>
|
|
`<svg xmlns="http://www.w3.org/2000/svg"${svgStyle}>${
|
|
style ? `<style>${style}</style>` : ""
|
|
}<foreignObject x="0" y="0"${foreignObjectStyle}>${xml}${
|
|
xmlFooter //https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/286#issuecomment-982179639
|
|
}</foreignObject>${
|
|
fontDef !== "" ? `<defs><style>${fontDef}</style></defs>` : ""
|
|
}</svg>`;
|
|
|
|
//4.
|
|
//create document div - this will be the contents of the foreign object
|
|
const mdDIV = createDiv();
|
|
mdDIV.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
|
|
mdDIV.setAttribute("class", "excalidraw-md-host");
|
|
// mdDIV.setAttribute("style",style);
|
|
if (fontName !== "") {
|
|
mdDIV.style.fontFamily = fontName;
|
|
}
|
|
mdDIV.style.overflow = "auto";
|
|
mdDIV.style.display = "block";
|
|
if (fontColor && fontColor != "") {
|
|
mdDIV.style.color = fontColor;
|
|
}
|
|
|
|
await MarkdownRenderer.renderMarkdown(text, mdDIV, file.path, plugin);
|
|
mdDIV
|
|
.querySelectorAll(":scope > *[class^='frontmatter']")
|
|
.forEach((el) => mdDIV.removeChild(el));
|
|
|
|
//5.1
|
|
//get SVG size.
|
|
//First I need to create a fully self contained copy of the document to convert
|
|
//blank styles into inline styles using computedStyle
|
|
const iframeHost = document.body.createDiv();
|
|
iframeHost.style.display = "none";
|
|
const iframe = iframeHost.createEl("iframe");
|
|
const iframeDoc = iframe.contentWindow.document;
|
|
if (style) {
|
|
const styleEl = iframeDoc.createElement("style");
|
|
styleEl.type = "text/css";
|
|
styleEl.innerHTML = style;
|
|
iframeDoc.head.appendChild(styleEl);
|
|
}
|
|
const stylingDIV = iframeDoc.importNode(mdDIV, true);
|
|
iframeDoc.body.appendChild(stylingDIV);
|
|
const footerDIV = createDiv();
|
|
footerDIV.setAttribute("class", "excalidraw-md-footer");
|
|
iframeDoc.body.appendChild(footerDIV);
|
|
|
|
iframeDoc.body.querySelectorAll("*").forEach((el: HTMLElement) => {
|
|
const elementStyle = el.style;
|
|
const computedStyle = window.getComputedStyle(el);
|
|
let style = "";
|
|
for (const prop in elementStyle) {
|
|
if (elementStyle.hasOwnProperty(prop)) {
|
|
style += `${prop}: ${computedStyle[prop]};`;
|
|
}
|
|
}
|
|
el.setAttribute("style", style);
|
|
});
|
|
|
|
const xmlINiframe = new XMLSerializer().serializeToString(stylingDIV);
|
|
const xmlFooter = new XMLSerializer().serializeToString(footerDIV);
|
|
document.body.removeChild(iframeHost);
|
|
|
|
//5.2
|
|
//get SVG size
|
|
const parser = new DOMParser();
|
|
const doc = parser.parseFromString(
|
|
svg(xmlINiframe, xmlFooter),
|
|
"image/svg+xml",
|
|
);
|
|
const svgEl = doc.firstElementChild;
|
|
const host = createDiv();
|
|
host.appendChild(svgEl);
|
|
document.body.appendChild(host);
|
|
const footerHeight = svgEl.querySelector(
|
|
".excalidraw-md-footer",
|
|
).scrollHeight;
|
|
const height =
|
|
svgEl.querySelector(".excalidraw-md-host").scrollHeight + footerHeight;
|
|
const svgHeight = height <= linkParts.height ? height : linkParts.height;
|
|
document.body.removeChild(host);
|
|
|
|
//finalize SVG
|
|
svgStyle = ` width="${linkParts.width}px" height="${svgHeight}px"`;
|
|
foreignObjectStyle = ` width="${linkParts.width}px" height="${svgHeight}px"`;
|
|
mdDIV.style.height = `${svgHeight - footerHeight}px`;
|
|
mdDIV.style.overflow = "hidden";
|
|
const xml = new XMLSerializer().serializeToString(mdDIV);
|
|
const finalSVG = svg(xml, '<div class="excalidraw-md-footer"></div>', style);
|
|
plugin.ea.mostRecentMarkdownSVG = parser.parseFromString(
|
|
finalSVG,
|
|
"image/svg+xml",
|
|
).firstElementChild as SVGSVGElement;
|
|
return svgToBase64(finalSVG) as DataURL;
|
|
};
|
|
|
|
const generateIdFromFile = async (file: ArrayBuffer): Promise<FileId> => {
|
|
let id: FileId;
|
|
try {
|
|
const hashBuffer = await window.crypto.subtle.digest("SHA-1", file);
|
|
id =
|
|
// convert buffer to byte array
|
|
Array.from(new Uint8Array(hashBuffer))
|
|
// convert to hex string
|
|
.map((byte) => byte.toString(16).padStart(2, "0"))
|
|
.join("") as FileId;
|
|
} catch (error) {
|
|
errorlog({ where: "EmbeddedFileLoader.generateIdFromFile", error });
|
|
id = fileid() as FileId;
|
|
}
|
|
return id;
|
|
};
|