Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-08-10 10:22:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(deps): use webpack for jsplumb & panzoom

Browse Source
This commit is contained in:
Elian Doran 2025-03-20 21:51:03 +02:00
parent 3047957239
commit b44bb4053c
No known key found for this signature in database
5 changed files with 31 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
bin/copy-dist.ts
View File

@ -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/",

6
src/public/app/services/library_loader.ts
View File

@ -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,

22
src/public/app/types.d.ts vendored
View File

@ -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;
}
}

40
src/public/app/widgets/type_widgets/relation_map.ts
View File

@ -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",

4
src/routes/assets.ts
View File

@ -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/")));