refactor(deps): use webpack for jsplumb & panzoom

bin/copy-dist.ts

@@ -80,10 +80,8 @@ try {
         "node_modules/jquery/dist/",
         "node_modules/jquery-hotkeys/",
         "node_modules/split.js/dist/",
-        "node_modules/panzoom/dist/",
         "node_modules/i18next/",
         "node_modules/i18next-http-backend/",
-        "node_modules/jsplumb/dist/",
         "node_modules/vanilla-js-wheel-zoom/dist/",
         "node_modules/mark.js/dist/",
         "node_modules/normalize.css/",

src/public/app/services/library_loader.ts

@@ -42,11 +42,6 @@ const CODE_MIRROR: Library = {
     css: ["node_modules/codemirror/lib/codemirror.css", "node_modules/codemirror/addon/lint/lint.css"]
 };
 
-const RELATION_MAP: Library = {
-    js: ["node_modules/jsplumb/dist/js/jsplumb.min.js", "node_modules/panzoom/dist/panzoom.min.js"],
-    css: ["stylesheets/relation_map.css"]
-};
-
 const CALENDAR_WIDGET: Library = {
     css: ["stylesheets/calendar.css"]
 };
@@ -183,7 +178,6 @@ export default {
     loadHighlightingTheme,
     CKEDITOR,
     CODE_MIRROR,
-    RELATION_MAP,
     CALENDAR_WIDGET,
     KATEX,
     WHEEL_ZOOM,

src/public/app/types.d.ts

@@ -365,14 +365,6 @@ declare global {
         }[];
     }
 
-    /*
-     * jsPlumb
-     */
-    var jsPlumb: typeof import("jsplumb").jsPlumb;
-    type jsPlumbInstance = import("jsplumb").jsPlumbInstance;
-    type OverlaySpec = typeof import("jsplumb").OverlaySpec;
-    type ConnectionMadeEventInfo = typeof import("jsplumb").ConnectionMadeEventInfo;
-
     /*
      * Panzoom
      */
@@ -392,17 +384,3 @@ declare global {
         dispose(): void;
     }
 }
-
-module "jsplumb" {
-    interface Connection {
-        canvas: HTMLCanvasElement;
-    }
-
-    interface Overlay {
-        setLabel(label: string);
-    }
-
-    interface ConnectParams {
-        type: RelationType;
-    }
-}

src/public/app/widgets/type_widgets/relation_map.ts

@@ -1,6 +1,5 @@
 import server from "../../services/server.js";
 import linkService from "../../services/link.js";
-import libraryLoader from "../../services/library_loader.js";
 import contextMenu from "../../menus/context_menu.js";
 import toastService from "../../services/toast.js";
 import attributeAutocompleteService from "../../services/attribute_autocomplete.js";
@@ -11,6 +10,25 @@ import froca from "../../services/froca.js";
 import dialogService from "../../services/dialog.js";
 import { t } from "../../services/i18n.js";
 import type FNote from "../../entities/fnote.js";
+import type { ConnectionMadeEventInfo, jsPlumbInstance, OverlaySpec } from "jsplumb";
+import "../../../stylesheets/relation_map.css";
+
+declare module "jsplumb" {
+
+    interface Connection {
+        canvas: HTMLCanvasElement;
+        getType(): string;
+        bind(event: string, callback: (obj: unknown, event: MouseEvent) => void): void;
+    }
+
+    interface Overlay {
+        setLabel(label: string): void;
+    }
+
+    interface ConnectParams {
+        type: RelationType;
+    }
+}
 
 const uniDirectionalOverlays: OverlaySpec[] = [
     [
@@ -206,9 +224,9 @@ export default class RelationMapTypeWidget extends TypeWidget {
         this.$widget.on("dragover", (ev) => ev.preventDefault());
 
         this.initialized = new Promise(async (res) => {
-            await libraryLoader.requireLibrary(libraryLoader.RELATION_MAP);
+            // Weird typecast is needed probably due to bad typings in the module itself.
-            // TODO: Remove once we port to webpack.
+            const jsPlumb = (await import("jsplumb")).default.jsPlumb as unknown as jsPlumbInstance;
-            (jsPlumb as unknown as jsPlumbInstance).ready(res);
+            jsPlumb.ready(res);
         });
 
         super.doRender();
@@ -298,9 +316,9 @@ export default class RelationMapTypeWidget extends TypeWidget {
     async doRefresh(note: FNote) {
         await this.loadMapData();
 
-        this.initJsPlumbInstance();
+        await this.initJsPlumbInstance();
 
-        this.initPanZoom();
+        await this.initPanZoom();
 
         this.loadNotesAndRelations();
     }
@@ -385,16 +403,19 @@ export default class RelationMapTypeWidget extends TypeWidget {
         });
     }
 
-    initPanZoom() {
+    async initPanZoom() {
         if (this.pzInstance) {
             return;
         }
 
+        const panzoom = (await import("panzoom")).default;
         this.pzInstance = panzoom(this.$relationMapContainer[0], {
             maxZoom: 2,
             minZoom: 0.3,
             smoothScroll: false,
-            filterKey: function (e, dx, dy, dz) {
+
+            //@ts-expect-error Upstream incorrectly mentions no arguments.
+            filterKey: function (e: KeyboardEvent) {
                 // if ALT is pressed, then panzoom should bubble the event up
                 // this is to preserve ALT-LEFT, ALT-RIGHT navigation working
                 return e.altKey;
@@ -448,13 +469,14 @@ export default class RelationMapTypeWidget extends TypeWidget {
         }
     }
 
-    initJsPlumbInstance() {
+    async initJsPlumbInstance() {
         if (this.jsPlumbInstance) {
             this.cleanup();
 
             return;
         }
 
+        const jsPlumb = (await import("jsplumb")).default.jsPlumb;
         this.jsPlumbInstance = jsPlumb.getInstance({
             Endpoint: ["Dot", { radius: 2 }],
             Connector: "StateMachine",

src/routes/assets.ts

@@ -70,15 +70,11 @@ async function register(app: express.Application) {
 
     app.use(`/${assetPath}/node_modules/jquery-hotkeys/`, persistentCacheStatic(path.join(srcRoot, "..", "node_modules/jquery-hotkeys/")));
 
-    app.use(`/${assetPath}/node_modules/panzoom/dist/`, persistentCacheStatic(path.join(srcRoot, "..", "node_modules/panzoom/dist/")));
-
     // i18n
     app.use(`/${assetPath}/translations/`, persistentCacheStatic(path.join(srcRoot, "public", "translations/")));
 
     app.use(`/${assetPath}/node_modules/eslint/bin/`, persistentCacheStatic(path.join(srcRoot, "..", "node_modules/eslint/bin/")));
 
-    app.use(`/${assetPath}/node_modules/jsplumb/dist/`, persistentCacheStatic(path.join(srcRoot, "..", "node_modules/jsplumb/dist/")));
-
     app.use(`/${assetPath}/node_modules/vanilla-js-wheel-zoom/dist/`, persistentCacheStatic(path.join(srcRoot, "..", "node_modules/vanilla-js-wheel-zoom/dist/")));
 
     app.use(`/${assetPath}/node_modules/mark.js/dist/`, persistentCacheStatic(path.join(srcRoot, "..", "node_modules/mark.js/dist/")));