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

Color picker wip

Browse Source
This commit is contained in:
barsdeveloper
2022-09-30 21:12:10 +02:00
parent 7846aa74ea
commit 91e1e0885e
12 changed files with 212 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
dist/ueblueprint.js vendored
View File

@@ -1756,6 +1756,9 @@ class ITemplate {
static styles = r$2``
/** @type {T} */
element
/** @type {IInput[]} */
#inputObjects = []
get inputObjects() {
@@ -3214,13 +3217,13 @@ class IInputPinTemplate extends PinTemplate {
super.firstUpdated(changedProperties);
this.#inputContentElements = [...this.element.querySelectorAll(".ueb-pin-input-content")];
if (this.#inputContentElements.length) {
this.setInputs(this.getInputs(this.element), false);
this.setInputs(this.getInputs(), false);
let self = this;
this.onFocusHandler = _ => this.element.blueprint.dispatchEditTextEvent(true);
this.onFocusOutHandler = e => {
e.preventDefault();
document.getSelection()?.removeAllRanges(); // Deselect text inside the input
self.setInputs(this.getInputs(this.element), true);
self.setInputs(this.getInputs(), true);
this.element.blueprint.dispatchEditTextEvent(false);
};
this.#inputContentElements.forEach(element => {
@@ -3246,7 +3249,7 @@ class IInputPinTemplate extends PinTemplate {
}
getInput() {
return this.getInputs(this.element).reduce((acc, cur) => acc + cur, "")
return this.getInputs().reduce((acc, cur) => acc + cur, "")
}
getInputs() {
@@ -3277,7 +3280,7 @@ class IInputPinTemplate extends PinTemplate {
return $`
<div class="ueb-pin-input">
<span class="ueb-pin-input-content" role="textbox" contenteditable="true"
.innerText="${IInputPinTemplate.stringFromUEToInput(this.element.unreactiveDefaultValue.toString())}"></span>
.innerText="${IInputPinTemplate.stringFromUEToInput(this.element.entity.DefaultValue.toString())}"></span>
</div>
`
}
@@ -3529,32 +3532,96 @@ class WindowTemplate extends IDraggableTemplate {
</div>
</div>
<div class="ueb-window-content">
Content
${this.renderContent()}
</div>
</div>
`
}
renderContent() {
return $``
}
}
/** @typedef {import("../element/WindowElement").default} WindowElement */
class ColorPickerWindowTemplate extends WindowTemplate {
static windowName = $`Color Picker`
#picker
/** @param {Map} changedProperties */
firstUpdated(changedProperties) {
this.#picker = new iro.ColorPicker(
this.element.querySelector(".ueb-color-picker"),
{
layout: [
]
}
);
}
renderContent() {
return $`
<div class="ueb-color-picker">
<div class="ueb-color-picker-theme"></div>
<div class="ueb-color-picker-srgb"></div>
<div class="ueb-color-picker-wheel"></div>
<div class="ueb-color-picker-saturation"></div>
<div class="ueb-color-picker-value"></div>
<div class="ueb-color-picker-preview">
<div class="ueb-color-picker-preview-old"></div>
<div class="ueb-color-picker-preview-new"></div>
</div>
<div class="ueb-color-picker-advanced-toggle"></div>
<div class="ueb-color-picker-advanced">
<div class="ueb-color-picker-r"></div>
<div class="ueb-color-picker-g"></div>
<div class="ueb-color-picker-b"></div>
<div class="ueb-color-picker-a"></div>
<div class="ueb-color-picker-h"></div>
<div class="ueb-color-picker-s"></div>
<div class="ueb-color-picker-v"></div>
<div class="ueb-color-picker-hex-linear"></div>
<div class="ueb-color-picker-hex-srgb"></div>
</div>
<div class="ueb-color-picker-ok"></div>
<div class="ueb-color-picker-cancel"></div>
</div>
`
}
}
/** @extends {ISelectableDraggableElement<Object, WindowTemplate>} */
class WindowElement extends ISelectableDraggableElement {
class WindowElement extends IDraggableElement {
static #typeTemplateMap = {
"window": WindowTemplate,
"color-picker": ColorPickerWindowTemplate,
}
static properties = {
...ISelectableDraggableElement.properties,
...IDraggableElement.properties,
type: {
type: String,
type: WindowTemplate,
attribute: "data-type",
reflect: true,
converter: {
fromAttribute: (value, type) => WindowElement.#typeTemplateMap[value],
toAttribute: (value, type) =>
Object.entries(WindowElement.#typeTemplateMap).find(([k, v]) => value == v)[0]
},
},
}
constructor(properties = {}) {
properties.type ??= "window";
super({}, new WindowElement.#typeTemplateMap[properties.type]());
if (properties.type.constructor == String) {
properties.type = WindowElement.#typeTemplateMap[properties.type];
}
properties.type ??= WindowTemplate;
super({}, new properties.type());
this.type = properties.type;
}
@@ -3694,8 +3761,6 @@ class NamePinTemplate extends IInputPinTemplate {
}
}
/** @typedef {import("../element/PinElement").default} PinElement */
class RealPinTemplate extends IInputPinTemplate {
setInputs(values = [], updateDefaultValue = false) {
@@ -3715,7 +3780,6 @@ class RealPinTemplate extends IInputPinTemplate {
updateDefaultValue = false;
}
parsedValues.push(num);
values[i] = Utility.minDecimals(num);
}
super.setInputs(values, false);
this.setDefaultValue(parsedValues, values);
@@ -3724,6 +3788,18 @@ class RealPinTemplate extends IInputPinTemplate {
setDefaultValue(values = [], rawValues = values) {
this.element.setDefaultValue(values[0]);
}
renderInput() {
if (this.element.isInput()) {
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>
</div>
`
}
return $``
}
}
class StringPinTemplate extends IInputPinTemplate {
@@ -3752,18 +3828,27 @@ class VectorPinTemplate extends RealPinTemplate {
<div class="ueb-pin-input-wrapper">
<span class="ueb-pin-input-label">X</span>
<div class="ueb-pin-input">
<span class="ueb-pin-input-content ueb-pin-input-x" role="textbox" contenteditable="true"
.innerText="${IInputPinTemplate.stringFromUEToInput(this.element.entity.getDefaultValue().X.toString())}"></span>
<span class="ueb-pin-input-content ueb-pin-input-x" role="textbox" contenteditable="true" .innerText="${IInputPinTemplate.stringFromUEToInput(
Utility.minDecimals(
this.element.entity.getDefaultValue().X
)
)}"></span>
</div>
<span class="ueb-pin-input-label">Y</span>
<div class="ueb-pin-input">
<span class="ueb-pin-input-content ueb-pin-input-y" role="textbox" contenteditable="true"
.innerText="${IInputPinTemplate.stringFromUEToInput(this.element.entity.getDefaultValue().Y.toString())}"></span>
<span class="ueb-pin-input-content ueb-pin-input-y" role="textbox" contenteditable="true" .innerText="${IInputPinTemplate.stringFromUEToInput(
Utility.minDecimals(
this.element.entity.getDefaultValue().Y
)
)}"></span>
</div>
<span class="ueb-pin-input-label">Z</span>
<div class="ueb-pin-input">
<span class="ueb-pin-input-content ueb-pin-input-z" role="textbox" contenteditable="true"
.innerText="${IInputPinTemplate.stringFromUEToInput(this.element.entity.getDefaultValue().Z.toString())}"></span>
<span class="ueb-pin-input-content ueb-pin-input-z" role="textbox" contenteditable="true" .innerText="${IInputPinTemplate.stringFromUEToInput(
Utility.minDecimals(
this.element.entity.getDefaultValue().Z
)
)}"></span>
</div>
</div>
`

4
dist/ueblueprint.min.js vendored
View File

File diff suppressed because one or more lines are too long

22
js/element/WindowElement.js
View File

@@ -1,26 +1,36 @@
import ColorPickerWindowTemplate from "../template/ColorPickerWindowTemplate"
import Configuration from "../Configuration"
import ISelectableDraggableElement from "./ISelectableDraggableElement"
import IDraggableElement from "./IDraggableElement"
import WindowTemplate from "../template/WindowTemplate"
/** @extends {ISelectableDraggableElement<Object, WindowTemplate>} */
export default class WindowElement extends ISelectableDraggableElement {
export default class WindowElement extends IDraggableElement {
static #typeTemplateMap = {
"window": WindowTemplate,
"color-picker": ColorPickerWindowTemplate,
}
static properties = {
...ISelectableDraggableElement.properties,
...IDraggableElement.properties,
type: {
type: String,
type: WindowTemplate,
attribute: "data-type",
reflect: true,
converter: {
fromAttribute: (value, type) => WindowElement.#typeTemplateMap[value],
toAttribute: (value, type) =>
Object.entries(WindowElement.#typeTemplateMap).find(([k, v]) => value == v)[0]
},
},
}
constructor(properties = {}) {
properties.type ??= "window"
super({}, new WindowElement.#typeTemplateMap[properties.type]())
if (properties.type.constructor == String) {
properties.type = WindowElement.#typeTemplateMap[properties.type]
}
properties.type ??= WindowTemplate
super({}, new properties.type())
this.type = properties.type
}

2
js/template/BlueprintTemplate.js
View File

@@ -11,8 +11,8 @@ import Paste from "../input/common/Paste"
import Select from "../input/mouse/Select"
import SelectorElement from "../element/SelectorElement"
import Unfocus from "../input/mouse/Unfocus"
import Zoom from "../input/mouse/Zoom"
import Utility from "../Utility"
import Zoom from "../input/mouse/Zoom"
/**
* @typedef {import("../Blueprint").default} Blueprint

47
js/template/ColorPickerWindowTemplate.js
View File

@@ -1,10 +1,53 @@
import { html } from "lit"
import WindowTemplate from "./WindowTemplate"
/** @typedef {import("../element/NodeElement").default} NodeElement */
/** @typedef {import("../element/WindowElement").default} WindowElement */
export default class ColorPickerWindowTemplate extends WindowTemplate {
static windowName = html`Color Picker`
#picker
ColorPickerWindowTemplate()
/** @param {Map} changedProperties */
firstUpdated(changedProperties) {
this.#picker = new iro.ColorPicker(
this.element.querySelector(".ueb-color-picker"),
{
layout: [
]
}
)
}
renderContent() {
return html`
<div class="ueb-color-picker">
<div class="ueb-color-picker-theme"></div>
<div class="ueb-color-picker-srgb"></div>
<div class="ueb-color-picker-wheel"></div>
<div class="ueb-color-picker-saturation"></div>
<div class="ueb-color-picker-value"></div>
<div class="ueb-color-picker-preview">
<div class="ueb-color-picker-preview-old"></div>
<div class="ueb-color-picker-preview-new"></div>
</div>
<div class="ueb-color-picker-advanced-toggle"></div>
<div class="ueb-color-picker-advanced">
<div class="ueb-color-picker-r"></div>
<div class="ueb-color-picker-g"></div>
<div class="ueb-color-picker-b"></div>
<div class="ueb-color-picker-a"></div>
<div class="ueb-color-picker-h"></div>
<div class="ueb-color-picker-s"></div>
<div class="ueb-color-picker-v"></div>
<div class="ueb-color-picker-hex-linear"></div>
<div class="ueb-color-picker-hex-srgb"></div>
</div>
<div class="ueb-color-picker-ok"></div>
<div class="ueb-color-picker-cancel"></div>
</div>
`
}
}

8
js/template/IInputPinTemplate.js
View File

@@ -31,13 +31,13 @@ export default class IInputPinTemplate extends PinTemplate {
super.firstUpdated(changedProperties)
this.#inputContentElements = [...this.element.querySelectorAll(".ueb-pin-input-content")]
if (this.#inputContentElements.length) {
this.setInputs(this.getInputs(this.element), false)
this.setInputs(this.getInputs(), false)
let self = this
this.onFocusHandler = _ => this.element.blueprint.dispatchEditTextEvent(true)
this.onFocusOutHandler = e => {
e.preventDefault()
document.getSelection()?.removeAllRanges() // Deselect text inside the input
self.setInputs(this.getInputs(this.element), true)
self.setInputs(this.getInputs(), true)
this.element.blueprint.dispatchEditTextEvent(false)
}
this.#inputContentElements.forEach(element => {
@@ -63,7 +63,7 @@ export default class IInputPinTemplate extends PinTemplate {
}
getInput() {
return this.getInputs(this.element).reduce((acc, cur) => acc + cur, "")
return this.getInputs().reduce((acc, cur) => acc + cur, "")
}
getInputs() {
@@ -94,7 +94,7 @@ export default class IInputPinTemplate extends PinTemplate {
return html`
<div class="ueb-pin-input">
<span class="ueb-pin-input-content" role="textbox" contenteditable="true"
.innerText="${IInputPinTemplate.stringFromUEToInput(this.element.unreactiveDefaultValue.toString())}"></span>
.innerText="${IInputPinTemplate.stringFromUEToInput(this.element.entity.DefaultValue.toString())}"></span>
</div>
`
}

3
js/template/ITemplate.js
View File

@@ -10,6 +10,9 @@ export default class ITemplate {
static styles = css``
/** @type {T} */
element
/** @type {IInput[]} */
#inputObjects = []
get inputObjects() {

2
js/template/PinTemplate.js
View File

@@ -4,9 +4,9 @@ import MouseCreateLink from "../input/mouse/MouseCreateLink"
import Utility from "../Utility"
/**
* @typedef {import("../input/IInput").default} IInput
* @typedef {import("../element/NodeElement").default} NodeElement
* @typedef {import("../element/PinElement").default} PinElement
* @typedef {import("../input/IInput").default} IInput
*/
export default class PinTemplate extends ITemplate {

16
js/template/RealPinTemplate.js
View File

@@ -1,8 +1,7 @@
import { html } from "lit"
import IInputPinTemplate from "./IInputPinTemplate"
import Utility from "../Utility"
/** @typedef {import("../element/PinElement").default} PinElement */
export default class RealPinTemplate extends IInputPinTemplate {
setInputs(values = [], updateDefaultValue = false) {
@@ -22,7 +21,6 @@ export default class RealPinTemplate extends IInputPinTemplate {
updateDefaultValue = false
}
parsedValues.push(num)
values[i] = Utility.minDecimals(num)
}
super.setInputs(values, false)
this.setDefaultValue(parsedValues, values)
@@ -31,4 +29,16 @@ export default class RealPinTemplate extends IInputPinTemplate {
setDefaultValue(values = [], rawValues = values) {
this.element.setDefaultValue(values[0])
}
renderInput() {
if (this.element.isInput()) {
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>
</div>
`
}
return html``
}
}

