trilium/src/public/javascripts/services/note_detail_relation_map.js

624 lines
20 KiB
JavaScript
Raw Normal View History

import server from "./server.js";
import noteDetailService from "./note_detail.js";
2018-10-30 15:53:30 +08:00
import linkService from "./link.js";
2018-10-18 17:46:07 +08:00
import libraryLoader from "./library_loader.js";
import treeService from "./tree.js";
2018-11-10 05:18:51 +08:00
import contextMenuWidget from "./context_menu.js";
2019-10-20 16:00:18 +08:00
import toastService from "./toast.js";
import attributeAutocompleteService from "./attribute_autocomplete.js";
2018-10-30 02:25:45 +08:00
const uniDirectionalOverlays = [
[ "Arrow", {
location: 1,
id: "arrow",
length: 14,
foldback: 0.8
} ],
2018-10-30 15:53:30 +08:00
[ "Label", { label: "", id: "label", cssClass: "connection-label" }]
2018-10-30 02:25:45 +08:00
];
const biDirectionalOverlays = [
[ "Arrow", {
location: 1,
id: "arrow",
length: 14,
foldback: 0.8
} ],
2018-10-30 15:53:30 +08:00
[ "Label", { label: "", id: "label", cssClass: "connection-label" }],
2018-10-30 02:25:45 +08:00
[ "Arrow", {
location: 0,
id: "arrow2",
length: 14,
direction: -1,
foldback: 0.8
} ]
];
const inverseRelationsOverlays = [
[ "Arrow", {
location: 1,
id: "arrow",
length: 14,
foldback: 0.8
} ],
[ "Label", { label: "", location: 0.2, id: "label-source", cssClass: "connection-label" }],
[ "Label", { label: "", location: 0.8, id: "label-target", cssClass: "connection-label" }],
[ "Arrow", {
location: 0,
id: "arrow2",
length: 14,
direction: -1,
foldback: 0.8
} ]
];
const linkOverlays = [
[ "Arrow", {
location: 1,
id: "arrow",
length: 14,
foldback: 0.8
} ]
];
2019-05-04 06:16:41 +08:00
let containerCounter = 1;
class NoteDetailRelationMap {
/**
2019-05-09 01:55:24 +08:00
* @param {TabContext} ctx
2019-05-04 06:16:41 +08:00
*/
constructor(ctx) {
this.ctx = ctx;
2019-05-09 01:55:24 +08:00
this.$component = ctx.$tabContent.find(".note-detail-relation-map");
this.$relationMapContainer = ctx.$tabContent.find(".relation-map-container");
this.$createChildNote = ctx.$tabContent.find(".relation-map-create-child-note");
this.$zoomInButton = ctx.$tabContent.find(".relation-map-zoom-in");
this.$zoomOutButton = ctx.$tabContent.find(".relation-map-zoom-out");
this.$resetPanZoomButton = ctx.$tabContent.find(".relation-map-reset-pan-zoom");
2019-05-04 06:16:41 +08:00
this.mapData = null;
this.jsPlumbInstance = null;
// outside of mapData because they are not persisted in the note content
this.relations = null;
this.pzInstance = null;
this.$relationMapWrapper = ctx.$tabContent.find('.relation-map-wrapper');
this.$relationMapWrapper.click(event => {
if (this.clipboard) {
let {x, y} = this.getMousePosition(event);
// modifying position so that cursor is on the top-center of the box
x -= 80;
y -= 15;
this.createNoteBox(this.clipboard.noteId, this.clipboard.title, x, y);
this.mapData.notes.push({ noteId: this.clipboard.noteId, x, y });
this.saveData();
this.clipboard = null;
}
return true;
});
2019-05-04 06:16:41 +08:00
this.$relationMapContainer.attr("id", "relation-map-container-" + (containerCounter++));
this.$relationMapContainer.on("contextmenu", ".note-box", e => {
contextMenuWidget.initContextMenu(e, {
getContextMenuItems: () => {
return [
{title: "Open in new tab", cmd: "open-in-new-tab", uiIcon: "empty"},
2019-05-04 06:16:41 +08:00
{title: "Remove note", cmd: "remove", uiIcon: "trash"},
{title: "Edit title", cmd: "edit-title", uiIcon: "pencil"},
];
},
2019-05-09 01:55:24 +08:00
selectContextMenuItem: (event, cmd) => this.tabContextMenuHandler(event, cmd)
2019-05-04 06:16:41 +08:00
});
2018-10-21 16:26:14 +08:00
2019-05-04 06:16:41 +08:00
return false;
});
2018-10-21 16:26:14 +08:00
2019-05-04 06:16:41 +08:00
this.clipboard = null;
2019-05-04 06:16:41 +08:00
this.$createChildNote.click(async () => {
const promptDialog = await import('../dialogs/prompt.js');
2019-05-04 06:16:41 +08:00
const title = await promptDialog.ask({ message: "Enter title of new note", defaultValue: "new note" });
2019-05-04 06:16:41 +08:00
if (!title.trim()) {
return;
}
2018-10-18 17:53:01 +08:00
2019-05-04 06:16:41 +08:00
const {note} = await server.post(`notes/${this.ctx.note.noteId}/children`, {
title,
target: 'into'
});
2019-10-20 16:00:18 +08:00
toastService.showMessage("Click on canvas to place new note");
2019-05-04 06:16:41 +08:00
// reloading tree so that the new note appears there
// no need to wait for it to finish
treeService.reload();
2018-10-18 17:53:01 +08:00
2019-05-04 06:16:41 +08:00
this.clipboard = { noteId: note.noteId, title };
});
2018-10-18 17:53:01 +08:00
2019-05-04 06:16:41 +08:00
this.$resetPanZoomButton.click(() => {
// reset to initial pan & zoom state
this.pzInstance.zoomTo(0, 0, 1 / this.getZoom());
2019-05-04 06:16:41 +08:00
this.pzInstance.moveTo(0, 0);
});
this.$component.on("drop", ev => this.dropNoteOntoRelationMapHandler(ev));
2019-05-04 06:16:41 +08:00
this.$component.on("dragover", ev => ev.preventDefault());
}
2018-11-01 16:41:03 +08:00
2019-05-09 01:55:24 +08:00
async tabContextMenuHandler(event, cmd) {
2019-05-04 06:16:41 +08:00
const $noteBox = $(event.originalTarget).closest(".note-box");
const $title = $noteBox.find(".title a");
const noteId = this.idToNoteId($noteBox.prop("id"));
if (cmd === "open-in-new-tab") {
noteDetailService.openInTab(noteId);
}
else if (cmd === "remove") {
const confirmDialog = await import('../dialogs/confirm.js');
2019-05-04 06:16:41 +08:00
if (!await confirmDialog.confirmDeleteNoteBoxWithNote($title.text())) {
return;
}
2018-10-18 17:53:01 +08:00
2019-05-04 06:16:41 +08:00
this.jsPlumbInstance.remove(this.noteIdToId(noteId));
2019-05-04 06:16:41 +08:00
if (confirmDialog.isDeleteNoteChecked()) {
await server.remove("notes/" + noteId);
2019-05-04 06:16:41 +08:00
// to force it to disappear from the tree
treeService.reload();
}
2018-10-18 17:53:01 +08:00
2019-05-04 06:16:41 +08:00
this.mapData.notes = this.mapData.notes.filter(note => note.noteId !== noteId);
2018-10-18 17:53:01 +08:00
2019-05-04 06:16:41 +08:00
this.relations = this.relations.filter(relation => relation.sourceNoteId !== noteId && relation.targetNoteId !== noteId);
2018-10-18 17:53:01 +08:00
2019-05-04 06:16:41 +08:00
this.saveData();
2018-10-30 02:25:45 +08:00
}
2019-05-04 06:16:41 +08:00
else if (cmd === "edit-title") {
const promptDialog = await import('"../dialogs/prompt.js"');
2019-05-04 06:16:41 +08:00
const title = await promptDialog.ask({
message: "Enter new note title:",
defaultValue: $title.text()
});
2018-11-13 04:18:22 +08:00
2019-05-04 06:16:41 +08:00
if (!title) {
return;
}
2018-10-18 17:53:01 +08:00
2019-05-04 06:16:41 +08:00
await server.put(`notes/${noteId}/change-title`, { title });
2019-05-04 06:16:41 +08:00
treeService.setNoteTitle(noteId, title);
2018-10-18 17:53:01 +08:00
2019-05-04 06:16:41 +08:00
$title.text(title);
2018-10-30 02:25:45 +08:00
}
2019-05-04 06:16:41 +08:00
}
2018-10-18 17:53:01 +08:00
2019-05-04 06:16:41 +08:00
loadMapData() {
this.mapData = {
notes: [],
// it is important to have this exact value here so that initial transform is same as this
// which will guarantee note won't be saved on first conversion to relation map note type
// this keeps the principle that note type change doesn't destroy note content unless user
// does some actual change
transform: {
x: 0,
y: 0,
scale: 1
2018-10-30 02:25:45 +08:00
}
2019-05-04 06:16:41 +08:00
};
2018-10-18 17:53:01 +08:00
2019-05-04 06:16:41 +08:00
if (this.ctx.note.content) {
try {
this.mapData = JSON.parse(this.ctx.note.content);
} catch (e) {
console.log("Could not parse content: ", e);
}
}
}
2018-10-18 17:53:01 +08:00
2019-05-04 06:16:41 +08:00
noteIdToId(noteId) {
return "rel-map-note-" + noteId;
}
2019-05-04 06:16:41 +08:00
idToNoteId(id) {
return id.substr(13);
}
2019-05-12 18:58:55 +08:00
async render() {
2019-05-04 06:16:41 +08:00
this.$component.show();
2019-05-04 06:16:41 +08:00
await libraryLoader.requireLibrary(libraryLoader.RELATION_MAP);
this.loadMapData();
jsPlumb.ready(() => {
this.initJsPlumbInstance();
this.initPanZoom();
this.loadNotesAndRelations();
});
2018-10-25 20:01:03 +08:00
2018-11-01 16:41:03 +08:00
}
2019-05-04 06:16:41 +08:00
clearMap() {
// delete all endpoints and connections
// this is done at this point (after async operations) to reduce flicker to the minimum
this.jsPlumbInstance.deleteEveryEndpoint();
2018-11-01 16:41:03 +08:00
2019-05-04 06:16:41 +08:00
// without this we still end up with note boxes remaining in the canvas
this.$relationMapContainer.empty();
}
2018-11-01 16:41:03 +08:00
2019-05-04 06:16:41 +08:00
async loadNotesAndRelations() {
const noteIds = this.mapData.notes.map(note => note.noteId);
const data = await server.post("notes/relation-map", {noteIds});
2018-11-01 16:41:03 +08:00
2019-05-04 06:16:41 +08:00
this.relations = [];
2018-11-01 16:41:03 +08:00
2019-05-04 06:16:41 +08:00
for (const relation of data.relations) {
const match = this.relations.find(rel =>
rel.name === data.inverseRelations[relation.name]
&& ((rel.sourceNoteId === relation.sourceNoteId && rel.targetNoteId === relation.targetNoteId)
|| (rel.sourceNoteId === relation.targetNoteId && rel.targetNoteId === relation.sourceNoteId)));
2018-11-19 06:57:39 +08:00
2019-05-04 06:16:41 +08:00
if (match) {
match.type = relation.type = relation.name === data.inverseRelations[relation.name] ? 'biDirectional' : 'inverse';
relation.render = false; // don't render second relation
} else {
relation.type = 'uniDirectional';
relation.render = true;
2018-11-01 16:41:03 +08:00
}
2019-05-04 06:16:41 +08:00
this.relations.push(relation);
2018-11-01 16:41:03 +08:00
}
2018-10-25 20:01:03 +08:00
2019-05-04 06:16:41 +08:00
this.mapData.notes = this.mapData.notes.filter(note => note.noteId in data.noteTitles);
2019-05-04 06:16:41 +08:00
this.jsPlumbInstance.batch(async () => {
this.clearMap();
2019-05-04 06:16:41 +08:00
for (const note of this.mapData.notes) {
const title = data.noteTitles[note.noteId];
2019-05-04 06:16:41 +08:00
await this.createNoteBox(note.noteId, title, note.x, note.y);
}
2018-10-25 20:01:03 +08:00
2019-05-04 06:16:41 +08:00
for (const relation of this.relations) {
if (!relation.render) {
continue;
}
2018-10-31 03:22:05 +08:00
2019-05-04 06:16:41 +08:00
const connection = this.jsPlumbInstance.connect({
source: this.noteIdToId(relation.sourceNoteId),
target: this.noteIdToId(relation.targetNoteId),
type: relation.type
});
2018-10-31 03:22:05 +08:00
2019-05-04 06:16:41 +08:00
connection.id = relation.attributeId;
2018-10-31 03:22:05 +08:00
2019-05-04 06:16:41 +08:00
if (relation.type === 'inverse') {
connection.getOverlay("label-source").setLabel(relation.name);
connection.getOverlay("label-target").setLabel(data.inverseRelations[relation.name]);
}
else {
connection.getOverlay("label").setLabel(relation.name);
}
2018-10-25 20:01:03 +08:00
2019-05-04 06:16:41 +08:00
connection.canvas.setAttribute("data-connection-id", connection.id);
}
});
2018-11-01 16:41:03 +08:00
}
2019-05-04 06:16:41 +08:00
initPanZoom() {
if (this.pzInstance) {
return;
}
2019-05-04 06:16:41 +08:00
this.pzInstance = panzoom(this.$relationMapContainer[0], {
maxZoom: 2,
minZoom: 0.3,
smoothScroll: false,
filterKey: function(e, dx, dy, dz) {
// if ALT is pressed then panzoom should bubble the event up
// this is to preserve ALT-LEFT, ALT-RIGHT navigation working
return e.altKey;
}
});
2018-10-30 02:25:45 +08:00
2019-05-04 06:16:41 +08:00
this.pzInstance.on('transform', () => { // gets triggered on any transform change
this.jsPlumbInstance.setZoom(this.getZoom());
2018-10-18 17:53:01 +08:00
2019-05-04 06:16:41 +08:00
this.saveCurrentTransform();
});
2018-10-30 02:25:45 +08:00
2019-05-04 06:16:41 +08:00
if (this.mapData.transform) {
this.pzInstance.zoomTo(0, 0, this.mapData.transform.scale);
2018-10-18 17:53:01 +08:00
2019-05-04 06:16:41 +08:00
this.pzInstance.moveTo(this.mapData.transform.x, this.mapData.transform.y);
}
else {
// set to initial coordinates
this.pzInstance.moveTo(0, 0);
}
2018-10-30 02:25:45 +08:00
2019-05-04 06:16:41 +08:00
this.$zoomInButton.click(() => this.pzInstance.zoomTo(0, 0, 1.2));
this.$zoomOutButton.click(() => this.pzInstance.zoomTo(0, 0, 0.8));
}
2018-11-10 05:18:51 +08:00
2019-05-04 06:16:41 +08:00
saveCurrentTransform() {
const newTransform = this.pzInstance.getTransform();
2018-11-10 05:18:51 +08:00
2019-05-04 06:16:41 +08:00
if (JSON.stringify(newTransform) !== JSON.stringify(this.mapData.transform)) {
// clone transform object
this.mapData.transform = JSON.parse(JSON.stringify(newTransform));
2018-11-10 05:18:51 +08:00
2019-05-04 06:16:41 +08:00
this.saveData();
2018-11-10 05:18:51 +08:00
}
2019-05-04 06:16:41 +08:00
}
2018-11-10 05:18:51 +08:00
2019-05-04 06:16:41 +08:00
cleanup() {
if (this.jsPlumbInstance) {
this.clearMap();
}
2018-11-10 05:18:51 +08:00
2019-05-04 06:16:41 +08:00
if (this.pzInstance) {
this.pzInstance.dispose();
this.pzInstance = null;
}
2018-10-30 15:53:30 +08:00
}
2019-05-04 06:16:41 +08:00
initJsPlumbInstance () {
if (this.jsPlumbInstance) {
this.cleanup();
return;
}
2018-10-30 15:53:30 +08:00
2019-05-04 06:16:41 +08:00
this.jsPlumbInstance = jsPlumb.getInstance({
Endpoint: ["Dot", {radius: 2}],
Connector: "StateMachine",
ConnectionOverlays: uniDirectionalOverlays,
HoverPaintStyle: { stroke: "#777", strokeWidth: 1 },
Container: this.$relationMapContainer.attr("id")
});
2018-10-30 15:53:30 +08:00
2019-05-04 06:16:41 +08:00
this.jsPlumbInstance.registerConnectionType("uniDirectional", { anchor:"Continuous", connector:"StateMachine", overlays: uniDirectionalOverlays });
2018-10-30 15:53:30 +08:00
2019-05-04 06:16:41 +08:00
this.jsPlumbInstance.registerConnectionType("biDirectional", { anchor:"Continuous", connector:"StateMachine", overlays: biDirectionalOverlays });
2018-10-30 15:53:30 +08:00
2019-05-04 06:16:41 +08:00
this.jsPlumbInstance.registerConnectionType("inverse", { anchor:"Continuous", connector:"StateMachine", overlays: inverseRelationsOverlays });
2018-10-30 15:53:30 +08:00
2019-05-04 06:16:41 +08:00
this.jsPlumbInstance.registerConnectionType("link", { anchor:"Continuous", connector:"StateMachine", overlays: linkOverlays });
2018-10-30 15:53:30 +08:00
2019-05-04 06:16:41 +08:00
this.jsPlumbInstance.bind("connection", (info, originalEvent) => this.connectionCreatedHandler(info, originalEvent));
2018-10-30 15:53:30 +08:00
}
2019-05-04 06:16:41 +08:00
async connectionCreatedHandler(info, originalEvent) {
const connection = info.connection;
2018-10-30 15:53:30 +08:00
2019-05-04 06:16:41 +08:00
connection.bind("contextmenu", (obj, event) => {
if (connection.getType().includes("link")) {
// don't create context menu if it's a link since there's nothing to do with link from relation map
// (don't open browser menu either)
event.preventDefault();
}
else {
event.preventDefault();
event.stopPropagation();
2018-10-30 15:53:30 +08:00
2019-05-04 06:16:41 +08:00
contextMenuWidget.initContextMenu(event, {
getContextMenuItems: () => {
return [ {title: "Remove relation", cmd: "remove", uiIcon: "trash"} ];
},
selectContextMenuItem: async (event, cmd) => {
if (cmd === 'remove') {
const confirmDialog = await import('../dialogs/confirm.js');
2019-05-04 06:16:41 +08:00
if (!await confirmDialog.confirm("Are you sure you want to remove the relation?")) {
return;
}
2018-10-25 21:45:14 +08:00
2019-05-04 06:16:41 +08:00
const relation = this.relations.find(rel => rel.attributeId === connection.id);
2018-10-25 21:45:14 +08:00
2019-05-04 06:16:41 +08:00
await server.remove(`notes/${relation.sourceNoteId}/relations/${relation.name}/to/${relation.targetNoteId}`);
2018-10-30 02:25:45 +08:00
2019-05-04 06:16:41 +08:00
this.jsPlumbInstance.deleteConnection(connection);
2018-10-30 02:25:45 +08:00
2019-05-04 06:16:41 +08:00
this.relations = this.relations.filter(relation => relation.attributeId !== connection.id);
}
}
});
}
});
// if there's no event, then this has been triggered programatically
if (!originalEvent) {
2018-10-30 02:25:45 +08:00
return;
}
const promptDialog = await import('"../dialogs/prompt.js"');
2019-05-04 06:16:41 +08:00
const name = await promptDialog.ask({
message: "Specify new relation name:",
shown: ({ $answer }) =>
attributeAutocompleteService.initAttributeNameAutocomplete({
$el: $answer,
attributeType: "relation",
open: true
})
});
2018-10-30 02:25:45 +08:00
2019-05-04 06:16:41 +08:00
if (!name || !name.trim()) {
this.jsPlumbInstance.deleteConnection(connection);
2019-05-04 06:16:41 +08:00
return;
}
2019-05-04 06:16:41 +08:00
const targetNoteId = this.idToNoteId(connection.target.id);
const sourceNoteId = this.idToNoteId(connection.source.id);
2019-05-04 06:16:41 +08:00
const relationExists = this.relations.some(rel =>
rel.targetNoteId === targetNoteId
&& rel.sourceNoteId === sourceNoteId
&& rel.name === name);
2018-10-30 02:25:45 +08:00
2019-05-04 06:16:41 +08:00
if (relationExists) {
const infoDialog = await import('../dialogs/info.js');
2019-05-04 06:16:41 +08:00
await infoDialog.info("Connection '" + name + "' between these notes already exists.");
this.jsPlumbInstance.deleteConnection(connection);
2018-10-30 02:25:45 +08:00
return;
}
2019-05-04 06:16:41 +08:00
await server.put(`notes/${sourceNoteId}/relations/${name}/to/${targetNoteId}`);
2018-10-30 02:25:45 +08:00
2019-05-04 06:16:41 +08:00
await this.refresh();
}
2018-10-30 02:25:45 +08:00
2019-05-04 06:16:41 +08:00
saveData() {
this.ctx.noteChanged();
2018-10-30 02:25:45 +08:00
}
2019-05-04 06:16:41 +08:00
async createNoteBox(noteId, title, x, y) {
const $link = await linkService.createNoteLink(noteId, title);
$link.mousedown(e => {
console.log(e);
linkService.goToLink(e);
});
2019-05-04 06:16:41 +08:00
const $noteBox = $("<div>")
.addClass("note-box")
.prop("id", this.noteIdToId(noteId))
.append($("<span>").addClass("title").append($link))
2019-05-04 06:16:41 +08:00
.append($("<div>").addClass("endpoint").attr("title", "Start dragging relations from here and drop them on another note."))
.css("left", x + "px")
.css("top", y + "px");
2018-10-21 16:26:14 +08:00
2019-05-04 06:16:41 +08:00
this.jsPlumbInstance.getContainer().appendChild($noteBox[0]);
2019-05-04 06:16:41 +08:00
this.jsPlumbInstance.draggable($noteBox[0], {
start: params => {},
drag: params => {},
stop: params => {
const noteId = this.idToNoteId(params.el.id);
2018-10-21 16:26:14 +08:00
2019-05-04 06:16:41 +08:00
const note = this.mapData.notes.find(note => note.noteId === noteId);
2019-05-04 06:16:41 +08:00
if (!note) {
console.error(`Note ${noteId} not found!`);
return;
}
2018-10-21 16:26:14 +08:00
2019-05-04 06:16:41 +08:00
[note.x, note.y] = params.finalPos;
2018-10-21 16:26:14 +08:00
2019-05-04 06:16:41 +08:00
this.saveData();
}
});
2018-10-21 16:26:14 +08:00
2019-05-04 06:16:41 +08:00
this.jsPlumbInstance.makeSource($noteBox[0], {
filter: ".endpoint",
anchor: "Continuous",
connectorStyle: { stroke: "#000", strokeWidth: 1 },
connectionType: "basic",
extract:{
"action": "the-action"
}
});
2018-10-21 16:26:14 +08:00
2019-05-04 06:16:41 +08:00
this.jsPlumbInstance.makeTarget($noteBox[0], {
dropOptions: { hoverClass: "dragHover" },
anchor: "Continuous",
allowLoopback: true
});
}
2018-10-21 16:26:14 +08:00
2019-05-04 06:16:41 +08:00
async refresh() {
await this.loadNotesAndRelations();
}
2019-05-04 06:16:41 +08:00
getZoom() {
const matrixRegex = /matrix\((-?\d*\.?\d+),\s*0,\s*0,\s*-?\d*\.?\d+,\s*-?\d*\.?\d+,\s*-?\d*\.?\d+\)/;
const transform = this.$relationMapContainer.css('transform');
2019-08-28 04:19:32 +08:00
if (transform === 'none') {
return 1;
}
const matches = transform.match(matrixRegex);
if (!matches) {
throw new Error("Cannot match transform: " + transform);
}
2019-05-04 06:16:41 +08:00
return matches[1];
}
2019-05-04 06:16:41 +08:00
async dropNoteOntoRelationMapHandler(ev) {
ev.preventDefault();
const notes = JSON.parse(ev.originalEvent.dataTransfer.getData("text"));
2019-05-04 06:16:41 +08:00
let {x, y} = this.getMousePosition(ev);
2018-11-01 01:21:58 +08:00
for (const note of notes) {
const exists = this.mapData.notes.some(n => n.noteId === note.noteId);
if (exists) {
2019-10-20 16:00:18 +08:00
toastService.showError(`Note "${note.title}" is already in the diagram.`);
continue;
}
this.mapData.notes.push({noteId: note.noteId, x, y});
if (x > 1000) {
y += 100;
x = 0;
}
else {
x += 200;
}
}
2019-05-04 06:16:41 +08:00
this.saveData();
2019-05-04 06:16:41 +08:00
await this.refresh();
}
2019-05-04 06:16:41 +08:00
getMousePosition(evt) {
const rect = this.$relationMapContainer[0].getBoundingClientRect();
2019-05-04 06:16:41 +08:00
const zoom = this.getZoom();
2019-05-04 06:16:41 +08:00
return {
x: (evt.clientX - rect.left) / zoom,
y: (evt.clientY - rect.top) / zoom
};
}
2019-05-04 06:16:41 +08:00
getContent() {
return JSON.stringify(this.mapData);
}
show() {}
2019-05-04 06:16:41 +08:00
focus() {}
2019-05-04 06:16:41 +08:00
onNoteChange() {}
2019-05-04 06:16:41 +08:00
scrollToTop() {}
}
2019-05-04 06:16:41 +08:00
export default NoteDetailRelationMap;