color-elements 0.0.1 → 0.0.3

package/src/color-chart/color-chart.js

@@ -0,0 +1,441 @@
+import "../color-scale/color-scale.js";
+import "../channel-picker/channel-picker.js";
+import ColorElement from "../common/color-element.js";
+
+const Self = class ColorChart extends ColorElement {
+	static tagName = "color-chart";
+	static url = import.meta.url;
+	static shadowStyle = true;
+	static shadowTemplate = `
+		<slot name="color-channel">
+			<channel-picker id="channel_picker" part="color-channel"></channel-picker>
+		</slot>
+		<div id="chart-container">
+			<div id="chart">
+				<slot></slot>
+			</div>
+		</div>
+		<div class="axis" id="y_axis">
+			<div class="label" part="y label"></div>
+			<div class="ticks" part="y ticks"></div>
+		</div>
+		<div class="axis" id="x_axis">
+			<div class="label" part="x label"></div>
+			<div class="ticks" part="x ticks"></div>
+		</div>`;
+	static dependencies = new Set(["color-scale"]);
+	static globalStyle = new URL("color-chart-global.css", import.meta.url);
+
+	constructor () {
+		super();
+
+		this._el = {
+			slot:   this.shadowRoot.querySelector("slot:not([name])"),
+			channel_picker: this.shadowRoot.getElementById("channel_picker"),
+			chart:  this.shadowRoot.getElementById("chart"),
+			xTicks: this.shadowRoot.querySelector("#x_axis .ticks"),
+			yTicks: this.shadowRoot.querySelector("#y_axis .ticks"),
+			xLabel: this.shadowRoot.querySelector("#x_axis .label"),
+			yLabel: this.shadowRoot.querySelector("#y_axis .label"),
+		};
+
+		this._slots = {
+			color_channel: this.shadowRoot.querySelector("slot[name=color-channel]"),
+		};
+	}
+
+	connectedCallback () {
+		super.connectedCallback();
+		this._el.chart.addEventListener("colorschange", this, {capture: true});
+		this._slots.color_channel.addEventListener("input", this);
+	}
+
+	disconnectedCallback () {
+		this._el.chart.removeEventListener("colorschange", this, {capture: true});
+		this._slots.color_channel.removeEventListener("input", this);
+	}
+
+	handleEvent (evt) {
+		let source = evt.target;
+		if (source.tagName === "COLOR-SCALE" && evt.name === "computedColors") {
+			this.render(evt);
+		}
+
+		if (this._el.channel_picker === source || this._slots.color_channel.assignedElements().includes(source)) {
+			this.y = source.value;
+		}
+	}
+
+	series = new WeakMap();
+
+	render (evt) {
+		let colorScales = this.querySelectorAll("color-scale");
+
+		if (colorScales.length === 0) {
+			return;
+		}
+
+		let minX = Infinity, maxX = -Infinity;
+		let minY = Infinity, maxY = -Infinity;
+
+		for (let colorScale of colorScales) {
+			let scale = this.series.get(colorScale);
+
+			if (!scale || !evt || evt.target === colorScale || evt.target.nodeName !== "COLOR-SCALE") {
+				scale = this.renderScale(colorScale);
+			}
+
+			if (!scale) {
+				continue;
+			}
+
+			minX = Math.min(scale.x.min, minX);
+			maxX = Math.max(scale.x.max, maxX);
+			minY = Math.min(scale.y.min, minY);
+			maxY = Math.max(scale.y.max, maxY);
+		}
+
+		if (isFinite(minX) && isFinite(maxX)) {
+			let xAxis = getAxis(minX, maxX, 10);
+			this._el.chart.style.setProperty("--min-x", xAxis.min);
+			this._el.chart.style.setProperty("--max-x", xAxis.max);
+			this._el.chart.style.setProperty("--steps-x", xAxis.steps);
+			this._el.xTicks.innerHTML = Array(xAxis.steps).fill().map((_, i) => "<div part='x tick'>" + +(xAxis.min + i * xAxis.step).toPrecision(15) + "</div>").join("\n");
+		}
+
+		minY = this.yMin === "auto" || this.yMinAsNumber === undefined || Number.isNaN(this.yMinAsNumber) ? minY : this.yMinAsNumber;
+		maxY = this.yMax === "auto" || this.yMaxAsNumber === undefined || Number.isNaN(this.yMaxAsNumber) ? maxY : this.yMaxAsNumber;
+
+		if (isFinite(minY) && isFinite(maxY)) {
+			let yAxis = getAxis(minY, maxY, 10);
+
+			this._el.chart.style.setProperty("--min-y", yAxis.min);
+			this._el.chart.style.setProperty("--max-y", yAxis.max);
+			this._el.chart.style.setProperty("--steps-y", yAxis.steps);
+			this._el.yTicks.innerHTML = Array(yAxis.steps).fill().map((_, i) => "<div part='y tick'>" + +(yAxis.min + i * yAxis.step).toPrecision(15) + "</div>").reverse().join("\n");
+			this._el.yLabel.textContent = this.space.name + " " + this.yResolved.name;
+		}
+	}
+
+	renderScale (colorScale) {
+		if (!colorScale.computedColors) {
+			// Not yet initialized
+			return;
+		}
+
+		let ret = {
+			element: colorScale,
+			swatches: new WeakMap(),
+			x: {min: Infinity, max: -Infinity, values: new WeakMap() },
+			y: {min: Infinity, max: -Infinity, values: new WeakMap()},
+			colors: colorScale.computedColors?.slice() ?? [],
+		};
+
+		colorScale.style.setProperty("--color-count", ret.colors.length);
+
+		let yAll = ret.colors.map(({color}) => color.to(this.space).get(this.y));
+		let yMin = this.yMin === "auto" || this.yMinAsNumber === undefined || Number.isNaN(this.yMinAsNumber) ? -Infinity : this.yMinAsNumber;
+		let yMax = this.yMax === "auto" || this.yMaxAsNumber === undefined || Number.isNaN(this.yMaxAsNumber) ? Infinity : this.yMaxAsNumber;
+
+		if (this.yResolved.type === "angle") {
+			// First, normalize
+			yAll = normalizeAngles(yAll);
+		}
+
+		let index = 0;
+		for (let {name, color} of ret.colors) {
+			let swatch = colorScale._el.swatches.children[index];
+			ret.colors[index] = color = color.to(this.space);
+			ret.swatches.set(color, swatch);
+
+			// It's not always possible to use the last number in the color label as the X-coord;
+			// for example, the number “9” can't be interpreted as the X-coord in the “#90caf9” label.
+			// It might cause bugs with color order (see https://github.com/color-js/elements/issues/103).
+			// We expect the valid X-coord to be the only number in the color label (e.g., 50)
+			// or separated from the previous text with a space (e.g., Red 50 or Red / 50).
+			let x = name.match(/(?:^|\s)-?\d*\.?\d+$/)?.[0];
+			if (x !== undefined) {
+				// Transform `Label / X-coord` to `Label`
+				// (there should be at least one space before and after the slash so the number is treated as an X-coord)
+				let label = name.slice(0, -x.length).trim();
+				if (label.endsWith("/")) {
+					name = label.slice(0, -1).trim();
+				}
+
+				swatch.label = name;
+
+				x = Number(x);
+			}
+			else {
+				x = index;
+			}
+
+			let y = yAll[index];
+
+			ret.x.values.set(color, x);
+			ret.y.values.set(color, y);
+
+			let outOfRange = (isFinite(yMin) && y < yMin) || (isFinite(yMax) && y > yMax);
+			if (!outOfRange) {
+				// Only swatches that are in range participate in the min/max calculation
+				ret.x.min = Math.min(ret.x.min, x);
+				ret.x.max = Math.max(ret.x.max, x);
+				ret.y.min = Math.min(ret.y.min, y);
+				ret.y.max = Math.max(ret.y.max, y);
+			}
+
+			swatch.style.setProperty("--x", x);
+			swatch.style.setProperty("--y", y);
+			swatch.style.setProperty("--index", index);
+
+			if (HTMLElement.prototype.hasOwnProperty("popover") && !swatch._el.wrapper.hasAttribute("popover")) {
+				// The Popover API is supported
+				let popover = swatch._el.wrapper;
+				popover.setAttribute("popover", "");
+
+				// We need these for the popover to be correctly activated and positioned,
+				// otherwise, it won't be on the top layer
+				swatch.addEventListener("pointerenter", evt => {
+					// Position the popover relative to the parent swatch
+					// (instead of the center of the viewport by default)
+					let rect = swatch.getBoundingClientRect();
+					popover.style.setProperty("--_popover-left", rect.left + rect.width / 2 + "px");
+					popover.style.setProperty("--_popover-top", rect.top - rect.height / 2 + "px");
+
+					popover.showPopover();
+				});
+				swatch.addEventListener("pointerleave", evt => popover.hidePopover());
+			}
+
+			index++;
+		}
+
+		// Sort colors by X (ascending)
+		ret.colors.sort((a, b) => ret.x.values.get(a) - ret.x.values.get(b));
+
+		let prevColor;
+		for (let color of ret.colors) {
+			let swatch = ret.swatches.get(color);
+
+			if (prevColor !== undefined) {
+				prevColor.style.setProperty("--next-color", swatch.style.getPropertyValue("--color"));
+				prevColor.style.setProperty("--next-x", ret.x.values.get(color));
+				prevColor.style.setProperty("--next-y", ret.y.values.get(color));
+			}
+
+			prevColor = swatch;
+		}
+
+		if (prevColor !== undefined) {
+			// When we update colors, and we have fewer colors than before,
+			// we need to make sure the last swatch is not connected to the non-existent next swatch
+			["--next-color", "--next-x", "--next-y"].forEach(prop => prevColor.style.removeProperty(prop));
+		}
+
+		this.series.set(colorScale, ret);
+
+		return ret;
+	}
+
+	propChangedCallback (evt) {
+		let {name, prop, detail: change} = evt;
+
+		if (["yResolved", "yMinAsNumber", "yMaxAsNumber"].includes(name)) {
+			// Re-render swatches
+			this.render(evt);
+		}
+
+		if (name === "info") {
+			for (let colorScale of this.children) {
+				colorScale.info = this.info;
+			}
+		}
+	}
+
+	static props = {
+		y: {
+			default: "oklch.l",
+			convert (value) {
+				// Try setting the value to the channel picker. The picker will handle possible erroneous values.
+				this._el.channel_picker.value = value;
+
+				// If the value is not set, that means it's invalid.
+				// In that case, we are falling back to the picker's current value.
+				if (this._el.channel_picker.value !== value) {
+					return this._el.channel_picker.value;
+				}
+
+				return value;
+			},
+		},
+
+		yResolved: {
+			get () {
+				return Self.Color.Space.resolveCoord(this.y, "oklch");
+			},
+			// rawProp: "coord",
+		},
+
+		yMin: {
+			default: "auto",
+			changed (change) {
+				let { value } = change;
+
+				if (value === "auto") {
+					// `this.yMinAsNumber` will become `undefined` (i.e., get a new value), and the chart will be re-rendered
+					this._el.chart.style.removeProperty("--min-y");
+				}
+			},
+			reflect: {
+				from: "ymin",
+			},
+		},
+
+		yMinAsNumber: {
+			get () {
+				if (this.yMin === "coord") {
+					let range = this.yResolved.refRange ?? this.yResolved.range ?? [0, 100];
+					return range[0];
+				}
+				else if (this.yMin === "auto") {
+					let minY = this._el.chart.style.getPropertyValue("--min-y");
+
+					if (minY !== "") {
+						return Number(minY);
+					}
+
+					// Intermediate state (the chart is not rendered yet)
+					return;
+				}
+
+				return Number(this.yMin);
+			},
+			set (value) {
+				value = Number(value);
+
+				if (Number.isNaN(value)) {
+					this.yMin = "auto";
+				}
+				else {
+					this.yMin = value.toString();
+				}
+
+			},
+		},
+
+		yMax: {
+			default: "auto",
+			changed (change) {
+				let { value } = change;
+
+				if (value === "auto") {
+					// `this.yMaxAsNumber` will become `undefined` (i.e., get a new value), and the chart will be re-rendered
+					this._el.chart.style.removeProperty("--max-y");
+				}
+			},
+			reflect: {
+				from: "ymax",
+			},
+		},
+
+		yMaxAsNumber: {
+			get () {
+				if (this.yMax === "coord") {
+					let range = this.yResolved.refRange ?? this.yResolved.range ?? [0, 100];
+					return range[1];
+				}
+				else if (this.yMax === "auto") {
+					let maxY = this._el.chart.style.getPropertyValue("--max-y");
+
+					if (maxY !== "") {
+						return Number(maxY);
+					}
+
+					// Intermediate state (the chart is not rendered yet)
+					return;
+				}
+
+				return Number(this.yMax);
+
+			},
+			set (value) {
+				value = Number(value);
+
+				if (Number.isNaN(value)) {
+					this.yMax = "auto";
+				}
+				else {
+					this.yMax = value.toString();
+				}
+
+			},
+		},
+
+		space: {
+			default: "oklch",
+			get () {
+				return this.yResolved.space;
+			},
+		},
+
+		info: {},
+	};
+};
+
+Self.define();
+
+export default Self;
+
+function getAxis (min, max, initialSteps) {
+	let range = max - min;
+	let step = range / initialSteps;
+	let magnitude = Math.floor(Math.log10(step));
+	let base = Math.pow(10, magnitude);
+	let candidates = [base, base * 2, base * 5, base * 10];
+
+	for (let i = 0; i < candidates.length; i++) {
+		if (candidates[i] > step) {
+			step = candidates[i];
+			break;
+		}
+	}
+
+	let start = Math.floor(min / step) * step;
+	let end = Math.ceil(max / step) * step;
+	let steps = Math.round((end - start) / step);
+
+	let ret = {min: start, max: end, step, steps};
+	for (let prop in ret) {
+		ret[prop] = +ret[prop].toPrecision(15);
+	}
+	return ret;
+}
+
+function normalizeAngles (angles) {
+	// First, normalize
+	angles = angles.map(h => ((h % 360) + 360) % 360);
+
+	// Remove top and bottom 25% and find average
+	let averageHue = angles.toSorted((a, b) => a - b).slice(angles.length / 4, -angles.length / 4).reduce((a, b) => a + b, 0) / angles.length;
+
+	for (let i = 0; i < angles.length; i++) {
+		let h = angles[i];
+		let prevHue = angles[i - 1];
+		let delta = h - prevHue;
+
+		if (Math.abs(delta) > 180) {
+			let equivalent = [h + 360, h - 360];
+			// Offset hue to minimize difference in the direction that brings it closer to the average
+			let delta = h - averageHue;
+
+			if (Math.abs(equivalent[0] - prevHue) <= Math.abs(equivalent[1] - prevHue)) {
+				angles[i] = equivalent[0];
+			}
+			else {
+				angles[i] = equivalent[1];
+			}
+		}
+	}
+
+	return angles;
+}

