chore(docs): bring back relation map updates

This commit is contained in:
Elian Doran 2025-10-10 22:58:38 +03:00
parent f43dfc23c0
commit 8557bad242
No known key found for this signature in database
6 changed files with 13426 additions and 13353 deletions

View File

@ -15,73 +15,71 @@
in a hierarchy.</p>
<h2>Interaction with columns</h2>
<ul>
<li data-list-item-id="e53cd56f64ad0a087af5c123894261ff1">Create a new column by pressing <em>Add Column</em> near the last column.
<li>Create a new column by pressing <em>Add Column</em> near the last column.
<ul>
<li data-list-item-id="eaf5a55c795e0cfe57a2a05d6b9f89761">Once pressed, a text box will be displayed to set the name of the column.
<li>Once pressed, a text box will be displayed to set the name of the column.
Press <kbd>Enter</kbd> to confirm, or <kbd>Escape</kbd> to dismiss.</li>
</ul>
</li>
<li data-list-item-id="e2d7f17b56a6a8027d26e5d30f16bd7f6">To reorder a column, simply hold the mouse over the title and drag it
<li>To reorder a column, simply hold the mouse over the title and drag it
to the desired position.</li>
<li data-list-item-id="ef0f57de87814bf725cf846cecca01899">To delete a column, right click on its title and select <em>Delete column</em>.</li>
<li
data-list-item-id="e00cb99d9b34dbf63523f053a57f28fe8">To rename a column, click on the note title.
<li>To delete a column, right click on its title and select <em>Delete column</em>.</li>
<li>To rename a column, click on the note title.
<ul>
<li data-list-item-id="ea86b1d902db4bbab1fe85bcf669c595c">Press Enter to confirm.</li>
<li data-list-item-id="e6d1bc52b0a8b3d554fd4be0f1f009b04">Upon renaming a column, the corresponding status attribute of all its
<li>Press Enter to confirm.</li>
<li>Upon renaming a column, the corresponding status attribute of all its
notes will be changed in bulk.</li>
</ul>
</li>
<li data-list-item-id="ea1dd557786a534468e61f445aaea665f">If there are many columns, use the mouse wheel to scroll.</li>
</li>
<li>If there are many columns, use the mouse wheel to scroll.</li>
</ul>
<h2>Interaction with notes</h2>
<ul>
<li data-list-item-id="ec25f6e597c61e1f56422d72a91777cb8">Create a new note in any column by pressing <em>New item</em>
<li>Create a new note in any column by pressing <em>New item</em>
<ul>
<li data-list-item-id="e3027de7ac16543b3a3be526c6700f22e">Enter the name of the note and press <kbd>Enter</kbd> or click away. To
<li>Enter the name of the note and press <kbd>Enter</kbd> or click away. To
dismiss the creation of a new note, simply press <kbd>Escape</kbd> or leave
the name empty.</li>
<li data-list-item-id="ef97c736e327952225517534711a8e329">Once created, the new note will have an attribute (<code>status</code> label
<li>Once created, the new note will have an attribute (<code>status</code> label
by default) set to the name of the column.</li>
</ul>
</li>
<li data-list-item-id="e0558241e1901ee6a5b765644c115f95c">To open the note, simply click on it.</li>
<li data-list-item-id="e1580878e9963e2039332f9c3ff40dc9d">To change the title of the note directly from the board, hover the mouse
<li>To open the note, simply click on it.</li>
<li>To change the title of the note directly from the board, hover the mouse
over its card and press the edit button on the right.</li>
<li data-list-item-id="e817b2e5103fd08622477663a5a8b9683">To change the state of a note, simply drag a note from one column to the
<li>To change the state of a note, simply drag a note from one column to the
other to change its state.</li>
<li data-list-item-id="e5f86d7f2f545470451040860ca3e8890">The order of the notes in each column corresponds to their position in
<li>The order of the notes in each column corresponds to their position in
the tree.
<ul>
<li data-list-item-id="e0b47ff4af56dc7cd21a118fbc9b1808a">It's possible to reorder notes simply by dragging them to the desired
<li>It's possible to reorder notes simply by dragging them to the desired
position within the same columns.</li>
<li data-list-item-id="e9eb4fa22b9ed927a24aee3e94d5a1b5d">It's also possible to drag notes across columns, at the desired position.</li>
<li>It's also possible to drag notes across columns, at the desired position.</li>
</ul>
</li>
<li data-list-item-id="e94ebbbe060ccfe7fbb1c67616e272b35">For more options, right click on a note to display a context menu with
<li>For more options, right click on a note to display a context menu with
the following options:
<ul>
<li data-list-item-id="e5516bb20b5c4534580854c6422107b1d">Open the note in a new tab/split/window or quick edit.</li>
<li data-list-item-id="e8419784dbd01baae6c1e1e8875baa84a">Move the note to any column.</li>
<li data-list-item-id="e6ab7181ef973bbd96e3bbbfed5e302d1">Insert a new note above/below the current one.</li>
<li data-list-item-id="e8aae7a4c6ddb5f191d6dcd914f0c3b78">Archive/unarchive the current note.</li>
<li data-list-item-id="e0bf5bc2c60b27a7fd0078001816d8ca4">Delete the current note.</li>
<li>Open the note in a new tab/split/window or quick edit.</li>
<li>Move the note to any column.</li>
<li>Insert a new note above/below the current one.</li>
<li>Archive/unarchive the current note.</li>
<li>Delete the current note.</li>
</ul>
</li>
<li data-list-item-id="ec32b9f786e2c612fb63677c8c5089365">If there are many notes within the column, move the mouse over the column
<li>If there are many notes within the column, move the mouse over the column
and use the mouse wheel to scroll.</li>
</ul>
<h2>Keyboard interaction</h2>
<p>The board view has mild support for keyboard-based navigation:</p>
<ul>
<li data-list-item-id="e0c992a7fdac57768851c53137a2cfa64">Use <kbd>Tab</kbd> and <kbd>Shift</kbd>+<kbd>Tab</kbd> to navigate between
<li>Use <kbd>Tab</kbd> and <kbd>Shift</kbd>+<kbd>Tab</kbd> to navigate between
column titles, notes and the “New item” button for each of the columns,
in sequential order.</li>
<li data-list-item-id="e4c143d1ec92d0fc5b75e850cf10f4377">To rename a column or a note, press <kbd>F2</kbd> while it is focused.</li>
<li
data-list-item-id="ee3008937bdfd14e06c308a5f0846addf">To open a specific note or create a new item, press <kbd>Enter</kbd> while
<li>To rename a column or a note, press <kbd>F2</kbd> while it is focused.</li>
<li>To open a specific note or create a new item, press <kbd>Enter</kbd> while
it is focused.</li>
<li data-list-item-id="e70ceff80dcd5422e2361c4fbcd805773">To dismiss a rename of a note or a column, press <kbd>Escape</kbd>.</li>
<li>To dismiss a rename of a note or a column, press <kbd>Escape</kbd>.</li>
</ul>
<h2>Configuration</h2>
<h3>Grouping by another attribute</h3>
@ -96,5 +94,5 @@ class="admonition note">
<h2>Interaction</h2>
<h2>Limitations</h2>
<ul>
<li data-list-item-id="e61ec93de3282934fd37d302933d208b8">It is not possible yet to use group by a relation, only by label.</li>
<li>It is not possible yet to use group by a relation, only by label.</li>
</ul>

View File

@ -1,15 +1,53 @@
<p>Relation map is a type of&nbsp;<a href="#root/_help_BFs8mudNFgCS">Note</a>&nbsp;which
visualizes notes and their <a href="#root/_help_zEY4DaJG4YT5">relations</a>.
See an example:</p>
<p>Relation map is a type of&nbsp;note&nbsp;which visualizes notes and their
<a
href="#root/_help_zEY4DaJG4YT5">relations</a>.</p>
<h2>Interaction</h2>
<ul>
<li data-list-item-id="e9deb23a94fcdda6eadc2c6200cefb994">To create a new note and add it to the board, press the plus button in
the&nbsp;<a class="reference-link" href="#root/_help_XpOYSgsLkTJy">Floating buttons</a>.
<ul>
<li data-list-item-id="e21d61b025a6624267b35b40b6f4b55ff">Afterwards, click anywhere on the map to place it there.</li>
<li data-list-item-id="ed051c41bbb0b8178fb47adf3f0e59d0f">The note will be placed as a sub-child of the map.</li>
</ul>
</li>
<li data-list-item-id="eca4edf0f072bcce1ea2772c74d9c5479">An existing note can also be dragged from the&nbsp;<a class="reference-link"
href="#root/_help_oPVyFC7WL2Lp">Note Tree</a>. It will be placed at the
position it's dragged on.
<ul>
<li data-list-item-id="e50aae94f1208a501d3181bcb28c1f0b9">Multiple notes can also be dragged via&nbsp;<a class="reference-link"
href="#root/_help_yTjUdsOi4CIE">Multiple selection</a>. The notes will
be positioned near the dragged position without overlapping.</li>
<li data-list-item-id="e343808a2ab68009a10f884980468d02a">The dragged note can be a sub-child of the map, or it can be at any arbitrary
position.</li>
</ul>
</li>
<li data-list-item-id="ee160c0ebb7a90215bec3b29e86f163be">To create a relationship, hold the mouse on the box on the right of a
note and then:
<ul>
<li data-list-item-id="e17cb16e8553ae7da92086de463b97c57">Drag it over another note to create a relationship pointing from the first
note to the second one.</li>
<li data-list-item-id="eeedb939234b3478ee6eda73fda651e74">Drag over the same note to create a self-referencing relationship (represented
as a loop).</li>
<li data-list-item-id="e575fbd1690aaec66b9f0f2ed8023375f">Once dragged, enter the name of the relationship to create. To cancel,
simply dismiss the dialog or press <kbd>Esc</kbd>.</li>
</ul>
</li>
<li data-list-item-id="e88dda852f390ee6da753767dbcf02fc1">To open a note, either click on the note (opening it in the current view)
or use the right click menu to open in a new tab.</li>
<li data-list-item-id="e3846088ca4869ad8bb4874725275d527">To edit the title of a note or to delete it (either from the map, or delete
it completely), right click the note.</li>
<li data-list-item-id="e8123533b7cab2d7479c0d500f8da2519">To delete a relationship, right click it and select the corresponding
option.</li>
</ul>
<h2>Development process demo</h2>
<p>This is a basic example how you can create simple diagram using relation
maps:</p>
<p>
<img src="1_Relation Map_relation-map-.png">
<img src="1_Relation Map_relation-map-.png" width="934" height="667">
</p>
<p>And this is how you can create it:</p>
<p>
<img src="1_Relation Map_relation-map-.gif">
<img src="1_Relation Map_relation-map-.gif" width="812" height="585">
</p>
<p>We start completely from scratch by first creating new note called "Development
process" and changing its type to "Relation map". After that we create
@ -24,41 +62,46 @@
<p>This is more complicated demo using some advanced concepts. Resulting
diagram is here:</p>
<p>
<img src="Relation Map_relation-map-.png">
<img src="Relation Map_relation-map-.png" width="941" height="758">
</p>
<p>This is how you get to it:</p>
<p>
<img src="Relation Map_relation-map-.gif">
<img src="Relation Map_relation-map-.gif" width="812" height="585">
</p>
<p>There are several steps here:</p>
<ul>
<li>we start with empty relation map and two existing notes representing Prince
Philip and Queen Elizabeth II. These two notes already have "isPartnerOf"
<li data-list-item-id="e0edf9cfd7613dd744bef2b77a67ebfe6">we start with empty relation map and two existing notes representing Prince
Philip and Queen Elizabeth II. These two notes already have <code>isPartnerOf</code>
<a
href="#root/_help_zEY4DaJG4YT5">relations</a>defined.
<ul>
<li>There are actually two "inverse" relations (one from Philip to Elizabeth
<li data-list-item-id="e6a1191839d963d2d4cf15852ea9acc89">There are actually two "inverse" relations (one from Philip to Elizabeth
and one from Elizabeth to Philip)</li>
</ul>
</li>
<li>we drag both notes to relation map and place to suitable position. Notice
how the existing "isPartnerOf" relations are displayed.</li>
<li>now we create new note - we name it "Prince Charles" and place it on the
<li data-list-item-id="e40dbe04d4e9bd69c397126932f4edaf3">we drag both notes to relation map and place to suitable position. Notice
how the existing <code>isPartnerOf</code> relations are displayed.</li>
<li
data-list-item-id="ee2476b8231bb8d48e9adb9c29ada592e">now we create new note - we name it "Prince Charles" and place it on the
relation map by clicking on the desired position. The note is by default
created under the relation map note (visible in the note tree on the left).</li>
<li>we create two new relations "isChildOf" targeting both Philip and Elizabeth
<ul>
<li>now there's something unexpected - we can also see the relation to display
another "hasChild" relation. This is because there's a <a href="#root/_help_OFXdgB2nNk1F">relation definition</a> which
puts "isChildOf" as an "<a href="#root/_help_OFXdgB2nNk1F">inverse</a>"
relation of "hasChildOf" (and vice versa) and thus it is created automatically.</li>
</ul>
</li>
<li>we create another note for Princess Diana and create "isPartnerOf" relation
from Charles. Again notice how the relation has arrows both ways - this
is because "isPartnerOf" definition specifies its inverse relation as again
"isPartnerOf" so the opposite relation is created automatically.</li>
<li>as the last step we pan &amp; zoom the map to fit better to window dimensions.</li>
<li
data-list-item-id="ed5140ee461efac10a20629ee03b277fd">we create two new relations <code>isChildOf</code> targeting both Philip
and Elizabeth
<ul>
<li data-list-item-id="ed88b374c9e48219fa191c45e245b4930">now there's something unexpected - we can also see the relation to display
another <code>hasChild</code> relation. This is because there's a <a href="#root/_help_OFXdgB2nNk1F">relation definition</a> which
puts <code>isChildOf</code> as an "<a href="#root/_help_OFXdgB2nNk1F">inverse</a>"
relation of <code>hasChildOf</code> (and vice versa) and thus it is created
automatically.</li>
</ul>
</li>
<li data-list-item-id="efd1ee343a23186191d0ff7b92cf68c57">we create another note for Princess Diana and create <code>isPartnerOf</code> relation
from Charles. Again notice how the relation has arrows both ways - this
is because <code>isPartnerOf</code> definition specifies its inverse relation
as again "isPartnerOf" so the opposite relation is created automatically.</li>
<li
data-list-item-id="ec3e7d407540df9ed00fa24af466cc068">as the last step we pan &amp; zoom the map to fit better to window dimensions.</li>
</ul>
<p>Relation definitions mentioned above come from "Person template" note
which is assigned to any child of "My Family Tree" relation note. You can
@ -71,5 +114,6 @@
the ones defined in the label.</p>
<h2>See also</h2>
<ul>
<li><a href="#root/_help_BCkXAVs63Ttv">Note Map</a>&nbsp;is a similar concept</li>
<li data-list-item-id="e90849a998c08784469041422147d5fcf"><a class="reference-link" href="#root/_help_bdUJEHsAPYQR">Note Map</a>&nbsp;is
a similar concept.</li>
</ul>

View File

@ -1,6 +1,6 @@
{
"formatVersion": 2,
"appVersion": "0.99.0",
"appVersion": "0.99.1",
"files": [
{
"isClone": false,

View File

@ -1,6 +1,6 @@
{
"formatVersion": 2,
"appVersion": "0.99.0",
"appVersion": "0.99.1",
"files": [
{
"isClone": false,

File diff suppressed because it is too large Load Diff

View File

@ -1,15 +1,31 @@
# Relation Map
Relation map is a type of [Note](../Basic%20Concepts%20and%20Features/Notes.md) which visualizes notes and their [relations](../Advanced%20Usage/Attributes.md). See an example:
Relation map is a type of note which visualizes notes and their [relations](../Advanced%20Usage/Attributes.md).
## Interaction
* To create a new note and add it to the board, press the plus button in the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Floating%20buttons.md">Floating buttons</a>.
* Afterwards, click anywhere on the map to place it there.
* The note will be placed as a sub-child of the map.
* An existing note can also be dragged from the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Note%20Tree.md">Note Tree</a>. It will be placed at the position it's dragged on.
* Multiple notes can also be dragged via <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Note%20Tree/Multiple%20selection.md">Multiple selection</a>. The notes will be positioned near the dragged position without overlapping.
* The dragged note can be a sub-child of the map, or it can be at any arbitrary position.
* To create a relationship, hold the mouse on the box on the right of a note and then:
* Drag it over another note to create a relationship pointing from the first note to the second one.
* Drag over the same note to create a self-referencing relationship (represented as a loop).
* Once dragged, enter the name of the relationship to create. To cancel, simply dismiss the dialog or press <kbd>Esc</kbd>.
* To open a note, either click on the note (opening it in the current view) or use the right click menu to open in a new tab.
* To edit the title of a note or to delete it (either from the map, or delete it completely), right click the note.
* To delete a relationship, right click it and select the corresponding option.
## Development process demo
This is a basic example how you can create simple diagram using relation maps:
![](1_Relation%20Map_relation-map-.png)
<img src="1_Relation Map_relation-map-.png" width="934" height="667">
And this is how you can create it:
![](1_Relation%20Map_relation-map-.gif)
<img src="1_Relation Map_relation-map-.gif" width="812" height="585">
We start completely from scratch by first creating new note called "Development process" and changing its type to "Relation map". After that we create new notes one by one and place them by clicking into the map. We also drag [relations](../Advanced%20Usage/Attributes.md)between notes and name them. That's all!
@ -19,21 +35,21 @@ Items on the map - "Specification", "Development", "Testing" and "Demo" are actu
This is more complicated demo using some advanced concepts. Resulting diagram is here:
![](Relation%20Map_relation-map-.png)
<img src="Relation Map_relation-map-.png" width="941" height="758">
This is how you get to it:
![](Relation%20Map_relation-map-.gif)
<img src="Relation Map_relation-map-.gif" width="812" height="585">
There are several steps here:
* we start with empty relation map and two existing notes representing Prince Philip and Queen Elizabeth II. These two notes already have "isPartnerOf" [relations](../Advanced%20Usage/Attributes.md)defined.
* we start with empty relation map and two existing notes representing Prince Philip and Queen Elizabeth II. These two notes already have `isPartnerOf` [relations](../Advanced%20Usage/Attributes.md)defined.
* There are actually two "inverse" relations (one from Philip to Elizabeth and one from Elizabeth to Philip)
* we drag both notes to relation map and place to suitable position. Notice how the existing "isPartnerOf" relations are displayed.
* we drag both notes to relation map and place to suitable position. Notice how the existing `isPartnerOf` relations are displayed.
* now we create new note - we name it "Prince Charles" and place it on the relation map by clicking on the desired position. The note is by default created under the relation map note (visible in the note tree on the left).
* we create two new relations "isChildOf" targeting both Philip and Elizabeth
* now there's something unexpected - we can also see the relation to display another "hasChild" relation. This is because there's a [relation definition](../Advanced%20Usage/Attributes/Promoted%20Attributes.md) which puts "isChildOf" as an "[inverse](../Advanced%20Usage/Attributes/Promoted%20Attributes.md)" relation of "hasChildOf" (and vice versa) and thus it is created automatically.
* we create another note for Princess Diana and create "isPartnerOf" relation from Charles. Again notice how the relation has arrows both ways - this is because "isPartnerOf" definition specifies its inverse relation as again "isPartnerOf" so the opposite relation is created automatically.
* we create two new relations `isChildOf` targeting both Philip and Elizabeth
* now there's something unexpected - we can also see the relation to display another `hasChild` relation. This is because there's a [relation definition](../Advanced%20Usage/Attributes/Promoted%20Attributes.md) which puts `isChildOf` as an "[inverse](../Advanced%20Usage/Attributes/Promoted%20Attributes.md)" relation of `hasChildOf` (and vice versa) and thus it is created automatically.
* we create another note for Princess Diana and create `isPartnerOf` relation from Charles. Again notice how the relation has arrows both ways - this is because `isPartnerOf` definition specifies its inverse relation as again "isPartnerOf" so the opposite relation is created automatically.
* as the last step we pan & zoom the map to fit better to window dimensions.
Relation definitions mentioned above come from "Person template" note which is assigned to any child of "My Family Tree" relation note. You can play with the whole thing in the [demo notes](../Advanced%20Usage/Database.md).
@ -46,4 +62,4 @@ Alternatively, you can specify comma delimited list of relation names in `hideRe
## See also
* [Note Map](../Advanced%20Usage/Note%20Map%20\(Link%20map%2C%20Tree%20map\).md) is a similar concept
* <a class="reference-link" href="Note%20Map.md">Note Map</a> is a similar concept.