From 76c8fa98c50bc31280dd18d0ccb934e62bfd405c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ond=C5=99ej=20=C5=BD=C3=A1ra?= <ondrej.zara@gmail.com>
Date: Sun, 31 Oct 2021 01:26:26 +0200
Subject: [PATCH] font->text

---
 index.html                             |  9 ++--
 my-mind.js                             | 64 ++++++++++++--------------
 src/action.ts                          | 12 ++---
 src/item.ts                            | 35 ++++++--------
 src/shape/shape.ts                     |  4 --
 src/ui/{fontcolor.ts => text-color.ts} |  4 +-
 src/ui/ui.ts                           |  4 +-
 7 files changed, 57 insertions(+), 75 deletions(-)
 rename src/ui/{fontcolor.ts => text-color.ts} (76%)

diff --git a/index.html b/index.html
index 2fd0f53..a33b4b8 100644
--- a/index.html
+++ b/index.html
@@ -65,8 +65,8 @@ <h3>My Mind</h3>
 				</select></label>
 			</p>
 			<p>
-				<span>Font color</span>
-				<span id="fontColor" class="color-picker">
+				<span>Item color</span>
+				<span id="color" class="color-picker">
 					<a data-color="" title="Inherit" href="#"></a>
 					<a data-color="#000" title="Black" href="#"></a>
 					<a data-color="#e33" title="Red" href="#"></a>
@@ -79,8 +79,8 @@ <h3>My Mind</h3>
 				</span>
 			</p>
 			<p>
-				<span>Color</span>
-				<span id="color" class="color-picker">
+				<span>Text color</span>
+				<span id="text-color" class="color-picker">
 					<a data-color="" title="Inherit" href="#"></a>
 					<a data-color="#000" title="Black" href="#"></a>
 					<a data-color="#e33" title="Red" href="#"></a>
@@ -92,7 +92,6 @@ <h3>My Mind</h3>
 					<a data-color="#fa3" title="Orange" href="#"></a>
 				</span>
 			</p>
-
 			<p>
 				<label><span>Icons</span>
 				<select id="icons">
diff --git a/my-mind.js b/my-mind.js
index 5f971d5..16445cd 100644
--- a/my-mind.js
+++ b/my-mind.js
@@ -1,7 +1,5 @@
 (() => {
   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);
@@ -391,18 +389,18 @@
       this.item.color = this.oldColor;
     }
   };
