Skip to content

Commit 2bac855

Browse files
iloveskittles82Shalabi222Robert35-dll
authored
Icons for nodes (#14)
* Adding Icons and Tags Feature to MindMap * Initial test for icons and tags feature in the mind map * Add new tags and icons;test integration with additional node-text * adding complete Mindmap icons and it's keyboard shortcuts * Added Shalabi's index.html with tags * adding icons list with its shortcuts in the icons list and solving node editing text problems * Update request for initial Icons-and-Tags branch (#15) * change POST to PUT * experimenting with data-attribute * trying to setup "enum" for icons and stuff * Disabled standard browser's <Ctrl> + <number_key> shortcut in case a tag should be toggled * Refactored toggling tags and highlights using jsMind shortcuts' handling * Added a node extension method to include "icons" and "highlight" properties to all nodes * Changed tags' button to a dropdown * WIP set up shortcut handler and added sources for icons * got the icons working with shortcuts open todos: - [] Source manager to save nodes cleanly - [] functionality for buttons in dropdown - [] icons in dropdown - [] removing shortcuts for align,pdf and comment * cleanup and comments * Added a ResourceManager for unified / easier access to icons * add debug button for printing out mindmap data to console * add empty button handlers and a third, invisible div in the navbar to center the buttons in the middle while allowing the dropdown menu to function properly * add clickhandlers * renaming the ids for the buttons * Removed doubled comments from jsmind.view_provider._default_node_render() * Refactored ActionStack class to save maps' copies instead of objects * adding shortcuts to buttons * Fixed bugs with undefined icons' lists in new nodes * Enabled standard shortcuts for editing nodes' topics * Added check icons and implemented toggle cycles --------- Co-authored-by: iloveskittles <40355179+iloveskittles82@users.noreply.github.com> --------- Co-authored-by: Shalabi <Mohamed.Shalabi@Student.HTW-Berlin.de> Co-authored-by: Robert Koch <Robert.Koch@Student.HTW-Berlin.de>
1 parent 3eb67ba commit 2bac855

File tree

12 files changed

+617
-39
lines changed

12 files changed

+617
-39
lines changed

‎Japmap icons/alignement.png‎

3.27 KB
Loading

‎Japmap icons/cycle.png‎

14.6 KB
Loading

‎Japmap icons/link.png‎

7.12 KB
Loading

‎Japmap icons/orange eye.png‎

13.7 KB
Loading

‎Japmap icons/star.png‎

3.96 KB
Loading

‎index (1).html‎

Lines changed: 321 additions & 0 deletions
Large diffs are not rendered by default.

‎index.html‎

Lines changed: 61 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -25,15 +25,20 @@
2525
flex-grow: 1;
2626
overflow: auto;
2727
}
28+
29+
.dropdown-item .shortcut {
30+
color: #6c757d;
31+
font-size: 0.9em;
32+
margin-left: 1rem;
33+
}
2834
</style>
2935
</head>
3036

3137
<body>
3238
<!--Navbar with Buttons-->
33-
<nav class="navbar bg-body-tertiary position-relative">
39+
<nav class="navbar bg-body-tertiary">
3440
<div class="container-fluid">
35-
36-
<div>
41+
<div class = "d-flex align-items-start" style="flex-basis: 33%; max-width: 33%;">
3742
<!--JabMap title-->
3843
<a class="navbar-brand" href="#">JabMap</a>
3944

@@ -44,32 +49,63 @@
4449
<button id="openBtn" class="btn btn-light me-2" type="button" data-bs-toggle="modal" title="Open" data-bs-target="#selectMindmapModal">
4550
<i class="bi bi-folder2-open"></i> Open
4651
</button>
52+
<!--Debug button-->
53+
<button id="printMapToConsoleBtn" class="btn btn-light me-2" type="button" data-bs-toggle="tooltip" title="Debug">
54+
Debug
55+
</button>
4756
</div>
4857

4958
<!--Editor buttons-->
50-
<div class="position-absolute top-50 start-50 translate-middle d-flex justify-content-center">
51-
<!--Button class explanation: class = "btn color theme margin to the right (me-2)"-->
52-
<!--Undo Button-->
53-
<button id="undoBtn" class="btn btn-secondary me-2" type="button" data-bs-toggle="tooltip" title="Undo">
54-
<i class="bi bi-arrow-counterclockwise"></i>
55-
</button>
56-
<!--Redo Button-->
57-
<button id="redoBtn" class="btn btn-secondary me-2" type="button" data-bs-toggle="tooltip" title="Redo">
58-
<i class="bi bi-arrow-clockwise"></i>
59-
</button>
60-
<!--New Topic (sibling node) Button-->
61-
<button id="newSiblingBtn" class="btn btn-secondary me-2" type="button" data-bs-toggle="tooltip" title="New sibling node">
62-
<i class="bi bi-node-plus-fill"></i>
63-
</button>
64-
<!--New Subtopic (child node) Button (icon rotated 90 degrees)-->
65-
<button id="newChildBtn" class="btn btn-secondary me-2" type="button" data-bs-toggle="tooltip" title="New child node">
66-
<i class="bi bi-diagram-2-fill" style="transform: rotate(-90deg); display: inline-block;"></i>
67-
</button>
68-
<!--Tags Button-->
69-
<button id="tagsBtn" class="btn btn-secondary" type="button" data-bs-toggle="tooltip" title="Tags">
70-
<i class="bi bi-tags"></i>
71-
</button>
59+
<div class="d-flex justify-content-center" style="flex-basis: 33%; max-width: 33%;">
60+
<!--Button class explanation: class = "btn color theme margin to the right (me-2)"-->
61+
<!--Undo Button-->
62+
<button id="undoBtn" class="btn btn-secondary me-2" type="button" data-bs-toggle="tooltip" title="Undo">
63+
<i class="bi bi-arrow-counterclockwise"></i>
64+
</button>
65+
<!--Redo Button-->
66+
<button id="redoBtn" class="btn btn-secondary me-2" type="button" data-bs-toggle="tooltip" title="Redo">
67+
<i class="bi bi-arrow-clockwise"></i>
68+
</button>
69+
<!--New Topic (sibling node) Button-->
70+
<button id="newSiblingBtn" class="btn btn-secondary me-2" type="button" data-bs-toggle="tooltip" title="New sibling node">
71+
<i class="bi bi-node-plus-fill"></i>
72+
</button>
73+
<!--New Subtopic (child node) Button (icon rotated 90 degrees)-->
74+
<button id="newChildBtn" class="btn btn-secondary me-2" type="button" data-bs-toggle="tooltip" title="New child node">
75+
<i class="bi bi-diagram-2-fill" style="transform: rotate(-90deg); display: inline-block;"></i>
76+
</button>
77+
<!--Tags Dropdown-->
78+
<div class="dropdown">
79+
<button class="btn btn-secondary dropdown-toggle" type="button" id="tagsDropdownMenuButton" data-bs-toggle="dropdown">
80+
<i class="bi bi-tags"></i>
81+
</button>
82+
<div class="dropdown-menu">
83+
<h6 class="dropdown-header">Icons for nodes</h6>
84+
<button id="iconCycleBtn" class="dropdown-item d-flex justify-content-between">
85+
<span>Cycle</span><span class="shortcut">Ctrl + 1</span>
86+
</button>
87+
<button id="iconStarBtn" class="dropdown-item d-flex justify-content-between">
88+
<span>Star</span><span class="shortcut">Ctrl + 2</span>
89+
</button>
90+
<button id="iconQuestionBtn" class="dropdown-item d-flex justify-content-between">
91+
<span>Question</span><span class="shortcut">Ctrl + 3</span>
92+
</button>
93+
<button id="iconWarningBtn" class="dropdown-item d-flex justify-content-between">
94+
<span>Warning</span><span class="shortcut">Ctrl + 6</span>
95+
</button>
96+
<button id="iconLightbulbBtn" class="dropdown-item d-flex justify-content-between">
97+
<span>Lightbulb</span><span class="shortcut">Ctrl + 7</span>
98+
</button>
99+
<button id="iconGreenFlagBtn" class="dropdown-item d-flex justify-content-between">
100+
<span>Green Flag</span><span class="shortcut">Ctrl + 8</span>
101+
</button>
102+
<button id="iconRedFlagBtn" class="dropdown-item d-flex justify-content-between">
103+
<span>Red Flag</span><span class="shortcut">Ctrl + 9</span>
104+
</button>
105+
</div>
106+
</div>
72107
</div>
108+
<div style="flex-basis: 33%; max-width: 33%;"></div>
73109
</div>
74110
</nav>
75111

‎src/ActionStack.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,15 @@ export class ActionStack {
2020
* a mind map to save.
2121
*/
2222
add(currentState) {
23+
// Copying the state to avoid cross-state references
24+
let json = JSON.stringify(currentState);
25+
2326
// Inserting the state onto current stack's index
2427
// and removing tail saves since they're invalid
2528
this.#lastSaves.splice(
2629
this.#saveIndex + 1,
2730
this.#lastSaves.length - this.#saveIndex + 1,
28-
currentState);
31+
json);
2932

3033
// If stack size is exceeded, remove the first state
3134
// (the earliest change) and shift all elements by 1
@@ -51,7 +54,7 @@ export class ActionStack {
5154
this.#saveIndex = Math.max(this.#saveIndex - 1, 0);
5255
console.log(`Performing Undo.` +
5356
`Current state index: ${this.#saveIndex}`);
54-
return this.#lastSaves[this.#saveIndex];
57+
return JSON.parse(this.#lastSaves[this.#saveIndex]);
5558
}
5659

5760
/**
@@ -70,6 +73,6 @@ export class ActionStack {
7073
Math.max(this.#lastSaves.length - 1, 0));
7174
console.log(`Performing Redo.` +
7275
`Current state index: ${this.#saveIndex}`);
73-
return this.#lastSaves[this.#saveIndex];
76+
return JSON.parse(this.#lastSaves[this.#saveIndex]);
7477
}
7578
}

‎src/ResourceManager.js‎

Lines changed: 24 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/jsmind/src/jsmind.js‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -485,11 +485,16 @@ export default class jsMind {
485485
}
486486
var node = this.get_node(node_id);
487487
if (!!node) {
488-
if (node.topic === topic) {
489-
logger.info('nothing changed');
490-
this.view.update_node(node);
491-
return;
492-
}
488+
// Altered lines:
489+
// This check has to be disabled in order to
490+
// resize the mind map upon
491+
// adding / removing icons and highlights
492+
// if (node.topic === topic) {
493+
// logger.info('nothing changed');
494+
// this.view.update_node(node);
495+
// return;
496+
// }
497+
// End
493498
node.topic = topic;
494499
this.view.update_node(node);
495500
this.layout.layout();

0 commit comments

Comments
 (0)