Skip to content

Commit

Permalink
font->text
Browse files Browse the repository at this point in the history
  • Loading branch information
@ondras
ondras committed Oct 30, 2021
1 parent 668a2c6 commit 76c8fa9
Show file tree
Hide file tree
Showing 7 changed files with 57 additions and 75 deletions.
9 changes: 4 additions & 5 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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">
Expand Down
64 changes: 29 additions & 35 deletions my-mind.js
View file
Original file line number Diff line number Diff line change
@@ -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);
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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) => {
Expand All @@ -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);
}

Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -2738,7 +2733,7 @@ ${text}`);
value_exports,
status_exports,
color_exports,
fontcolor_exports,
text_color_exports,
help_exports,
tip_exports,
notes_exports,
Expand Down Expand Up @@ -3050,7 +3045,7 @@ ${text}`);
this._icon = "";
this._notes = "";
this._color = "";
this._fontColor = "";
this._textColor = "";
this._value = null;
this._status = null;
this._side = null;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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;
Expand All @@ -3326,7 +3322,6 @@ ${text}`);
connectors.innerHTML = "";
resolvedLayout.update(this);
resolvedShape.update(this);
resolvedShape.updateFontColor(this);
if (options.parent && parent) {
parent.update({ children: false });
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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
Expand Down
12 changes: 6 additions & 6 deletions src/action.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

Expand Down
35 changes: 14 additions & 21 deletions src/item.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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";
Expand All @@ -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
Expand Down Expand Up @@ -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; }
Expand All @@ -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) {
Expand Down Expand Up @@ -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;
}

Expand Down Expand Up @@ -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)

Expand All @@ -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
Expand Down Expand Up @@ -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; }
Expand Down Expand Up @@ -681,7 +675,6 @@ function buildToggle() {
}

const COLOR = "#999";
const COLOR_FONT = "#000";

/* RE explanation:
* _________________________________________________________________________ One of the three possible variants
Expand Down
4 changes: 0 additions & 4 deletions src/shape/shape.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions src/ui/fontcolor.ts → src/ui/text-color.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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);
}
4 changes: 2 additions & 2 deletions src/ui/ui.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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);

Expand Down

0 comments on commit 76c8fa9

Please sign in to comment.