MAWP

TODO

• add this.gc/listenTo to all the .subscribeToValue

• tonejs read only components myst be destroyed-and-re-created

• restore focus

• restore sending options to tone js objects

• style guard: ensure user methods are not called directly but via state machine

• switch all to ReactiveHTMLElement for consistemt garbage collection

• 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

• server.js

Browser

• browser.js

Two Tier Architecture

User Interface Rendering

1. Zooming User Interface & SVG Drawing Support

• dom-zoom custom element

Data Model & Applicaion Control

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

Transforming x and y under scene scale, panX and panY

Using the built in transformer

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

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

Using the manual procedure

    // 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;

Cheatsheets

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:

Creating DOM Elements

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>';

Removing DOM Elements

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 = '';

Example: Create and Remove Element

// 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);

Summary of Key Methods

• 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.

Class Name Ideas

1. User Interface (UI) Components:

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

2. Navigation and Routing:

• Router
• Route
• Link
• NavLink
• Switch

3. State Management:

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

4. Data Handling:

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

5. Security and Authentication:

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

6. Networking:

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

7. Utilities and Helpers:

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

8. Testing:

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

9. Errors and Exceptions:

• Error
• Exception
• Handler

10. Media and Files:

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

11. Components and Widgets:

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

12. Database and Persistence:

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

13. Performance and Optimization:

• Cache
• LoadBalancer
• Minifier
• Compressor

14. Internationalization (i18n) and Localization (l10n):

• Locale
• Translation
• Language

15. Notifications and Messaging:

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