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

Contributing documentation and minor fixes

Browse Source
This commit is contained in:
barsdeveloper
2022-11-12 14:46:26 +01:00
parent cd911b0d0c
commit 054793b7b9
8 changed files with 63 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
docs/CONTRIBUTING.md → CONTRIBUTING.md
View File

@@ -29,5 +29,17 @@ Classes used to map input events (generated from a mouse or a keyboard for examp
### Selection
It contains just a few classes related exclusively to the operation of selecting nodes. It is an (arguably useless) attempt to optimize the selection in case of graphs with a very large numbers of nodes (it is not really usefull because in the case of many many nodes, the bootleneck becomes the DOM rendering, not deciding in JavaScript which nodes are selected and which are not even though this happens every frame). Selection has two models: one very simple that checks every frame all the nodes in the graph to see whether or not they are selected by the selector, and the fast model that attemps to optimize the number of nodes that are looked up at, much more complicated and not super usefull as stated before.
## Naming convention
In general all the names that might collide with other names, like css classes, custom elements names, ...; they all start with `ueb`.
# Code Style
## Formatting
Please refer to the following rules, in no particular order:
* The formatter of reference is the one from Visual Studio Code.
* Semicolons at the end of the lines must be removed (already set for VS Code).
* Order of elements in a class is: first variables then constructor, then methods; first static then instance members; first private then public.
* At the end of the file there must be exactly one empty line (already set for VS Code).
## File organization
There must be exactly one class in each file and the name of the file is the same as the class it contains.
## Naming conventions
Classes follow the `PascalCase` naming convention. Variables follow the `camelCase` convention. Static or global constants follow the `ALL_CAPS` naming convention, DOM names (css class, id, html elements) they do follow the `kebab-case` and, because they might collide with other names, they all start with `ueb-`. The files do have the exact same name as the class they contain, otherwise they follow the `camelCase` naming convention.

53
dist/ueblueprint.js vendored
View File

@@ -1076,6 +1076,7 @@ class LinearColorEntity extends IEntity {
V: new TypeInitialization(RealUnitEntity, true, undefined, false, true),
}
/** @param {Number} x */
static linearToSRGB(x) {
if (x <= 0) {
return 0
@@ -1088,6 +1089,7 @@ class LinearColorEntity extends IEntity {
}
}
/** @param {Number} x */
static sRGBtoLinear(x) {
if (x <= 0) {
return 0
@@ -1100,7 +1102,7 @@ class LinearColorEntity extends IEntity {
}
}
constructor(options = {}) {
constructor(options) {
super(options);
/** @type {RealUnitEntity} */ this.R;
/** @type {RealUnitEntity} */ this.G;
@@ -1148,8 +1150,13 @@ class LinearColorEntity extends IEntity {
this.V.value = max;
}
/** @param {Number[]} param0 */
setFromRGBA([r, g, b, a = 1]) {
/**
* @param {Number} r
* @param {Number} g
* @param {Number} b
* @param {Number} a
*/
setFromRGBA(r, g, b, a = 1) {
this.R.value = r;
this.G.value = g;
this.B.value = b;
@@ -1218,22 +1225,14 @@ class LinearColorEntity extends IEntity {
}
toHSVA() {
const r = this.R.value;
const g = this.G.value;
const b = this.B.value;
const a = this.A.value;
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
const d = max - min;
const s = (max == 0 ? 0 : d / max);
const v = max;
return [this.H.value, s, v, a]
return [this.H.value, this.S.value, this.V.value, this.A.value]
}
toNumber() {
return (this.R.value << 24) + (this.G.value << 16) + (this.B.value << 8) + this.A.value
}
/** @param {Number} number */
setFromRGBANumber(number) {
this.A.value = (number & 0xFF) / 0xff;
this.B.value = ((number >> 8) & 0xFF) / 0xff;
@@ -1242,6 +1241,7 @@ class LinearColorEntity extends IEntity {
this.#updateHSV();
}
/** @param {Number} number */
setFromSRGBANumber(number) {
this.A.value = (number & 0xFF) / 0xff;
this.B.value = LinearColorEntity.sRGBtoLinear(((number >> 8) & 0xFF) / 0xff);
@@ -3979,7 +3979,6 @@ class IInputPinTemplate extends PinTemplate {
super.firstUpdated(changedProperties);
this.#inputContentElements = /** @type {HTMLElement[]} */([...this.element.querySelectorAll("ueb-input")]);
if (this.#inputContentElements.length) {
this.setInputs(this.getInputs(), false);
this.#inputContentElements.forEach(element => {
element.addEventListener("focusout", this.#onFocusOutHandler);
});
@@ -4021,6 +4020,7 @@ class IInputPinTemplate extends PinTemplate {
if (updateDefaultValue) {
this.setDefaultValue(values.map(v => IInputPinTemplate.stringFromInputToUE(v)), values);
}
this.element.addNextUpdatedCallbacks(() => this.element.nodeElement.dispatchReflowEvent());
}
setDefaultValue(values = [], rawValues = values) {
@@ -4472,25 +4472,25 @@ class ColorPickerWindowTemplate extends WindowTemplate {
this.#rSlider.template.locationChangeCallback =
/** @param {Number} x in the range [0, 1] */
(x, y) => {
this.color.setFromRGBA([x, this.color.G.value, this.color.B.value, this.color.A.value]);
this.color.setFromRGBA(x, this.color.G.value, this.color.B.value, this.color.A.value);
this.element.requestUpdate();
};
this.#gSlider.template.locationChangeCallback =
/** @param {Number} x in the range [0, 1] */
(x, y) => {
this.color.setFromRGBA([this.color.R.value, x, this.color.B.value, this.color.A.value]);
this.color.setFromRGBA(this.color.R.value, x, this.color.B.value, this.color.A.value);
this.element.requestUpdate();
};
this.#bSlider.template.locationChangeCallback =
/** @param {Number} x in the range [0, 1] */
(x, y) => {
this.color.setFromRGBA([this.color.R.value, this.color.G.value, x, this.color.A.value]);
this.color.setFromRGBA(this.color.R.value, this.color.G.value, x, this.color.A.value);
this.element.requestUpdate();
};
this.#aSlider.template.locationChangeCallback =
/** @param {Number} x in the range [0, 1] */
(x, y) => {
this.color.setFromRGBA([this.color.R.value, this.color.G.value, this.color.B.value, x]);
this.color.setFromRGBA(this.color.R.value, this.color.G.value, this.color.B.value, x);
this.element.requestUpdate();
};
this.#hSlider.template.locationChangeCallback =
@@ -4738,8 +4738,8 @@ class WindowElement extends IDraggableElement {
* @typedef {import("../entity/LinearColorEntity").default} LinearColorEntity
*/
/** @extends IInputPinTemplate<LinearColorEntity> */
class LinearColorPinTemplate extends IInputPinTemplate {
/** @extends PinTemplate<LinearColorEntity> */
class LinearColorPinTemplate extends PinTemplate {
/** @type {HTMLInputElement} */
#input
@@ -4781,14 +4781,6 @@ class LinearColorPinTemplate extends IInputPinTemplate {
this.#input = this.element.querySelector(".ueb-pin-input");
}
getInputs() {
return [this.#input.dataset.linearColor]
}
/** @param {String[]} value */
setInputs(value = []) {
}
renderInput() {
if (this.element.isInput() && !this.element.isLinked) {
return $`
@@ -6035,6 +6027,7 @@ class Blueprint extends IElement {
/** @type {HTMLElement} */
headerElement
focused = false
waitingExpandUpdate = false
nodeBoundariesSupplier = node => {
let rect = node.getBoundingClientRect();
let gridRect = this.nodesContainerElement.getBoundingClientRect();
@@ -6193,11 +6186,11 @@ class Blueprint extends IElement {
let relativeScale = this.getScale() / initialScale;
let newCenter = [
relativeScale * center[0],
relativeScale * center[1]
relativeScale * center[1],
];
this.scrollDelta([
(newCenter[0] - center[0]) * initialScale,
(newCenter[1] - center[1]) * initialScale
(newCenter[1] - center[1]) * initialScale,
]);
});
}

4
dist/ueblueprint.min.js vendored
View File

File diff suppressed because one or more lines are too long

5
js/Blueprint.js
View File

@@ -96,6 +96,7 @@ export default class Blueprint extends IElement {
/** @type {HTMLElement} */
headerElement
focused = false
waitingExpandUpdate = false
nodeBoundariesSupplier = node => {
let rect = node.getBoundingClientRect()
let gridRect = this.nodesContainerElement.getBoundingClientRect()
@@ -254,11 +255,11 @@ export default class Blueprint extends IElement {
let relativeScale = this.getScale() / initialScale
let newCenter = [
relativeScale * center[0],
relativeScale * center[1]
relativeScale * center[1],
]
this.scrollDelta([
(newCenter[0] - center[0]) * initialScale,
(newCenter[1] - center[1]) * initialScale
(newCenter[1] - center[1]) * initialScale,
])
})
}

26
js/entity/LinearColorEntity.js
View File

@@ -15,6 +15,7 @@ export default class LinearColorEntity extends IEntity {
V: new TypeInitialization(RealUnitEntity, true, undefined, false, true),
}
/** @param {Number} x */
static linearToSRGB(x) {
if (x <= 0) {
return 0
@@ -27,6 +28,7 @@ export default class LinearColorEntity extends IEntity {
}
}
/** @param {Number} x */
static sRGBtoLinear(x) {
if (x <= 0) {
return 0
@@ -39,7 +41,7 @@ export default class LinearColorEntity extends IEntity {
}
}
constructor(options = {}) {
constructor(options) {
super(options)
/** @type {RealUnitEntity} */ this.R
/** @type {RealUnitEntity} */ this.G
@@ -87,8 +89,13 @@ export default class LinearColorEntity extends IEntity {
this.V.value = max
}
/** @param {Number[]} param0 */
setFromRGBA([r, g, b, a = 1]) {
/**
* @param {Number} r
* @param {Number} g
* @param {Number} b
* @param {Number} a
*/
setFromRGBA(r, g, b, a = 1) {
this.R.value = r
this.G.value = g
this.B.value = b
@@ -157,22 +164,14 @@ export default class LinearColorEntity extends IEntity {
}
toHSVA() {
const r = this.R.value
const g = this.G.value
const b = this.B.value
const a = this.A.value
const max = Math.max(r, g, b)
const min = Math.min(r, g, b)
const d = max - min
const s = (max == 0 ? 0 : d / max)
const v = max
return [this.H.value, s, v, a]
return [this.H.value, this.S.value, this.V.value, this.A.value]
}
toNumber() {
return (this.R.value << 24) + (this.G.value << 16) + (this.B.value << 8) + this.A.value
}
/** @param {Number} number */
setFromRGBANumber(number) {
this.A.value = (number & 0xFF) / 0xff
this.B.value = ((number >> 8) & 0xFF) / 0xff
@@ -181,6 +180,7 @@ export default class LinearColorEntity extends IEntity {
this.#updateHSV()
}
/** @param {Number} number */
setFromSRGBANumber(number) {
this.A.value = (number & 0xFF) / 0xff
this.B.value = LinearColorEntity.sRGBtoLinear(((number >> 8) & 0xFF) / 0xff)

8
js/template/ColorPickerWindowTemplate.js
View File

@@ -159,25 +159,25 @@ export default class ColorPickerWindowTemplate extends WindowTemplate {
this.#rSlider.template.locationChangeCallback =
/** @param {Number} x in the range [0, 1] */
(x, y) => {
this.color.setFromRGBA([x, this.color.G.value, this.color.B.value, this.color.A.value])
this.color.setFromRGBA(x, this.color.G.value, this.color.B.value, this.color.A.value)
this.element.requestUpdate()
}
this.#gSlider.template.locationChangeCallback =
/** @param {Number} x in the range [0, 1] */
(x, y) => {
this.color.setFromRGBA([this.color.R.value, x, this.color.B.value, this.color.A.value])
this.color.setFromRGBA(this.color.R.value, x, this.color.B.value, this.color.A.value)
this.element.requestUpdate()
}
this.#bSlider.template.locationChangeCallback =
/** @param {Number} x in the range [0, 1] */
(x, y) => {
this.color.setFromRGBA([this.color.R.value, this.color.G.value, x, this.color.A.value])
this.color.setFromRGBA(this.color.R.value, this.color.G.value, x, this.color.A.value)
this.element.requestUpdate()
}
this.#aSlider.template.locationChangeCallback =
/** @param {Number} x in the range [0, 1] */
(x, y) => {
this.color.setFromRGBA([this.color.R.value, this.color.G.value, this.color.B.value, x])
this.color.setFromRGBA(this.color.R.value, this.color.G.value, this.color.B.value, x)
this.element.requestUpdate()
}
this.#hSlider.template.locationChangeCallback =

2
js/template/IInputPinTemplate.js
View File

@@ -44,7 +44,6 @@ export default class IInputPinTemplate extends PinTemplate {
super.firstUpdated(changedProperties)
this.#inputContentElements = /** @type {HTMLElement[]} */([...this.element.querySelectorAll("ueb-input")])
if (this.#inputContentElements.length) {
this.setInputs(this.getInputs(), false)
this.#inputContentElements.forEach(element => {
element.addEventListener("focusout", this.#onFocusOutHandler)
})
@@ -86,6 +85,7 @@ export default class IInputPinTemplate extends PinTemplate {
if (updateDefaultValue) {
this.setDefaultValue(values.map(v => IInputPinTemplate.stringFromInputToUE(v)), values)
}
this.element.addNextUpdatedCallbacks(() => this.element.nodeElement.dispatchReflowEvent())
}
setDefaultValue(values = [], rawValues = values) {

14
js/template/LinearColorPinTemplate.js
View File

@@ -1,7 +1,7 @@
import { html } from "lit"
import ColorPickerWindowTemplate from "./ColorPickerWindowTemplate"
import Configuration from "../Configuration"
import IInputPinTemplate from "./IInputPinTemplate"
import PinTemplate from "./PinTemplate"
import WindowElement from "../element/WindowElement"
/**
@@ -9,8 +9,8 @@ import WindowElement from "../element/WindowElement"
* @typedef {import("../entity/LinearColorEntity").default} LinearColorEntity
*/
/** @extends IInputPinTemplate<LinearColorEntity> */
export default class LinearColorPinTemplate extends IInputPinTemplate {
/** @extends PinTemplate<LinearColorEntity> */
export default class LinearColorPinTemplate extends PinTemplate {
/** @type {HTMLInputElement} */
#input
@@ -52,14 +52,6 @@ export default class LinearColorPinTemplate extends IInputPinTemplate {
this.#input = this.element.querySelector(".ueb-pin-input")
}
getInputs() {
return [this.#input.dataset.linearColor]
}
/** @param {String[]} value */
setInputs(value = []) {
}
renderInput() {
if (this.element.isInput() && !this.element.isLinked) {
return html`