package/src/color-inline/README.md

@@ -0,0 +1,72 @@
+---
+layout: component
+css: "style.css"
+---
+
+# `<color-inline>`
+
+Basic use:
+
+<html-demo adjust="font-size">
+
+```html
+<color-inline>lch(50% 40 30)</color-inline>
+```
+</html-demo>
+
+You can use `value` to set the color swatch while displaying something else as the content (or even nothing at all):
+
+```html
+<color-inline value="lch(50% 40 30)"></color-inline>
+```
+
+Editable:
+```html
+<color-inline contentEditable>lch(50% 40 30)</color-inline>
+```
+
+Semi-transparent color:
+```html
+<color-inline>hsl(340 90% 50% / .25)</color-inline>
+```
+
+Invalid color:
+
+```html
+<color-inline>foobar</color-inline>
+```
+
+## Reference
+
+### Slots
+
+| Name | Description |
+|------|-------------|
+| _(default)_ | The element's main content—the color to be shown. Placed next to the color swatch. |
+
+### Attributes & Properties
+
+| Attribute | Property | Property type | Default value | Description |
+|-----------|----------|---------------|---------------|-------------|
+| `color` | `color` | `Color` &#124; `null` | - | The current color value. `null` for invalid colors. |
+| `value` | `value` | `string` | - | The textual form of the color. Will have a value even if the color is invalid. |
+
+
+### CSS variables
+
+| Variable | Type | Description |
+|----------|---------------|-------------|
+| `--transparency-grid` | `<image>` | Gradient used as a background for transparent parts of the swatch. |
+| `--transparency-cell-size` | `<length>` | The size of the tiles in the transparency grid. This will not be used if you are overriding `--transparency-grid`. |
+| `--transparcency-background` | `<color>` | The background color of the transparency gradient. |
+| `--transparency-darkness` | `<percentage>` | The opacity of the black color used for dark parts of the transparency gradient. |
+| `--border-width` | `<length>` | The width of the border around the swatch. |
+| `--box-shadow-blur` | `<length>` | The blur radius of the box shadow around the swatch. |
+| `--box-shadow-color` | `<color>` | The color of the box shadow around the swatch. |
+
+### Parts
+
+| Name | Description |
+|------|-------------|
+| `swatch-wrapper` | The component’s base wrapper. |
+| `swatch` | An internal element used to provide a visual preview of the current color. |

