qol, performance, bugs

This commit is contained in:
jusax23 2022-12-11 21:40:14 +01:00
parent 9c2af40b36
commit 90ea9df537

38
main.js
View file

@ -101,6 +101,10 @@ export class Stear {
return await elem.call(this, args, this.#frames, layer); return await elem.call(this, args, this.#frames, layer);
} }
async callInParent(elem, args, layer, renderParent = this.elem) {
return await elem.call(this, args, this.#frames, layer, renderParent);
}
/** /**
* Render an Element in annother Element. * Render an Element in annother Element.
* *
@ -256,7 +260,8 @@ ${Object.entries(json).map(d => " " + toCssAttr(d[0]) + ": " + d[1] + ";").jo
* @async * @async
* @callback utilsCallCallback * @callback utilsCallCallback
* @param {SFrame} elem * @param {SFrame} elem
* @param {*} args * @param {*} [args={}]
* @param {boolean} [global=true]
* @return {callPromise} * @return {callPromise}
*/ */
@ -368,13 +373,17 @@ export class SFrame {
async function render(args) { async function render(args) {
if (!renderElem) return; if (!renderElem) return;
if (lastRender) if ([...(renderParent.children)].includes(lastRender._)) renderParent.removeChild(lastRender._); //if (lastRender) if ([...(renderParent.children)].includes(lastRender._)) renderParent.removeChild(lastRender._);
let now = renderElem; let now = renderElem;
if (typeof now == "function") now = await now(); if (typeof now == "function") {
if (lastRender) if ([...(renderParent.children)].includes(lastRender._)) renderParent.removeChild(lastRender._);
now = await now();
}
if (!(now instanceof class_)) throw new Error("The Element to render is not an instance of class_"); if (!(now instanceof class_)) throw new Error("The Element to render is not an instance of class_");
await now.build(args); await now.build(args);
renderParent.appendChild(now.render); now.render
if (!lastRender || ![...(renderParent.children)].includes(lastRender._)) renderParent.appendChild(now._);
lastRender = now; lastRender = now;
now._.style.zIndex = layer; now._.style.zIndex = layer;
@ -411,8 +420,9 @@ export class SFrame {
if (i > -1) frames.splice(i, 1); if (i > -1) frames.splice(i, 1);
res(r); res(r);
}, },
call: (elem, args = {}) => { call: (elem, args = {}, global = true) => {
return stear.call(elem, args, layer + 1); if (global) return stear.call(elem, args, layer + 1);
else return stear.callInParent(elem, args, layer + 1, renderParent);
}, },
close: async () => { close: async () => {
await event.onclose(); await event.onclose();
@ -504,6 +514,8 @@ export class class_ {
#dynamicState = 0; #dynamicState = 0;
#dynamicStyle = {};
/** /**
* Generate a new Stear render Node. * Generate a new Stear render Node.
* *
@ -519,7 +531,8 @@ export class class_ {
const key = keys[i]; const key = keys[i];
if (key == "type") { } else if (key == "style") { if (key == "type") { } else if (key == "style") {
Object.entries(settings[key]).forEach(([k, d]) => { Object.entries(settings[key]).forEach(([k, d]) => {
this.#elem.style[k] = d; if (typeof d == "function") this.#dynamicStyle[k] = d;
else this.#elem.style[k] = d;
}); });
} else if (key == "find") { } else if (key == "find") {
this.#find = settings[key]; this.#find = settings[key];
@ -566,6 +579,12 @@ export class class_ {
} }
} }
async updateDynamicStyle(args) {
for (const key in this.#dynamicStyle) {
this.#elem.style[key] = await this.#dynamicStyle[key](args);
}
}
async #syncBuild(args) { async #syncBuild(args) {
for (let i = 0; i < this.#childs.length; i++) { for (let i = 0; i < this.#childs.length; i++) {
let elem = this.#childs[i]; let elem = this.#childs[i];
@ -587,6 +606,7 @@ export class class_ {
*/ */
async build(args) { async build(args) {
if (!this.#doBuild) return; if (!this.#doBuild) return;
this.updateDynamicStyle(args);
if (this.#dynamicState < 0) return void await this.#syncBuild(args); if (this.#dynamicState < 0) return void await this.#syncBuild(args);
this.#build = []; this.#build = [];
for (let i = 0; i < this.#childs.length; i++) { for (let i = 0; i < this.#childs.length; i++) {
@ -632,6 +652,7 @@ export class class_ {
return this.#elem; return this.#elem;
} }
let out = []; let out = [];
let needReplace = false;
for (let i = 0; i < this.#build.length; i++) { for (let i = 0; i < this.#build.length; i++) {
const elem = this.#build[i]; const elem = this.#build[i];
if (typeof elem == "string" || elem instanceof LanguagePoolString) { if (typeof elem == "string" || elem instanceof LanguagePoolString) {
@ -639,8 +660,9 @@ export class class_ {
} else { } else {
out[i] = elem.render; out[i] = elem.render;
} }
if (!needReplace &&this.#elem.children[i] != out[i]) needReplace = true;
} }
this.#elem.replaceChildren(...out); if (needReplace) this.#elem.replaceChildren(...out);
if (this.#dynamicState < 0) this.#dynamicState = -2; if (this.#dynamicState < 0) this.#dynamicState = -2;
return this.#elem; return this.#elem;
} }