note map refactoring

This commit is contained in:
zadam 2021-09-20 22:19:47 +02:00
parent 9c9a3fc030
commit e4ba7d65e8
8 changed files with 31 additions and 32 deletions

View file

@ -14,7 +14,8 @@ const NOTE_TYPE_ICONS = {
"render": "bx bx-extension",
"search": "bx bx-file-find",
"relation-map": "bx bx-map-alt",
"book": "bx bx-book"
"book": "bx bx-book",
"note-map": "bx bx-map-alt"
};
/**

View file

@ -72,8 +72,8 @@ export default class DesktopLayout {
.command("jumpToNote"))
.child(new OpenNoteButtonWidget()
.icon("bx-map-alt")
.title("Global link map")
.targetNote('globallinkmap'))
.title("Global note map")
.targetNote('globalnotemap'))
.child(new ButtonWidget()
.icon("bx-history")
.title("Show recent changes")

View file

@ -30,6 +30,7 @@ class TreeContextMenu {
{ title: "Code", command: command, type: "code", uiIcon: "code" },
{ title: "Saved search", command: command, type: "search", uiIcon: "file-find" },
{ title: "Relation Map", command: command, type: "relation-map", uiIcon: "map-alt" },
{ title: "Note Map", command: command, type: "note-map", uiIcon: "map-alt" },
{ title: "Render HTML note", command: command, type: "render", uiIcon: "extension" },
{ title: "Book", command: command, type: "book", uiIcon: "book" }
];

View file

@ -20,7 +20,7 @@ import ReadOnlyTextTypeWidget from "./type_widgets/read_only_text.js";
import ReadOnlyCodeTypeWidget from "./type_widgets/read_only_code.js";
import NoneTypeWidget from "./type_widgets/none.js";
import attributeService from "../services/attributes.js";
import GlobalLinkMapTypeWidget from "./type_widgets/global_link_map.js";
import NoteMapTypeWidget from "./type_widgets/note_map.js";
const TPL = `
<div class="note-detail">
@ -47,7 +47,7 @@ const typeWidgetClasses = {
'relation-map': RelationMapTypeWidget,
'protected-session': ProtectedSessionTypeWidget,
'book': BookTypeWidget,
'globallinkmap': GlobalLinkMapTypeWidget
'note-map': NoteMapTypeWidget
};
export default class NoteDetailWidget extends NoteContextAwareWidget {
@ -173,10 +173,6 @@ export default class NoteDetailWidget extends NoteContextAwareWidget {
type = 'editable-code';
}
if (type === 'special') {
type = note.noteId;
}
if (note.isProtected && !protectedSessionHolder.isProtectedSessionAvailable()) {
type = 'protected-session';
}

View file

@ -3,13 +3,13 @@ import libraryLoader from "../../services/library_loader.js";
import server from "../../services/server.js";
import attributeService from "../../services/attributes.js";
const TPL = `<div class="note-detail-global-link-map note-detail-printable" style="position: relative;">
const TPL = `<div class="note-detail-note-map note-detail-printable" style="position: relative;">
<style>
.type-special .note-detail, .note-detail-global-link-map {
.type-special .note-detail, .note-detail-note-map {
height: 100%;
}
.map-switcher {
.map-type-switcher {
position: absolute;
top: 10px;
right: 10px;
@ -17,30 +17,30 @@ const TPL = `<div class="note-detail-global-link-map note-detail-printable" styl
z-index: 1000;
}
.map-switcher .bx {
.map-type-switcher .bx {
font-size: x-large;
}
</style>
<div class="btn-group btn-group-sm map-switcher" role="group">
<div class="btn-group btn-group-sm map-type-switcher" role="group">
<button type="button" class="btn btn-secondary" title="Link Map" data-type="link"><span class="bx bx-network-chart"></span></button>
<button type="button" class="btn btn-secondary" title="Tree map" data-type="tree"><span class="bx bx-sitemap"></span></button>
</div>
<div class="link-map-container"></div>
<div class="note-map-container"></div>
</div>`;
export default class GlobalLinkMapTypeWidget extends TypeWidget {
static getType() { return "globallinkmap"; }
export default class NoteMapTypeWidget extends TypeWidget {
static getType() { return "note-map"; }
doRender() {
this.$widget = $(TPL);
this.$container = this.$widget.find(".link-map-container");
this.$container = this.$widget.find(".note-map-container");
window.addEventListener('resize', () => this.setFullHeight(), false);
this.$widget.find(".map-switcher button").on("click", async e => {
this.$widget.find(".map-type-switcher button").on("click", async e => {
const type = $(e.target).closest("button").attr("data-type");
await attributeService.setLabel(this.noteId, 'mapType', type);
@ -59,7 +59,7 @@ export default class GlobalLinkMapTypeWidget extends TypeWidget {
const height = $(window).height() - top;
const width = this.$widget.width();
this.$widget.find('.link-map-container')
this.$widget.find('.note-map-container')
.css("height", height)
.css("width", this.$widget.width());
@ -83,7 +83,6 @@ export default class GlobalLinkMapTypeWidget extends TypeWidget {
.onZoom(zoom => this.setZoomLevel(zoom.k))
.d3AlphaDecay(0.01)
.d3VelocityDecay(0.08)
.nodeRelSize(node => this.noteIdToSizeMap[node.id])
.nodeCanvasObject((node, ctx) => this.paintNode(node, this.stringToColor(node.type), ctx))
.nodePointerAreaPaint((node, ctx) => this.paintNode(node, this.stringToColor(node.type), ctx))
.nodeLabel(node => node.name)
@ -91,7 +90,7 @@ export default class GlobalLinkMapTypeWidget extends TypeWidget {
.nodePointerAreaPaint((node, color, ctx) => {
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(node.x, node.y, 5, 0, 2 * Math.PI, false);
ctx.arc(node.x, node.y, this.noteIdToSizeMap[node.id], 0, 2 * Math.PI, false);
ctx.fill();
})
.linkLabel(l => `${l.source.name} - <strong>${l.name}</strong> - ${l.target.name}`)
@ -106,7 +105,7 @@ export default class GlobalLinkMapTypeWidget extends TypeWidget {
// .dagMode("radialout")
.onNodeClick(node => this.nodeClicked(node));
this.graph.d3Force('link').distance(5);
this.graph.d3Force('link').distance(40);
//
this.graph.d3Force('center').strength(0.01);
//
@ -115,7 +114,9 @@ export default class GlobalLinkMapTypeWidget extends TypeWidget {
this.graph.d3Force('charge').distanceMax(1000);
this.renderData(await this.loadNotesAndRelations());
const data = await this.loadNotesAndRelations();
this.renderData(data);
}
stringToColor(str) {
@ -215,7 +216,7 @@ export default class GlobalLinkMapTypeWidget extends TypeWidget {
ctx.restore();
}
async loadNotesAndRelations(noteId, maxDepth) {
async loadNotesAndRelations() {
this.linkIdToLinkMap = {};
this.noteIdToLinkCountMap = {};
@ -291,7 +292,7 @@ export default class GlobalLinkMapTypeWidget extends TypeWidget {
this.graph.graphData(data);
if (zoomToFit && data.nodes.length > 1) {
setTimeout(() => this.graph.zoomToFit(400, zoomPadding), 3000);
setTimeout(() => this.graph.zoomToFit(400, zoomPadding), 1000);
}
}

View file

@ -148,7 +148,7 @@ function getGlobalTreeMap() {
const noteIds = new Set();
const notes = Object.values(becca.notes)
.filter(note => !note.isArchived)
.filter(note => !note.isArchived && !note.hasLabel('excludeFromTreeMap'))
.map(note => [
note.noteId,
note.isContentAvailable() ? note.title : '[protected]',

View file

@ -268,7 +268,7 @@ class ConsistencyChecks {
SELECT noteId, type
FROM notes
WHERE isDeleted = 0
AND type NOT IN ('text', 'code', 'render', 'file', 'image', 'search', 'relation-map', 'book', 'special')`,
AND type NOT IN ('text', 'code', 'render', 'file', 'image', 'search', 'relation-map', 'book', 'note-map')`,
({noteId, type}) => {
if (this.autoFix) {
const note = becca.getNote(noteId);

View file

@ -82,13 +82,13 @@ function getSinglesNoteRoot() {
}
function getGlobalLinkMapNote() {
let globalLinkMapNote = becca.getNote('globallinkmap');
let globalLinkMapNote = becca.getNote('globalnotemap');
if (!globalLinkMapNote) {
globalLinkMapNote = noteService.createNewNote({
noteId: 'globallinkmap',
title: 'Global Link Map',
type: 'special',
noteId: 'globalnotemap',
title: 'Global Note Map',
type: 'note-map',
content: '',
parentNoteId: getSinglesNoteRoot().noteId
}).note;