24
js/template/VectorPinTemplate.js
View File

@@ -1,7 +1,8 @@
import { html } from "lit"
import VectorEntity from "../entity/VectorEntity"
import IInputPinTemplate from "./IInputPinTemplate"
import RealPinTemplate from "./RealPinTemplate"
import Utility from "../Utility"
import VectorEntity from "../entity/VectorEntity"
/**
* @typedef {import("../element/PinElement").default} PinElement
@@ -26,18 +27,27 @@ export default class VectorPinTemplate extends RealPinTemplate {
<div class="ueb-pin-input-wrapper">
<span class="ueb-pin-input-label">X</span>
<div class="ueb-pin-input">
<span class="ueb-pin-input-content ueb-pin-input-x" role="textbox" contenteditable="true"
.innerText="${IInputPinTemplate.stringFromUEToInput(this.element.entity.getDefaultValue().X.toString())}"></span>
<span class="ueb-pin-input-content ueb-pin-input-x" role="textbox" contenteditable="true" .innerText="${IInputPinTemplate.stringFromUEToInput(
Utility.minDecimals(
this.element.entity.getDefaultValue().X
)
)}"></span>
</div>
<span class="ueb-pin-input-label">Y</span>
<div class="ueb-pin-input">
<span class="ueb-pin-input-content ueb-pin-input-y" role="textbox" contenteditable="true"
.innerText="${IInputPinTemplate.stringFromUEToInput(this.element.entity.getDefaultValue().Y.toString())}"></span>
<span class="ueb-pin-input-content ueb-pin-input-y" role="textbox" contenteditable="true" .innerText="${IInputPinTemplate.stringFromUEToInput(
Utility.minDecimals(
this.element.entity.getDefaultValue().Y
)
)}"></span>
</div>
<span class="ueb-pin-input-label">Z</span>
<div class="ueb-pin-input">
<span class="ueb-pin-input-content ueb-pin-input-z" role="textbox" contenteditable="true"
.innerText="${IInputPinTemplate.stringFromUEToInput(this.element.entity.getDefaultValue().Z.toString())}"></span>
<span class="ueb-pin-input-content ueb-pin-input-z" role="textbox" contenteditable="true" .innerText="${IInputPinTemplate.stringFromUEToInput(
Utility.minDecimals(
this.element.entity.getDefaultValue().Z
)
)}"></span>
</div>
</div>
`

6
js/template/WindowTemplate.js
View File

@@ -44,9 +44,13 @@ export default class WindowTemplate extends IDraggableTemplate {
</div>
</div>
<div class="ueb-window-content">
Content
${this.renderContent()}
</div>
</div>
`
}
renderContent() {
return html``
}
}

2
package.json
View File

@@ -33,7 +33,7 @@
"terser": "^5.14.0"
},
"dependencies": {
"@easylogic/colorpicker": "^1.10.11",
"@jaames/iro": "^5.5.2",
"lit": "^2.2.4",
"parsimmon": "^1.18.0",
"rollup-plugin-html-literals": "^1.1.5"