Ma/ueblueprint
1
0
Fork 0
mirror of https://github.com/barsdeveloper/ueblueprint.git synced 2026-02-14 17:14:41 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Various color picker fixes

Browse Source
This commit is contained in:
barsdeveloper
2022-11-07 21:44:46 +01:00
parent b86d952e3a
commit c8c365313d
17 changed files with 638 additions and 343 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
dist/css/ueb-style.css vendored
View File

@@ -664,6 +664,25 @@ ueb-pin[data-type=vector] {
--ueb-pin-color-rgb: var(--ueb-pin-color-vector);
}
.ueb-button {
min-width: 60px;
border: 1px solid #0f0f0f;
padding: 2px 10px;
background: #383838;
text-align: center;
cursor: pointer;
}
.ueb-button:hover {
background: #575757;
}
.ueb-buttons {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 20px;
}
.ueb-vertical-slider > ueb-ui-slider {
position: relative;
padding-bottom: 10px;
@@ -685,17 +704,26 @@ ueb-pin[data-type=vector] {
border-right-color: #e0e0e0;
}
.ueb-horizontal-slider {
.ueb-horizontal-slider,
.ueb-text-input {
position: relative;
border: 1px solid #383838;
border-radius: 6px;
padding: 1px;
background: #0f0f0f;
}
.ueb-horizontal-slider {
position: relative;
padding: 1px;
}
.ueb-horizontal-slider:hover {
cursor: ew-resize;
}
ueb-window .ueb-pin-input-content {
padding: 1px 10px;
}
.ueb-horizontal-slider > ueb-ui-slider {
display: block;
position: relative;
@@ -858,6 +886,7 @@ ueb-ui-slider {
flex-direction: column;
justify-content: space-between;
flex-grow: 1;
width: 50%;
}
.ueb-color-picker-advanced .ueb-color-picker-column > div {
@@ -905,4 +934,19 @@ ueb-ui-slider {
height: 6px;
}
.ueb-color-control {
align-self: flex-end;
}
.ueb-color-control-label {
margin-right: 5px;
color: #c0c0c0;
}
.ueb-color-control .ueb-pin-input-content {
line-height: 20px;
font-family: monospace;
color: #c0c0c0;
}
/*# sourceMappingURL=ueb-style.css.map */

2
dist/css/ueb-style.css.map vendored
View File

@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../../scss/style.scss","../../scss/ueb-link.scss","../../scss/ueb-node.scss","../../scss/ueb-pin.scss","../../scss/ueb-type-color.scss","../../scss/ueb-ui-controls.scss","../../scss/ueb-window.scss"],"names":[],"mappings":"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","file":"ueb-style.css"}
{"version":3,"sourceRoot":"","sources":["../../scss/style.scss","../../scss/ueb-link.scss","../../scss/ueb-node.scss","../../scss/ueb-pin.scss","../../scss/ueb-type-color.scss","../../scss/ueb-ui-controls.scss","../../scss/ueb-window.scss"],"names":[],"mappings":"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","file":"ueb-style.css"}

2
dist/css/ueb-style.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/ueb-style.min.css.map vendored
View File

@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../../scss/style.scss","../../scss/ueb-link.scss","../../scss/ueb-node.scss","../../scss/ueb-pin.scss","../../scss/ueb-type-color.scss","../../scss/ueb-ui-controls.scss","../../scss/ueb-window.scss"],"names":[],"mappings":"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","file":"ueb-style.min.css"}
{"version":3,"sourceRoot":"","sources":["../../scss/style.scss","../../scss/ueb-link.scss","../../scss/ueb-node.scss","../../scss/ueb-pin.scss","../../scss/ueb-type-color.scss","../../scss/ueb-ui-controls.scss","../../scss/ueb-window.scss"],"names":[],"mappings":"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","file":"ueb-style.min.css"}

695
dist/ueblueprint.js vendored
View File

@@ -738,6 +738,13 @@ class Utility {
.replaceAll("\\n", "\n")
}
/** @param {String} value */
static clearHTMLWhitespace(value) {
return value
.replaceAll(" ", "\u00A0")
.replaceAll("<br>", "\n")
}
/** @param {String} value */
static formatStringName(value) {
return value
@@ -1066,6 +1073,30 @@ class LinearColorEntity extends IEntity {
V: new TypeInitialization(RealUnitEntity, true, undefined, false, true),
}
static linearToSRGB(x) {
if (x <= 0) {
return 0
} else if (x >= 1) {
return 1
} else if (x < 0.0031308) {
return x * 12.92
} else {
return Math.pow(x, 1 / 2.4) * 1.055 - 0.055
}
}
static sRGBtoLinear(x) {
if (x <= 0) {
return 0
} else if (x >= 1) {
return 1
} else if (x < 0.04045) {
return x / 12.92
} else {
return Math.pow((x + 0.055) / 1.055, 2.4)
}
}
constructor(options = {}) {
super(options);
/** @type {RealUnitEntity} */ this.R;
@@ -1160,8 +1191,27 @@ class LinearColorEntity extends IEntity {
]
}
toSRGBA() {
return [
Math.round(LinearColorEntity.linearToSRGB(this.R.value) * 255),
Math.round(LinearColorEntity.linearToSRGB(this.G.value) * 255),
Math.round(LinearColorEntity.linearToSRGB(this.B.value) * 255),
Math.round(this.A.value * 255),
]
}
toRGBAString() {
return this.toRGBA().map(v => v.toString(16).padStart(2, "0")).join("")
return this
.toRGBA()
.map(v => v.toString(16).toUpperCase().padStart(2, "0"))
.join("")
}
toSRGBAString() {
return this
.toSRGBA()
.map(v => v.toString(16).toUpperCase().padStart(2, "0"))
.join("")
}
toHSVA() {
@@ -1181,10 +1231,25 @@ class LinearColorEntity extends IEntity {
return (this.R.value << 24) + (this.G.value << 16) + (this.B.value << 8) + this.A.value
}
setFromRGBANumber(number) {
this.A.value = (number & 0xFF) / 0xff;
this.B.value = ((number >> 8) & 0xFF) / 0xff;
this.G.value = ((number >> 16) & 0xFF) / 0xff;
this.R.value = ((number >> 24) & 0xFF) / 0xff;
this.#updateHSV();
}
setFromSRGBANumber(number) {
this.A.value = (number & 0xFF) / 0xff;
this.B.value = LinearColorEntity.sRGBtoLinear(((number >> 8) & 0xFF) / 0xff);
this.G.value = LinearColorEntity.sRGBtoLinear(((number >> 16) & 0xFF) / 0xff);
this.R.value = LinearColorEntity.sRGBtoLinear(((number >> 24) & 0xFF) / 0xff);
this.#updateHSV();
}
toString() {
return Utility.printLinearColor(this)
}
}
class LocalizedTextEntity extends IEntity {
@@ -3007,6 +3072,161 @@ class ISelectableDraggableElement extends IDraggableElement {
}
}
/**
* @typedef {import("../../Blueprint").default} Blueprint
* @typedef {import("../../element/IDraggableElement").default} IDraggableElement
*/
/**
* @template {IDraggableElement} T
* @extends {IMouseClickDrag<T>}
*/
class MouseMoveDraggable extends IMouseClickDrag {
clicked(location) {
if (this.options.repositionOnClick) {
this.target.setLocation(this.stepSize > 1
? Utility.snapToGrid(location, this.stepSize)
: location
);
this.clickedOffset = [0, 0];
}
}
dragTo(location, offset) {
const targetLocation = [this.target.locationX, this.target.locationY];
const [adjustedLocation, adjustedTargetLocation] = this.stepSize > 1
? [Utility.snapToGrid(location, this.stepSize), Utility.snapToGrid(targetLocation, this.stepSize)]
: [location, targetLocation];
offset = [
adjustedLocation[0] - this.mouseLocation[0],
adjustedLocation[1] - this.mouseLocation[1]
];
if (offset[0] == 0 && offset[1] == 0) {
return
}
// Make sure it snaps on the grid
offset[0] += adjustedTargetLocation[0] - this.target.locationX;
offset[1] += adjustedTargetLocation[1] - this.target.locationY;
this.dragAction(adjustedLocation, offset);
// Reassign the position of mouse
this.mouseLocation = adjustedLocation;
}
dragAction(location, offset) {
this.target.setLocation([
location[0] - this.clickedOffset[0],
location[1] - this.clickedOffset[1]
]);
}
}
/**
* @typedef {import("../entity/IEntity").default} IEntity
* @typedef {import("../element/IDraggableElement").default} IDraggableElement
*/
/**
* @template {IDraggableElement} T
* @extends {ITemplate<T>}
*/
class IDraggableTemplate extends ITemplate {
getDraggableElement() {
return this.element
}
createDraggableObject() {
return new MouseMoveDraggable(this.element, this.element.blueprint, {
draggableElement: this.getDraggableElement(),
})
}
createInputObjects() {
return [
...super.createInputObjects(),
this.createDraggableObject(),
]
}
}
/** @typedef {import("../element/IDraggableElement").default} IDraggableElement */
/**
* @template {IDraggableElement} T
* @extends {IDraggableTemplate<T>}
*/
class IDraggablePositionedTemplate extends IDraggableTemplate {
/** @param {Map} changedProperties */
update(changedProperties) {
super.update(changedProperties);
if (changedProperties.has("locationX")) {
this.element.style.left = `${this.element.locationX}px`;
}
if (changedProperties.has("locationY")) {
this.element.style.top = `${this.element.locationY}px`;
}
}
}
/**
* @typedef {import("../../Blueprint").default} Blueprint
* @typedef {import("../../element/ISelectableDraggableElement").default} ISelectableDraggableElement
*/
/** @extends {MouseMoveDraggable<ISelectableDraggableElement>} */
class MouseMoveNodes extends MouseMoveDraggable {
startDrag() {
if (!this.target.selected) {
this.blueprint.unselectAll();
this.target.setSelected(true);
}
}
dragAction(location, offset) {
this.target.dispatchDragEvent(offset);
}
unclicked() {
if (!this.started) {
this.blueprint.unselectAll();
this.target.setSelected(true);
}
}
}
/**
* @typedef {import("../element/ISelectableDraggableElement").default} ISelectableDraggableElement
* @typedef {import("../input/mouse/MouseMoveDraggable").default} MouseMoveDraggable
*/
/**
* @template {ISelectableDraggableElement} T
* @extends {IDraggablePositionedTemplate<T>}
*/
class ISelectableDraggableTemplate extends IDraggablePositionedTemplate {
getDraggableElement() {
return this.element
}
createDraggableObject() {
return /** @type {MouseMoveDraggable} */ (new MouseMoveNodes(this.element, this.element.blueprint, {
draggableElement: this.getDraggableElement(),
}))
}
/** @param {Map} changedProperties */
firstUpdated(changedProperties) {
super.firstUpdated(changedProperties);
if (this.element.selected && !this.element.listeningDrag) {
this.element.setSelected(true);
}
}
}
/**
* @typedef {import("../../element/IDraggableElement").default} IDraggableElement
*/
@@ -3722,84 +3942,6 @@ const t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e
* SPDX-License-Identifier: BSD-3-Clause
*/const i=e(class extends i$1{constructor(t$1){var e;if(super(t$1),t$1.type!==t.ATTRIBUTE||"style"!==t$1.name||(null===(e=t$1.strings)||void 0===e?void 0:e.length)>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(t){return Object.keys(t).reduce(((e,r)=>{const s=t[r];return null==s?e:e+`${r=r.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${s};`}),"")}update(e,[r]){const{style:s}=e.element;if(void 0===this.vt){this.vt=new Set;for(const t in r)this.vt.add(t);return this.render(r)}this.vt.forEach((t=>{null==r[t]&&(this.vt.delete(t),t.includes("-")?s.removeProperty(t):s[t]="");}));for(const t in r){const e=r[t];null!=e&&(this.vt.add(t),t.includes("-")?s.setProperty(t,e):s[t]=e);}return b}});
/**
* @typedef {import("../../Blueprint").default} Blueprint
* @typedef {import("../../element/IDraggableElement").default} IDraggableElement
*/
/**
* @template {IDraggableElement} T
* @extends {IMouseClickDrag<T>}
*/
class MouseMoveDraggable extends IMouseClickDrag {
clicked(location) {
if (this.options.repositionOnClick) {
this.target.setLocation(this.stepSize > 1
? Utility.snapToGrid(location, this.stepSize)
: location
);
this.clickedOffset = [0, 0];
}
}
dragTo(location, offset) {
const targetLocation = [this.target.locationX, this.target.locationY];
const [adjustedLocation, adjustedTargetLocation] = this.stepSize > 1
? [Utility.snapToGrid(location, this.stepSize), Utility.snapToGrid(targetLocation, this.stepSize)]
: [location, targetLocation];
offset = [
adjustedLocation[0] - this.mouseLocation[0],
adjustedLocation[1] - this.mouseLocation[1]
];
if (offset[0] == 0 && offset[1] == 0) {
return
}
// Make sure it snaps on the grid
offset[0] += adjustedTargetLocation[0] - this.target.locationX;
offset[1] += adjustedTargetLocation[1] - this.target.locationY;
this.dragAction(adjustedLocation, offset);
// Reassign the position of mouse
this.mouseLocation = adjustedLocation;
}
dragAction(location, offset) {
this.target.setLocation([
location[0] - this.clickedOffset[0],
location[1] - this.clickedOffset[1]
]);
}
}
/**
* @typedef {import("../entity/IEntity").default} IEntity
* @typedef {import("../element/IDraggableElement").default} IDraggableElement
*/
/**
* @template {IDraggableElement} T
* @extends {ITemplate<T>}
*/
class IDraggableTemplate extends ITemplate {
getDraggableElement() {
return this.element
}
createDraggableObject() {
return new MouseMoveDraggable(this.element, this.element.blueprint, {
draggableElement: this.getDraggableElement(),
})
}
createInputObjects() {
return [
...super.createInputObjects(),
this.createDraggableObject(),
]
}
}
/**
* @typedef {import("../element/IDraggableElement").default} IDraggableElement
*/
@@ -3923,12 +4065,6 @@ customElements.define("ueb-color-handler", ColorHandlerElement);
/** @extends {IDraggableControlTemplate<ColorHandlerElement>} */
class ColorSliderTemplate extends IDraggableControlTemplate {
createInputObjects() {
return [
...super.createInputObjects(),
]
}
/** @param {[Number, Number]} param0 */
adjustLocation([x, y]) {
x = Utility.clamp(x, 0, this.movementSpaceSize[0]);
@@ -3950,132 +4086,6 @@ class ColorSliderElement extends IDraggableControlElement {
customElements.define("ueb-ui-slider", ColorSliderElement);
/** @typedef {import("../element/IDraggableElement").default} IDraggableElement */
/**
* @template {IDraggableElement} T
* @extends {IDraggableTemplate<T>}
*/
class IDraggablePositionedTemplate extends IDraggableTemplate {
/** @param {Map} changedProperties */
update(changedProperties) {
super.update(changedProperties);
if (changedProperties.has("locationX")) {
this.element.style.left = `${this.element.locationX}px`;
}
if (changedProperties.has("locationY")) {
this.element.style.top = `${this.element.locationY}px`;
}
}
}
/** @typedef {import("../../Blueprint").default} Blueprint */
/**
* @template {HTMLElement} T
* @extends {IPointing<T>}
*/
class IMouseClick extends IPointing {
/** @type {(e: MouseEvent) => void} */
#mouseDownHandler
/** @type {(e: MouseEvent) => void} */
#mouseUpHandler
constructor(target, blueprint, options = {}) {
options.clickButton ??= 0;
options.consumeEvent ??= true;
options.exitAnyButton ??= true;
options.strictTarget ??= false;
super(target, blueprint, options);
this.clickedPosition = [0, 0];
let self = this;
this.#mouseDownHandler = e => {
self.blueprint.setFocused(true);
switch (e.button) {
case self.options.clickButton:
// Either doesn't matter or consider the click only when clicking on the target, not descandants
if (!self.options.strictTarget || e.target == e.currentTarget) {
if (self.options.consumeEvent) {
e.stopImmediatePropagation(); // Captured, don't call anyone else
}
// Attach the listeners
document.addEventListener("mouseup", self.#mouseUpHandler);
self.clickedPosition = self.locationFromEvent(e);
self.clicked(self.clickedPosition);
}
break
default:
if (!self.options.exitAnyButton) {
self.#mouseUpHandler(e);
}
break
}
};
this.#mouseUpHandler = e => {
if (!self.options.exitAnyButton || e.button == self.options.clickButton) {
if (self.options.consumeEvent) {
e.stopImmediatePropagation(); // Captured, don't call anyone else
}
// Remove the handlers of "mousemove" and "mouseup"
document.removeEventListener("mouseup", self.#mouseUpHandler);
self.unclicked();
}
};
this.listenEvents();
}
listenEvents() {
this.target.addEventListener("mousedown", this.#mouseDownHandler);
if (this.options.clickButton == 2) {
this.target.addEventListener("contextmenu", e => e.preventDefault());
}
}
unlistenEvents() {
this.target.removeEventListener("mousedown", this.#mouseDownHandler);
}
/* Subclasses will override the following methods */
clicked(location) {
}
unclicked(location) {
}
}
class MouseClickAction extends IMouseClick {
static #ignoreEvent =
/** @param {MouseClickAction} self */
self => { }
constructor(
target,
blueprint,
options,
onMouseDown = MouseClickAction.#ignoreEvent,
onMouseUp = MouseClickAction.#ignoreEvent
) {
super(target, blueprint, options);
this.onMouseDown = onMouseDown;
this.onMouseUp = onMouseUp;
}
clicked() {
this.onMouseDown(this);
}
unclicked() {
this.onMouseUp(this);
}
}
/** @typedef {import("../element/WindowElement").default} WindowElement */
/** @extends {IDraggablePositionedTemplate<WindowElement>} */
@@ -4096,22 +4106,12 @@ class WindowTemplate extends IDraggablePositionedTemplate {
})
}
createInputObjects() {
return [
...super.createInputObjects(),
new MouseClickAction(this.element.querySelector(".ueb-window-close"), this.element.blueprint, {},
undefined,
() => this.element.remove()
),
]
}
render() {
return $`
<div class="ueb-window">
<div class="ueb-window-top">
<div class="ueb-window-name ueb-ellipsis-nowrap-text">${this.renderWindowName()}</div>
<div class="ueb-window-close">
<div class="ueb-window-close" @click="${() => this.element.remove()}">
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<line x1="2" y1="2" x2="30" y2="30" stroke="currentColor" stroke-width="4" />
<line x1="30" y1="2" x2="2" y2="30" stroke="currentColor" stroke-width="4" />
@@ -4132,6 +4132,16 @@ class WindowTemplate extends IDraggablePositionedTemplate {
renderContent() {
return $``
}
apply() {
this.element.dispatchEvent(new CustomEvent(Configuration.windowApplyEventName));
this.element.remove();
}
cancel() {
this.element.dispatchEvent(new CustomEvent(Configuration.windowCancelEventName));
this.element.remove();
}
}
/** @typedef {import("../element/WindowElement").default} WindowElement */
@@ -4188,6 +4198,32 @@ class ColorPickerWindowTemplate extends WindowTemplate {
return this.#vSlider
}
#hexRGBHandler =
/** @param {FocusEvent} v */
v => {
// Faster than innerText which causes reflow
const input = Utility.clearHTMLWhitespace(/** @type {HTMLElement} */(v.target).innerHTML);
const RGBAValue = parseInt(input, 16);
if (isNaN(RGBAValue)) {
return
}
this.color.setFromRGBANumber(RGBAValue);
this.element.requestUpdate();
}
#hexSRGBHandler =
/** @param {FocusEvent} v */
v => {
// Faster than innerText which causes reflow
const input = Utility.clearHTMLWhitespace(/** @type {HTMLElement} */(v.target).innerHTML);
const sRGBAValue = parseInt(input, 16);
if (isNaN(sRGBAValue)) {
return
}
this.color.setFromSRGBANumber(sRGBAValue);
this.element.requestUpdate();
}
#color = new LinearColorEntity()
get color() {
return this.#color
@@ -4339,7 +4375,7 @@ class ColorPickerWindowTemplate extends WindowTemplate {
break
case 4:
channelLetter = "h";
channelValue = this.color.H.value;
channelValue = this.color.H.value * 360;
background = "linear-gradient(to right, #f00 0%, #ff0 16.666%, #0f0 33.333%, #0ff 50%, #00f 66.666%, #f0f 83.333%, #f00 100%)";
break
case 5:
@@ -4369,11 +4405,11 @@ class ColorPickerWindowTemplate extends WindowTemplate {
background = `background: ${background};`;
return $`
<div class="ueb-color-picker-${channelLetter.toLowerCase()}">
<span>${channelLetter.toUpperCase()}</span>
<span class="ueb-color-control-label">${channelLetter.toUpperCase()}</span>
<div>
<div class="ueb-horizontal-slider">
<span class="ueb-horizontal-slider-text"
.innerText="${Utility.minDecimals(Utility.roundDecimals(channelValue))}">
.innerText="${Utility.minDecimals(Utility.roundDecimals(channelValue, 3))}">
</span>
</div>
<div class="ueb-color-picker-gradient" style="${background}"></div>
@@ -4439,12 +4475,30 @@ class ColorPickerWindowTemplate extends WindowTemplate {
${this.renderSlider(4)}
${this.renderSlider(5)}
${this.renderSlider(6)}
<div class="ueb-color-picker-hex-linear"></div>
<div class="ueb-color-picker-hex-srgb"></div>
<div class="ueb-color-control">
<span class="ueb-color-control-label">Hex Linear</span>
<div class="ueb-color-picker-hex-linear ueb-text-input">
<span class="ueb-pin-input-content" role="textbox" contenteditable="true"
.innerText="${this.color.toRGBAString()}"
@focusout="${this.#hexRGBHandler}">
</span>
</div>
</div>
<div class="ueb-color-control">
<span class="ueb-color-control-label">Hex sRGB</span>
<div class="ueb-color-picker-hex-srgb ueb-text-input">
<span class="ueb-pin-input-content" role="textbox" contenteditable="true"
.innerText="${this.color.toSRGBAString()}"
@focusout="${this.#hexSRGBHandler}">
</span>
</div>
</div>
</div>
</div>
<div class="ueb-color-picker-ok"></div>
<div class="ueb-color-picker-cancel"></div>
<div class="ueb-buttons">
<div class="ueb-color-picker-ok ueb-button" @click="${() => this.apply()}">OK</div>
<div class="ueb-color-picker-cancel ueb-button" @click="${() => this.cancel()}">Cancel</div>
</div>
</div>
`
}
@@ -4528,9 +4582,7 @@ class IInputPinTemplate extends PinTemplate {
getInputs() {
return this.#inputContentElements.map(element =>
// Faster than innerText which causes reflow
element.innerHTML
.replaceAll("&nbsp;", "\u00A0")
.replaceAll("<br>", "\n")
Utility.clearHTMLWhitespace(element.innerHTML)
)
}
@@ -4562,6 +4614,112 @@ class IInputPinTemplate extends PinTemplate {
}
}
/** @typedef {import("../../Blueprint").default} Blueprint */
/**
* @template {HTMLElement} T
* @extends {IPointing<T>}
*/
class IMouseClick extends IPointing {
/** @type {(e: MouseEvent) => void} */
#mouseDownHandler
/** @type {(e: MouseEvent) => void} */
#mouseUpHandler
constructor(target, blueprint, options = {}) {
options.clickButton ??= 0;
options.consumeEvent ??= true;
options.exitAnyButton ??= true;
options.strictTarget ??= false;
super(target, blueprint, options);
this.clickedPosition = [0, 0];
let self = this;
this.#mouseDownHandler = e => {
self.blueprint.setFocused(true);
switch (e.button) {
case self.options.clickButton:
// Either doesn't matter or consider the click only when clicking on the target, not descandants
if (!self.options.strictTarget || e.target == e.currentTarget) {
if (self.options.consumeEvent) {
e.stopImmediatePropagation(); // Captured, don't call anyone else
}
// Attach the listeners
document.addEventListener("mouseup", self.#mouseUpHandler);
self.clickedPosition = self.locationFromEvent(e);
self.clicked(self.clickedPosition);
}
break
default:
if (!self.options.exitAnyButton) {
self.#mouseUpHandler(e);
}
break
}
};
this.#mouseUpHandler = e => {
if (!self.options.exitAnyButton || e.button == self.options.clickButton) {
if (self.options.consumeEvent) {
e.stopImmediatePropagation(); // Captured, don't call anyone else
}
// Remove the handlers of "mousemove" and "mouseup"
document.removeEventListener("mouseup", self.#mouseUpHandler);
self.unclicked();
}
};
this.listenEvents();
}
listenEvents() {
this.target.addEventListener("mousedown", this.#mouseDownHandler);
if (this.options.clickButton == 2) {
this.target.addEventListener("contextmenu", e => e.preventDefault());
}
}
unlistenEvents() {
this.target.removeEventListener("mousedown", this.#mouseDownHandler);
}
/* Subclasses will override the following methods */
clicked(location) {
}
unclicked(location) {
}
}
class MouseClickAction extends IMouseClick {
static #ignoreEvent =
/** @param {MouseClickAction} self */
self => { }
constructor(
target,
blueprint,
options,
onMouseDown = MouseClickAction.#ignoreEvent,
onMouseUp = MouseClickAction.#ignoreEvent
) {
super(target, blueprint, options);
this.onMouseDown = onMouseDown;
this.onMouseUp = onMouseUp;
}
clicked() {
this.onMouseDown(this);
}
unclicked() {
this.onMouseUp(this);
}
}
/**
* @template {WindowTemplate} T
* @extends {IDraggableElement<Object, T>}
@@ -4616,6 +4774,7 @@ customElements.define("ueb-window", WindowElement);
* @typedef {import("../entity/LinearColorEntity").default} LinearColorEntity
*/
/** @extends IInputPinTemplate<LinearColorEntity> */
class LinearColorPinTemplate extends IInputPinTemplate {
/** @type {HTMLInputElement} */
@@ -4646,11 +4805,14 @@ class LinearColorPinTemplate extends IInputPinTemplate {
});
this.element.blueprint.append(this.#window);
const windowApplyHandler = () => {
this.element.color = /** @type {ColorPickerWindowTemplate} */(this.#window.template).color;
this.element.setDefaultValue(
/** @type {ColorPickerWindowTemplate} */(this.#window.template).color
);
};
const windowCloseHandler = () => {
this.#window.removeEventListener(Configuration.windowApplyEventName, windowApplyHandler);
this.#window.removeEventListener(Configuration.windowCloseEventName, windowCloseHandler);
this.#window = null;
};
this.#window.addEventListener(Configuration.windowApplyEventName, windowApplyHandler);
this.#window.addEventListener(Configuration.windowCloseEventName, windowCloseHandler);
@@ -4771,9 +4933,8 @@ class RealPinTemplate extends INumericPinTemplate {
return $`
<div class="ueb-pin-input">
<span class="ueb-pin-input-content" role="textbox" contenteditable="true"
.innerText="${
IInputPinTemplate.stringFromUEToInput(Utility.minDecimals(this.element.entity.DefaultValue))
}"></span>
.innerText="${IInputPinTemplate.stringFromUEToInput(Utility.minDecimals(this.element.entity.DefaultValue))}">
</span>
</div>
`
}
@@ -4988,8 +5149,7 @@ class PinElement extends IElement {
this.advancedView = entity.bAdvancedView;
this.defaultValue = entity.getDefaultValue();
this.pinType = this.entity.getType();
// @ts-expect-error
this.color = this.constructor.properties.color.converter.fromAttribute(Configuration.pinColor[this.pinType]?.toString());
this.color = PinElement.properties.color.converter.fromAttribute(Configuration.pinColor[this.pinType]?.toString());
this.isLinked = false;
this.pinDirection = entity.isInput() ? "input" : entity.isOutput() ? "output" : "hidden";
@@ -5109,63 +5269,6 @@ class PinElement extends IElement {
customElements.define("ueb-pin", PinElement);
/**
* @typedef {import("../../Blueprint").default} Blueprint
* @typedef {import("../../element/ISelectableDraggableElement").default} ISelectableDraggableElement
*/
/** @extends {MouseMoveDraggable<ISelectableDraggableElement>} */
class MouseMoveNodes extends MouseMoveDraggable {
startDrag() {
if (!this.target.selected) {
this.blueprint.unselectAll();
this.target.setSelected(true);
}
}
dragAction(location, offset) {
this.target.dispatchDragEvent(offset);
}
unclicked() {
if (!this.started) {
this.blueprint.unselectAll();
this.target.setSelected(true);
}
}
}
/**
* @typedef {import("../element/ISelectableDraggableElement").default} ISelectableDraggableElement
* @typedef {import("../input/mouse/MouseMoveDraggable").default} MouseMoveDraggable
*/
/**
* @template {ISelectableDraggableElement} T
* @extends {IDraggablePositionedTemplate<T>}
*/
class ISelectableDraggableTemplate extends IDraggablePositionedTemplate {
getDraggableElement() {
return this.element
}
createDraggableObject() {
return /** @type {MouseMoveDraggable} */ (new MouseMoveNodes(this.element, this.element.blueprint, {
draggableElement: this.getDraggableElement(),
}))
}
/** @param {Map} changedProperties */
firstUpdated(changedProperties) {
super.firstUpdated(changedProperties);
if (this.element.selected && !this.element.listeningDrag) {
this.element.setSelected(true);
}
}
}
/** @typedef {import("../element/NodeElement").default} NodeElement */
/** @extends {ISelectableDraggableTemplate<NodeElement>} */

8
dist/ueblueprint.min.js vendored
View File

File diff suppressed because one or more lines are too long

7
js/Utility.js
View File

@@ -233,6 +233,13 @@ export default class Utility {
.replaceAll("\\n", "\n")
}
/** @param {String} value */
static clearHTMLWhitespace(value) {
return value
.replaceAll("&nbsp;", "\u00A0")
.replaceAll("<br>", "\n")
}
/** @param {String} value */
static formatStringName(value) {
return value

3
js/element/PinElement.js
View File

@@ -115,8 +115,7 @@ export default class PinElement extends IElement {
this.advancedView = entity.bAdvancedView
this.defaultValue = entity.getDefaultValue()
this.pinType = this.entity.getType()
// @ts-expect-error
this.color = this.constructor.properties.color.converter.fromAttribute(Configuration.pinColor[this.pinType]?.toString())
this.color = PinElement.properties.color.converter.fromAttribute(Configuration.pinColor[this.pinType]?.toString())
this.isLinked = false
this.pinDirection = entity.isInput() ? "input" : entity.isOutput() ? "output" : "hidden"

62
js/entity/LinearColorEntity.js
View File

@@ -15,6 +15,30 @@ export default class LinearColorEntity extends IEntity {
V: new TypeInitialization(RealUnitEntity, true, undefined, false, true),
}
static linearToSRGB(x) {
if (x <= 0) {
return 0
} else if (x >= 1) {
return 1
} else if (x < 0.0031308) {
return x * 12.92
} else {
return Math.pow(x, 1 / 2.4) * 1.055 - 0.055
}
}
static sRGBtoLinear(x) {
if (x <= 0) {
return 0
} else if (x >= 1) {
return 1
} else if (x < 0.04045) {
return x / 12.92
} else {
return Math.pow((x + 0.055) / 1.055, 2.4)
}
}
constructor(options = {}) {
super(options)
/** @type {RealUnitEntity} */ this.R
@@ -109,8 +133,27 @@ export default class LinearColorEntity extends IEntity {
]
}
toSRGBA() {
return [
Math.round(LinearColorEntity.linearToSRGB(this.R.value) * 255),
Math.round(LinearColorEntity.linearToSRGB(this.G.value) * 255),
Math.round(LinearColorEntity.linearToSRGB(this.B.value) * 255),
Math.round(this.A.value * 255),
]
}
toRGBAString() {
return this.toRGBA().map(v => v.toString(16).padStart(2, "0")).join("")
return this
.toRGBA()
.map(v => v.toString(16).toUpperCase().padStart(2, "0"))
.join("")
}
toSRGBAString() {
return this
.toSRGBA()
.map(v => v.toString(16).toUpperCase().padStart(2, "0"))
.join("")
}
toHSVA() {
@@ -130,8 +173,23 @@ export default class LinearColorEntity extends IEntity {
return (this.R.value << 24) + (this.G.value << 16) + (this.B.value << 8) + this.A.value
}
setFromRGBANumber(number) {
this.A.value = (number & 0xFF) / 0xff
this.B.value = ((number >> 8) & 0xFF) / 0xff
this.G.value = ((number >> 16) & 0xFF) / 0xff
this.R.value = ((number >> 24) & 0xFF) / 0xff
this.#updateHSV()
}
setFromSRGBANumber(number) {
this.A.value = (number & 0xFF) / 0xff
this.B.value = LinearColorEntity.sRGBtoLinear(((number >> 8) & 0xFF) / 0xff)
this.G.value = LinearColorEntity.sRGBtoLinear(((number >> 16) & 0xFF) / 0xff)
this.R.value = LinearColorEntity.sRGBtoLinear(((number >> 24) & 0xFF) / 0xff)
this.#updateHSV()
}
toString() {
return Utility.printLinearColor(this)
}
}

58
js/template/ColorPickerWindowTemplate.js
View File

@@ -60,6 +60,32 @@ export default class ColorPickerWindowTemplate extends WindowTemplate {
return this.#vSlider
}
#hexRGBHandler =
/** @param {FocusEvent} v */
v => {
// Faster than innerText which causes reflow
const input = Utility.clearHTMLWhitespace(/** @type {HTMLElement} */(v.target).innerHTML)
const RGBAValue = parseInt(input, 16)
if (isNaN(RGBAValue)) {
return
}
this.color.setFromRGBANumber(RGBAValue)
this.element.requestUpdate()
}
#hexSRGBHandler =
/** @param {FocusEvent} v */
v => {
// Faster than innerText which causes reflow
const input = Utility.clearHTMLWhitespace(/** @type {HTMLElement} */(v.target).innerHTML)
const sRGBAValue = parseInt(input, 16)
if (isNaN(sRGBAValue)) {
return
}
this.color.setFromSRGBANumber(sRGBAValue)
this.element.requestUpdate()
}
#color = new LinearColorEntity()
get color() {
return this.#color
@@ -211,7 +237,7 @@ export default class ColorPickerWindowTemplate extends WindowTemplate {
break
case 4:
channelLetter = "h"
channelValue = this.color.H.value
channelValue = this.color.H.value * 360
background = "linear-gradient(to right, #f00 0%, #ff0 16.666%, #0f0 33.333%, #0ff 50%, #00f 66.666%, #f0f 83.333%, #f00 100%)"
break
case 5:
@@ -241,11 +267,11 @@ export default class ColorPickerWindowTemplate extends WindowTemplate {
background = `background: ${background};`
return html`
<div class="ueb-color-picker-${channelLetter.toLowerCase()}">
<span>${channelLetter.toUpperCase()}</span>
<span class="ueb-color-control-label">${channelLetter.toUpperCase()}</span>
<div>
<div class="ueb-horizontal-slider">
<span class="ueb-horizontal-slider-text"
.innerText="${Utility.minDecimals(Utility.roundDecimals(channelValue))}">
.innerText="${Utility.minDecimals(Utility.roundDecimals(channelValue, 3))}">
</span>
</div>
<div class="ueb-color-picker-gradient" style="${background}"></div>
@@ -311,12 +337,30 @@ export default class ColorPickerWindowTemplate extends WindowTemplate {
${this.renderSlider(4)}
${this.renderSlider(5)}
${this.renderSlider(6)}
<div class="ueb-color-picker-hex-linear"></div>
<div class="ueb-color-picker-hex-srgb"></div>
<div class="ueb-color-control">
<span class="ueb-color-control-label">Hex Linear</span>
<div class="ueb-color-picker-hex-linear ueb-text-input">
<span class="ueb-pin-input-content" role="textbox" contenteditable="true"
.innerText="${this.color.toRGBAString()}"
@focusout="${this.#hexRGBHandler}">
</span>
</div>
</div>
<div class="ueb-color-control">
<span class="ueb-color-control-label">Hex sRGB</span>
<div class="ueb-color-picker-hex-srgb ueb-text-input">
<span class="ueb-pin-input-content" role="textbox" contenteditable="true"
.innerText="${this.color.toSRGBAString()}"
@focusout="${this.#hexSRGBHandler}">
</span>
</div>
</div>
</div>
</div>
<div class="ueb-color-picker-ok"></div>
<div class="ueb-color-picker-cancel"></div>
<div class="ueb-buttons">
<div class="ueb-color-picker-ok ueb-button" @click="${() => this.apply()}">OK</div>
<div class="ueb-color-picker-cancel ueb-button" @click="${() => this.cancel()}">Cancel</div>
</div>
</div>
`
}

6
js/template/ColorSliderTemplate.js
View File

@@ -6,12 +6,6 @@ import Utility from "../Utility"
/** @extends {IDraggableControlTemplate<ColorHandlerElement>} */
export default class ColorSliderTemplate extends IDraggableControlTemplate {
createInputObjects() {
return [
...super.createInputObjects(),
]
}
/** @param {[Number, Number]} param0 */
adjustLocation([x, y]) {
x = Utility.clamp(x, 0, this.movementSpaceSize[0])

5
js/template/IInputPinTemplate.js
View File

@@ -1,6 +1,7 @@
import { html } from "lit"
import MouseIgnore from "../input/mouse/MouseIgnore"
import PinTemplate from "./PinTemplate"
import Utility from "../Utility"
/**
* @template T
@@ -76,9 +77,7 @@ export default class IInputPinTemplate extends PinTemplate {
getInputs() {
return this.#inputContentElements.map(element =>
// Faster than innerText which causes reflow
element.innerHTML
.replaceAll("&nbsp;", "\u00A0")
.replaceAll("<br>", "\n")
Utility.clearHTMLWhitespace(element.innerHTML)
)
}

5
js/template/LinearColorPinTemplate.js
View File

@@ -10,6 +10,7 @@ import WindowElement from "../element/WindowElement"
* @typedef {import("../entity/LinearColorEntity").default} LinearColorEntity
*/
/** @extends IInputPinTemplate<LinearColorEntity> */
export default class LinearColorPinTemplate extends IInputPinTemplate {
/** @type {HTMLInputElement} */
@@ -40,7 +41,9 @@ export default class LinearColorPinTemplate extends IInputPinTemplate {
})
this.element.blueprint.append(this.#window)
const windowApplyHandler = () => {
this.element.color = /** @type {ColorPickerWindowTemplate} */(this.#window.template).color
this.element.setDefaultValue(
/** @type {ColorPickerWindowTemplate} */(this.#window.template).color
)
}
const windowCloseHandler = () => {
this.#window.removeEventListener(Configuration.windowApplyEventName, windowApplyHandler)

5
js/template/RealPinTemplate.js
View File

@@ -18,9 +18,8 @@ export default class RealPinTemplate extends INumericPinTemplate {
return html`
<div class="ueb-pin-input">
<span class="ueb-pin-input-content" role="textbox" contenteditable="true"
.innerText="${
IInputPinTemplate.stringFromUEToInput(Utility.minDecimals(this.element.entity.DefaultValue))
}"></span>
.innerText="${IInputPinTemplate.stringFromUEToInput(Utility.minDecimals(this.element.entity.DefaultValue))}">
</span>
</div>
`
}

24
js/template/WindowTemplate.js
View File

@@ -1,6 +1,6 @@
import { html } from "lit"
import Configuration from "../Configuration"
import IDraggablePositionedTemplate from "./IDraggablePositionedTemplate"
import MouseClickAction from "../input/mouse/MouseClickAction"
import MouseMoveDraggable from "../input/mouse/MouseMoveDraggable"
/** @typedef {import("../element/WindowElement").default} WindowElement */
@@ -23,22 +23,12 @@ export default class WindowTemplate extends IDraggablePositionedTemplate {
})
}
createInputObjects() {
return [
...super.createInputObjects(),
new MouseClickAction(this.element.querySelector(".ueb-window-close"), this.element.blueprint, {},
undefined,
() => this.element.remove()
),
]
}
render() {
return html`
<div class="ueb-window">
<div class="ueb-window-top">
<div class="ueb-window-name ueb-ellipsis-nowrap-text">${this.renderWindowName()}</div>
<div class="ueb-window-close">
<div class="ueb-window-close" @click="${() => this.element.remove()}">
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<line x1="2" y1="2" x2="30" y2="30" stroke="currentColor" stroke-width="4" />
<line x1="30" y1="2" x2="2" y2="30" stroke="currentColor" stroke-width="4" />
@@ -59,4 +49,14 @@ export default class WindowTemplate extends IDraggablePositionedTemplate {
renderContent() {
return html``
}
apply() {
this.element.dispatchEvent(new CustomEvent(Configuration.windowApplyEventName))
this.element.remove()
}
cancel() {
this.element.dispatchEvent(new CustomEvent(Configuration.windowCancelEventName))
this.element.remove()
}
}

33
scss/ueb-ui-controls.scss
View File

@@ -1,3 +1,23 @@
.ueb-button {
min-width: 60px;
border: 1px solid #0f0f0f;
padding: 2px 10px;
background: #383838;
text-align: center;
cursor: pointer;
&:hover {
background: #575757;
}
}
.ueb-buttons {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 20px;
}
.ueb-vertical-slider>ueb-ui-slider {
position: relative;
padding-bottom: 10px;
@@ -23,18 +43,27 @@
}
}
.ueb-horizontal-slider {
.ueb-horizontal-slider,
.ueb-text-input {
position: relative;
border: 1px solid #383838;
border-radius: 6px;
padding: 1px;
background: #0f0f0f;
}
.ueb-horizontal-slider {
position: relative;
padding: 1px;
&:hover {
cursor: ew-resize;
}
}
ueb-window .ueb-pin-input-content {
padding: 1px 10px;
}
.ueb-horizontal-slider>ueb-ui-slider {
display: block;
position: relative;

16
scss/ueb-window.scss
View File

@@ -147,6 +147,7 @@ ueb-ui-slider {
flex-direction: column;
justify-content: space-between;
flex-grow: 1;
width: 50%;
}
.ueb-color-picker-advanced .ueb-color-picker-column>div {
@@ -193,4 +194,19 @@ ueb-ui-slider {
.ueb-color-picker-gradient {
height: 6px;
}
.ueb-color-control {
align-self: flex-end;
}
.ueb-color-control-label {
margin-right: 5px;
color: #c0c0c0;
}
.ueb-color-control .ueb-pin-input-content {
line-height: 20px;
font-family: monospace;
color: #c0c0c0;
}