package/{color-swatch/color-swatch.css → src/color-inline/color-inline.css}

@@ -6,9 +6,16 @@
 }
 
 #swatch {
+	--_transparency-cell-size: var(--transparency-cell-size, clamp(6px, .5em, 30px));
+	--_transparency-background: var(--transparency-background, transparent);
+	--_transparency-darkness: var(--transparency-darkness, 5%);
+	--_transparency-grid: var(--transparency-grid,
+		repeating-conic-gradient(transparent 0 25%, rgb(0 0 0 / var(--_transparency-darkness)) 0 50%)
+		0 0 / calc(2 * var(--_transparency-cell-size)) calc(2 * var(--_transparency-cell-size))
+		content-box border-box var(--_transparency-background)
+	);
+
 	--color-image: linear-gradient(var(--color), var(--color));
-	--transparency-tile-size: clamp(6px, .5em, 30px);
-	--transparency-grid: repeating-conic-gradient(hsl(0 0% 85%) 0 25%, hsl(0 0% 98%) 0 50%) 0 0 / var(--transparency-tile-size) var(--transparency-tile-size);
 	--border-width: clamp(2px, .15em, 16px);
 	--box-shadow-blur: clamp(2px, .1em, 5px);
 	--box-shadow-color: rgb(0 0 0 / .3);
