• receive function
• resize windows
• "lol" library, on has no garbage collection
• clear selection on scene change
• redo deleting, selecting, perhaps bubble events up to the scene...Capture this as operations at UI vs. VFS
• add this.gc = to all subscriptions
• live update (signal) inner pipes, test by adding upper to upper and watch it live
• Save load files
• enable pipe connections
• add an editor modal

• server.js

• browser.js

1. Zooming User Interface & SVG Drawing Support

• dom-zoom custom element

1. Node is a Dom Element like node with enhanced functionality

    // GET REAL COORDIANTES
    let currentX = event.clientX;
    let currentY = event.clientY;

    // TRANSFORM
    [currentX, currentY] = this.portComponent.scene.transform(currentX, currentY);

    // GET REAL COORDIANTES
    let currentX = event.clientX;
    let currentY = event.clientY;

    // GET SCALE INFORMATION
    const scale = this.portComponent.scene.scale.value;
    let panX = this.portComponent.scene.panX.value;
    let panY = this.portComponent.scene.panY.value;

    // TRANSFORM BY SCALE
    currentX = currentX / scale;
    currentY = currentY / scale;

    // TRANSFORM BY PAN (note that you must first transform pan)
    panX = panX / scale;
    panY = panY / scale;
    currentX = currentX - panX;
    currentY = currentY - panY;

Here is a simple cheat sheet for methods related to creating and removing DOM elements in JavaScript. These methods are essential for manipulating the DOM dynamically:

1. document.createElement(tagName)

   • Creates a new element with the specified tag name.
   • Example:

     let newDiv = document.createElement('div');

2. element.setAttribute(attribute, value)

   • Sets an attribute on an element (like class, id, etc.).
   • Example:

     newDiv.setAttribute('class', 'my-class');

3. element.appendChild(child)

   • Adds a child element to a parent element.
   • Example:

     document.body.appendChild(newDiv);

4. document.createTextNode(text)

   • Creates a text node that can be appended to an element.
   • Example:

     let textNode = document.createTextNode('Hello, world!');
     newDiv.appendChild(textNode);

5. element.innerHTML

   • Sets or retrieves HTML content inside an element.
   • Example:

     newDiv.innerHTML = '<p>Some content</p>';

1. element.remove()

   • Removes the element from the DOM.
   • Example:

     newDiv.remove();

2. parentNode.removeChild(child)

   • Removes a child element from its parent node.
   • Example:

     document.body.removeChild(newDiv);

3. element.innerHTML = ''

   • Clears the content of an element.
   • Example:

     newDiv.innerHTML = '';

// Create a new div with text
let newDiv = document.createElement('div');
let textNode = document.createTextNode('This is a new div');
newDiv.appendChild(textNode);
document.body.appendChild(newDiv);

// Remove the div after 3 seconds
setTimeout(() => {
  newDiv.remove();
}, 3000);

• Create: document.createElement(), document.createTextNode(), setAttribute()
• Add to DOM: appendChild(), innerHTML
• Remove from DOM: remove(), removeChild(), innerHTML = ''

This cheat sheet covers the basics for creating and removing DOM elements, which should cover most needs for dynamic page manipulation.

• Button
• TextField
• Label
• Checkbox
• RadioButton
• Dropdown
• DatePicker
• Slider
• Navbar
• Footer
• Modal
• Card
• List
• Grid
• Table
• Tooltip

• Router
• Route
• Link
• NavLink
• Switch

• Store
• Reducer
• Action
• Dispatcher
• Provider
• Consumer
• Context

• Model
• Controller
• Repository
• Service
• Entity
• DTO (Data Transfer Object)
• DAO (Data Access Object)
• API (Application Programming Interface)

• Auth
• User
• Role
• Permission
• Token
• Session
• Cookie

• Request
• Response
• HttpClient
• Fetch
• WebSocket
• Socket

• Utils
• Helpers
• Config
• Logger
• Validator
• Formatter
• Converter

• Test
• Suite
• Spec
• Mock
• Stub
• Fixture

• Error
• Exception
• Handler

• Image
• Video
• Audio
• File
• Upload
• Download
• Stream

• Widget
• Component
• Module
• Directive (in Angular)
• PartialView

• DB (Database)
• Table
• Row
• Column
• Query
• Schema
• Migration

• Cache
• LoadBalancer
• Minifier
• Compressor

• Locale
• Translation
• Language

• Alert
• Message
• Notification
• Mailer
• SMS
• Push