hans/racket-wiki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Lots of changes to the cmap stuff

Browse Source
This commit is contained in:
Hans Dijkema
2026-08-22 13:51:15 +02:00
parent 63b7ca0853
commit 20c1584016
17 changed files with 3105 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/cmap/cmap-racket-wiki.js
+912 -51
View File
File diff suppressed because it is too large Load Diff
static/cmap/cmap.css
+377 -25
View File
@@ -13,6 +13,7 @@ body.cmap-mode #main {
height: 100vh;
min-height: 0;
overflow: auto;
padding-top: 0;
}
#cmap-view {
@@ -24,7 +25,7 @@ body.cmap-mode #main {
z-index: 160;
top: 0;
margin: 0 0 10px;
padding: 6px 0;
padding: 34px 0 6px;
background: rgb(255 255 255 / 96%);
box-shadow: 0 1px 0 rgb(128 139 150 / 22%);
backdrop-filter: blur(4px);
@@ -51,6 +52,45 @@ body.cmap-mode #main {
min-width: 16px;
}
.cmap-hidden-items {
position: relative;
flex: 0 0 auto;
}
.cmap-hidden-items > summary {
cursor: pointer;
white-space: nowrap;
}
.cmap-hidden-item-options {
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 10020;
display: grid;
min-width: 220px;
max-height: 320px;
overflow: auto;
padding: 6px;
border: 1px solid #c8ced5;
border-radius: 5px;
background: #fff;
box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
}
.cmap-hidden-item-options button {
padding: 7px 9px;
border: 0;
background: transparent;
text-align: left;
cursor: pointer;
}
.cmap-hidden-item-options button:hover,
.cmap-hidden-item-options button:focus-visible {
background: #eef2f6;
}
.cmap-storage-controls input[type="search"] {
box-sizing: border-box;
min-width: 220px;
@@ -60,6 +100,20 @@ body.cmap-mode #main {
font: inherit;
}
.cmap-wiki-reference {
max-width: 300px;
overflow: hidden;
padding: 5px 8px;
border: 1px solid #c3cad2;
border-radius: 4px;
background: #f7f9fa;
color: #34495e;
cursor: copy;
font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
text-overflow: ellipsis;
white-space: nowrap;
}
.wiki-combobox {
position: relative;
min-width: 220px;
@@ -225,6 +279,8 @@ body.cmap-mode #main {
.cmap-workspace {
position: relative;
z-index: 0;
isolation: isolate;
width: 100%;
}
@@ -337,7 +393,7 @@ body.cmap-mode #main {
.cmap-context-menu {
position: fixed;
z-index: 500;
z-index: 100000;
display: grid;
min-width: 210px;
padding: 5px;
@@ -406,23 +462,131 @@ body.cmap-mode #main {
}
.cmap-card {
position: relative;
height: 100%;
box-sizing: border-box;
padding: 9px 11px;
overflow: hidden;
}
.rw-cmap-view-description {
position: absolute;
top: 3px;
left: 3px;
z-index: 46;
display: grid;
width: 20px;
height: 20px;
padding: 0;
place-items: center;
border: 1px solid rgb(70 82 94 / 45%);
border-radius: 50%;
background: #fff;
color: #34495e;
cursor: pointer;
font: 700 14px/1 Georgia, "Times New Roman", serif;
}
.rw-cmap-view-description.is-empty {
border-color: #c8cdd2;
background: #e5e7e9;
color: #7a828a;
}
.rw-cmap-view-description.is-filled {
border-color: #87919b;
background: #fff;
color: #263746;
}
.cmap-description-tooltip {
position: fixed;
z-index: 110000;
width: min(420px, calc(100vw - 16px));
max-height: min(440px, calc(100vh - 24px));
overflow: auto;
padding: 12px 14px;
border: 1px solid #9ca6b0;
border-radius: 7px;
background: #fff;
box-shadow: 0 10px 32px rgb(0 0 0 / 24%);
color: #222;
font: 14px/1.45 system-ui, sans-serif;
pointer-events: none;
}
.cmap-description-tooltip .markdown-body > :first-child { margin-top: 0; }
.cmap-description-tooltip .markdown-body > :last-child { margin-bottom: 0; }
.rw-cmap-open-linked {
position: absolute;
z-index: 46;
top: 3px;
right: 3px;
display: grid;
width: 20px;
height: 20px;
padding: 0;
place-items: center;
border: 1px solid rgb(70 82 94 / 45%);
border-radius: 50%;
background: rgb(255 255 255 / 86%);
color: #34495e;
cursor: pointer;
font: 700 12px/1 Arial, Helvetica, sans-serif;
}
.rw-cmap-view-description + .cmap-card-image,
.rw-cmap-view-description ~ .cmap-card-title {
padding-left: 16px;
}
.rw-cmap-open-linked ~ .cmap-card-title {
padding-right: 16px;
}
.cmap-card-title {
margin-bottom: .3rem;
font-size: 1rem;
font-weight: 700;
font-size: 1em;
font-weight: inherit;
font-style: inherit;
}
.cmap-card-usage {
opacity: .62;
font-size: .72em;
font-style: normal;
font-weight: 400;
white-space: nowrap;
}
.cmap-card-aspects {
display: flex;
flex-wrap: wrap;
gap: 3px;
margin: 0 0 .35rem;
}
.cmap-card-aspect {
padding: 1px 5px;
border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
border-radius: 999px;
background: rgb(255 255 255 / 58%);
font-size: .68em;
font-weight: 600;
line-height: 1.35;
}
.cmap-card-synopsis {
color: inherit;
opacity: .78;
font-size: .84rem;
font-size: .84em;
line-height: 1.25;
font-weight: inherit;
font-style: inherit;
overflow-wrap: anywhere;
white-space: normal;
word-break: break-word;
}
.cmap-card-image {
@@ -434,18 +598,6 @@ body.cmap-mode #main {
object-fit: contain;
}
.cmap-card-page .cmap-card-title::after {
content: " ↗";
color: #4479a1;
font-weight: 400;
}
.cmap-card-linked-cmap .cmap-card-title::after {
content: " ↗";
color: #477b3e;
font-weight: 400;
}
.rw-cmap-item {
overflow: visible !important;
}
@@ -466,10 +618,30 @@ body.cmap-mode #main {
font: 700 17px/18px Arial, Helvetica, sans-serif;
}
.rw-cmap-submap-open {
position: absolute;
top: 6px;
right: 34px;
z-index: 45;
width: 22px;
height: 22px;
padding: 0;
border: 1px solid #57834a;
border-radius: 50%;
background: #fff;
color: #35672c;
cursor: pointer;
font: 700 14px/18px Arial, Helvetica, sans-serif;
}
.cmap-card-submap {
padding-right: 38px;
}
.rw-cmap-item:has(> .rw-cmap-submap-open) .cmap-card-submap {
padding-right: 64px;
}
.rw-cmap-submap-frame {
position: absolute;
z-index: 0;
@@ -487,6 +659,23 @@ body.cmap-mode #main {
user-select: none;
}
.rw-cmap-submap-anchor-line {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
}
.rw-cmap-submap-anchor-line path {
fill: none;
stroke: #a6adb4;
stroke-width: 2;
stroke-linecap: round;
}
.rw-cmap-submap-frame-selected {
outline: 3px solid #9994ff;
outline-offset: 2px;
@@ -510,6 +699,43 @@ body.cmap-mode #main {
pointer-events: auto;
}
.rw-cmap-boundary-layer,
.rw-cmap-boundary-lines {
position: absolute;
inset: 0;
z-index: 16;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
}
.rw-cmap-boundary-reference {
position: absolute;
z-index: 17;
min-height: 30px;
overflow: hidden;
padding: 5px 9px;
border: 1px solid #77838e;
border-radius: 5px;
background: #fff;
color: #25313c;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
pointer-events: auto;
box-shadow: 0 2px 6px rgb(0 0 0 / 14%);
}
.rw-cmap-boundary-reference-left::before {
content: "← ";
}
.rw-cmap-boundary-reference-right::after {
content: " →";
}
.rw-cmap-selected {
z-index: 20 !important;
outline: 3px solid #9994ff !important;
@@ -660,6 +886,11 @@ body.cmap-mode #main {
box-shadow: 0 18px 60px rgb(0 0 0 / 24%);
}
#cmap-concept-dialog {
width: min(780px, calc(100vw - 32px));
max-height: calc(100vh - 32px);
}
.cmap-concept-dialog::backdrop {
background: rgb(22 30 44 / 38%);
}
@@ -695,6 +926,8 @@ body.cmap-mode #main {
#cmap-history-list { max-height: min(520px, 60vh); overflow: auto; }
.cmap-history-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid #dfe3e8; }
.cmap-history-row:last-child { border-bottom: 0; }
.cmap-history-actions { display: flex; gap: 8px; align-items: center; }
.cmap-history-empty { margin: 18px 0 4px; }
.cmap-unsaved-dialog form {
display: grid;
@@ -713,6 +946,21 @@ body.cmap-mode #main {
padding: 22px;
}
#cmap-concept-form {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 11px 14px;
max-height: calc(100vh - 34px);
overflow: auto;
padding: 18px;
}
#cmap-concept-form > h2,
#cmap-concept-form > .cmap-dialog-wide,
#cmap-concept-form > .cmap-submap-style-fields,
#cmap-concept-form > .cmap-concept-dialog-actions {
grid-column: 1 / -1;
}
.cmap-concept-dialog h2 {
margin: 0 0 2px;
}
@@ -737,18 +985,72 @@ body.cmap-mode #main {
font-weight: 400;
}
.cmap-concept-dialog input[type="color"] {
width: 72px;
height: 36px;
padding: 2px;
border: 1px solid #aab2bd;
.cmap-color-control {
position: relative;
display: flex;
align-items: center;
gap: 6px;
font-weight: 400;
}
.cmap-concept-dialog .cmap-color-input {
width: 96px;
min-width: 0;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.cmap-color-swatch {
width: 34px;
height: 34px;
padding: 0;
border: 1px solid #8f99a4;
border-radius: 4px;
background: #fff;
cursor: pointer;
}
.cmap-color-palette {
position: absolute;
z-index: 20;
top: calc(100% + 4px);
left: 0;
display: grid;
grid-template-columns: repeat(6, 28px);
gap: 5px;
padding: 7px;
border: 1px solid #929ca6;
border-radius: 6px;
background: #fff;
box-shadow: 0 7px 22px rgb(0 0 0 / 20%);
}
.cmap-color-palette button {
width: 28px;
height: 28px;
padding: 0;
border: 1px solid #727b84;
border-radius: 3px;
}
.cmap-color-palette button:hover,
.cmap-color-palette button:focus-visible {
outline: 2px solid #315f91;
outline-offset: 1px;
}
.cmap-native-color-picker {
position: fixed;
left: -100px;
top: -100px;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.cmap-concept-image-fields,
.cmap-submap-style-fields {
.cmap-submap-style-fields,
.cmap-appearance-fields,
.cmap-typography-fields {
display: grid;
gap: 9px;
margin: 0;
@@ -758,7 +1060,9 @@ body.cmap-mode #main {
}
.cmap-concept-image-fields legend,
.cmap-submap-style-fields legend {
.cmap-submap-style-fields legend,
.cmap-appearance-fields legend,
.cmap-typography-fields legend {
padding: 0 4px;
font-weight: 600;
}
@@ -767,6 +1071,40 @@ body.cmap-mode #main {
grid-template-columns: 1fr 1fr;
}
.cmap-appearance-fields {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.cmap-typography-fields {
grid-column: 1 / -1;
grid-template-columns: repeat(5, minmax(0, 1fr));
min-width: 0;
padding: 8px 10px 10px;
}
.cmap-appearance-fields legend,
.cmap-style-preset-row {
grid-column: 1 / -1;
}
.cmap-inline-control {
display: flex;
gap: 7px;
}
.cmap-inline-control select { flex: 1 1 auto; }
#cmap-concept-form .cmap-check-label {
display: flex;
flex-direction: row;
gap: 7px;
align-items: center;
align-self: end;
min-height: 36px;
}
.cmap-check-label input { margin: 0; }
.cmap-submap-style-fields legend {
grid-column: 1 / -1;
}
@@ -825,6 +1163,20 @@ body.cmap-mode #main {
margin-top: 4px;
}
@media (max-width: 720px) {
#cmap-concept-form,
.cmap-appearance-fields,
.cmap-typography-fields {
grid-template-columns: 1fr;
}
#cmap-concept-form > *,
.cmap-appearance-fields > *,
.cmap-typography-fields > * {
grid-column: 1;
}
}
@media (max-width: 1100px) {
.cmap-storage-controls {
flex-wrap: wrap;
static/cmap/cmap.js
+38 -4
View File
@@ -1,5 +1,5 @@
/**
* racket-wiki cmap component 0.2.94
* racket-wiki cmap component 0.2.95
* Based on cmap v0.1.3.
* (c) 2015 iOnStage
* Released under the MIT License.
@@ -370,6 +370,12 @@
var Component = function() {};
Component.prototype.disposed = false;
Component.prototype.dispose = function() {
this.disposed = true;
};
Component.prototype.prop = function(initialValue, defaultValue, converter) {
if (typeof converter !== 'function')
converter = helper.identity;
@@ -407,8 +413,11 @@
var updateRelations = function(index) {
for (var i = index, len = dirtyComponents.length; i < len; i++) {
var component = dirtyComponents[i];
if (component.disposed)
continue;
component.relations().forEach(function(relation) {
relation.update(component);
if (!relation.disposed)
relation.update(component);
});
}
@@ -421,7 +430,8 @@
updateRelations(0);
dirtyComponents.forEach(function(component) {
component.redraw();
if (!component.disposed)
component.redraw();
});
dirtyComponents = [];
@@ -429,7 +439,7 @@
};
return function() {
if (dom.disabled())
if (dom.disabled() || this.disposed)
return;
if (dirtyComponents.indexOf(this) === -1)
@@ -1808,6 +1818,9 @@
};
Cmap.prototype.redraw = function() {
if (this.disposed)
return;
var rootElement = this.rootElement();
if (!rootElement) {
@@ -1820,6 +1833,7 @@
this.rootElement(rootElement);
}
var previousElement = this.element();
var element = dom.el('<div>');
element.className = 'rw-cmap-surface';
dom.draggable(element, function(x, y, event) {
@@ -1844,6 +1858,8 @@
this.unfixScrollSize();
dom.css(element, this.style());
if (previousElement && previousElement.parentNode)
previousElement.parentNode.removeChild(previousElement);
dom.append(rootElement, element);
};
@@ -2190,6 +2206,24 @@
this.activationHandler = handler;
};
CmapModule.prototype.destroy = function() {
var component = this.component;
var element = component.element();
this.selectionHandler = null;
this.activationHandler = null;
component.selectionHandler = null;
component.activationHandler = null;
component.componentList().toArray().forEach(function(child) {
child.dispose();
child.parentElement(null);
});
component.dispose();
if (element && element.parentNode)
element.parentNode.removeChild(element);
};
CmapModule.prototype.zoom = function(value) {
if (typeof value === 'undefined')
return this.component.zoomFactor;
static/css/wiki.css
+59
View File
@@ -410,6 +410,65 @@ body {
max-width: 900px;
}
.page-cmap-connections {
box-sizing: border-box;
max-width: 900px;
margin-top: 2rem;
padding: 14px 16px;
border: 1px solid #c8d8c3;
border-radius: 7px;
background: #f5faf3;
}
.page-cmap-connections h2 {
margin: 0 0 10px;
font-size: 1rem;
}
.page-cmap-concept-row {
display: grid;
grid-template-columns: minmax(180px, 1fr) minmax(220px, 2fr);
gap: 12px 18px;
align-items: center;
padding: 9px 0;
border-top: 1px solid #d9e5d5;
}
.page-cmap-concept-row:first-child { border-top: 0; }
.page-cmap-concept-description {
display: grid;
gap: 2px;
}
.page-cmap-concept-description .muted { font-size: .82rem; }
.page-cmap-concept-maps {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.page-cmap-concept-maps a {
padding: 4px 8px;
border: 1px solid #96b48d;
border-radius: 999px;
background: #fff;
color: #315f2b;
font-size: .86rem;
text-decoration: none;
}
.page-cmap-concept-maps a:hover,
.page-cmap-concept-maps a:focus-visible {
background: #e6f3e2;
text-decoration: underline;
}
@media (max-width: 680px) {
.page-cmap-concept-row { grid-template-columns: 1fr; }
}
.markdown-body h1,
.EasyMDEContainer .editor-preview h1,
.EasyMDEContainer .editor-preview-side h1 {
static/index.html
+101 -31
View File
@@ -81,6 +81,10 @@
<svg id="context-dock-graph" class="wiki-graph context-graph-small" viewBox="0 0 1000 700" role="img" aria-label="Context graph"></svg>
</aside>
</div>
<section id="page-cmap-connections" class="page-cmap-connections hidden" aria-labelledby="page-cmap-connections-title">
<h2 id="page-cmap-connections-title" data-tr="connected-cmap-concepts">Connected CMap concepts</h2>
<div id="page-cmap-connections-list"></div>
</section>
<footer id="page-details" class="page-details"></footer>
</section>
@@ -175,9 +179,14 @@
<button type="button" class="wiki-combobox-toggle" tabindex="-1" aria-label="Show concept maps">⌄</button>
<div id="cmap-map-options" class="wiki-combobox-list hidden" role="listbox"></div>
</div>
<button id="cmap-wiki-reference" class="cmap-wiki-reference hidden" type="button" data-tr-title="copy-wiki-link" title="Copy wiki link"></button>
<span class="cmap-toolbar-separator" aria-hidden="true"></span>
<button id="cmap-tools-menu" class="editor-only" type="button" aria-label="Concept map tools" aria-haspopup="menu">⋮</button>
<span id="cmap-save-status" class="muted" role="status"></span>
<details id="cmap-hidden-items" class="cmap-hidden-items hidden">
<summary data-tr="hidden-concepts">Hidden concepts</summary>
<div id="cmap-hidden-item-options" class="cmap-hidden-item-options"></div>
</details>
<span class="cmap-toolbar-spacer" aria-hidden="true"></span>
<div class="cmap-zoom-controls" aria-label="Zoom controls">
<button id="cmap-zoom-out" type="button" aria-label="Zoom out">−</button>
@@ -189,10 +198,11 @@
<details class="cmap-help-menu">
<summary aria-label="Concept map help">?</summary>
<div class="cmap-help-popover muted">
<p data-tr="concept-map-help-context">Select with Ctrl/Cmd/Shift-click or by dragging over empty space. Drag a selected element to move the complete selection. Grouping creates a new sub-CMap around the selection. Double-click a page or sub-CMap to open it; right-click for editing tools.</p>
<p data-tr="concept-map-help-context">Select with Ctrl/Cmd/Shift-click or by dragging over empty space. Drag a selected element to move the complete selection. Hold Alt while drawing a relation to create a direct line without a linking phrase. Grouping creates a new sub-CMap around the selection. Double-click a concept to edit it or a sub-CMap to open it; right-click for more tools.</p>
<dl class="cmap-shortcut-list">
<div><dt><kbd>Ctrl</kbd>/<kbd>Cmd</kbd>/<kbd>Shift</kbd> + <span data-tr="click">click</span></dt><dd data-tr="cmap-help-add-selection">Add to or remove from the selection</dd></div>
<div><dt><kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>A</kbd></dt><dd data-tr="select-all">Select all</dd></div>
<div><dt><kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>C</kbd>/<kbd>V</kbd></dt><dd data-tr="copy-paste-linked-concepts">Copy/paste linked concepts</dd></div>
<div><dt><kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>G</kbd></dt><dd data-tr="group-selected">Group selection as sub-CMap</dd></div>
<div><dt><kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>G</kbd></dt><dd data-tr="ungroup-selected">Detach from sub-CMap</dd></div>
<div><dt><kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Z</kbd></dt><dd data-tr="undo">Undo</dd></div>
@@ -213,6 +223,7 @@
<button id="cmap-save-map" class="editor-only" type="button" role="menuitem" data-tr="save-now">Save now</button>
<div class="cmap-context-separator" role="separator"></div>
<button id="cmap-rename-map" type="button" role="menuitem" data-tr="rename-concept-map" disabled>Rename CMap</button>
<button id="cmap-set-start-map" type="button" role="menuitem" data-tr="set-start-concept-map" disabled>Use as start CMap</button>
<button id="cmap-delete-map" class="danger" type="button" role="menuitem" data-tr="delete-concept-map" disabled>Delete CMap</button>
<button id="cmap-create-snapshot" type="button" role="menuitem" data-tr="create-concept-map-snapshot" disabled>Make snapshot…</button>
<button id="cmap-history" type="button" role="menuitem" data-tr="concept-map-history" disabled>CMap history</button>
@@ -222,6 +233,8 @@
<button id="cmap-add-submap" type="button" role="menuitem" data-tr="add-submap">Add sub-CMap</button>
<button id="cmap-promote-submap" type="button" role="menuitem" data-tr="promote-submap" disabled>Make separate CMap</button>
<button id="cmap-edit-selected" type="button" role="menuitem" data-tr="edit-selected-concept">Edit selected</button>
<button id="cmap-copy-selected" type="button" role="menuitem" data-tr="copy-linked-concepts">Copy concept reference</button>
<button id="cmap-paste-concepts" type="button" role="menuitem" data-tr="paste-linked-concepts" disabled>Paste linked concept</button>
<div class="cmap-context-separator" role="separator"></div>
<button id="cmap-undo" type="button" role="menuitem" data-tr="undo" disabled>Undo</button>
<button id="cmap-redo" type="button" role="menuitem" data-tr="redo-action" disabled>Redo</button>
@@ -229,6 +242,7 @@
<button id="cmap-select-all" type="button" role="menuitem" data-tr="select-all">Select all</button>
<button id="cmap-group-selected" type="button" role="menuitem" data-tr="group-selected" disabled>Group selection as sub-CMap</button>
<button id="cmap-ungroup-selected" type="button" role="menuitem" data-tr="ungroup-selected" disabled>Detach from sub-CMap</button>
<button id="cmap-hide-selected" type="button" role="menuitem" data-tr="hide-in-this-view" disabled>Hide in this view</button>
<button id="cmap-delete-selected" class="danger" type="button" role="menuitem" data-tr="delete-selected" disabled>Delete selection</button>
<div class="cmap-context-separator" role="separator"></div>
<button id="cmap-toggle-page-guides" type="button" role="menuitemcheckbox" aria-checked="true" data-tr="a4-page-boundaries">A4 page boundaries</button>
@@ -405,29 +419,102 @@
<input id="cmap-concept-label" type="text" required>
</label>
<label>
<span data-tr="aspects">Aspects</span>
<input id="cmap-concept-aspects" type="text" data-tr-placeholder="aspects-placeholder" placeholder="Security, performance">
</label>
<label class="cmap-dialog-wide">
<span data-tr="concept-description-page">Concept description page</span>
<input id="cmap-concept-description-page" type="text" data-tr-placeholder="concept-description-page-placeholder" placeholder="cmap:concept-name">
<a id="cmap-concept-description-link" class="hidden" href="#" data-tr="view-description-page">View description page</a>
</label>
<label class="cmap-dialog-wide">
<span data-tr="synopsis">Synopsis</span>
<textarea id="cmap-concept-synopsis" rows="4"></textarea>
</label>
<label>
<span id="cmap-concept-background-label" data-tr="background-color">Background color</span>
<input id="cmap-concept-background" type="color" value="#f3f6f8">
<textarea id="cmap-concept-synopsis" rows="3"></textarea>
</label>
<fieldset class="cmap-appearance-fields cmap-dialog-wide">
<legend data-tr="appearance">Appearance</legend>
<label class="cmap-style-preset-row">
<span data-tr="style">Style</span>
<span class="cmap-inline-control">
<select id="cmap-concept-style-preset">
<option value="default" data-tr="style-default">Default</option>
<option value="subtle" data-tr="style-subtle">Subtle</option>
<option value="emphasis" data-tr="style-emphasis">Emphasis</option>
<option value="warning" data-tr="style-warning">Warning</option>
<option value="success" data-tr="style-success">Success</option>
</select>
<button id="cmap-apply-style" type="button" data-tr="apply-style">Apply</button>
</span>
</label>
<label>
<span id="cmap-concept-background-label" data-tr="background-color">Background color</span>
<span class="cmap-color-control"><input id="cmap-concept-background" class="cmap-color-input" type="text" value="#f3f6f8"><button type="button" class="cmap-color-swatch" aria-label="Choose background color"></button></span>
</label>
<fieldset class="cmap-typography-fields">
<legend data-tr="concept-heading-appearance">Heading</legend>
<label>
<span data-tr="text-color">Text color</span>
<span class="cmap-color-control"><input id="cmap-concept-text-color" class="cmap-color-input" type="text" value="#222222"><button type="button" class="cmap-color-swatch" aria-label="Choose heading text color"></button></span>
</label>
<label>
<span data-tr="font-family">Font family</span>
<select id="cmap-concept-font-family">
<option value="Arial, Helvetica, sans-serif">Arial</option>
<option value="Verdana, Geneva, sans-serif">Verdana</option>
<option value="Tahoma, Geneva, sans-serif">Tahoma</option>
<option value="Trebuchet MS, Arial, sans-serif">Trebuchet MS</option>
<option value="Georgia, Times New Roman, serif">Georgia</option>
<option value="Times New Roman, Times, serif">Times New Roman</option>
<option value="Courier New, Courier, monospace">Courier New</option>
<option value="system-ui, sans-serif">System UI</option>
</select>
</label>
<label>
<span data-tr="font-size">Font size</span>
<span class="cmap-font-size-input"><input id="cmap-concept-font-size" type="number" min="6" max="54" step="0.01"><span>pt</span></span>
</label>
<label class="cmap-check-label"><input id="cmap-concept-bold" type="checkbox" checked><span data-tr="bold">Bold</span></label>
<label class="cmap-check-label"><input id="cmap-concept-italic" type="checkbox"><span data-tr="italic">Italic</span></label>
</fieldset>
<fieldset class="cmap-typography-fields">
<legend data-tr="concept-subtext-appearance">Subtext</legend>
<label>
<span data-tr="text-color">Text color</span>
<span class="cmap-color-control"><input id="cmap-concept-synopsis-text-color" class="cmap-color-input" type="text" value="#222222"><button type="button" class="cmap-color-swatch" aria-label="Choose subtext color"></button></span>
</label>
<label>
<span data-tr="font-family">Font family</span>
<select id="cmap-concept-synopsis-font-family">
<option value="Arial, Helvetica, sans-serif">Arial</option>
<option value="Verdana, Geneva, sans-serif">Verdana</option>
<option value="Tahoma, Geneva, sans-serif">Tahoma</option>
<option value="Trebuchet MS, Arial, sans-serif">Trebuchet MS</option>
<option value="Georgia, Times New Roman, serif">Georgia</option>
<option value="Times New Roman, Times, serif">Times New Roman</option>
<option value="Courier New, Courier, monospace">Courier New</option>
<option value="system-ui, sans-serif">System UI</option>
</select>
</label>
<label>
<span data-tr="font-size">Font size</span>
<span class="cmap-font-size-input"><input id="cmap-concept-synopsis-font-size" type="number" min="6" max="54" step="0.01"><span>pt</span></span>
</label>
<label class="cmap-check-label"><input id="cmap-concept-synopsis-bold" type="checkbox"><span data-tr="bold">Bold</span></label>
<label class="cmap-check-label"><input id="cmap-concept-synopsis-italic" type="checkbox"><span data-tr="italic">Italic</span></label>
</fieldset>
</fieldset>
<fieldset id="cmap-submap-style-fields" class="cmap-submap-style-fields hidden">
<legend data-tr="submap-appearance">Sub-CMap appearance</legend>
<label>
<span data-tr="submap-background-color">Sub-CMap background color</span>
<input id="cmap-submap-background" type="color" value="#edf7e8">
<span class="cmap-color-control"><input id="cmap-submap-background" class="cmap-color-input" type="text" value="#edf7e8"><button type="button" class="cmap-color-swatch" aria-label="Choose submap background color"></button></span>
</label>
<label>
<span data-tr="submap-border-color">Sub-CMap border color</span>
<input id="cmap-submap-border" type="color" value="#57834a">
<span class="cmap-color-control"><input id="cmap-submap-border" class="cmap-color-input" type="text" value="#57834a"><button type="button" class="cmap-color-swatch" aria-label="Choose submap border color"></button></span>
</label>
</fieldset>
<label>
<span data-tr="text-color">Text color</span>
<input id="cmap-concept-text-color" type="color" value="#222222">
</label>
<fieldset class="cmap-concept-image-fields">
<fieldset class="cmap-concept-image-fields cmap-dialog-wide">
<legend data-tr="concept-image">Concept image</legend>
<input id="cmap-concept-image" type="file" accept="image/*">
<div id="cmap-concept-image-preview-row" class="cmap-concept-image-preview-row hidden">
@@ -435,23 +522,6 @@
<button id="cmap-concept-image-remove" type="button" data-tr="remove-image">Remove image</button>
</div>
</fieldset>
<label>
<span data-tr="font-family">Font family</span>
<select id="cmap-concept-font-family">
<option value="Arial, Helvetica, sans-serif">Arial</option>
<option value="Verdana, Geneva, sans-serif">Verdana</option>
<option value="Tahoma, Geneva, sans-serif">Tahoma</option>
<option value="Trebuchet MS, Arial, sans-serif">Trebuchet MS</option>
<option value="Georgia, Times New Roman, serif">Georgia</option>
<option value="Times New Roman, Times, serif">Times New Roman</option>
<option value="Courier New, Courier, monospace">Courier New</option>
<option value="system-ui, sans-serif">System UI</option>
</select>
</label>
<label>
<span data-tr="font-size">Font size</span>
<span class="cmap-font-size-input"><input id="cmap-concept-font-size" type="number" min="6" max="54" step="1"><span>pt</span></span>
</label>
<div class="cmap-concept-dialog-actions">
<button id="cmap-concept-cancel" type="button" data-tr="cancel">Cancel</button>
<button type="submit" class="primary" data-tr="save">Save</button>
@@ -498,7 +568,7 @@
<h2 id="cmap-history-title" data-tr="concept-map-history">CMap history</h2>
<button id="cmap-history-close" type="button" data-tr="close">Close</button>
</header>
<p class="muted" data-tr="concept-map-history-help">Load a historical version into the editor to inspect it. Saving it creates a new current version.</p>
<p class="muted" data-tr="concept-map-history-help">Snapshots are kept indefinitely. Up to five explicit saves are kept; automatic saves are not added to history.</p>
<div id="cmap-history-list"></div>
</div>
</dialog>
static/js/wiki.js
+797 -55
View File
File diff suppressed because it is too large Load Diff