diff --git a/index.html b/index.html index 2fd0f53..a33b4b8 100644 --- a/index.html +++ b/index.html @@ -65,8 +65,8 @@
- Font color - + Item color + @@ -79,8 +79,8 @@ My Mind
- Color - + Text color + @@ -92,7 +92,6 @@ My Mind
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("#fontColor")!; +const node = document.querySelector("#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);