Skip to content

Commit

Permalink
😺😼🙀 Advanced Scene Navigation via Reference Buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@catpea
catpea committed Jan 5, 2025
1 parent 013ea5e commit 844e5ae
Show file tree
Hide file tree
Showing 4 changed files with 133 additions and 73 deletions.
78 changes: 54 additions & 24 deletions browser.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -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);

Expand All @@ -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);

}




Expand Down
2 changes: 1 addition & 1 deletion components/prompt/Prompt.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export default class Prompt extends HTMLElement {

const container = lol.div({ class: 'prompt' });
container.innerHTML = `
<input type="text" class="prompt-control" placeholder=": (buttons/menus are not yet connected but you can drag a window)">
<input type="text" class="prompt-control" placeholder="">
<i class="prompt-send bi bi-send-fill"></i>
`;
this.appendChild(container);
Expand Down
48 changes: 30 additions & 18 deletions components/toolbar/Toolbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,33 +26,32 @@ export default class Console extends HTMLElement {
<div class="position-absolute btn-toolbar vertical" style="left: 0px; top: 0px; z-index: 10;">
<div class="btn-group-vertical mb-2" role="group" aria-label="First group">
<button type="button" class="btn btn-outline-secondary" title="Send Start"><i class="bi bi-play"></i></button>
<button type="button" class="btn btn-outline-secondary" title="Send Start"><i class="bi bi-pause"></i></button>
<button type="button" class="btn btn-outline-secondary" title="Send Stop"><i class="bi bi-stop"></i></button>
<button type="button" class="btn btn-outline-secondary" title="Send Kill"><i class="bi bi-capsule"></i></button>
<button type="button" class="btn btn-outline-secondary opacity-25" title="Send Start"><i class="bi bi-play"></i></button>
<button type="button" class="btn btn-outline-secondary opacity-25" title="Send Start"><i class="bi bi-pause"></i></button>
<button type="button" class="btn btn-outline-secondary opacity-25" title="Send Stop"><i class="bi bi-stop"></i></button>
<button type="button" class="btn btn-outline-secondary opacity-25" title="Send Kill"><i class="bi bi-capsule"></i></button>
</div>
<div class="btn-group-vertical mb-2">
<button type="button" class="btn btn-outline-secondary" title="Clear Stage" data-bs-content="Clear the stage of all actors and begin a new project."><i class="bi bi-eraser"></i></button>
<button type="button" class="btn btn-outline-secondary" title="Open File" data-bs-content="Load data from your computer."><i class="bi bi-folder2-open"></i></button>
<button type="button" class="btn btn-outline-secondary"><i class="bi bi-save"></i></button>
<button type="button" class="btn btn-outline-secondary" title="New Block" data-bs-content="Add a new function to your program."><i class="bi bi-tools"></i></button>
<button type="button" class="btn btn-outline-secondary opacity-25" title="Clear Stage" data-bs-content="Clear the stage of all actors and begin a new project."><i class="bi bi-eraser"></i></button>
<button type="button" class="btn btn-outline-secondary opacity-25" title="Open File" data-bs-content="Load data from your computer."><i class="bi bi-folder2-open"></i></button>
<button type="button" class="btn btn-outline-secondary opacity-25"><i class="bi bi-save"></i></button>
<button type="button" class="btn btn-outline-secondary opacity-25" title="New Block" data-bs-content="Add a new function to your program."><i class="bi bi-tools"></i></button>
</div>
<div class="btn-group-vertical mb-2">
<button type="button" class="btn btn-outline-secondary" title="Generate Code" data-bs-content="Generate a standalone program that does not require sweetpea to run."><i class="bi bi-box-seam"></i></button>
<button type="button" class="btn btn-outline-secondary" title="Save Program" data-bs-content="Save project to your computer."><i class="bi bi-floppy"></i></button>
<button type="button" class="btn btn-outline-secondary" title="Function Creator" data-bs-content="Add a new function to your program."><i class="bi bi-puzzle"></i></button>
<button type="button" class="btn btn-outline-secondary opacity-25" title="Generate Code" data-bs-content="Generate a standalone program that does not require sweetpea to run."><i class="bi bi-box-seam"></i></button>
<button type="button" class="btn btn-outline-secondary opacity-25" title="Save Program" data-bs-content="Save project to your computer."><i class="bi bi-floppy"></i></button>
<button type="button" class="btn btn-outline-secondary opacity-25" title="Function Creator" data-bs-content="Add a new function to your program."><i class="bi bi-puzzle"></i></button>
<button type="button" class="btn btn-outline-secondary"><i class="bi bi-zoom-in"></i></button>
<button type="button" class="btn btn-outline-secondary"><i class="bi bi-zoom-out"></i></button>
<button type="button" class="btn btn-outline-secondary"><i class="bi bi-aspect-ratio"></i></button>
<button type="button" class="btn btn-outline-secondary opacity-25"><i class="bi bi-zoom-in"></i></button>
<button type="button" class="btn btn-outline-secondary opacity-25"><i class="bi bi-zoom-out"></i></button>
<button type="button" class="btn btn-outline-secondary opacity-25"><i class="bi bi-aspect-ratio"></i></button>
</div>
<div class="btn-group-vertical mb-2">
<button name="debug" type="button" class="btn btn-outline-secondary"><i class="bi bi-bug"></i></button>
<button name="main-scene" type="button" class="btn btn-outline-secondary" title="Switch to main scene"><i class="bi bi-arrow-return-left"></i></button>
</div>
Expand All @@ -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';
}

Expand Down
78 changes: 48 additions & 30 deletions components/window/Window.js
View file
Original file line number Diff line number Diff line change
@@ -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 {

Expand All @@ -12,22 +14,27 @@ 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",
// "click .show_notes" : "toggleNotes",
// "click .title .lock" : "editAccessLevel",
// "mouseover .title .date" : "showTooltip"
// },




Expand All @@ -37,54 +44,69 @@ 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');

// creating the inner HTML of the editable list element
cardNode.innerHTML = `
<div class="card-header cursor-default user-select-none">
<span class="card-title"></span>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<x-port id="port-in" data-title="In" data-side="start" data-icon="circle"></x-port>
<x-port id="port-out" data-title="Out" data-side="end" data-icon="circle"></x-port>
</li>
<li class="list-group-item">A second item</li>
</ul>
<div class="card-footer text-body-secondary">
<div class="card-footer text-body-secondary" style="font-size: .75rem">
</div>
`;


// 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} <i class="bi bi-menu-up cursor-pointer"></i>`);
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');
Expand All @@ -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();
Expand Down

0 comments on commit 844e5ae

Please sign in to comment.