uicore-ts
Version:
UICore is a library to build native-like user interfaces using pure Typescript. No HTML is needed at all. Components are described as TS classes and all user interactions are handled explicitly. This library is strongly inspired by the UIKit framework tha
390 lines (389 loc) • 12.2 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var UIColor_exports = {};
__export(UIColor_exports, {
UIColor: () => UIColor
});
module.exports = __toCommonJS(UIColor_exports);
var import_UIObject = require("./UIObject");
const _UIColor = class extends import_UIObject.UIObject {
constructor(stringValue, semanticKey) {
super();
this.stringValue = stringValue;
this.semanticKey = semanticKey;
if (semanticKey) {
this._semanticClass = this.constructor;
}
}
toString() {
return this.stringValue;
}
apply() {
var _a;
if (!this.semanticKey) {
return;
}
const colorClass = (_a = this._semanticClass) != null ? _a : this.constructor;
const newColor = colorClass[this.semanticKey];
if (!newColor) {
return;
}
this.stringValue = newColor.stringValue;
const element = this._elementRef;
if (!element || !this._styleProperty) {
return;
}
element.style[this._styleProperty] = this.stringValue;
}
withSemanticKey(semanticKey, semanticClass) {
this.semanticKey = semanticKey;
this._semanticClass = semanticClass;
return this;
}
static applySemanticColors() {
var _a;
const affectedKeys = /* @__PURE__ */ new Set();
const live = [];
for (const ref of _UIColor._liveColors) {
const color = ref.deref();
if (!color) {
continue;
}
live.push(ref);
if (color.semanticKey) {
affectedKeys.add(color.semanticKey);
}
color.apply();
}
_UIColor._liveColors = live;
for (const key of affectedKeys) {
(_a = _UIColor._cssSubscriptions.get(key)) == null ? void 0 : _a.forEach((callback) => callback());
}
}
static updateSemanticColor(semanticKey, value) {
this["_" + semanticKey] = value;
_UIColor.applySemanticColors();
}
static subscribe(semanticKey, callback) {
if (!_UIColor._cssSubscriptions.has(semanticKey)) {
_UIColor._cssSubscriptions.set(semanticKey, /* @__PURE__ */ new Set());
}
_UIColor._cssSubscriptions.get(semanticKey).add(callback);
}
static unsubscribe(semanticKey, callback) {
var _a;
(_a = _UIColor._cssSubscriptions.get(semanticKey)) == null ? void 0 : _a.delete(callback);
}
static get redColor() {
return new _UIColor("red");
}
static get blueColor() {
return new _UIColor("blue");
}
static get greenColor() {
return new _UIColor("green");
}
static get yellowColor() {
return new _UIColor("yellow");
}
static get blackColor() {
return new _UIColor("black");
}
static get brownColor() {
return new _UIColor("brown");
}
static get whiteColor() {
return new _UIColor("white");
}
static get greyColor() {
return new _UIColor("grey");
}
static get lightGreyColor() {
return new _UIColor("lightgrey");
}
static get transparentColor() {
return new _UIColor("transparent");
}
static get clearColor() {
return new _UIColor("transparent");
}
static get undefinedColor() {
return new _UIColor("");
}
static get nilColor() {
return new _UIColor("");
}
static nameToHex(name) {
return {
"aliceblue": "#f0f8ff",
"antiquewhite": "#faebd7",
"aqua": "#00ffff",
"aquamarine": "#7fffd4",
"azure": "#f0ffff",
"beige": "#f5f5dc",
"bisque": "#ffe4c4",
"black": "#000000",
"blanchedalmond": "#ffebcd",
"blue": "#0000ff",
"blueviolet": "#8a2be2",
"brown": "#a52a2a",
"burlywood": "#deb887",
"cadetblue": "#5f9ea0",
"chartreuse": "#7fff00",
"chocolate": "#d2691e",
"coral": "#ff7f50",
"cornflowerblue": "#6495ed",
"cornsilk": "#fff8dc",
"crimson": "#dc143c",
"cyan": "#00ffff",
"darkblue": "#00008b",
"darkcyan": "#008b8b",
"darkgoldenrod": "#b8860b",
"darkgray": "#a9a9a9",
"darkgreen": "#006400",
"darkkhaki": "#bdb76b",
"darkmagenta": "#8b008b",
"darkolivegreen": "#556b2f",
"darkorange": "#ff8c00",
"darkorchid": "#9932cc",
"darkred": "#8b0000",
"darksalmon": "#e9967a",
"darkseagreen": "#8fbc8f",
"darkslateblue": "#483d8b",
"darkslategray": "#2f4f4f",
"darkturquoise": "#00ced1",
"darkviolet": "#9400d3",
"deeppink": "#ff1493",
"deepskyblue": "#00bfff",
"dimgray": "#696969",
"dodgerblue": "#1e90ff",
"firebrick": "#b22222",
"floralwhite": "#fffaf0",
"forestgreen": "#228b22",
"fuchsia": "#ff00ff",
"gainsboro": "#dcdcdc",
"ghostwhite": "#f8f8ff",
"gold": "#ffd700",
"goldenrod": "#daa520",
"gray": "#808080",
"green": "#008000",
"greenyellow": "#adff2f",
"honeydew": "#f0fff0",
"hotpink": "#ff69b4",
"indianred ": "#cd5c5c",
"indigo": "#4b0082",
"ivory": "#fffff0",
"khaki": "#f0e68c",
"lavender": "#e6e6fa",
"lavenderblush": "#fff0f5",
"lawngreen": "#7cfc00",
"lemonchiffon": "#fffacd",
"lightblue": "#add8e6",
"lightcoral": "#f08080",
"lightcyan": "#e0ffff",
"lightgoldenrodyellow": "#fafad2",
"lightgrey": "#d3d3d3",
"lightgreen": "#90ee90",
"lightpink": "#ffb6c1",
"lightsalmon": "#ffa07a",
"lightseagreen": "#20b2aa",
"lightskyblue": "#87cefa",
"lightslategray": "#778899",
"lightsteelblue": "#b0c4de",
"lightyellow": "#ffffe0",
"lime": "#00ff00",
"limegreen": "#32cd32",
"linen": "#faf0e6",
"magenta": "#ff00ff",
"maroon": "#800000",
"mediumaquamarine": "#66cdaa",
"mediumblue": "#0000cd",
"mediumorchid": "#ba55d3",
"mediumpurple": "#9370d8",
"mediumseagreen": "#3cb371",
"mediumslateblue": "#7b68ee",
"mediumspringgreen": "#00fa9a",
"mediumturquoise": "#48d1cc",
"mediumvioletred": "#c71585",
"midnightblue": "#191970",
"mintcream": "#f5fffa",
"mistyrose": "#ffe4e1",
"moccasin": "#ffe4b5",
"navajowhite": "#ffdead",
"navy": "#000080",
"oldlace": "#fdf5e6",
"olive": "#808000",
"olivedrab": "#6b8e23",
"orange": "#ffa500",
"orangered": "#ff4500",
"orchid": "#da70d6",
"palegoldenrod": "#eee8aa",
"palegreen": "#98fb98",
"paleturquoise": "#afeeee",
"palevioletred": "#d87093",
"papayawhip": "#ffefd5",
"peachpuff": "#ffdab9",
"peru": "#cd853f",
"pink": "#ffc0cb",
"plum": "#dda0dd",
"powderblue": "#b0e0e6",
"purple": "#800080",
"red": "#ff0000",
"rosybrown": "#bc8f8f",
"royalblue": "#4169e1",
"saddlebrown": "#8b4513",
"salmon": "#fa8072",
"sandybrown": "#f4a460",
"seagreen": "#2e8b57",
"seashell": "#fff5ee",
"sienna": "#a0522d",
"silver": "#c0c0c0",
"skyblue": "#87ceeb",
"slateblue": "#6a5acd",
"slategray": "#708090",
"snow": "#fffafa",
"springgreen": "#00ff7f",
"steelblue": "#4682b4",
"tan": "#d2b48c",
"teal": "#008080",
"thistle": "#d8bfd8",
"tomato": "#ff6347",
"turquoise": "#40e0d0",
"violet": "#ee82ee",
"wheat": "#f5deb3",
"white": "#ffffff",
"whitesmoke": "#f5f5f5",
"yellow": "#ffff00",
"yellowgreen": "#9acd32"
}[name.toLowerCase()];
}
static hexToDescriptor(c) {
if (c[0] === "#") {
c = c.substr(1);
}
const r = parseInt(c.slice(0, 2), 16);
const g = parseInt(c.slice(2, 4), 16);
const b = parseInt(c.slice(4, 6), 16);
const a = parseInt(c.slice(6, 8), 16);
const result = { "red": r, "green": g, "blue": b, "alpha": a };
return result;
}
static rgbToDescriptor(colorString) {
if (colorString.startsWith("rgba(")) {
colorString = colorString.slice(5, colorString.length - 1);
}
if (colorString.startsWith("rgb(")) {
colorString = colorString.slice(4, colorString.length - 1) + ", 0";
}
const components = colorString.split(",");
const result = {
"red": Number(components[0]),
"green": Number(components[1]),
"blue": Number(components[2]),
"alpha": Number(components[3])
};
return result;
}
get colorDescriptor() {
var descriptor;
const colorHEXFromName = _UIColor.nameToHex(this.stringValue);
if (this.stringValue.startsWith("rgb")) {
descriptor = _UIColor.rgbToDescriptor(this.stringValue);
} else if (colorHEXFromName) {
descriptor = _UIColor.hexToDescriptor(colorHEXFromName);
} else {
descriptor = _UIColor.hexToDescriptor(this.stringValue);
}
return descriptor;
}
colorWithRed(red) {
const descriptor = this.colorDescriptor;
return new _UIColor(
"rgba(" + red + "," + descriptor.green + "," + descriptor.blue + "," + descriptor.alpha + ")"
);
}
colorWithGreen(green) {
const descriptor = this.colorDescriptor;
return new _UIColor(
"rgba(" + descriptor.red + "," + green + "," + descriptor.blue + "," + descriptor.alpha + ")"
);
}
colorWithBlue(blue) {
const descriptor = this.colorDescriptor;
return new _UIColor(
"rgba(" + descriptor.red + "," + descriptor.green + "," + blue + "," + descriptor.alpha + ")"
);
}
colorWithAlpha(alpha) {
const descriptor = this.colorDescriptor;
return new _UIColor(
"rgba(" + descriptor.red + "," + descriptor.green + "," + descriptor.blue + "," + alpha + ")"
);
}
static colorWithRGBA(red, green, blue, alpha = 1) {
const result = new _UIColor("rgba(" + red + "," + green + "," + blue + "," + alpha + ")");
return result;
}
static colorWithDescriptor(descriptor) {
const red = Math.min(255, Math.max(0, descriptor.red)).toFixed(0);
const green = Math.min(255, Math.max(0, descriptor.green)).toFixed(0);
const blue = Math.min(255, Math.max(0, descriptor.blue)).toFixed(0);
const alpha = this.defaultAlphaToOne(descriptor.alpha);
return new _UIColor("rgba(" + red + "," + green + "," + blue + "," + alpha + ")");
}
static defaultAlphaToOne(value = 1) {
if (value != value) {
value = 1;
}
return value;
}
colorByMultiplyingRGB(multiplier) {
const descriptor = this.colorDescriptor;
descriptor.red = descriptor.red * multiplier;
descriptor.green = descriptor.green * multiplier;
descriptor.blue = descriptor.blue * multiplier;
return _UIColor.colorWithDescriptor(descriptor);
}
get perceivedLightness() {
const descriptor = this.colorDescriptor;
const linearise = (channel) => {
const normalised = channel / 255;
if (normalised <= 0.04045) {
return normalised / 12.92;
}
return Math.pow((normalised + 0.055) / 1.055, 2.4);
};
const luminance = 0.2126 * linearise(descriptor.red) + 0.7152 * linearise(descriptor.green) + 0.0722 * linearise(descriptor.blue);
const epsilon = Math.pow(6 / 29, 3);
const f = luminance > epsilon ? Math.pow(luminance, 1 / 3) : Math.pow(29 / 6, 2) / 3 * luminance + 4 / 29;
return (116 * f - 16) / 100;
}
get isLight() {
return this.perceivedLightness >= 0.5;
}
};
let UIColor = _UIColor;
UIColor._liveColors = [];
UIColor._registrationMap = /* @__PURE__ */ new Map();
UIColor._cssSubscriptions = /* @__PURE__ */ new Map();
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
UIColor
});
//# sourceMappingURL=UIColor.js.map