diff --git a/bin/copy-dist.ts b/bin/copy-dist.ts index 3b09fec27..3e138fed1 100644 --- a/bin/copy-dist.ts +++ b/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/", diff --git a/src/public/app/services/library_loader.ts b/src/public/app/services/library_loader.ts index ddce02301..8dca65060 100644 --- a/src/public/app/services/library_loader.ts +++ b/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, diff --git a/src/public/app/types.d.ts b/src/public/app/types.d.ts index 368f81420..6e9e514cf 100644 --- a/src/public/app/types.d.ts +++ b/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; - } -} diff --git a/src/public/app/widgets/type_widgets/relation_map.ts b/src/public/app/widgets/type_widgets/relation_map.ts index a539f4485..fcc2c48cd 100644 --- a/src/public/app/widgets/type_widgets/relation_map.ts +++ b/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); - // TODO: Remove once we port to webpack. - (jsPlumb as unknown as jsPlumbInstance).ready(res); + // Weird typecast is needed probably due to bad typings in the module itself. + const jsPlumb = (await import("jsplumb")).default.jsPlumb as unknown as jsPlumbInstance; + 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", diff --git a/src/routes/assets.ts b/src/routes/assets.ts index d2bf47c42..1fa52dff7 100644 --- a/src/routes/assets.ts +++ b/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/")));