WIP

src/ExcalidrawView.ts

@@ -37,7 +37,6 @@ import {
   TEXT_DISPLAY_PARSED_ICON_NAME,
   FULLSCREEN_ICON_NAME,
   IMAGE_TYPES,
-  CTRL_OR_CMD,
   REG_LINKINDEX_INVALIDCHARS,
   KEYCODE,
   LOCAL_PROTOCOL,
@@ -71,11 +70,13 @@ import {
   getExportPadding,
   getWithBackground,
   hasExportTheme,
-  isVersionNewerThanOther,
   scaleLoadedImage,
-  setDocLeftHandedMode,
   svgToBase64,
   viewportCoordsToSceneCoords,
+  isCtrlDown,
+  isShiftDown,
+  isAltDown,
+  isMetaDown,
 } from "./utils/Utils";
 import { getNewOrAdjacentLeaf, getParentOfClass } from "./utils/ObsidianUtils";
 import { splitFolderAndFilename } from "./utils/FileUtils";
@@ -191,10 +192,17 @@ export default class ExcalidrawView extends TextFileView {
   private onKeyUp: (e: KeyboardEvent) => void;
   private onKeyDown:(e: KeyboardEvent) => void;
   //store key state for view mode link resolution
-  private metaKeyDown: boolean = false;
-  private ctrlKeyDown: boolean = false;
-  private shiftKeyDown: boolean = false;
-  private altKeyDown: boolean = false;
+  private lastKeyboardEvent = new KeyboardEvent("keyboard", {
+    key: "",
+    code: "",
+    location: 0,
+    ctrlKey: false,
+    shiftKey: false,
+    altKey: false,
+    metaKey: false,
+    repeat: false
+  });
+
   //Obsidian 0.15.0
   public ownerWindow: Window;
   public ownerDocument: Document;
@@ -876,7 +884,7 @@ export default class ExcalidrawView extends TextFileView {
       }
       await this.save(false); //in case pasted images haven't been saved yet
       if (this.excalidrawData.hasFile(selectedImage.fileId)) {
-        if (ev.altKey) {
+        if (isAltDown(ev)) {
           const ef = this.excalidrawData.getFile(selectedImage.fileId);
           if (
             ef.file.extension === "md" &&
@@ -930,18 +938,18 @@ export default class ExcalidrawView extends TextFileView {
     }
 
     try {
-      if (ev.shiftKey && this.isFullscreen()) {
+      if (isShiftDown(ev) && this.isFullscreen()) {
         this.exitFullscreen();
       }
       if (!file) {
-        new NewFileActions(this.plugin, linkText, ev.shiftKey, !app.isMobile && ev.metaKey, view).open();
+        new NewFileActions(this.plugin, linkText, isShiftDown(ev), !app.isMobile && isMetaDown(ev), view).open();
         return;
       }
       const leaf =
-        (!app.isMobile && ((ev.metaKey && this.linksAlwaysOpenInANewPane) || ev.metaKey))
+        (!app.isMobile && ((isMetaDown(ev) && this.linksAlwaysOpenInANewPane) || isMetaDown(ev)))
         //@ts-ignore
         ? app.workspace.openPopoutLeaf()
-        : (ev.shiftKey || this.linksAlwaysOpenInANewPane)
+        : (isShiftDown(ev) || this.linksAlwaysOpenInANewPane)
           ? getNewOrAdjacentLeaf(this.plugin, view.leaf)
           : view.leaf;
       await leaf.openFile(file, subpath ? { active: false, eState: { subpath } } : undefined); //if file exists open file and jump to reference
@@ -1063,18 +1071,25 @@ export default class ExcalidrawView extends TextFileView {
       await self.addSlidingPanesListner(); //awaiting this because when using workspaces, onLayoutReady comes too early
       self.addParentMoveObserver();
 
+      const cloneEvent = (e: KeyboardEvent):KeyboardEvent => {
+        return new KeyboardEvent(e.type,{
+          key: e.key,
+          code: e.code,
+          location: e.location,
+          ctrlKey: e.ctrlKey,
+          shiftKey: e.shiftKey,
+          altKey: e.altKey,
+          metaKey: e.metaKey,
+          repeat: e.repeat
+        });
+      }
+
       self.onKeyUp = (e: KeyboardEvent) => {
-        self.ctrlKeyDown = e[CTRL_OR_CMD];
-        self.shiftKeyDown = e.shiftKey;
-        self.altKeyDown = e.altKey;
-        self.metaKeyDown = e.metaKey;
+        self.lastKeyboardEvent = cloneEvent(e);
       };
 
       self.onKeyDown = (e: KeyboardEvent) => {
-        this.ctrlKeyDown = e[CTRL_OR_CMD];
-        this.shiftKeyDown = e.shiftKey;
-        this.altKeyDown = e.altKey;
-        this.metaKeyDown = e.metaKey;
+        self.lastKeyboardEvent = cloneEvent(e);
       };
 
       self.ownerWindow.addEventListener("keydown", self.onKeyDown, false);
@@ -1934,7 +1949,7 @@ export default class ExcalidrawView extends TextFileView {
             if (!this.getScene || !this.file) {
               return;
             }
-            if (ev[CTRL_OR_CMD]) {
+            if (isCtrlDown(ev)) {
               const png = await this.png(this.getScene());
               if (!png) {
                 return;
@@ -1961,7 +1976,7 @@ export default class ExcalidrawView extends TextFileView {
             if (!this.getScene || !this.file) {
               return;
             }
-            if (ev[CTRL_OR_CMD]) {
+            if (isCtrlDown(ev)) {
               let svg = await this.svg(this.getScene());
               if (!svg) {
                 return null;
@@ -2676,7 +2691,7 @@ export default class ExcalidrawView extends TextFileView {
               this.exitFullscreen();
             }
 
-            if (e[CTRL_OR_CMD] && !e.shiftKey && !e.altKey) {
+            if (isCtrlDown(e) && !isShiftDown(e) && !isAltDown(e)) {
               showHoverPreview();
             }
           },
@@ -2684,10 +2699,10 @@ export default class ExcalidrawView extends TextFileView {
           //onClick: (e: MouseEvent): any => {
           //to onPointerDown so touch events also open links on the iPad (with a keyboard)
           onPointerDown: (e: PointerEvent) => {            
-            if (!(e[CTRL_OR_CMD]||e.metaKey)) {
+            if ( !(isCtrlDown(e) || isMetaDown(e)) ) {
               return;
             } 
-            if (!this.plugin.settings.allowCtrlClick && !e.metaKey) {
+            if (!this.plugin.settings.allowCtrlClick && !isMetaDown(e)) {
               return;
             }
             //added setTimeout when I changed onClick(e: MouseEvent) to onPointerDown() in 1.7.9. 
@@ -2892,7 +2907,7 @@ export default class ExcalidrawView extends TextFileView {
             };
 
             //https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/468
-            event[CTRL_OR_CMD] = event.shiftKey || event[CTRL_OR_CMD];
+            //event[CTRL_OR_CMD] = event.shiftKey || event[CTRL_OR_CMD]; Moved logic to isCtrlDown in Utils
             switch (draggable?.type) {
               case "file":
                 if (!onDropHook("file", [draggable.file], null)) {
@@ -2902,7 +2917,7 @@ export default class ExcalidrawView extends TextFileView {
                     return false;
                   }
                   if (
-                    event[CTRL_OR_CMD] && 
+                    isCtrlDown(event) && 
                     (IMAGE_TYPES.contains(draggable.file.extension) ||
                       draggable.file.extension === "md")
                   ) {
@@ -2932,7 +2947,7 @@ export default class ExcalidrawView extends TextFileView {
               case "files":
                 if (!onDropHook("file", draggable.files, null)) {
                   (async () => {
-                    if (event[CTRL_OR_CMD]) {
+                    if (isCtrlDown(event)) {
                       const ea = this.plugin.ea;
                       ea.reset();
                       ea.setView(this);
@@ -3225,10 +3240,10 @@ export default class ExcalidrawView extends TextFileView {
                 );
 
                 const useNewLeaf =
-                  event.shiftKey ||
-                  event[CTRL_OR_CMD] ||
+                  isShiftDown(event) ||
+                  isCtrlDown(event) ||
                   this.linksAlwaysOpenInANewPane ||
-                  event.metaKey;
+                  isMetaDown(event);
 
                 if (useNewLeaf && this.isFullscreen()) {
                   this.exitFullscreen();
@@ -3238,7 +3253,7 @@ export default class ExcalidrawView extends TextFileView {
                     this.plugin,
                     linkText,
                     useNewLeaf,
-                    !app.isMobile && event.metaKey,
+                    !app.isMobile && isMetaDown(event),
                     this,
                   ).open();
                   return;
@@ -3252,7 +3267,7 @@ export default class ExcalidrawView extends TextFileView {
                 } else {
                   try {
                     const leaf = useNewLeaf
-                      ? (event.metaKey && !app.isMobile)
+                      ? (isMetaDown(event) && !app.isMobile)
                         //@ts-ignore
                         ? app.workspace.openPopoutLeaf()
                         : getNewOrAdjacentLeaf(this.plugin, this.leaf)
@@ -3278,7 +3293,7 @@ export default class ExcalidrawView extends TextFileView {
             if (
               element &&
               (this.plugin.settings.hoverPreviewWithoutCTRL ||
-                event[CTRL_OR_CMD])
+                isCtrlDown(event))
             ) {
               mouseEvent = event;
               mouseEvent.ctrlKey = true;

src/MarkdownPostProcessor.ts

@@ -4,7 +4,7 @@ import {
   TFile,
   Vault,
 } from "obsidian";
-import { CTRL_OR_CMD, RERENDER_EVENT } from "./Constants";
+import { RERENDER_EVENT } from "./Constants";
 import { EmbeddedFilesLoader } from "./EmbeddedFileLoader";
 import { createPNG, createSVG } from "./ExcalidrawAutomate";
 import { ExportSettings } from "./ExcalidrawView";
@@ -19,6 +19,8 @@ import {
   getWithBackground,
   hasExportTheme,
   svgToBase64,
+  isCtrlDown,
+  isMetaDown,
 } from "./utils/Utils";
 import { isObsidianThemeDark } from "./utils/ObsidianUtils";
 
@@ -211,15 +213,15 @@ const createImageDiv = async (
         if(!srcParts) return;
         plugin.openDrawing(
           vault.getAbstractFileByPath(srcParts[1]) as TFile,
-          ev[CTRL_OR_CMD]
+          isCtrlDown(ev)
             ? "new-pane"
-            : (ev.metaKey && !app.isMobile)
+            : (isMetaDown(ev) && !app.isMobile)
               ? "popout-window"
               : "active-pane",
           true,
           srcParts[2],
         );
-      } //.ctrlKey||ev.metaKey);
+      } 
     });
     el.addEventListener(RERENDER_EVENT, async (e) => {
       e.stopPropagation();
@@ -544,13 +546,13 @@ export const observer = new MutationObserver(async (m) => {
       if (src) {
         plugin.openDrawing(
           vault.getAbstractFileByPath(src) as TFile,
-          ev[CTRL_OR_CMD]
+          isCtrlDown(ev)
             ? "new-pane"
-            : (ev.metaKey && !app.isMobile) 
+            : (isMetaDown(ev) && !app.isMobile) 
               ? "popout-window"
               : "active-pane",
         );
-      } //.ctrlKey||ev.metaKey);
+      } 
     });
   });
   node.appendChild(div);

src/main.ts

@@ -37,7 +37,6 @@ import {
   JSON_parse,
   nanoid,
   DARK_BLANK_DRAWING,
-  CTRL_OR_CMD,
   SCRIPT_INSTALL_CODEBLOCK,
   SCRIPT_INSTALL_FOLDER,
   VIRGIL_FONT,
@@ -86,6 +85,7 @@ import {
   debug,
   isVersionNewerThanOther,
   getExportTheme,
+  isCtrlDown,
 } from "./utils/Utils";
 import { getAttachmentsFolderAndFilePath, getNewOrAdjacentLeaf, getParentOfClass, isObsidianThemeDark } from "./utils/ObsidianUtils";
 //import { OneOffs } from "./OneOffs";
@@ -694,7 +694,7 @@ export default class ExcalidrawPlugin extends Plugin {
     this.addRibbonIcon(ICON_NAME, t("CREATE_NEW"), async (e) => {
       this.createAndOpenDrawing(
         getDrawingFilename(this.settings),
-        e[CTRL_OR_CMD]?"new-pane":"active-pane",
+        isCtrlDown(e) ? "new-pane" : "active-pane",
       ); //.ctrlKey||e.metaKey);
     });
 

src/menu/ToolsPanel.tsx

@@ -3,13 +3,14 @@ import { Notice, TFile } from "obsidian";
 import * as React from "react";
 import { ActionButton } from "./ActionButton";
 import { ICONS } from "./ActionIcons";
-import { SCRIPT_INSTALL_FOLDER, CTRL_OR_CMD } from "../Constants";
+import { SCRIPT_INSTALL_FOLDER } from "../Constants";
 import { insertLaTeXToView, search } from "../ExcalidrawAutomate";
 import ExcalidrawView, { TextMode } from "../ExcalidrawView";
 import { t } from "../lang/helpers";
 import { ReleaseNotes } from "../dialogs/ReleaseNotes";
 import { ScriptIconMap } from "../Scripts";
 import { getIMGFilename } from "../utils/FileUtils";
+import { isCtrlDown, isShiftDown } from "src/utils/Utils";
 
 declare const PLUGIN_VERSION:string;
 const dark = '<svg style="stroke:#ced4da;#212529;color:#ced4da;fill:#ced4da" ';
@@ -466,7 +467,7 @@ export class ToolsPanel extends React.Component<PanelProps, PanelState> {
                     title={t("INSERT_LINK_TO_ELEMENT")}
                     action={(e:React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
                       this.props.view.copyLinkToSelectedElementToClipboard(
-                        e[CTRL_OR_CMD] ? "group=" : (e.shiftKey ? "area=" : "")
+                        isCtrlDown(e) ? "group=" : (isShiftDown(e) ? "area=" : "")
                       );
                     }}
                     icon={ICONS.copyElementLink}

src/utils/Utils.ts

@@ -11,12 +11,12 @@ import {
   CASCADIA_FONT,
   REG_BLOCK_REF_CLEAN,
   VIRGIL_FONT,
-  PLUGIN_ID,
   FRONTMATTER_KEY_EXPORT_DARK,
   FRONTMATTER_KEY_EXPORT_TRANSPARENT,
   FRONTMATTER_KEY_EXPORT_SVGPADDING,
   FRONTMATTER_KEY_EXPORT_PNGSCALE,
   FRONTMATTER_KEY_EXPORT_PADDING,
+  CTRL_OR_CMD,
 } from "../Constants";
 import ExcalidrawPlugin from "../main";
 import { ExcalidrawElement } from "@zsviczian/excalidraw/types/element/types";
@@ -24,6 +24,7 @@ import { ExportSettings } from "../ExcalidrawView";
 import { compressToBase64, decompressFromBase64 } from "lz-string";
 import { getIMGFilename } from "./FileUtils";
 
+
 declare const PLUGIN_VERSION:string;
 
 const {
@@ -628,6 +629,30 @@ export const errorlog = (data: {}) => {
 
 export const sleep = async (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
+type GenericEvent = KeyboardEvent | MouseEvent | React.DragEvent | React.PointerEvent | React.MouseEvent;
+
+export const isCtrlDown = (e:GenericEvent):boolean => {
+  https://stackoverflow.com/questions/44030187/correct-way-to-check-if-any-object-is-a-syntheticevent
+  return e instanceof Event
+    ? e[CTRL_OR_CMD]
+    : e.nativeEvent instanceof DragEvent
+      ? e[CTRL_OR_CMD] || isShiftDown(e) // React.DragEvent; //https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/468
+      : e[CTRL_OR_CMD];
+    
+}
+
+export const isShiftDown = (e:GenericEvent):boolean => {
+  return e.shiftKey;
+}
+
+export const isAltDown = (e:GenericEvent):boolean => {
+  return e.altKey;
+}
+
+export const isMetaDown = (e:GenericEvent):boolean => {
+  return e.metaKey;
+}
+
 /**REACT 18 
   //see also: https://github.com/zsviczian/obsidian-excalidraw-plugin/commit/b67d70c5196f30e2968f9da919d106ee66f2a5eb
   //https://github.com/zsviczian/obsidian-excalidraw-plugin/commit/cc9d7828c7ee7755c1ef942519c43df32eae249f