Skip to content

Commit

Permalink
🐛 Scene Travelsal Support
Browse files Browse the repository at this point in the history
  • Loading branch information
@catpea
catpea committed Jan 5, 2025
1 parent 50a41ee commit 013ea5e
Show file tree
Hide file tree
Showing 11 changed files with 336 additions and 139 deletions.
235 changes: 156 additions & 79 deletions browser.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,17 @@ import Signal from 'signal';
import Branch from 'branch';
import Commander from 'commander';

console.log('------------------------------SYSTEM START!------------------------------')

class Project extends Branch {
commander;

active = new Signal('main');
activeScene = new Signal('main');

constructor(...a) {
super(...a)
this.commander = new Commander(this);
}
get activeScene() {
return this.get( this.active.value);
}

}

class Scene extends Branch {
Expand All @@ -26,118 +25,196 @@ const project = new Project('project');

import UI from './src/UI.js';
const ui = new UI(project);
await ui.start();



const mainScene = new Scene('main');
mainScene.onStart = async () => console.log('ASYNC START GRRR')
mainScene.once('stop', ()=>console.log('Main scene Branch got stoppppp...'))

const uppercaseScene = new Scene('uppercase');
mainScene.once('stop', () => {
console.log('Main scene Branch got stoppppp...')
});

const upperScene = new Scene('upper');
const teeScene = new Scene('tee');

project.create(mainScene);
project.create(uppercaseScene);
project.create(upperScene);
project.create(teeScene);




{
const mainInput = new Branch('mainInput', 'window');
mainInput.dataset.set('title', 'Main Input');
mainScene.create(mainInput)

const uppercaseInput = new Branch('uppercaseInput', 'window');
uppercaseInput.dataset.set('title', 'Transducer');
uppercaseInput.dataset.set('left', 300);
uppercaseInput.dataset.set('top', 300);
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);
mainScene.create(uppercaseOutput)

const pipe1 = new Branch('pipe1', 'pipe');
pipe1.dataset.set('from', 'mainInput:out');
pipe1.dataset.set('to', 'uppercaseInput:in');
mainScene.create(pipe1);

const pipe2 = new Branch('pipe2', 'pipe');
pipe2.dataset.set('from', 'uppercaseInput:out');
pipe2.dataset.set('to', 'uppercaseOutput:in');
mainScene.create(pipe2);
}


const mainInput = new Branch('mainInput', 'window');
mainInput.dataset.set('title', 'Main Input');
mainScene.create(mainInput)

