diff --git a/manifest.json b/manifest.json index 4d93862..e68ecea 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "id": "obsidian-excalidraw-plugin", "name": "Excalidraw", - "version": "2.2.4", + "version": "2.2.5", "minAppVersion": "1.1.6", "description": "An Obsidian plugin to edit and view Excalidraw drawings", "author": "Zsolt Viczian", diff --git a/package.json b/package.json index 6723046..c5d647d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "obsidian-excalidraw-plugin", - "version": "2.0.14", + "version": "2.2.5", "description": "This is an Obsidian.md plugin that lets you view and edit Excalidraw drawings", "main": "lib/index.js", "types": "lib/index.d.ts", @@ -19,7 +19,7 @@ "license": "MIT", "dependencies": { "@popperjs/core": "^2.11.8", - "@zsviczian/excalidraw": "0.17.1-obsidian-26", + "@zsviczian/excalidraw": "0.17.1-obsidian-27", "chroma-js": "^2.4.2", "clsx": "^2.0.0", "colormaster": "^1.2.1", diff --git a/src/EmbeddedFileLoader.ts b/src/EmbeddedFileLoader.ts index 91c2892..dee6370 100644 --- a/src/EmbeddedFileLoader.ts +++ b/src/EmbeddedFileLoader.ts @@ -38,6 +38,7 @@ import { LinkParts, svgToBase64, isMaskFile, + embedFontsInSVG, } from "./utils/Utils"; import { ValueOf } from "./types"; import { getMermaidImageElements, getMermaidText, shouldRenderMermaid } from "./utils/MermaidUtils"; @@ -390,7 +391,7 @@ export class EmbeddedFilesLoader { : replaceSVGColors( await createSVG( file?.path, - true, + false, //false exportSettings, this, forceTheme, @@ -424,9 +425,20 @@ export class EmbeddedFilesLoader { hasSVGwithBitmap = true; } if(shouldUseCache && !Boolean(maybeSVG)) { + //cache SVG should have the width and height parameters and not the embedded font + //see svgWithFont below imageCache.addImageToCache(cacheKey,"", svg); } - const dURL = svgToBase64(svg.outerHTML) as DataURL; + const svgWithFont = embedFontsInSVG(svg, this.plugin); + if(!svgWithFont.hasAttribute("width") && svgWithFont.hasAttribute("viewBox")){ + //2024.06.09 + //this addresses backward compatibility issues where the cache does not have the width and height attributes + //this should be removed in the future + const vb = svgWithFont.getAttr("viewBox").split(" "); + Boolean(vb[2]) && svgWithFont.setAttribute("width", vb[2]); + Boolean(vb[3]) && svgWithFont.setAttribute("height", vb[3]); + } + const dURL = svgToBase64(svgWithFont.outerHTML) as DataURL; return {dataURL: dURL as DataURL, hasSVGwithBitmap}; }; diff --git a/src/ExcalidrawView.ts b/src/ExcalidrawView.ts index f91bb4b..d37678e 100644 --- a/src/ExcalidrawView.ts +++ b/src/ExcalidrawView.ts @@ -4655,7 +4655,10 @@ export default class ExcalidrawView extends TextFileView { ]); } - if(img && img.embeddedFile && img.embeddedFile.mimeType === "image/svg+xml") { + if( + img && img.embeddedFile && img.embeddedFile.mimeType === "image/svg+xml" && + (!img.embeddedFile.file || (img.embeddedFile.file && !this.plugin.isExcalidrawFile(img.embeddedFile.file))) + ) { contextMenuActions.push([ renderContextMenuAction( t("IMPORT_SVG_CONTEXTMENU"), diff --git a/src/MarkdownPostProcessor.ts b/src/MarkdownPostProcessor.ts index fdb2a41..83d983d 100644 --- a/src/MarkdownPostProcessor.ts +++ b/src/MarkdownPostProcessor.ts @@ -250,11 +250,12 @@ const _getSVGNative = async ({filenameParts,theme,cacheReady,containerElement,fi return null; } + //cache SVG should have the width and height parameters and not the embedded font + cacheReady && imageCache.addImageToCache(cacheKey,"", svg); svg = embedFontsInSVG(svg, plugin, true); svg.removeAttribute("width"); svg.removeAttribute("height"); containerElement.append(svg); - cacheReady && imageCache.addImageToCache(cacheKey,"", svg); return containerElement; } diff --git a/src/dialogs/Messages.ts b/src/dialogs/Messages.ts index 3ae2d24..e75fae3 100644 --- a/src/dialogs/Messages.ts +++ b/src/dialogs/Messages.ts @@ -17,6 +17,14 @@ I develop this plugin as a hobby, spending my free time doing this. If you find
`, +"2.2.5": ` +## Fixed +- Cursor visibility in dark mode [#1812](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/1812) +- SVG to Excalidraw now... + - converts elements inside the ${String.fromCharCode(96)}${String.fromCharCode(96)} tag, improving compatibility with SVGs from [The Noun Project](https://thenounproject.com/) + - sets visibility for all elements, preventing invisible converted images. +- Cached images sometimes lost their font face and natural size when nested in an Excalidraw scene. This issue occurred when drawings were embedded in a markdown note (native SVG) and nested in a drawing simultaneously. Depending on the update and render sequence, these drawings sometimes appeared incorrectly in the Excalidraw scene. +`, "2.2.4":`
diff --git a/src/svgToExcalidraw/parser.ts b/src/svgToExcalidraw/parser.ts index f313fb7..8b0613f 100644 --- a/src/svgToExcalidraw/parser.ts +++ b/src/svgToExcalidraw/parser.ts @@ -30,6 +30,15 @@ export const svgToExcalidraw = (svgString: string): ConversionResult => { walk({ tw, scene, groups, root: svgDOM }, tw.nextNode()); + const hasVisibleElements = Boolean(scene.elements.find((el)=>el.opacity !== 0)); + if (!hasVisibleElements) { + scene.elements.forEach((el) => { + el.opacity = 100; + }); + } + scene.elements.forEach((el) => { + if(el.opacity <= 1) el.opacity = 100; + }); content = scene.elements; //scene.toExJSON(); } diff --git a/src/svgToExcalidraw/walker.ts b/src/svgToExcalidraw/walker.ts index 9a90ba8..d3458e0 100644 --- a/src/svgToExcalidraw/walker.ts +++ b/src/svgToExcalidraw/walker.ts @@ -37,6 +37,7 @@ const SUPPORTED_TAGS = [ "rect", "polyline", "polygon", + "switch", ]; const nodeValidator = (node: Element): number => { @@ -120,6 +121,18 @@ const walkers = { walk(args, args.tw.nextNode()); }, + switch: (args: WalkerArgs) => { + const nextArgs = { + ...args, + tw: createTreeWalker(args.tw.currentNode), + groups: [...args.groups, new Group(args.tw.currentNode as Element)], + }; + + walk(nextArgs, nextArgs.tw.nextNode()); + + walk(args, args.tw.nextSibling()); + }, + g: (args: WalkerArgs) => { const nextArgs = { ...args, diff --git a/src/utils/DynamicStyling.ts b/src/utils/DynamicStyling.ts index 5d45bd4..c011e37 100644 --- a/src/utils/DynamicStyling.ts +++ b/src/utils/DynamicStyling.ts @@ -115,7 +115,7 @@ export const setDynamicStyle = ( [`--h3-color`]: str(text), [`--h4-color`]: str(text), [`color`]: str(text), - ['--excalidraw-caret-color']: str(text), + ['--excalidraw-caret-color']: str(isLightTheme ? text : cmBG()), [`--select-highlight-color`]: str(gray1()), [`--color-gray-80`]: str(isDark?text.darkerBy(40):text.lighterBy(40)), //frame }; diff --git a/src/utils/ImageCache.ts b/src/utils/ImageCache.ts index e7d1303..fa8f958 100644 --- a/src/utils/ImageCache.ts +++ b/src/utils/ImageCache.ts @@ -321,6 +321,7 @@ class ImageCache { return this.getBackupData(filepath); } + //cache SVG should have the width and height parameters and not the embedded font public addImageToCache(key_: ImageKey, obsidianURL: string, image: Blob|SVGSVGElement): void { if (!this.isReady()) { return; // Database not initialized yet