From b559f767ebc3724ca94ad27d005524b649b6cacf Mon Sep 17 00:00:00 2001 From: Fabio Pliger Date: Wed, 13 Apr 2022 12:17:48 -0500 Subject: [PATCH 1/5] first stab ad pybox --- pyscriptjs/examples/repl2.html | 8 +--- pyscriptjs/src/components/pybox.ts | 68 ++++++++++++++++++++++++++++++ pyscriptjs/src/main.ts | 4 +- 3 files changed, 73 insertions(+), 7 deletions(-) create mode 100644 pyscriptjs/src/components/pybox.ts diff --git a/pyscriptjs/examples/repl2.html b/pyscriptjs/examples/repl2.html index 38ca506b..e43cc349 100644 --- a/pyscriptjs/examples/repl2.html +++ b/pyscriptjs/examples/repl2.html @@ -20,13 +20,9 @@ -
-
+
-
-
- - + diff --git a/pyscriptjs/src/components/pybox.ts b/pyscriptjs/src/components/pybox.ts new file mode 100644 index 00000000..5db92e2b --- /dev/null +++ b/pyscriptjs/src/components/pybox.ts @@ -0,0 +1,68 @@ +import { addClasses } from '../utils'; + +// Premise used to connect to the first available pyodide interpreter +// let pyodideReadyPromise; +// let environments; +// let currentMode; + +// pyodideLoaded.subscribe(value => { +// pyodideReadyPromise = value; +// }); +// loadedEnvironments.subscribe(value => { +// environments = value; +// }); + +// let propertiesNavOpen; +// componentDetailsNavOpen.subscribe(value => { +// propertiesNavOpen = value; +// }); + +// mode.subscribe(value => { +// currentMode = value; +// }); + + +export class PyBox extends HTMLElement { + shadow: ShadowRoot; + wrapper: HTMLElement; + theme: string; + widths: Array; + // editorState: EditorState; + + constructor() { + super(); + + // attach shadow so we can preserve the element original innerHtml content + this.shadow = this.attachShadow({ mode: 'open'}); + + this.wrapper = document.createElement('slot'); + this.shadow.appendChild(this.wrapper); + } + + + connectedCallback() { + this.innerHTML = ''; + + let mainDiv = document.createElement('div'); + addClasses(mainDiv, ["flex"]) + // add Editor to main PyScript div + debugger + // mainDiv.appendChild(eDiv); + // mainDiv.appendChild(this.editorNode); + + if (!this.id){ + console.log("WARNING: define with an id. should always have an id. More than one on a page won't work otherwise!") + } + + if (!this.hasAttribute('widths')) { + this.setAttribute("exec-id", "1"); + } + + + this.appendChild(mainDiv); + + console.log('connected'); + } + } + + \ No newline at end of file diff --git a/pyscriptjs/src/main.ts b/pyscriptjs/src/main.ts index c0853dac..bd4f69d6 100644 --- a/pyscriptjs/src/main.ts +++ b/pyscriptjs/src/main.ts @@ -2,12 +2,14 @@ import App from "./App.svelte"; import { PyScript } from "./components/pyscript"; import { PyRepl } from "./components/pyrepl"; -import { PyEnv } from "./components/pyenv" +import { PyEnv } from "./components/pyenv"; +import { PyBox } from "./components/pybox"; let xPyScript = customElements.define('py-script', PyScript); let xPyRepl = customElements.define('py-repl', PyRepl); let xPyEnv = customElements.define('py-env', PyEnv); +let xPyBox = customElements.define('py-box', PyBox); const app = new App({ From 2059df3ecd9a5c9105e146dc1b8b63225c495962 Mon Sep 17 00:00:00 2001 From: Fabio Pliger Date: Wed, 13 Apr 2022 14:46:44 -0500 Subject: [PATCH 2/5] make pybox with accepting widths attribute to customize box children ration on the page --- pyscriptjs/src/components/pybox.ts | 78 ++++++++++++++++-------------- 1 file changed, 41 insertions(+), 37 deletions(-) diff --git a/pyscriptjs/src/components/pybox.ts b/pyscriptjs/src/components/pybox.ts index 5db92e2b..b544227b 100644 --- a/pyscriptjs/src/components/pybox.ts +++ b/pyscriptjs/src/components/pybox.ts @@ -1,27 +1,5 @@ import { addClasses } from '../utils'; -// Premise used to connect to the first available pyodide interpreter -// let pyodideReadyPromise; -// let environments; -// let currentMode; - -// pyodideLoaded.subscribe(value => { -// pyodideReadyPromise = value; -// }); -// loadedEnvironments.subscribe(value => { -// environments = value; -// }); - -// let propertiesNavOpen; -// componentDetailsNavOpen.subscribe(value => { -// propertiesNavOpen = value; -// }); - -// mode.subscribe(value => { -// currentMode = value; -// }); - - export class PyBox extends HTMLElement { shadow: ShadowRoot; wrapper: HTMLElement; @@ -41,27 +19,53 @@ export class PyBox extends HTMLElement { connectedCallback() { - this.innerHTML = ''; - let mainDiv = document.createElement('div'); addClasses(mainDiv, ["flex"]) - // add Editor to main PyScript div - debugger - // mainDiv.appendChild(eDiv); - // mainDiv.appendChild(this.editorNode); - - if (!this.id){ - console.log("WARNING: define with an id. should always have an id. More than one on a page won't work otherwise!") + // mainDiv.append(...this.childNodes); + + // Ugly hack: for some reason when moving children, the editor box duplicates children + // meaning that we end up with 2 editors, if there's a inside the + // so, if we have more than 2 children with the cm-editor class, we remove one of them + + while (this.childNodes.length > 0) { + console.log(this.firstChild); + if ( this.firstChild.nodeName == "PY-REPL" ){ + // in this case we need to remove the child and craete a new one from scratch + let replDiv = document.createElement('div'); + // we need to put the new repl inside a div so that if the repl has auto-generate true + // it can replicate itself inside that constrained div + replDiv.appendChild(this.firstChild.cloneNode()); + mainDiv.appendChild(replDiv); + this.firstChild.remove(); + } + else{ + if ( this.firstChild.nodeName != "#text" ){ + mainDiv.appendChild(this.firstChild); + }else{ + this.firstChild.remove() + } + } } - if (!this.hasAttribute('widths')) { - this.setAttribute("exec-id", "1"); + // now we need to set widths + this.widths = [] + if (this.hasAttribute('widths')) { + for (let w of this.getAttribute('widths').split(";")) { + this.widths.push(`w-${w}`); + } + }else{ + for (let el of mainDiv.childNodes) { + this.widths.push(`w-1/${mainDiv.childNodes.length}`); + } } - - this.appendChild(mainDiv); - - console.log('connected'); + for (let i in this.widths) { + // @ts-ignore + addClasses(mainDiv.childNodes[parseInt(i)], [this.widths[i]]); + } + + this.appendChild(mainDiv); + console.log('py-box connected'); } } From 63d79840bcac60ffe3a3f0b7ca2f936bac029d77 Mon Sep 17 00:00:00 2001 From: Fabio Pliger Date: Wed, 13 Apr 2022 14:46:53 -0500 Subject: [PATCH 3/5] simplify output --- pyscriptjs/examples/repl2.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/pyscriptjs/examples/repl2.html b/pyscriptjs/examples/repl2.html index e43cc349..53099a20 100644 --- a/pyscriptjs/examples/repl2.html +++ b/pyscriptjs/examples/repl2.html @@ -20,9 +20,9 @@ - -
-
+ + +
From 4b2dc2b57f6105146febb6c2be8b91c61c0dea43 Mon Sep 17 00:00:00 2001 From: Fabio Pliger Date: Wed, 13 Apr 2022 14:47:33 -0500 Subject: [PATCH 4/5] add utils to examples --- pyscriptjs/examples/utils.py | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 pyscriptjs/examples/utils.py diff --git a/pyscriptjs/examples/utils.py b/pyscriptjs/examples/utils.py new file mode 100644 index 00000000..2a48a4fe --- /dev/null +++ b/pyscriptjs/examples/utils.py @@ -0,0 +1,13 @@ +from datetime import datetime as dt + +def format_date(dt_, fmt = "%m/%d/%Y, %H:%M:%S"): + return dt_.strftime(fmt) + +def now(fmt = "%m/%d/%Y, %H:%M:%S"): + return format_date(dt.now(), fmt) + +def remove_class(element, className): + element.element.classList.remove("line-through") + +def add_class(element, className): + element.element.classList.add("line-through") \ No newline at end of file From 68157dd3c2284525da9b6b496cf88b095554ddcc Mon Sep 17 00:00:00 2001 From: Fabio Pliger Date: Wed, 13 Apr 2022 14:53:49 -0500 Subject: [PATCH 5/5] cleanup some leftovers in pybox --- pyscriptjs/src/components/pybox.ts | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/pyscriptjs/src/components/pybox.ts b/pyscriptjs/src/components/pybox.ts index b544227b..43c18533 100644 --- a/pyscriptjs/src/components/pybox.ts +++ b/pyscriptjs/src/components/pybox.ts @@ -5,7 +5,6 @@ export class PyBox extends HTMLElement { wrapper: HTMLElement; theme: string; widths: Array; - // editorState: EditorState; constructor() { super(); @@ -21,12 +20,10 @@ export class PyBox extends HTMLElement { connectedCallback() { let mainDiv = document.createElement('div'); addClasses(mainDiv, ["flex"]) - // mainDiv.append(...this.childNodes); - // Ugly hack: for some reason when moving children, the editor box duplicates children + // Hack: for some reason when moving children, the editor box duplicates children // meaning that we end up with 2 editors, if there's a inside the // so, if we have more than 2 children with the cm-editor class, we remove one of them - while (this.childNodes.length > 0) { console.log(this.firstChild); if ( this.firstChild.nodeName == "PY-REPL" ){ @@ -63,7 +60,7 @@ export class PyBox extends HTMLElement { // @ts-ignore addClasses(mainDiv.childNodes[parseInt(i)], [this.widths[i]]); } - + this.appendChild(mainDiv); console.log('py-box connected'); }