-  var SetFontColor = class extends Action {
-    constructor(item, fontColor) {
+  var SetTextColor = class extends Action {
+    constructor(item, textColor) {
       super();
       this.item = item;
-      this.fontColor = fontColor;
-      this.oldFontColor = item.fontColor;
+      this.textColor = textColor;
+      this.oldTextColor = item.textColor;
     }
     do() {
-      this.item.fontColor = this.fontColor;
+      this.item.textColor = this.textColor;
     }
     undo() {
-      this.item.fontColor = this.oldFontColor;
+      this.item.textColor = this.oldTextColor;
     }
   };
   var SetText = class extends Action {
@@ -499,12 +497,12 @@
     action(action2);
   }
 
-  // .js/ui/fontcolor.js
-  var fontcolor_exports = {};
-  __export(fontcolor_exports, {
+  // .js/ui/text-color.js
+  var text_color_exports = {};
+  __export(text_color_exports, {
     init: () => init4
   });
-  var node6 = document.querySelector("#fontColor");
+  var node6 = document.querySelector("#text-color");
   function init4() {
     node6.addEventListener("click", onClick2);
     [...node6.querySelectorAll("[data-color]")].forEach((item) => {
@@ -514,7 +512,7 @@
   function onClick2(e) {
     e.preventDefault();
     let color = e.target.dataset.color || "";
-    let action2 = new SetFontColor(currentItem, color);
+    let action2 = new SetTextColor(currentItem, color);
     action(action2);
   }
 
@@ -1093,9 +1091,6 @@
     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;
@@ -2738,7 +2733,7 @@ ${text}`);
       value_exports,
       status_exports,
       color_exports,
-      fontcolor_exports,
+      text_color_exports,
       help_exports,
       tip_exports,
       notes_exports,
@@ -3050,7 +3045,7 @@ ${text}`);
       this._icon = "";
       this._notes = "";
       this._color = "";
-      this._fontColor = "";
+      this._textColor = "";
       this._value = null;
       this._status = null;
       this._side = null;
@@ -3144,8 +3139,8 @@ ${text}`);
       if (this._color) {
         data.color = this._color;
       }
-      if (this._fontColor) {
-        data.fontColor = this._fontColor;
+      if (this._textColor) {
+        data.textColor = this._textColor;
       }
       if (this._icon) {
         data.icon = this._icon;
@@ -3184,8 +3179,8 @@ ${text}`);
       if (data.color) {
         this._color = data.color;
       }
-      if (data.fontColor) {
-        this._fontColor = data.fontColor;
+      if (data.textColor) {
+        this._textColor = data.textColor;
       }
       if (data.icon) {
         this._icon = data.icon;
@@ -3229,8 +3224,8 @@ ${text}`);
         this._color = data.color || "";
         dirty = 2;
       }
-      if (this._fontColor != data.fontColor) {
-        this._fontColor = data.fontColor || "";
+      if (this._textColor != data.textColor) {
+        this._textColor = data.textColor || "";
         dirty = 2;
       }
       if (this._icon != data.icon) {
@@ -3314,6 +3309,7 @@ ${text}`);
       this.updateValue();
       const { resolvedLayout, resolvedShape, dom } = this;
       const { content, node: node11, connectors } = dom;
+      dom.text.style.color = this.resolvedTextColor;
       node11.dataset.shape = resolvedShape.id;
       node11.dataset.align = resolvedLayout.computeAlignment(this);
       let fo = content.parentNode;
@@ -3326,7 +3322,6 @@ ${text}`);
       connectors.innerHTML = "";
       resolvedLayout.update(this);
       resolvedShape.update(this);
-      resolvedShape.updateFontColor(this);
       if (options.parent && parent) {
         parent.update({ children: false });
       }
@@ -3434,22 +3429,22 @@ ${text}`);
       }
       return COLOR;
     }
-    get fontColor() {
-      return this._fontColor;
+    get textColor() {
+      return this._textColor;
     }
-    set fontColor(fontColor) {
-      this._fontColor = fontColor;
+    set textColor(textColor) {
+      this._textColor = textColor;
       this.update({ children: true });
     }
-    get resolvedFontColor() {
-      if (this._fontColor) {
-        return this._fontColor;
+    get resolvedTextColor() {
+      if (this._textColor) {
+        return this._textColor;
       }
       const { parent } = this;
       if (parent instanceof Item) {
-        return parent.resolvedFontColor;
+        return parent.resolvedTextColor;
       }
-      return COLOR_FONT;
+      return "";
     }
     get layout() {
       return this._layout;
@@ -3668,7 +3663,6 @@ ${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
diff --git a/src/action.ts b/src/action.ts
index 49b727a..3d7b484 100644
--- a/src/action.ts
+++ b/src/action.ts
@@ -186,20 +186,20 @@ export class SetColor extends Action {
 	}
 }
 
-export class SetFontColor extends Action {
-	protected oldFontColor: string;
+export class SetTextColor extends Action {
+	protected oldTextColor: string;
 
-	constructor(protected item: Item, protected fontColor: string) {
+	constructor(protected item: Item, protected textColor: string) {
 		super();
-		this.oldFontColor = item.fontColor;
+		this.oldTextColor = item.textColor;
 	}
 
 	do() {
-		this.item.fontColor = this.fontColor;
+		this.item.textColor = this.textColor;
 	}
 
 	undo() {
-		this.item.fontColor = this.oldFontColor;
+		this.item.textColor = this.oldTextColor;
 	}
 }
 
diff --git a/src/item.ts b/src/item.ts
index fc8af2e..9100222 100644
--- a/src/item.ts
+++ b/src/item.ts
@@ -8,12 +8,6 @@ import Layout, { repo as layoutRepo } from "./layout/layout.js";
 import Map from "./map.js";
 
 
-declare global {  // fixme
-	interface Window {
-		editor: any;
-	}
-}
-
 export const TOGGLE_SIZE = 6;
 export type Value = string | number | null;
 export type Status = "computed" | boolean | null;
@@ -25,7 +19,7 @@ export type Jsonified = Partial<{
 	notes: string;
 	side: Side;
 	color: string;
-	fontColor: string;
+	textColor: string;
 	icon: string;
 	value: Value;
 	status: Status | "yes" | "no";
@@ -49,7 +43,7 @@ export default class Item {
 	protected _icon = "";
 	protected _notes = "";
 	protected _color = "";
-	protected _fontColor = "";
+	protected _textColor = "";
 	protected _value: Value = null;
 	protected _status: Status = null;
 	protected _side: Side | null = null; // side preference
@@ -155,7 +149,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._textColor) { data.textColor = this._textColor; }
 		if (this._icon) { data.icon = this._icon; }
 		if (this._value) { data.value = this._value; }
 		if (this._status) { data.status = this._status; }
@@ -179,7 +173,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.textColor) { this._textColor = data.textColor; }
 		if (data.icon) { this._icon = data.icon; }
 		if (data.value) { this._value = data.value; }
 		if (data.status) {
@@ -218,8 +212,8 @@ export default class Item {
 			dirty = 2;
 		}
 
-		if (this._fontColor != data.fontColor) {
-			this._fontColor = data.fontColor || "";
+		if (this._textColor != data.textColor) {
+			this._textColor = data.textColor || "";
 			dirty = 2;
 		}
 
@@ -323,6 +317,7 @@ export default class Item {
 		const { resolvedLayout, resolvedShape, dom } = this;
 		const { content, node, connectors } = dom;
 
+		dom.text.style.color = this.resolvedTextColor;
 		node.dataset.shape = resolvedShape.id; // applies css => modifies dimensions (necessary for layout)
 		node.dataset.align = resolvedLayout.computeAlignment(this); // applies css => modifies dimensions (necessary for layout)
 
@@ -337,7 +332,6 @@ 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
@@ -433,18 +427,18 @@ export default class Item {
 		return COLOR;
 	}
 
-	get fontColor() { return this._fontColor; }
-	set fontColor(fontColor: string) {
-		this._fontColor = fontColor;
+	get textColor() { return this._textColor; }
+	set textColor(textColor: string) {
+		this._textColor = textColor;
 		this.update({children:true});
 	}
-	get resolvedFontColor(): string {
-		if (this._fontColor) { return this._fontColor; }
+	get resolvedTextColor(): string {
+		if (this._textColor) { return this._textColor; }
 
 		const { parent } = this;
-		if (parent instanceof Item) { return parent.resolvedFontColor; }
+		if (parent instanceof Item) { return parent.resolvedTextColor; }
 
-		return COLOR_FONT;
+		return "";
 	}
 
 	get layout() { return this._layout; }
@@ -681,7 +675,6 @@ 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 552e9df..7ac5181 100644
--- a/src/shape/shape.ts
+++ b/src/shape/shape.ts
@@ -14,10 +14,6 @@ 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/text-color.ts
similarity index 76%
rename from src/ui/fontcolor.ts
rename to src/ui/text-color.ts
index d307bb9..1586da4 100644
--- a/src/ui/fontcolor.ts
+++ b/src/ui/text-color.ts
@@ -2,7 +2,7 @@ import * as actions from "../action.js";
 import * as app from "../my-mind.js";
 
 
-const node = document.querySelector<HTMLElement>("#fontColor")!;
+const node = document.querySelector<HTMLElement>("#text-color")!;
 
 export function init() {
 	node.addEventListener("click", onClick);
@@ -16,6 +16,6 @@ function onClick(e: MouseEvent) {
 	e.preventDefault();
 
 	let color = (e.target as HTMLElement).dataset.color || "";
-	let action = new actions.SetFontColor(app.currentItem, color);
+	let action = new actions.SetTextColor(app.currentItem, color);
 	app.action(action);
 }
diff --git a/src/ui/ui.ts b/src/ui/ui.ts
index 7543995..ac25ef5 100644
--- a/src/ui/ui.ts
+++ b/src/ui/ui.ts
@@ -2,7 +2,7 @@ import * as pubsub from "../pubsub.js";
 import * as app from "../my-mind.js";
 
 import * as color from "./color.js";
-import * as fontColor from "./fontcolor.js";
+import * as textColor from "./text-color.js";
 import * as value from "./value.js";
 import * as layout from "./layout.js";
 import * as icon from "./icon.js";
@@ -60,7 +60,7 @@ function onClick(e: MouseEvent) {
 }
 
 export function init(port: HTMLElement) {
-	[layout, shape, icon, value, status, color, fontColor,
+	[layout, shape, icon, value, status, color, textColor,
 	help, tip, notes, io].forEach(ui => ui.init());
 	menu.init(port);