const uppercaseInput = new Branch('uppercaseInput', 'window');
uppercaseInput.dataset.set('title', 'Transducer');
uppercaseInput.dataset.set('left', 300);
uppercaseInput.dataset.set('top', 300);
mainScene.create(uppercaseInput)
{
const mainInput = new Branch('mainInput', 'window');
mainInput.dataset.set('title', 'Main Input 1');
mainInput.dataset.set('top', 100);

let isIdle = true;
let lastMoveTime = Date.now() -10000;
let idleTimeout = 5000; // Time in milliseconds to consider as idle (5 seconds in this case)
upperScene.create(mainInput)

function checkMouseIdle() {
const currentTime = Date.now();
if (currentTime - lastMoveTime >= idleTimeout) {
console.log("Mouse is idle");
isIdle = true;
} else {
console.log("Mouse is active");
isIdle = false;
}
}
const mainInput2 = new Branch('mainInput2', 'window');
mainInput2.dataset.set('title', 'Main Input 2');
mainInput2.dataset.set('top', 300);

// Listen for mousemove event to track activity
document.addEventListener("mousemove", () => {
lastMoveTime = Date.now();
});
upperScene.create(mainInput2)

// Periodically check if the mouse is idle (you can adjust the interval as needed)
setInterval(checkMouseIdle, 100); // Check every 1 second
const uppercaseInput1 = new Branch('uppercaseInput', 'window');
uppercaseInput1.dataset.set('title', 'Transducer2');
uppercaseInput1.dataset.set('left', 300);
uppercaseInput1.dataset.set('top', 300);
upperScene.create(uppercaseInput1)


function getMinuteHandCoordinates(angleDegrees) {

const uppercaseOutput = new Branch('uppercaseOutput', 'window');
uppercaseOutput.dataset.set('title', 'Output Branch2');
uppercaseOutput.dataset.set('left', 600);
uppercaseOutput.dataset.set('top', 600);
upperScene.create(uppercaseOutput)

// Convert the angle to radians
const angleRadians = angleDegrees * (Math.PI / 180);
const pipe0 = new Branch('pipe0', 'pipe');
pipe0.dataset.set('from', 'mainInput2:out');
pipe0.dataset.set('to', 'uppercaseInput:in');
upperScene.create(pipe0);

// Calculate the x and y coordinates
const x = Math.cos(angleRadians);
const y = Math.sin(angleRadians);
const pipe1 = new Branch('pipe1', 'pipe');
pipe1.dataset.set('from', 'mainInput:out');
pipe1.dataset.set('to', 'uppercaseInput:in');
upperScene.create(pipe1);

return [ x, y ];
const pipe2 = new Branch('pipe2', 'pipe');
pipe2.dataset.set('from', 'uppercaseInput:out');
pipe2.dataset.set('to', 'uppercaseOutput:in');
upperScene.create(pipe2);
}

const uppercaseOutput = new Branch('uppercaseOutput', 'window');
uppercaseOutput.dataset.set('title', 'Output Branch');
uppercaseOutput.dataset.set('left', 600);
uppercaseOutput.dataset.set('top', 600);

let angleDegrees = 0;
setInterval(() => {
if (!isIdle) {

return;
}
mainInput.dataset.set('left', 100 + (55 * getMinuteHandCoordinates(angleDegrees)[1]));
uppercaseInput.dataset.set('left', 333 + (11 * getMinuteHandCoordinates(angleDegrees)[1]));
uppercaseOutput.dataset.set('left', 666 + (22 * getMinuteHandCoordinates(angleDegrees)[0]));
mainInput.dataset.set('width', 320 + (55 * getMinuteHandCoordinates(angleDegrees)[0]));
uppercaseInput.dataset.set('width', 420 + (22 * getMinuteHandCoordinates(angleDegrees)[1]));
uppercaseOutput.dataset.set('width', 300 + (11 * getMinuteHandCoordinates(angleDegrees)[0]));
angleDegrees += 1;
if (angleDegrees > 360) angleDegrees = 0;
}, 1_000/60)

mainScene.create(uppercaseOutput)

const pipe1 = new Branch('pipe1', 'pipe');
pipe1.dataset.set('from', 'mainInput:out');
pipe1.dataset.set('to', 'uppercaseInput:in');
mainScene.create(pipe1);

const pipe2 = new Branch('pipe2', 'pipe');
pipe2.dataset.set('from', 'uppercaseInput:out');
pipe2.dataset.set('to', 'uppercaseOutput:in');
mainScene.create(pipe2);

setInterval(() => {
mainInput.dataset.set('date', (new Date()).toISOString());
}, 1_000);









// let isIdle = true;
// let lastMoveTime = Date.now() -10000;
// let idleTimeout = 5000; // Time in milliseconds to consider as idle (5 seconds in this case)

// function checkMouseIdle() {
// const currentTime = Date.now();
// if (currentTime - lastMoveTime >= idleTimeout) {
// console.log("Mouse is idle");
// isIdle = true;
// } else {
// console.log("Mouse is active");
// isIdle = false;
// }
// }

// // Listen for mousemove event to track activity
// document.addEventListener("mousemove", () => {
// lastMoveTime = Date.now();
// });

// // Periodically check if the mouse is idle (you can adjust the interval as needed)
// setInterval(checkMouseIdle, 100); // Check every 1 second




// function getMinuteHandCoordinates(angleDegrees) {


// // Convert the angle to radians
// const angleRadians = angleDegrees * (Math.PI / 180);

// // Calculate the x and y coordinates
// const x = Math.cos(angleRadians);
// const y = Math.sin(angleRadians);

// return [ x, y ];
// }



// let angleDegrees = 0;
// setInterval(() => {
// if (!isIdle) {

// return;
// }
// mainInput.dataset.set('left', 100 + (55 * getMinuteHandCoordinates(angleDegrees)[1]));
// uppercaseInput.dataset.set('left', 333 + (11 * getMinuteHandCoordinates(angleDegrees)[1]));
// uppercaseOutput.dataset.set('left', 666 + (22 * getMinuteHandCoordinates(angleDegrees)[0]));
// mainInput.dataset.set('width', 320 + (55 * getMinuteHandCoordinates(angleDegrees)[0]));
// uppercaseInput.dataset.set('width', 420 + (22 * getMinuteHandCoordinates(angleDegrees)[1]));
// uppercaseOutput.dataset.set('width', 300 + (11 * getMinuteHandCoordinates(angleDegrees)[0]));
// angleDegrees += 1;
// if (angleDegrees > 360) angleDegrees = 0;
// }, 1_000/60)

















// setInterval(() => {
// mainInput.dataset.set('date', (new Date()).toISOString());
// }, 1_000);

await project.load();
await project.start();

await ui.start(); // WARN: must come after the tree has fully loaded, otherwise the watcher will begin adding nodes, that are yet to be loaded.

console.log(`Startup at ${new Date().toISOString()}`);

window.addEventListener('beforeunload', function(event) {
ui.stop();
project.stop();
console.log('beforeunload was triggered!')
// ui.stop();
// project.stop();
});
23 changes: 6 additions & 17 deletions components/console/Console.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import Signal from 'signal';
import Forms from 'forms';

import lol from 'lol';
import transcend from 'transcend';

export default class Console extends HTMLElement {

Expand Down Expand Up @@ -42,7 +43,7 @@ export default class Console extends HTMLElement {
connectedCallback() {

// const application = this.parentNode.parentNode.host.closest(`x-application`);
const application = this.transcend(`x-application`);
const application = transcend(this, `x-application`);
if(!application) throw new Error('Unable to locate applicaion!')


Expand All @@ -68,6 +69,8 @@ export default class Console extends HTMLElement {


publishExecutedCommand(executedCommandEvent){
const application = transcend(this, `x-application`);
if(!application) throw new Error('Unable to locate applicaion!')

const forms = new Forms({gc: this.gc});

Expand Down Expand Up @@ -102,7 +105,7 @@ export default class Console extends HTMLElement {

commandForm.appendChild(lol.button({class:'btn btn-outline-secondary btn-sm float-end'}, 'Adjust'))

const progressBar = lol.div({ class: 'progress-bar', style: {width: '100%'} },)
const progressBar = lol.div({ class: 'progress-bar opacity-25', style: {width: '100%'} },)
let progressBarWidth = 100;
const progressBarWidthIntervalId = setInterval(() => {
progressBarWidth = progressBarWidth - 1;
Expand All @@ -118,7 +121,7 @@ export default class Console extends HTMLElement {
progressBar.style.display = 'none';
});

commandContainer.appendChild(lol.div({ class: 'progress position-absolute top-100 start-50 translate-middle', style: {marginTop: '-1px', height:'1px', width: '98%', background:'transparent'} }, progressBar) )
commandContainer.appendChild(lol.div({ class: 'progress position-absolute top-100 start-50 translate-middle', style: { marginTop: '-6px', height:'1px', width: '98%', background:'transparent'} }, progressBar) )

const consoleContainer = this.shadowRoot.querySelector('.console');
consoleContainer.insertBefore(commandContainer, consoleContainer.firstChild);
Expand All @@ -133,19 +136,5 @@ export default class Console extends HTMLElement {



transcend(selector, element = this) {
// Check if the element exists and is not the document or window
if (element && element !== document && element !== window) {
// Try to find the closest element matching the selector
const closestElement = element.closest(selector);

if (closestElement) {
return closestElement;
}

}

// If not found, traverse into the shadow DOM host and search there
return this.transcend(selector, element.getRootNode().host);
}
}
Loading

0 comments on commit 013ea5e

Please sign in to comment.