{"id":23268568,"url":"https://github.com/catpea/mawp","last_synced_at":"2026-01-10T16:34:12.871Z","repository":{"id":265721978,"uuid":"896567696","full_name":"catpea/mawp","owner":"catpea","description":"Lightweight Visual Programming Language","archived":false,"fork":false,"pushed_at":"2025-03-16T22:47:28.000Z","size":1150,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-14T12:50:17.054Z","etag":null,"topics":["dataflow-programming","flow-based-programming","graph-editor","low-code","visual-programming","visual-programming-language","vpl"],"latest_commit_sha":null,"homepage":"https://catpea.github.io/mawp/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/catpea.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-30T17:54:10.000Z","updated_at":"2025-03-16T22:47:32.000Z","dependencies_parsed_at":"2024-11-30T17:54:33.632Z","dependency_job_id":"2d944723-9a97-4797-8750-862de8ef5dcb","html_url":"https://github.com/catpea/mawp","commit_stats":{"total_commits":11,"total_committers":1,"mean_commits":11.0,"dds":0.0,"last_synced_commit":"74b1199943d80152e2556b0f8eb487d7b76d1174"},"previous_names":["catpea/mawp"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/catpea/mawp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/catpea%2Fmawp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/catpea%2Fmawp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/catpea%2Fmawp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/catpea%2Fmawp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/catpea","download_url":"https://codeload.github.com/catpea/mawp/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/catpea%2Fmawp/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270791276,"owners_count":24645782,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-16T02:00:11.002Z","response_time":91,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dataflow-programming","flow-based-programming","graph-editor","low-code","visual-programming","visual-programming-language","vpl"],"created_at":"2024-12-19T17:19:43.708Z","updated_at":"2026-01-10T16:34:12.840Z","avatar_url":"https://github.com/catpea.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"MAWP\n---\n\n## TODO\n\n- add this.gc/listenTo to all the .subscribeToValue\n- tonejs read only components myst be destroyed-and-re-created\n- restore focus\n- restore sending options to tone js objects\n\n- style guard: ensure user methods are not called directly but via state machine\n- switch all to ReactiveHTMLElement for consistemt garbage collection\n- receive function\n- resize windows\n- \"lol\" library, on has no garbage collection\n- clear selection on scene change\n- redo deleting, selecting, perhaps bubble events up to the scene...Capture this as operations at UI vs. VFS\n- add this.gc = to all subscriptions\n- live update (signal) inner pipes, test by adding upper to upper and watch it live\n- Save load files\n- enable pipe connections\n- add an editor modal\n\n## Server\n- server.js\n\n## Browser\n- browser.js\n\n\n## Two Tier Architecture\n\n### User Interface Rendering\n\n1. Zooming User Interface \u0026 SVG Drawing Support\n  - dom-zoom custom element\n\n\n### Data Model \u0026 Applicaion Control\n1. Node is a Dom Element like node with enhanced functionality\n\n\n## Transforming x and y under scene scale, panX and panY\n\n### Using the built in transformer\n\n```JavaScript\n    // GET REAL COORDIANTES\n    let currentX = event.clientX;\n    let currentY = event.clientY;\n\n    // TRANSFORM\n    [currentX, currentY] = this.portComponent.scene.transform(currentX, currentY);\n```\n\n### Using the manual procedure\n```JavaScript\n\n    // GET REAL COORDIANTES\n    let currentX = event.clientX;\n    let currentY = event.clientY;\n\n    // GET SCALE INFORMATION\n    const scale = this.portComponent.scene.scale.value;\n    let panX = this.portComponent.scene.panX.value;\n    let panY = this.portComponent.scene.panY.value;\n\n    // TRANSFORM BY SCALE\n    currentX = currentX / scale;\n    currentY = currentY / scale;\n\n    // TRANSFORM BY PAN (note that you must first transform pan)\n    panX = panX / scale;\n    panY = panY / scale;\n    currentX = currentX - panX;\n    currentY = currentY - panY;\n\n```\n\n## Cheatsheets\n\nHere 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:\n\n### **Creating DOM Elements**\n1. **`document.createElement(tagName)`**\n   - Creates a new element with the specified tag name.\n   - **Example**:\n     ```javascript\n     let newDiv = document.createElement('div');\n     ```\n\n2. **`element.setAttribute(attribute, value)`**\n   - Sets an attribute on an element (like class, id, etc.).\n   - **Example**:\n     ```javascript\n     newDiv.setAttribute('class', 'my-class');\n     ```\n\n3. **`element.appendChild(child)`**\n   - Adds a child element to a parent element.\n   - **Example**:\n     ```javascript\n     document.body.appendChild(newDiv);\n     ```\n\n4. **`document.createTextNode(text)`**\n   - Creates a text node that can be appended to an element.\n   - **Example**:\n     ```javascript\n     let textNode = document.createTextNode('Hello, world!');\n     newDiv.appendChild(textNode);\n     ```\n\n5. **`element.innerHTML`**\n   - Sets or retrieves HTML content inside an element.\n   - **Example**:\n     ```javascript\n     newDiv.innerHTML = '\u003cp\u003eSome content\u003c/p\u003e';\n     ```\n\n### **Removing DOM Elements**\n1. **`element.remove()`**\n   - Removes the element from the DOM.\n   - **Example**:\n     ```javascript\n     newDiv.remove();\n     ```\n\n2. **`parentNode.removeChild(child)`**\n   - Removes a child element from its parent node.\n   - **Example**:\n     ```javascript\n     document.body.removeChild(newDiv);\n     ```\n\n3. **`element.innerHTML = ''`**\n   - Clears the content of an element.\n   - **Example**:\n     ```javascript\n     newDiv.innerHTML = '';\n     ```\n\n### **Example: Create and Remove Element**\n```javascript\n// Create a new div with text\nlet newDiv = document.createElement('div');\nlet textNode = document.createTextNode('This is a new div');\nnewDiv.appendChild(textNode);\ndocument.body.appendChild(newDiv);\n\n// Remove the div after 3 seconds\nsetTimeout(() =\u003e {\n  newDiv.remove();\n}, 3000);\n```\n\n### **Summary of Key Methods**\n- **Create**: `document.createElement()`, `document.createTextNode()`, `setAttribute()`\n- **Add to DOM**: `appendChild()`, `innerHTML`\n- **Remove from DOM**: `remove()`, `removeChild()`, `innerHTML = ''`\n\nThis cheat sheet covers the basics for creating and removing DOM elements, which should cover most needs for dynamic page manipulation.\n\n## Class Name Ideas\n\n### 1. **User Interface (UI) Components:**\n- Button\n- TextField\n- Label\n- Checkbox\n- RadioButton\n- Dropdown\n- DatePicker\n- Slider\n- Navbar\n- Footer\n- Modal\n- Card\n- List\n- Grid\n- Table\n- Tooltip\n\n### 2. **Navigation and Routing:**\n- Router\n- Route\n- Link\n- NavLink\n- Switch\n\n### 3. **State Management:**\n- Store\n- Reducer\n- Action\n- Dispatcher\n- Provider\n- Consumer\n- Context\n\n### 4. **Data Handling:**\n- Model\n- Controller\n- Repository\n- Service\n- Entity\n- DTO (Data Transfer Object)\n- DAO (Data Access Object)\n- API (Application Programming Interface)\n\n### 5. **Security and Authentication:**\n- Auth\n- User\n- Role\n- Permission\n- Token\n- Session\n- Cookie\n\n### 6. **Networking:**\n- Request\n- Response\n- HttpClient\n- Fetch\n- WebSocket\n- Socket\n\n### 7. **Utilities and Helpers:**\n- Utils\n- Helpers\n- Config\n- Logger\n- Validator\n- Formatter\n- Converter\n\n### 8. **Testing:**\n- Test\n- Suite\n- Spec\n- Mock\n- Stub\n- Fixture\n\n### 9. **Errors and Exceptions:**\n- Error\n- Exception\n- Handler\n\n### 10. **Media and Files:**\n- Image\n- Video\n- Audio\n- File\n- Upload\n- Download\n- Stream\n\n### 11. **Components and Widgets:**\n- Widget\n- Component\n- Module\n- Directive (in Angular)\n- PartialView\n\n### 12. **Database and Persistence:**\n- DB (Database)\n- Table\n- Row\n- Column\n- Query\n- Schema\n- Migration\n\n### 13. **Performance and Optimization:**\n- Cache\n- LoadBalancer\n- Minifier\n- Compressor\n\n### 14. **Internationalization (i18n) and Localization (l10n):**\n- Locale\n- Translation\n- Language\n\n### 15. **Notifications and Messaging:**\n- Alert\n- Message\n- Notification\n- Mailer\n- SMS\n- Push\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcatpea%2Fmawp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcatpea%2Fmawp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcatpea%2Fmawp/lists"}