https://github.com/catpea/mawp
Lightweight Visual Programming Language
https://github.com/catpea/mawp
dataflow-programming flow-based-programming graph-editor low-code visual-programming visual-programming-language vpl
Last synced: about 1 month ago
JSON representation
Lightweight Visual Programming Language
- Host: GitHub
- URL: https://github.com/catpea/mawp
- Owner: catpea
- Created: 2024-11-30T17:54:10.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-16T22:47:28.000Z (11 months ago)
- Last Synced: 2025-07-14T12:50:17.054Z (7 months ago)
- Topics: dataflow-programming, flow-based-programming, graph-editor, low-code, visual-programming, visual-programming-language, vpl
- Language: JavaScript
- Homepage: https://catpea.github.io/mawp/
- Size: 1.1 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
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
```JavaScript
// GET REAL COORDIANTES
let currentX = event.clientX;
let currentY = event.clientY;
// TRANSFORM
[currentX, currentY] = this.portComponent.scene.transform(currentX, currentY);
```
### Using the manual procedure
```JavaScript
// 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**:
```javascript
let newDiv = document.createElement('div');
```
2. **`element.setAttribute(attribute, value)`**
- Sets an attribute on an element (like class, id, etc.).
- **Example**:
```javascript
newDiv.setAttribute('class', 'my-class');
```
3. **`element.appendChild(child)`**
- Adds a child element to a parent element.
- **Example**:
```javascript
document.body.appendChild(newDiv);
```
4. **`document.createTextNode(text)`**
- Creates a text node that can be appended to an element.
- **Example**:
```javascript
let textNode = document.createTextNode('Hello, world!');
newDiv.appendChild(textNode);
```
5. **`element.innerHTML`**
- Sets or retrieves HTML content inside an element.
- **Example**:
```javascript
newDiv.innerHTML = '
Some content
';
```
### **Removing DOM Elements**
1. **`element.remove()`**
- Removes the element from the DOM.
- **Example**:
```javascript
newDiv.remove();
```
2. **`parentNode.removeChild(child)`**
- Removes a child element from its parent node.
- **Example**:
```javascript
document.body.removeChild(newDiv);
```
3. **`element.innerHTML = ''`**
- Clears the content of an element.
- **Example**:
```javascript
newDiv.innerHTML = '';
```
### **Example: Create and Remove Element**
```javascript
// 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