- - + Font color + + + + + + + + + + + +
+
+ Color
+
diff --git a/my-mind.css b/my-mind.css
index 8ca2034..425fdfb 100644
--- a/my-mind.css
+++ b/my-mind.css
@@ -159,19 +159,19 @@ button:not(:disabled) {
.pane#ui[hidden] #toggle::after {
content: "←";
}
-.pane#ui #color {
+.pane#ui .color-picker {
display: flex;
flex-direction: row;
}
-.pane#ui #color [data-color] {
+.pane#ui .color-picker [data-color] {
width: 14px;
height: 14px;
border-radius: 3px;
margin-right: 2px;
border: 1px solid transparent;
}
-.pane#ui #color [data-color]:hover,
-.pane#ui #color [data-color]:first-child {
+.pane#ui .color-picker [data-color]:hover,
+.pane#ui .color-picker [data-color]:first-child {
border-color: #000;
}
.pane#ui #icons {
diff --git a/my-mind.js b/my-mind.js
index 81970fe..5f971d5 100644
--- a/my-mind.js
+++ b/my-mind.js
@@ -1,5 +1,7 @@
(() => {
var __defProp = Object.defineProperty;
+ var __reflectGet = Reflect.get;
+ var __reflectSet = Reflect.set;
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
var __export = (target, all2) => {
__markAsModule(target);
@@ -9,19 +11,19 @@
// .js/html.js
function node(name, attrs) {
- let node10 = document.createElement(name);
- Object.assign(node10, attrs);
- return node10;
+ let node11 = document.createElement(name);
+ Object.assign(node11, attrs);
+ return node11;
}
// .js/svg.js
var NS = "http://www.w3.org/2000/svg";
function node2(name, attrs) {
- let node10 = document.createElementNS(NS, name);
+ let node11 = document.createElementNS(NS, name);
for (let attr in attrs) {
- node10.setAttribute(attr, attrs[attr]);
+ node11.setAttribute(attr, attrs[attr]);
}
- return node10;
+ return node11;
}
function group() {
return node2("g");
@@ -243,9 +245,9 @@
}
};
var Multi = class extends Action {
- constructor(actions12) {
+ constructor(actions13) {
super();
- this.actions = actions12;
+ this.actions = actions13;
}
do() {
this.actions.forEach((action2) => action2.do());
@@ -389,6 +391,20 @@
this.item.color = this.oldColor;
}
};
+ var SetFontColor = class extends Action {
+ constructor(item, fontColor) {
+ super();
+ this.item = item;
+ this.fontColor = fontColor;
+ this.oldFontColor = item.fontColor;
+ }
+ do() {
+ this.item.fontColor = this.fontColor;
+ }
+ undo() {
+ this.item.fontColor = this.oldFontColor;
+ }
+ };
var SetText = class extends Action {
constructor(item, text) {
super();
@@ -483,14 +499,33 @@
action(action2);
}
+ // .js/ui/fontcolor.js
+ var fontcolor_exports = {};
+ __export(fontcolor_exports, {
+ init: () => init4
+ });
+ var node6 = document.querySelector("#fontColor");
+ function init4() {
+ node6.addEventListener("click", onClick2);
+ [...node6.querySelectorAll("[data-color]")].forEach((item) => {
+ item.style.backgroundColor = item.dataset.color;
+ });
+ }
+ function onClick2(e) {
+ e.preventDefault();
+ let color = e.target.dataset.color || "";
+ let action2 = new SetFontColor(currentItem, color);
+ action(action2);
+ }
+
// .js/ui/value.js
var value_exports = {};
__export(value_exports, {
- init: () => init4,
+ init: () => init5,
update: () => update
});
var select = document.querySelector("#value");
- function init4() {
+ function init5() {
select.addEventListener("change", onChange);
}
function update() {
@@ -516,7 +551,7 @@
// .js/ui/layout.js
var layout_exports = {};
__export(layout_exports, {
- init: () => init5,
+ init: () => init6,
update: () => update2
});
@@ -979,7 +1014,7 @@
// .js/ui/layout.js
var select2 = document.querySelector("#layout");
- function init5() {
+ function init6() {
let layout = repo2.get("map");
select2.append(layout.option);
let label = buildGroup("Graph");
@@ -1013,20 +1048,20 @@
return select2.querySelector(`option[value="${value}"]`);
}
function buildGroup(label) {
- let node10 = document.createElement("optgroup");
- node10.label = label;
- select2.append(node10);
- return node10;
+ let node11 = document.createElement("optgroup");
+ node11.label = label;
+ select2.append(node11);
+ return node11;
}
// .js/ui/icon.js
var icon_exports = {};
__export(icon_exports, {
- init: () => init6,
+ init: () => init7,
update: () => update3
});
var select3 = document.querySelector("#icons");
- function init6() {
+ function init7() {
select3.addEventListener("change", onChange3);
}
function update3() {
@@ -1040,7 +1075,7 @@
// .js/ui/shape.js
var shape_exports = {};
__export(shape_exports, {
- init: () => init7,
+ init: () => init8,
update: () => update4
});
@@ -1058,6 +1093,9 @@
update(item) {
item.dom.content.style.borderColor = item.resolvedColor;
}
+ updateFontColor(item) {
+ item.dom.text.style.color = item.resolvedFontColor;
+ }
getHorizontalAnchor(item) {
const { contentPosition, contentSize } = item;
return Math.round(contentPosition[0] + contentSize[0] / 2) + 0.5;
@@ -1112,7 +1150,7 @@
// .js/ui/shape.js
var select4 = document.querySelector("#shape");
- function init7() {
+ function init8() {
repo3.forEach((shape) => select4.append(shape.option));
select4.addEventListener("change", onChange4);
}
@@ -1133,7 +1171,7 @@
// .js/ui/status.js
var status_exports = {};
__export(status_exports, {
- init: () => init8,
+ init: () => init9,
update: () => update5
});
var select5 = document.querySelector("#status");
@@ -1153,7 +1191,7 @@
function stringToStatus(str) {
return str in STATUS_MAP ? STATUS_MAP[str] : str;
}
- function init8() {
+ function init9() {
select5.addEventListener("change", onChange5);
}
function update5() {
@@ -1168,26 +1206,26 @@
// .js/ui/tip.js
var tip_exports = {};
__export(tip_exports, {
- init: () => init9
+ init: () => init10
});
- var node6 = document.querySelector("#tip");
- function init9() {
- node6.addEventListener("click", hide);
+ var node7 = document.querySelector("#tip");
+ function init10() {
+ node7.addEventListener("click", hide);
subscribe("command-child", hide);
subscribe("command-sibling", hide);
}
function hide() {
unsubscribe("command-child", hide);
unsubscribe("command-sibling", hide);
- node6.removeEventListener("click", hide);
- node6.hidden = true;
+ node7.removeEventListener("click", hide);
+ node7.hidden = true;
}
// .js/ui/io.js
var io_exports = {};
__export(io_exports, {
hide: () => hide2,
- init: () => init10,
+ init: () => init11,
quickSave: () => quickSave,
restore: () => restore,
show: () => show
@@ -1230,10 +1268,10 @@
}
show(mode2) {
this.mode = mode2;
- const { go, node: node10 } = this;
+ const { go, node: node11 } = this;
go.textContent = mode2.charAt(0).toUpperCase() + mode2.substring(1);
- [...node10.querySelectorAll("[data-for]")].forEach((node11) => node11.hidden = true);
- [...node10.querySelectorAll(`[data-for~=${mode2}]`)].forEach((node11) => node11.hidden = false);
+ [...node11.querySelectorAll("[data-for]")].forEach((node12) => node12.hidden = true);
+ [...node11.querySelectorAll(`[data-for~=${mode2}]`)].forEach((node12) => node12.hidden = false);
go.focus();
}
saveDone() {
@@ -1539,36 +1577,36 @@
}
return elm;
}
- parseNode(node10, parent) {
- var json = this.parseAttributes(node10, parent);
- for (var i = 0; i < node10.childNodes.length; i++) {
- var child = node10.childNodes[i];
+ parseNode(node11, parent) {
+ var json = this.parseAttributes(node11, parent);
+ for (var i = 0; i < node11.childNodes.length; i++) {
+ var child = node11.childNodes[i];
if (child instanceof Element && child.nodeName.toLowerCase() == "node") {
json.children.push(this.parseNode(child, json));
}
}
return json;
}
- parseAttributes(node10, parent) {
+ parseAttributes(node11, parent) {
var json = {
children: [],
- text: nl2br(node10.getAttribute("TEXT") || ""),
- id: node10.getAttribute("ID")
+ text: nl2br(node11.getAttribute("TEXT") || ""),
+ id: node11.getAttribute("ID")
};
- var position = node10.getAttribute("POSITION");
+ var position = node11.getAttribute("POSITION");
if (position) {
json.side = position;
}
- var style = node10.getAttribute("STYLE");
+ var style = node11.getAttribute("STYLE");
if (style == "bubble") {
json.shape = "box";
} else {
json.shape = parent.shape;
}
- if (node10.getAttribute("FOLDED") == "true") {
+ if (node11.getAttribute("FOLDED") == "true") {
json.collapsed = 1;
}
- var children = node10.children;
+ var children = node11.children;
for (var i = 0; i < children.length; i++) {
var child = children[i];
switch (child.nodeName.toLowerCase()) {
@@ -1620,23 +1658,23 @@
return elm;
};
}
- parseAttributes(node10, parent) {
+ parseAttributes(node11, parent) {
var json = {
children: [],
- text: nl2br(node10.getAttribute("title") || ""),
+ text: nl2br(node11.getAttribute("title") || ""),
shape: "box"
};
- if (node10.getAttribute("expand") == "false") {
+ if (node11.getAttribute("expand") == "false") {
json.collapsed = 1;
}
- var direction = node10.getAttribute("direction");
+ var direction = node11.getAttribute("direction");
if (direction == "0") {
json.side = "left";
}
if (direction == "1") {
json.side = "right";
}
- var color = node10.getAttribute("color");
+ var color = node11.getAttribute("color");
if (color) {
var re = color.match(/^#(....)(....)(....)$/);
if (re) {
@@ -1644,7 +1682,7 @@
json.color = "#" + parts.join("");
}
}
- json.icon = node10.getAttribute("icon") || "";
+ json.icon = node11.getAttribute("icon") || "";
return json;
}
};
@@ -1860,14 +1898,14 @@
return this.request("GET", url);
}
async request(method, url, data) {
- let init19 = {
+ let init20 = {
method,
credentials: "include"
};
if (data) {
- init19.body = data;
+ init20.body = data;
}
- let response = await fetch(url, init19);
+ let response = await fetch(url, init20);
let text = await response.text();
if (response.status == 200) {
return text;
@@ -2510,10 +2548,10 @@ ${text}`);
// .js/ui/io.js
var currentMode = "load";
var currentBackend = null;
- var node7 = document.querySelector("#io");
- var select6 = node7.querySelector("#backend");
+ var node8 = document.querySelector("#io");
+ var select6 = node8.querySelector("#backend");
var PREFIX = "mm.app";
- function init10() {
+ function init11() {
[LocalUI, FirebaseUI, GDriveUI, FileUI, WebDAVUI, ImageUI].forEach((ctor) => {
let bui = new ctor();
select6.append(bui.option);
@@ -2565,12 +2603,12 @@ ${text}`);
}
function show(mode2) {
currentMode = mode2;
- node7.hidden = false;
- node7.querySelector("h3").textContent = mode2;
+ node8.hidden = false;
+ node8.querySelector("h3").textContent = mode2;
syncBackend();
}
function hide2() {
- node7.hidden = true;
+ node8.hidden = true;
}
function quickSave() {
if (currentBackend) {
@@ -2580,8 +2618,8 @@ ${text}`);
}
}
function syncBackend() {
- [...node7.querySelectorAll("div[id]")].forEach((node10) => node10.hidden = true);
- node7.querySelector(`#${select6.value}`).hidden = false;
+ [...node8.querySelectorAll("div[id]")].forEach((node11) => node11.hidden = true);
+ node8.querySelector(`#${select6.value}`).hidden = false;
repo4.get(select6.value).show(currentMode);
}
function setCurrentBackend(backend) {
@@ -2608,22 +2646,22 @@ ${text}`);
}
// .js/ui/context-menu.js
- var node8 = document.querySelector("#context-menu");
+ var node9 = document.querySelector("#context-menu");
var port;
- function init11(port_) {
+ function init12(port_) {
port = port_;
- [...node8.querySelectorAll("[data-command]")].forEach((button) => {
+ [...node9.querySelectorAll("[data-command]")].forEach((button) => {
let commandName = button.dataset.command;
button.textContent = repo.get(commandName).label;
});
port.addEventListener("mousedown", handleEvent);
- node8.addEventListener("mousedown", handleEvent);
+ node9.addEventListener("mousedown", handleEvent);
close3();
}
function open(point) {
- node8.hidden = false;
- let w = node8.offsetWidth;
- let h = node8.offsetHeight;
+ node9.hidden = false;
+ let w = node9.offsetWidth;
+ let h = node9.offsetHeight;
let left = point[0];
let top = point[1];
if (left > port.offsetWidth / 2) {
@@ -2632,11 +2670,11 @@ ${text}`);
if (top > port.offsetHeight / 2) {
top -= h;
}
- node8.style.left = `${left}px`;
- node8.style.top = `${top}px`;
+ node9.style.left = `${left}px`;
+ node9.style.top = `${top}px`;
}
function handleEvent(e) {
- if (e.currentTarget != node8) {
+ if (e.currentTarget != node9) {
close3();
return;
}
@@ -2654,27 +2692,27 @@ ${text}`);
close3();
}
function close3() {
- node8.hidden = true;
+ node9.hidden = true;
}
// .js/ui/ui.js
- var node9 = document.querySelector("#ui");
+ var node10 = document.querySelector("#ui");
function isActive() {
- return node9.contains(document.activeElement);
+ return node10.contains(document.activeElement);
}
function toggle3() {
- node9.hidden = !node9.hidden;
+ node10.hidden = !node10.hidden;
publish("ui-change");
}
function getWidth() {
- return node9.hidden ? 0 : node9.offsetWidth;
+ return node10.hidden ? 0 : node10.offsetWidth;
}
function update6() {
[layout_exports, shape_exports, icon_exports, value_exports, status_exports].forEach((ui5) => ui5.update());
}
- function onClick2(e) {
+ function onClick3(e) {
let target = e.target;
- if (target == node9.querySelector("#toggle")) {
+ if (target == node10.querySelector("#toggle")) {
toggle3();
return;
}
@@ -2692,7 +2730,7 @@ ${text}`);
}
}
}
- function init12(port4) {
+ function init13(port4) {
[
layout_exports,
shape_exports,
@@ -2700,19 +2738,20 @@ ${text}`);
value_exports,
status_exports,
color_exports,
+ fontcolor_exports,
help_exports,
tip_exports,
notes_exports,
io_exports
].forEach((ui5) => ui5.init());
- init11(port4);
+ init12(port4);
subscribe("item-select", update6);
subscribe("item-change", (_message, publisher) => {
if (publisher == currentItem) {
update6();
}
});
- node9.addEventListener("click", onClick2);
+ node10.addEventListener("click", onClick3);
restore();
}
@@ -3011,6 +3050,7 @@ ${text}`);
this._icon = "";
this._notes = "";
this._color = "";
+ this._fontColor = "";
this._value = null;
this._status = null;
this._side = null;
@@ -3067,14 +3107,14 @@ ${text}`);
return [bbox.width, bbox.height];
}
get position() {
- const { node: node10 } = this.dom;
- const transform = node10.getAttribute("transform");
+ const { node: node11 } = this.dom;
+ const transform = node11.getAttribute("transform");
return transform.match(/\d+/g).map(Number);
}
set position(position) {
- const { node: node10 } = this.dom;
+ const { node: node11 } = this.dom;
const transform = `translate(${position.join(" ")})`;
- node10.setAttribute("transform", transform);
+ node11.setAttribute("transform", transform);
}
get contentSize() {
const { content } = this.dom;
@@ -3104,6 +3144,9 @@ ${text}`);
if (this._color) {
data.color = this._color;
}
+ if (this._fontColor) {
+ data.fontColor = this._fontColor;
+ }
if (this._icon) {
data.icon = this._icon;
}
@@ -3141,6 +3184,9 @@ ${text}`);
if (data.color) {
this._color = data.color;
}
+ if (data.fontColor) {
+ this._fontColor = data.fontColor;
+ }
if (data.icon) {
this._icon = data.icon;
}
@@ -3183,6 +3229,10 @@ ${text}`);
this._color = data.color || "";
dirty = 2;
}
+ if (this._fontColor != data.fontColor) {
+ this._fontColor = data.fontColor || "";
+ dirty = 2;
+ }
if (this._icon != data.icon) {
this._icon = data.icon || "";
dirty = 1;
@@ -3263,9 +3313,9 @@ ${text}`);
this.updateIcon();
this.updateValue();
const { resolvedLayout, resolvedShape, dom } = this;
- const { content, node: node10, connectors } = dom;
- node10.dataset.shape = resolvedShape.id;
- node10.dataset.align = resolvedLayout.computeAlignment(this);
+ const { content, node: node11, connectors } = dom;
+ node11.dataset.shape = resolvedShape.id;
+ node11.dataset.align = resolvedLayout.computeAlignment(this);
let fo = content.parentNode;
let size = [
Math.max(content.offsetWidth, content.scrollWidth),
@@ -3276,6 +3326,7 @@ ${text}`);
connectors.innerHTML = "";
resolvedLayout.update(this);
resolvedShape.update(this);
+ resolvedShape.updateFontColor(this);
if (options.parent && parent) {
parent.update({ children: false });
}
@@ -3383,6 +3434,23 @@ ${text}`);
}
return COLOR;
}
+ get fontColor() {
+ return this._fontColor;
+ }
+ set fontColor(fontColor) {
+ this._fontColor = fontColor;
+ this.update({ children: true });
+ }
+ get resolvedFontColor() {
+ if (this._fontColor) {
+ return this._fontColor;
+ }
+ const { parent } = this;
+ if (parent instanceof Item) {
+ return parent.resolvedFontColor;
+ }
+ return COLOR_FONT;
+ }
get layout() {
return this._layout;
}
@@ -3412,10 +3480,10 @@ ${text}`);
return this._shape;
}
let depth = 0;
- let node10 = this;
- while (!node10.isRoot) {
+ let node11 = this;
+ while (!node11.isRoot) {
depth++;
- node10 = node10.parent;
+ node11 = node11.parent;
}
switch (depth) {
case 0:
@@ -3544,13 +3612,13 @@ ${text}`);
}
}
updateToggle() {
- const { node: node10, toggle: toggle4 } = this.dom;
- node10.classList.toggle("collapsed", this._collapsed);
+ const { node: node11, toggle: toggle4 } = this.dom;
+ node11.classList.toggle("collapsed", this._collapsed);
toggle4.querySelector("path").setAttribute("d", this._collapsed ? D_PLUS : D_MINUS);
}
};
- function findLinks(node10) {
- let children = [...node10.childNodes];
+ function findLinks(node11) {
+ let children = [...node11.childNodes];
for (let i = 0; i < children.length; i++) {
let child = children[i];
if (child instanceof Element) {
@@ -3570,9 +3638,9 @@ ${text}`);
var link = document.createElement("a");
link.innerHTML = link.href = result[0];
if (before) {
- node10.insertBefore(document.createTextNode(before), child);
+ node11.insertBefore(document.createTextNode(before), child);
}
- node10.insertBefore(link, child);
+ node11.insertBefore(link, child);
if (after) {
child.nodeValue = after;
i--;
@@ -3600,6 +3668,7 @@ ${text}`);
return g;
}
var COLOR = "#999";
+ var COLOR_FONT = "#000";
var RE = /\b(([a-z][\w-]+:\/\/\w)|(([\w-]+\.){2,}[a-z][\w-]+)|([\w-]+\.[a-z][\w-]+\/))[^\s]*([^\s,.;:?!<>\(\)\[\]'"])?($|\b)/i;
// .js/map.js
@@ -3641,10 +3710,10 @@ ${text}`);
return this._root;
}
set root(root) {
- const { node: node10, style } = this;
+ const { node: node11, style } = this;
this._root = root;
- node10.innerHTML = "";
- node10.append(root.dom.node, style);
+ node11.innerHTML = "";
+ node11.append(root.dom.node, style);
root.parent = this;
}
adjustFontSize(diff) {
@@ -3656,24 +3725,24 @@ ${text}`);
mergeWith(data) {
let ids = [];
var current2 = currentItem;
- var node10 = current2;
+ var node11 = current2;
while (true) {
- ids.push(node10.id);
- if (node10.parent == this) {
+ ids.push(node11.id);
+ if (node11.parent == this) {
break;
}
- node10 = node10.parent;
+ node11 = node11.parent;
}
this._root.mergeWith(data.root);
if (current2.map) {
- let node11 = current2;
+ let node12 = current2;
let hidden = false;
while (true) {
- if (node11.parent == this) {
+ if (node12.parent == this) {
break;
}
- node11 = node11.parent;
- if (node11.collapsed) {
+ node12 = node12.parent;
+ if (node12.collapsed) {
hidden = true;
}
}
@@ -3702,10 +3771,10 @@ ${text}`);
update(options) {
options = Object.assign({}, UPDATE_OPTIONS2, options);
options.children && this._root.update({ parent: false, children: true });
- const { node: node10 } = this;
+ const { node: node11 } = this;
const { size } = this._root;
- node10.setAttribute("width", String(size[0]));
- node10.setAttribute("height", String(size[1]));
+ node11.setAttribute("width", String(size[0]));
+ node11.setAttribute("height", String(size[1]));
}
show(where) {
where.append(this.node);
@@ -3745,8 +3814,8 @@ ${text}`);
all2.sort((a, b) => a.distance - b.distance);
return all2[0];
}
- getItemFor(node10) {
- let content = node10.closest(".content");
+ getItemFor(node11) {
+ let content = node11.closest(".content");
if (!content) {
return;
}
@@ -3811,8 +3880,8 @@ ${text}`);
this.getPickCandidates(currentRect, child, direction, candidates);
});
}
- var node10 = item.dom.content;
- var rect = node10.getBoundingClientRect();
+ var node11 = item.dom.content;
+ var rect = node11.getBoundingClientRect();
if (direction == "left" || direction == "right") {
var x1 = currentRect.left + currentRect.width / 2;
var x2 = rect.left + rect.width / 2;
@@ -3853,7 +3922,7 @@ ${text}`);
this.node.style.top = `${point[1]}px`;
}
};
- async function init13() {
+ async function init14() {
let response = await fetch("map.css");
css = await response.text();
}
@@ -3874,7 +3943,7 @@ ${text}`);
command.execute(e);
}
}
- function init14() {
+ function init15() {
window.addEventListener("keydown", handleEvent2);
}
function keyOK(key, e) {
@@ -3894,7 +3963,7 @@ ${text}`);
previousDragState: null
};
var port2;
- function init15(port_) {
+ function init16(port_) {
port2 = port_;
port2.addEventListener("touchstart", onDragStart);
port2.addEventListener("mousedown", onDragStart);
@@ -4121,7 +4190,7 @@ ${text}`);
// .js/clipboard.js
var storedItem = null;
var mode = "";
- function init16() {
+ function init17() {
document.body.addEventListener("cut", onCopyCut);
document.body.addEventListener("copy", onCopyCut);
document.body.addEventListener("paste", onPaste);
@@ -4218,7 +4287,7 @@ ${text}`);
document.title = currentMap.name + " :: My Mind";
}
}
- function init17() {
+ function init18() {
subscribe("item-change", onItemChange);
}
@@ -4485,19 +4554,19 @@ ${text}`);
editing = false;
return currentItem.stopEditing();
}
- async function init18() {
- await init13();
+ async function init19() {
+ await init14();
subscribe("ui-change", syncPort);
window.addEventListener("resize", syncPort);
window.addEventListener("beforeunload", (e) => {
e.preventDefault();
return "";
});
- init16();
- init14();
- init15(port3);
init17();
- init12(port3);
+ init15();
+ init16(port3);
+ init18();
+ init13(port3);
syncPort();
showMap(new Map2());
}
@@ -4507,5 +4576,5 @@ ${text}`);
port3.style.height = portSize[1] + "px";
currentMap && currentMap.ensureItemVisibility(currentItem);
}
- init18();
+ init19();
})();
diff --git a/src/action.ts b/src/action.ts
index 83151f3..49b727a 100644
--- a/src/action.ts
+++ b/src/action.ts
@@ -186,6 +186,23 @@ export class SetColor extends Action {
}
}
+export class SetFontColor extends Action {
+ protected oldFontColor: string;
+
+ constructor(protected item: Item, protected fontColor: string) {
+ super();
+ this.oldFontColor = item.fontColor;
+ }
+
+ do() {
+ this.item.fontColor = this.fontColor;
+ }
+
+ undo() {
+ this.item.fontColor = this.oldFontColor;
+ }
+}
+
export class SetText extends Action {
protected oldText: string;
protected oldValue: Value;
diff --git a/src/item.ts b/src/item.ts
index d78339b..fc8af2e 100644
--- a/src/item.ts
+++ b/src/item.ts
@@ -25,6 +25,7 @@ export type Jsonified = Partial<{
notes: string;
side: Side;
color: string;
+ fontColor: string;
icon: string;
value: Value;
status: Status | "yes" | "no";
@@ -48,6 +49,7 @@ export default class Item {
protected _icon = "";
protected _notes = "";
protected _color = "";
+ protected _fontColor = "";
protected _value: Value = null;
protected _status: Status = null;
protected _side: Side | null = null; // side preference
@@ -153,6 +155,7 @@ export default class Item {
if (this._side) { data.side = this._side; }
if (this._color) { data.color = this._color; }
+ if (this._fontColor) { data.fontColor = this._fontColor; }
if (this._icon) { data.icon = this._icon; }
if (this._value) { data.value = this._value; }
if (this._status) { data.status = this._status; }
@@ -176,6 +179,7 @@ export default class Item {
if (data.notes) { this.notes = data.notes; }
if (data.side) { this._side = data.side; }
if (data.color) { this._color = data.color; }
+ if (data.fontColor) { this._fontColor = data.fontColor; }
if (data.icon) { this._icon = data.icon; }
if (data.value) { this._value = data.value; }
if (data.status) {
@@ -214,6 +218,11 @@ export default class Item {
dirty = 2;
}
+ if (this._fontColor != data.fontColor) {
+ this._fontColor = data.fontColor || "";
+ dirty = 2;
+ }
+
if (this._icon != data.icon) {
this._icon = data.icon || "";
dirty = 1;
@@ -328,6 +337,7 @@ export default class Item {
connectors.innerHTML = "";
resolvedLayout.update(this);
resolvedShape.update(this); // needs layout -> draws second
+ resolvedShape.updateFontColor(this);
// recurse upwards?
if (options.parent && parent) { parent.update({children:false}); } // explicit children:false when the parent is a Map
@@ -423,6 +433,20 @@ export default class Item {
return COLOR;
}
+ get fontColor() { return this._fontColor; }
+ set fontColor(fontColor: string) {
+ this._fontColor = fontColor;
+ this.update({children:true});
+ }
+ get resolvedFontColor(): string {
+ if (this._fontColor) { return this._fontColor; }
+
+ const { parent } = this;
+ if (parent instanceof Item) { return parent.resolvedFontColor; }
+
+ return COLOR_FONT;
+ }
+
get layout() { return this._layout; }
set layout(layout: Layout | null) {
this._layout = layout;
@@ -657,6 +681,7 @@ function buildToggle() {
}
const COLOR = "#999";
+const COLOR_FONT = "#000";
/* RE explanation:
* _________________________________________________________________________ One of the three possible variants
diff --git a/src/shape/shape.ts b/src/shape/shape.ts
index 7ac5181..552e9df 100644
--- a/src/shape/shape.ts
+++ b/src/shape/shape.ts
@@ -14,6 +14,10 @@ export default class Shape {
item.dom.content.style.borderColor = item.resolvedColor;
}
+ updateFontColor(item: Item) {
+ item.dom.text.style.color = item.resolvedFontColor
+ }
+
getHorizontalAnchor(item: Item) {
const { contentPosition, contentSize } = item;
return Math.round(contentPosition[0] + contentSize[0]/2) + 0.5;
diff --git a/src/ui/fontcolor.ts b/src/ui/fontcolor.ts
new file mode 100644
index 0000000..d307bb9
--- /dev/null
+++ b/src/ui/fontcolor.ts
@@ -0,0 +1,21 @@
+import * as actions from "../action.js";
+import * as app from "../my-mind.js";
+
+
+const node = document.querySelectorMy Mind
- Font color
-
+ Item color
+
@@ -79,8 +79,8 @@ My Mind
- Color
-
+ Text color
+
@@ -92,7 +92,6 @@ My Mind