@@ -19,7 +26,7 @@
 	height: 1.2em;
 	border: var(--border-width) solid white;
 	box-sizing: border-box;
-	background: var(--color-image, 0), var(--transparency-grid, canvas);
+	background: var(--color-image, 0), var(--_transparency-grid, canvas);
 	box-shadow: calc(var(--box-shadow-blur) * .2) calc(var(--box-shadow-blur) * .2) var(--box-shadow-blur) var(--box-shadow-color);
 	border-radius: clamp(1px, .1em, 10px);
 }
@@ -31,7 +38,7 @@
 
 #swatch.invalid {
 	--color-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">⚠️</text></svg>');
-	--transparency-grid: initial;
+	--_transparency-grid: initial;
 }
 
 @media (prefers-color-scheme: dark) {

package/src/color-inline/color-inline.js

@@ -0,0 +1,85 @@
+import ColorElement from "../common/color-element.js";
+
+const Self = class ColorInline extends ColorElement {
+	static tagName = "color-inline";
+	static url = import.meta.url;
+	static shadowStyle = true;
+	static shadowTemplate = `
+		<div part="swatch-wrapper">
+			<div id="swatch" part="swatch"></div>
+			<slot></slot>
+		</div>`;
+
+	constructor () {
+		super();
+
+		this._el = {};
+		this._el.swatch = this.shadowRoot.querySelector("#swatch");
+	}
+
+	connectedCallback () {
+		super.connectedCallback?.();
+		Self.#mo.observe(this, {childList: true, subtree: true, characterData: true});
+	}
+
+	propChangedCallback ({name, prop, detail: change}) {
+		if (name === "color") {
+			let isValid = this.color !== null;
+			this._el.swatch.classList.toggle("invalid", !isValid);
+
+			let colorString = this.color?.display();
+			this._el.swatch.style.setProperty("--color", colorString);
+		}
+	}
+
+	static #mo = new MutationObserver(mutations => {
+		for (let mutation of mutations) {
+			let target = mutation.target;
+
+			while (target && !(target instanceof ColorInline)) {
+				target = target.parentNode;
+			}
+
+			if (target) {
+				target.value = target.textContent.trim();
+			}
+		}
+	});
+
+	static props = {
+		value: {
+			type: String,
+			default () {
+				return this.textContent.trim();
+			},
+		},
+		color: {
+			get type () {
+				return Self.Color;
+			},
+			defaultProp: "value",
+			parse (value) {
+				if (!value) {
+					return null;
+				}
+
+				return Self.Color.get(value);
+			},
+			reflect: false,
+		},
+	};
+
+	static events = {
+		colorchange: {
+			propchange: "color",
+		},
+		valuechange: {
+			propchange: "value",
+		},
+	};
+};
+
+
+Self.define();
+
+export default Self;

package/src/color-inline/style.css

@@ -0,0 +1,14 @@
+html {
+	color-scheme: light dark;
+}
+
+@media (prefers-color-scheme: dark) {
+	html {
+		background: hsl(220 5% 20%);
+	}
+}
+
+color-inline {
+	display: block;
+	margin: 1em 0;
+}