2.8.0-beta-3, import pdf-lib on demand, fixed area hover preview, fixed local font in popout windows, fixed scrollable elements panel and context menu on (not only mobile)

Update zh-cn.ts to 01e3921

manifest-beta.json

@@ -1,7 +1,7 @@
 {
 	"id": "obsidian-excalidraw-plugin",
 	"name": "Excalidraw",
-	"version": "2.8.0-beta-2",
+	"version": "2.8.0-beta-3",
 	"minAppVersion": "1.1.6",
 	"description": "An Obsidian plugin to edit and view Excalidraw drawings",
 	"author": "Zsolt Viczian",

rollup.config.js

@@ -147,6 +147,7 @@ const BUILD_CONFIG = {
     entryFileNames: 'main.js',
     format: 'cjs',
     exports: 'default',
+    inlineDynamicImports: true, // Add this line only
   },
   plugins: getRollupPlugins(
     {

src/core/managers/MarkdownPostProcessor.ts

@@ -801,15 +801,16 @@ const tmpObsidianWYSIWYG = async (
     if(Boolean(ctx.frontmatter)) {
       el.empty();
     } else {
-      const warningEl = el.querySelector("div>h3[data-heading^='Unable to find section #^");
+      //Obsidian changed this at some point from h3 to h5 and also the text...
+      const warningEl = el.querySelector("div>*[data-heading^='Unable to find ");
       if(warningEl) {
-        const ref = warningEl.getAttr("data-heading").match(/Unable to find section (#\^(?:group=|area=|frame=|clippedframe=)[^ ]*)/)?.[1];
+        const dataHeading = warningEl.getAttr("data-heading");
+        const ref = warningEl.getAttr("data-heading").match(/Unable to find[^^]+(\^(?:group=|area=|frame=|clippedframe=)[^ ”]+)/)?.[1];
         if(ref) {
-          attr.fname = file.path + ref;
+          attr.fname = file.path + "#" +ref;
           areaPreview = true;
         }
       }
-
     }
     if(!isFrontmatterDiv && !areaPreview) {
       if(el.parentElement === containerEl) containerEl.removeChild(el);

src/core/settings.ts

@@ -2509,6 +2509,9 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
             this.requestReloadDrawings = true;
             this.plugin.settings.experimentalEnableFourthFont = value;
             this.applySettingsUpdate();
+            if(value) {
+              this.plugin.initializeFonts();
+            }
           }),
       );
     

src/lang/locale/zh-cn.ts

@@ -386,13 +386,14 @@ FILENAME_HEAD: "文件名",
     "此设置不会影响您在 Excalidraw 模式下的绘图显示，或者在将绘图嵌入 Markdown 文档时，或在渲染悬停预览时。<br><ul>" +
     "<li>请参阅下面‘嵌入和导出’部分的 <a href='#"+TAG_PDFEXPORT+"'>PDF 导出</a> 相关设置。</li></ul><br>" +
     "您必须关闭当前的 Excalidraw/Markdown 文件并重新打开，以使此更改生效。",
-  SHOW_DRAWING_OR_MD_IN_EXPORTPDF_NAME: "在将 Excalidraw 文件导出为 PDF 时将文件渲染为图像",
+  SHOW_DRAWING_OR_MD_IN_EXPORTPDF_NAME : "在 Obsidian 中导出为 PDF 格式时将 Excalidraw 渲染为图像" ,
   SHOW_DRAWING_OR_MD_IN_EXPORTPDF_DESC:
-    "处于 Markdown 视图模式时，此设置控制 Excalidraw 在使用 Obsidian 的 <b>导出为 PDF</b> 功能时，将 Excalidraw 文件导出为 PDF 的行为。<br>" +
-    "<ul><li>当 <b>启用</b> 时，PDF 将仅显示 Excalidraw 绘图；</li>" +
-    "<li>当 <b>禁用</b> 时，PDF 将显示文档的 Markdown 部分（背景笔记）。</li></ul>" +
-    "请参阅上面‘外观和行为’部分的 <<a href='#"+TAG_MDREADINGMODE+"'>>Markdown 阅读模式</a> 相关设置。" +
-    "⚠️ 注意，您必须关闭当前的 Excalidraw/Markdown 文件并重新打开，以使此更改生效。⚠️",
+    "此设置控制在使用 Obsidian 内置的<b>导出为 PDF</b>功能，如何将 Excalidraw 文件导出为 PDF。<br>" +
+    "<ul><li><b>启用：</b>PDF 将包含图像格式的 Excalidraw 绘图。</li>" +
+    "<li><b>禁用：</b>PDF 将包含作为文本的 Markdown 内容。</li></ul>" +
+    "注意：此设置不会影响 Excalidraw 本身的 PDF 导出功能。<br>" +
+    "请参阅上方“外观和行为”部分中与<a href='#" + TAG_MDREADINGMODE + "'>Markdown 阅读模式</a>相关的其他设置。<br>" +
+    "⚠️ 您必须关闭并重新打开 Excalidraw/Markdown 文件，设置更改才会生效。⚠️",
   HOTKEY_OVERRIDE_HEAD: "热键覆盖",
   HOTKEY_OVERRIDE_DESC: `一些 Excalidraw 的热键，例如 ${labelCTRL()}+Enter 用于编辑文本，或 ${labelCTRL()}+K 用于创建元素链接。` +
     "与 Obsidian 的热键设置发生冲突。您在下面添加的热键组合将在使用 Excalidraw 时覆盖 Obsidian 的热键设置，" +
@@ -661,6 +662,7 @@ FILENAME_HEAD: "文件名",
   EXPORT_EMBED_SCENE_DESC:
     "在导出的图像中嵌入 Excalidraw 场景。可以通过在文件级别添加 <code>excalidraw-export-embed-scene: true/false</code> frontmatter 元数据键来覆盖此设置。" +
     "此设置仅在您下次(重新)打开绘图时生效。",
+  PDF_EXPORT_SETTINGS : "PDF 导出设置",
   EXPORT_HEAD: "导出设置",
   EXPORT_SYNC_NAME:
     "保持 SVG/PNG 文件名与绘图文件同步",
@@ -1006,4 +1008,75 @@ FILENAME_HEAD: "文件名",
   LINK_CLICK_POPOUT : "在弹出窗口中打开" ,
   LINK_CLICK_NEW_TAB : "在新标签页中打开" ,
   LINK_CLICK_MD_PROPS : "显示 Markdown 图片属性对话框（仅在嵌入 Markdown 文档为图片时适用）" ,
+
+// 导出对话框
+// 对话框和标签页
+EXPORTDIALOG_TITLE : "导出图形",
+EXPORTDIALOG_TAB_IMAGE : "图像",
+EXPORTDIALOG_TAB_PDF : "PDF",
+// 设置持久化
+EXPORTDIALOG_SAVE_SETTINGS : "将图像设置保存到文件 doc.properties 吗？",
+EXPORTDIALOG_SAVE_SETTINGS_SAVE : "保存为预设",
+EXPORTDIALOG_SAVE_SETTINGS_ONETIME : "仅本次使用",
+// 图像设置
+EXPORTDIALOG_IMAGE_SETTINGS : "图像",
+EXPORTDIALOG_IMAGE_DESC : "PNG 支持透明。外部文件可以包含 Excalidraw 场景数据。",
+EXPORTDIALOG_PADDING : "边距",
+EXPORTDIALOG_SCALE : "缩放",
+EXPORTDIALOG_CURRENT_PADDING : "当前边距：",
+EXPORTDIALOG_SIZE_DESC : "缩放会影响输出大小",
+EXPORTDIALOG_SCALE_VALUE : "缩放：",
+EXPORTDIALOG_IMAGE_SIZE : "大小：",
+// 主题和背景
+EXPORTDIALOG_EXPORT_THEME : "主题",
+EXPORTDIALOG_THEME_LIGHT : "浅色",
+EXPORTDIALOG_THEME_DARK : "深色",
+EXPORTDIALOG_BACKGROUND : "背景",
+EXPORTDIALOG_BACKGROUND_TRANSPARENT : "透明",
+EXPORTDIALOG_BACKGROUND_USE_COLOR : "使用场景颜色",
+// 选择
+EXPORTDIALOG_SELECTED_ELEMENTS : "导出",
+EXPORTDIALOG_SELECTED_ALL : "整个场景",
+EXPORTDIALOG_SELECTED_SELECTED : "仅选中部分",
+// 导出选项
+EXPORTDIALOG_EMBED_SCENE : "包含场景数据吗？",
+EXPORTDIALOG_EMBED_YES : "是",
+EXPORTDIALOG_EMBED_NO : "否",
+// PDF 设置
+EXPORTDIALOG_PDF_SETTINGS : "PDF",
+EXPORTDIALOG_PAGE_SIZE : "页面大小",
+EXPORTDIALOG_PAGE_ORIENTATION : "方向",
+EXPORTDIALOG_ORIENTATION_PORTRAIT : "纵向",
+EXPORTDIALOG_ORIENTATION_LANDSCAPE : "横向",
+EXPORTDIALOG_PDF_FIT_TO_PAGE : "页面适配",
+EXPORTDIALOG_PDF_FIT_OPTION : "适配页面",
+EXPORTDIALOG_PDF_SCALE_OPTION : "使用图像缩放（可能跨多页）",
+EXPORTDIALOG_PDF_PAPER_COLOR : "纸张颜色",
+EXPORTDIALOG_PDF_PAPER_WHITE : "白色",
+EXPORTDIALOG_PDF_PAPER_SCENE : "使用场景颜色",
+EXPORTDIALOG_PDF_PAPER_CUSTOM : "自定义颜色",
+EXPORTDIALOG_PDF_ALIGNMENT : "页面位置",
+EXPORTDIALOG_PDF_ALIGN_CENTER : "居中",
+EXPORTDIALOG_PDF_ALIGN_TOP_LEFT : "左上角",
+EXPORTDIALOG_PDF_ALIGN_TOP_CENTER : "顶部居中",
+EXPORTDIALOG_PDF_ALIGN_TOP_RIGHT : "右上角",
+EXPORTDIALOG_PDF_ALIGN_BOTTOM_LEFT : "左下角",
+EXPORTDIALOG_PDF_ALIGN_BOTTOM_CENTER : "底部居中",
+EXPORTDIALOG_PDF_ALIGN_BOTTOM_RIGHT : "右下角",
+EXPORTDIALOG_PDF_MARGIN : "边距",
+EXPORTDIALOG_PDF_MARGIN_NONE : "无",
+EXPORTDIALOG_PDF_MARGIN_TINY : "小",
+EXPORTDIALOG_PDF_MARGIN_NORMAL : "正常",
+EXPORTDIALOG_SAVE_PDF_SETTINGS : "保存 PDF 设置",
+EXPORTDIALOG_SAVE_CONFIRMATION : "PDF 配置已保存为插件默认设置",
+// 按钮
+EXPORTDIALOG_PNGTOFILE : "导出 PNG 文件",
+EXPORTDIALOG_SVGTOFILE : "导出 SVG 文件",
+EXPORTDIALOG_PNGTOVAULT : "PNG 保存到 Vault",
+EXPORTDIALOG_SVGTOVAULT : "SVG 保存到 Vault",
+EXPORTDIALOG_EXCALIDRAW : "Excalidraw",
+EXPORTDIALOG_PNGTOCLIPBOARD : "PNG 复制到剪贴板",
+EXPORTDIALOG_SVGTOCLIPBOARD : "SVG 复制到剪贴板",
+EXPORTDIALOG_PDF : "导出 PDF 文件",
+EXPORTDIALOG_PDFTOVAULT : "PDF 保存到 Vault",
 };

src/utils/exportUtils.ts

@@ -1,9 +1,18 @@
-import { PDFDocument, rgb } from '@cantoo/pdf-lib';
-import exp from 'constants';
 import { Notice } from 'obsidian';
 import { getEA } from 'src/core';
 import { t } from 'src/lang/helpers';
 
+// Define proper types for PDFLib
+type PDFLibType = typeof import('@cantoo/pdf-lib');
+let pdfLibPromise: Promise<PDFLibType> | null = null;
+
+async function getPDFLib(): Promise<PDFLibType> {
+  if (!pdfLibPromise) {
+    pdfLibPromise = import('@cantoo/pdf-lib');
+  }
+  return pdfLibPromise;
+}
+
 const PDF_DPI = 72;
 
 export type PDFPageAlignment = "center" | "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
@@ -223,12 +232,13 @@ function calculateDimensions(
 }
 
 async function addSVGToPage(
-  pdfDoc: PDFDocument,
+  pdfDoc: Awaited<ReturnType<typeof import('@cantoo/pdf-lib').PDFDocument.create>>,
   svg: SVGSVGElement,
   dimensions: SVGDimensions,
   pageDim: PageDimensions,
   pageProps: PDFPageProperties
 ) {
+  const { rgb } = await getPDFLib();
   const page = pdfDoc.addPage([pageDim.width, pageDim.height]);
     
   if (pageProps.backgroundColor && pageProps.backgroundColor !== '#ffffff') {
@@ -315,13 +325,15 @@ export async function exportToPDF({
   scale: PDFExportScale;
   pageProps: PDFPageProperties;
 }): Promise<ArrayBuffer> {
-  
+  const { PDFDocument } = await getPDFLib();
   const pdfDoc = await PDFDocument.create();
 
   const msg = t('EXPORTDIALOG_PDF_PROGRESS_NOTICE');
   const imgmsg = t('EXPORTDIALOG_PDF_PROGRESS_IMAGE');
 
   let notice = new Notice(msg, 0);
+  //@ts-ignore
+  let noticeContainerEl = notice.containerEl ?? notice.noticeEl;
 
   let j=1;
   for (const svg of SVG) {
@@ -339,12 +351,13 @@ export async function exportToPDF({
     );
 
     let i=1;
-    for (const dim of dimensions) {
-      //@ts-ignore
-      if(notice.containerEl.parentElement) {
+    for (const dim of dimensions) {    
+      if(noticeContainerEl.parentElement) {
         notice.setMessage(`${msg} ${i++}/${dimensions.length}${SVG.length>1?` ${imgmsg} ${j}`:""}`);
       } else {
         notice = new Notice(`${msg} ${i++}/${dimensions.length}${SVG.length>1?` ${imgmsg} ${j}`:""}`, 0);
+        //@ts-ignore
+        noticeContainerEl = notice.containerEl ?? notice.noticeEl;
       }
       await addSVGToPage(pdfDoc, svg, dim, pageProps.dimensions, pageProps);
     }
@@ -352,7 +365,7 @@ export async function exportToPDF({
   }
 
   //@ts-ignore
-  if(notice.containerEl.parentElement) {
+  if(noticeContainerEl.parentElement) {
     notice.setMessage(t('EXPORTDIALOG_PDF_PROGRESS_DONE'));
     setTimeout(() => notice.hide(), 4000);
   } else {

src/view/ExcalidrawView.ts

@@ -1578,6 +1578,9 @@ export default class ExcalidrawView extends TextFileView implements HoverParent{
     this.packages = this.plugin.getPackage(this.ownerWindow);
 
     if(DEVICE.isDesktop && !apiMissing) {
+      if(this.ownerWindow !== window) {
+        this.plugin.initializeFonts();
+      }
       this.destroyers.push(
         //this.containerEl.onWindowMigrated(this.leaf.rebuildView.bind(this))
         this.containerEl.onWindowMigrated(async() => {

styles.css

@@ -116,6 +116,7 @@ li[data-testid] {
   border: 0 !important;
   box-shadow: 0 !important;
   background-color: transparent !important;
+  overflow-y: auto !important;
 } 
 
 .excalidraw .popover {
@@ -336,6 +337,16 @@ label.color-input-container > input {
   display: none !important;
 }
 
+.excalidraw .App-toolbar-content .dropdown-menu {
+  max-height: 70vh;
+  overflow-y: auto;
+}
+
+.excalidraw .panelColumn {
+  max-height: 70vh;
+  overflow-y: auto;
+}
+
 .excalidraw .panelColumn .buttonList {
   max-width: 13rem;
 }