diff --git a/browser.js b/browser.js index 14efa7b..ad00046 100644 --- a/browser.js +++ b/browser.js @@ -46,24 +46,28 @@ project.create(teeScene); { - const mainInput = new Branch('mainInput', 'window'); - mainInput.dataset.set('title', 'Main Input'); - mainScene.create(mainInput) + const windowPostMessage = new Branch('windowPostMessage', 'window'); + windowPostMessage.dataset.set('title', 'Window API: postMessage'); + windowPostMessage.dataset.set('left', 100); + windowPostMessage.dataset.set('top', 300); + mainScene.create(windowPostMessage) const uppercaseInput = new Branch('uppercaseInput', 'window'); uppercaseInput.dataset.set('title', 'Transducer'); - uppercaseInput.dataset.set('left', 300); + uppercaseInput.dataset.set('reference', 'upper'); + uppercaseInput.dataset.set('left', 400); uppercaseInput.dataset.set('top', 300); + uppercaseInput.dataset.set('note', 'Edit me! click the yellow icon ^'); mainScene.create(uppercaseInput) const uppercaseOutput = new Branch('uppercaseOutput', 'window'); uppercaseOutput.dataset.set('title', 'Output Branch'); - uppercaseOutput.dataset.set('left', 600); - uppercaseOutput.dataset.set('top', 600); + uppercaseOutput.dataset.set('left', 700); + uppercaseOutput.dataset.set('top', 300); mainScene.create(uppercaseOutput) const pipe1 = new Branch('pipe1', 'pipe'); - pipe1.dataset.set('from', 'mainInput:out'); + pipe1.dataset.set('from', 'windowPostMessage:out'); pipe1.dataset.set('to', 'uppercaseInput:in'); mainScene.create(pipe1); @@ -76,39 +80,44 @@ project.create(teeScene); { - const mainInput = new Branch('mainInput', 'window'); - mainInput.dataset.set('title', 'Main Input 1'); - mainInput.dataset.set('top', 100); - - upperScene.create(mainInput) - - const mainInput2 = new Branch('mainInput2', 'window'); - mainInput2.dataset.set('title', 'Main Input 2'); - mainInput2.dataset.set('top', 300); - - upperScene.create(mainInput2) + const secondaryStream = new Branch('secondaryStream', 'window'); + secondaryStream.dataset.set('title', 'Secondary Stream'); + secondaryStream.dataset.set('incoming', true); + secondaryStream.dataset.set('left', 150); + secondaryStream.dataset.set('top', 100); + upperScene.create(secondaryStream) + + const auxiliaryStream = new Branch('auxiliaryStream', 'window'); + auxiliaryStream.dataset.set('title', 'Auxiliary Stream'); + auxiliaryStream.dataset.set('incoming', true); + auxiliaryStream.dataset.set('left', 150); + auxiliaryStream.dataset.set('top', 500); + upperScene.create(auxiliaryStream) const uppercaseInput1 = new Branch('uppercaseInput', 'window'); uppercaseInput1.dataset.set('title', 'Transducer2'); - uppercaseInput1.dataset.set('left', 300); + uppercaseInput1.dataset.set('reference', 'tee'); + uppercaseInput1.dataset.set('left', 400); uppercaseInput1.dataset.set('top', 300); + uppercaseInput1.dataset.set('note', 'Edit me too!!!'); + upperScene.create(uppercaseInput1) const uppercaseOutput = new Branch('uppercaseOutput', 'window'); - uppercaseOutput.dataset.set('title', 'Output Branch2'); - uppercaseOutput.dataset.set('left', 600); - uppercaseOutput.dataset.set('top', 600); + uppercaseOutput.dataset.set('title', 'Output'); + uppercaseOutput.dataset.set('left', 700); + uppercaseOutput.dataset.set('top', 300); upperScene.create(uppercaseOutput) const pipe0 = new Branch('pipe0', 'pipe'); - pipe0.dataset.set('from', 'mainInput2:out'); + pipe0.dataset.set('from', 'secondaryStream:out'); pipe0.dataset.set('to', 'uppercaseInput:in'); upperScene.create(pipe0); const pipe1 = new Branch('pipe1', 'pipe'); - pipe1.dataset.set('from', 'mainInput:out'); + pipe1.dataset.set('from', 'auxiliaryStream:out'); pipe1.dataset.set('to', 'uppercaseInput:in'); upperScene.create(pipe1); @@ -122,6 +131,27 @@ project.create(teeScene); +{ + const secondaryStream = new Branch('secondaryStream', 'window'); + secondaryStream.dataset.set('title', 'Secondary Stream'); + secondaryStream.dataset.set('incoming', true); + secondaryStream.dataset.set('left', 150); + secondaryStream.dataset.set('top', 300); + teeScene.create(secondaryStream) + + const uppercaseOutput = new Branch('uppercaseOutput', 'window'); + uppercaseOutput.dataset.set('title', 'Output'); + uppercaseOutput.dataset.set('left', 700); + uppercaseOutput.dataset.set('top', 300); + teeScene.create(uppercaseOutput) + + const pipe0 = new Branch('pipe0', 'pipe'); + pipe0.dataset.set('from', 'secondaryStream:out'); + pipe0.dataset.set('to', 'uppercaseOutput:in'); + teeScene.create(pipe0); + +} + diff --git a/components/prompt/Prompt.js b/components/prompt/Prompt.js index 2953ce7..8ab0683 100644 --- a/components/prompt/Prompt.js +++ b/components/prompt/Prompt.js @@ -51,7 +51,7 @@ export default class Prompt extends HTMLElement { const container = lol.div({ class: 'prompt' }); container.innerHTML = ` - + `; this.appendChild(container); diff --git a/components/toolbar/Toolbar.js b/components/toolbar/Toolbar.js index fb1485d..f711c23 100644 --- a/components/toolbar/Toolbar.js +++ b/components/toolbar/Toolbar.js @@ -26,33 +26,32 @@ export default class Console extends HTMLElement {
- - - - + + + +
- - - - + + + +
- - - + + + - - - + + +
- - +
@@ -71,10 +70,23 @@ export default class Console extends HTMLElement { const application = transcend(this, `x-application`); if(!application) throw new Error('Unable to locate applicaion!') - this.container.querySelector('[name=debug]').addEventListener("click", function (e) { - application.project.commander.sceneSelect({id:'upper'}); + const mainSceneButton = this.container.querySelector('[name="main-scene"]'); + + mainSceneButton.addEventListener("click", function (e) { + application.project.commander.sceneSelect({id:'main'}); }); + application.project.activeScene.subscribe(activeScene=>{ + if(activeScene==='main'){ + mainSceneButton.classList.remove(...Array.from(mainSceneButton.classList).filter(className => className.startsWith('btn-outline-')) ) + mainSceneButton.classList.add('btn-outline-secondary'); + mainSceneButton.disabled = true; + }else{ + mainSceneButton.classList.remove(...Array.from(mainSceneButton.classList).filter(className => className.startsWith('btn-outline-')) ) + mainSceneButton.classList.add('btn-outline-success'); + mainSceneButton.disabled = false; + } + }) this.status.value = 'ready'; } diff --git a/components/window/Window.js b/components/window/Window.js index 2faa764..979b036 100644 --- a/components/window/Window.js +++ b/components/window/Window.js @@ -1,8 +1,10 @@ import Signal from 'signal'; import Dataset from 'dataset'; -import Movable from './Movable.js'; +import lol from 'lol'; +import transcend from 'transcend'; +import Movable from './Movable.js'; export default class Window extends HTMLElement { @@ -12,14 +14,20 @@ export default class Window extends HTMLElement { // establish prototype chain super(); this.status = new Signal('loading'); - this.sizeSignal = new Signal([0,0]); - this.dataset2 = new Dataset(); - - - // events: { + // #elements: { + // SELECTOR | el.GETTER ???? + // "dblclick" : "open", + // "click .icon.doc" : "select", + // "contextmenu .icon.doc" : "showMenu", + // "click .show_notes" : "toggleNotes", + // "click .title .lock" : "editAccessLevel", + // "mouseover .title .date" : "showTooltip" + // }, + // + // #events: { // "dblclick" : "open", // "click .icon.doc" : "select", // "contextmenu .icon.doc" : "showMenu", @@ -27,7 +35,6 @@ export default class Window extends HTMLElement { // "click .title .lock" : "editAccessLevel", // "mouseover .title .date" : "showTooltip" // }, - @@ -37,13 +44,16 @@ export default class Window extends HTMLElement { const shadow = this.attachShadow({ mode: 'open' }); shadow.adoptedStyleSheets = document.adoptedStyleSheets; - // creating a container for the editable-list component - const cardNode = document.createElement('div'); - // get attribute values from getters - const title = this.title; - const addItemText = this.addItemText; - const listItems = this.items; + } + + connectedCallback() { + + const application = transcend(this, `x-application`); + if(!application) throw new Error('Unable to locate applicaion!') + + // creating a container for the editable-list component + const cardNode = document.createElement('div'); // adding a class to our container for the sake of clarity cardNode.classList.add('card', 'text-center', 'm-4', 'shadow', 'position-absolute'); @@ -51,6 +61,7 @@ export default class Window extends HTMLElement { // creating the inner HTML of the editable list element cardNode.innerHTML = `
+
-
+
`; - // TODO: Add mouse services!!!!! - console.warn('ADD MOUSE SERVICES HERE!!!'); - // binding methods - // this.addListItem = this.addListItem.bind(this); - // this.handleRemoveItemListeners = this.handleRemoveItemListeners.bind(this); - // this.removeListItem = this.removeListItem.bind(this); - // appending the container to the shadow DOM - shadow.appendChild(cardNode); + this.shadowRoot.appendChild(cardNode); // NOTE: UPDATE VALUES HERE (hide/show should take place here as well) // TIP: treat the html as non-dynamic, this is not a generic template engine, it is oprimized ofr VPL UI - const cardHeader = shadow.querySelector('.card-header'); - const cardFooter = shadow.querySelector('.card-footer'); + const cardHeader = this.shadowRoot.querySelector('.card-header'); + const cardFooter = this.shadowRoot.querySelector('.card-footer'); + const listGroup = this.shadowRoot.querySelector('.list-group'); + const cardTitle = this.shadowRoot.querySelector('.card-header .card-title'); this.dataset2.get('date').subscribe(v => cardFooter.textContent = v); - this.dataset2.get('title').subscribe(v => cardHeader.innerHTML = `${v} `); + this.dataset2.get('title').subscribe(v => cardTitle.textContent = v); + this.dataset2.get('note').subscribe(v => cardFooter.textContent = v); + + this.dataset2.get('reference').subscribe(reference => { + + // Create Button + if(reference) cardHeader.appendChild(lol.i({ class:'bi bi-pencil-square text-warning float-end cursor-pointer', on:{ click:()=> application.project.commander.sceneSelect({id:this.dataset2.get('reference').value}) }})) + + const referencedScene = application.project.get(reference); + for( const element of referencedScene.children.filter(child=>child.dataset.get('incoming').value ) ){ + console.log(element); + + const portNode = lol['x-port']({ id: `port-${element.id}`, dataset:{title:element.dataset.get('title').value, side: 'start', icon: 'box-arrow-in-right'} }); + const listItem = lol.li({class:'list-group-item'}, portNode); + listGroup.appendChild(listItem) + } + + }); this.dataset2.get('left').subscribe(v => cardNode.style.left = v + 'px'); this.dataset2.get('top').subscribe(v => cardNode.style.top = v + 'px'); @@ -93,10 +115,6 @@ export default class Window extends HTMLElement { // const cardIO = shadow.querySelector('.list-group-item:first'); - } - - connectedCallback() { - const movable = new Movable(this); this.gc = movable.start();