{"id":19695302,"url":"https://github.com/catpea/signalcraft","last_synced_at":"2025-05-07T05:12:13.852Z","repository":{"id":206844303,"uuid":"717812367","full_name":"catpea/signalcraft","owner":"catpea","description":"A tiny visual programming language.","archived":false,"fork":false,"pushed_at":"2023-12-26T03:43:04.000Z","size":21984,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-07T05:12:07.877Z","etag":null,"topics":["dataflow-programming","flow-based-programming","graph-editor","low-code","node-editor","visual-programming"],"latest_commit_sha":null,"homepage":"https://catpea.github.io/signalcraft/","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":"2023-11-12T17:17:02.000Z","updated_at":"2024-12-17T10:02:13.000Z","dependencies_parsed_at":"2024-11-11T19:32:21.442Z","dependency_job_id":"ef45dabb-3776-4624-babb-cae8cd831faf","html_url":"https://github.com/catpea/signalcraft","commit_stats":null,"previous_names":["catpea/signalcraft"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/catpea%2Fsignalcraft","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/catpea%2Fsignalcraft/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/catpea%2Fsignalcraft/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/catpea%2Fsignalcraft/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/catpea","download_url":"https://codeload.github.com/catpea/signalcraft/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252817652,"owners_count":21808707,"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","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","node-editor","visual-programming"],"created_at":"2024-11-11T19:27:05.186Z","updated_at":"2025-05-07T05:12:13.834Z","avatar_url":"https://github.com/catpea.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# signalcraft\nA tiny visual programming language.\n\n![art/fui-e.jpg](art/fui-e.jpg)\n\n\n## Usage\n\nCTRL+Click on caption or cable will select it.\n\n## TODO\n\n- LOL, set primary button correctly for after JSON is loaded, default value ovveriding node value stored in json investigate\n- Connectors are not removed from COnnectors array\n\n, https://youtu.be/utrxk5_PeEY?t=104\n\n\n- add boolean math for this.el.EditorValue to hide text overflow, currently substr is in place\n- give view/menu/Dropdown.js .setData() support and make it generic\n- finish load() in API\n- break up Line in preparation for more UI complexity as onmouseDown foreignObject magic is introduced\n\n- Ensure foreignObject data fields are created OnClick\n  - on mouse over indicate that the propery is editable by shifting the background color\n  - on mouse down create the foreignObject data editor, and on mouse leave (of xhtml field) destroy the edit field\n  - upon completion, ensure the value is clearly displayed where the foreignObject field was\n\n### Bug Fix\n\n- No bugs atm\n\n### Urgent!\n\n- Instead of centering nodes on add (which calls for rendering and measuring, and thus EventEmitter) allow drag and drop from the toolbox, allowing user to pick the position\n- Add File \u003e Save\n- Add File \u003e Load\n- Finish Toolbox\n- Add Property Pane\n- Live Data Output Bottom Debugger\n- Add minimal previews to nodes (string, number color, etc...)\n- Drag Connecting lines between entire Line.js not just Port, it is easier to hit the target\n- default action for drag should be selection manager not panning, see NodeRED\n- Prefer Api usage over manually interacting with collections: search for [A-Z][a-z]+\\.create and replace with API methods\n\n\n### Main\n- When deleting a Junction between two other junction reconnect them, investigate reconnecting of nodes as well\n- Cable Type Sensitivity - Should be type sensitive numbers, strings, objects.\n- Input/Output Line where both I/O ports visually align for neat programs (Line.js)\n- ForeignObjects in ZUI Mode\n- Give TODOM multiple code generation profiles\n- Node Property Editor (YAML First)\n- Add A Game Like Tutorial with Achievement unlocked\n- documentaion must state that use cannot create id and type named fields on a node as those are reserved\n\n### Unsure\n\n- LOD: on scale 2+ show string preview in Line via FOreignObject\n- Add Node Selection Manager (maybe groups, maybe lasso select with boolean math)\n- Add Node Search And Canvas Scroll\n- consider bounds padding to become a [0, 3, [0], [3]] with top right, bottom left like in CSS\n- too hard to click on caption, at certain scale make the entire node draggable?\n- Drag Cable at any point to take over XY of destination?\n- Node Alignment, Aligh Tops of Nodes (via shortcut key)\n\n## How It Works\n\n- you define node types first\n- then create a view, which is a UI, an SVG\n- then you addNode(type) the view will update to show that node\n- then you linkNodes to create a flow (see src/usage.js)\n- then you .run(node), you have to specify a node you want to spider up and execute payload on\n\n## How It Really Works\n\n- System Is Reactive, Full Time Travel\n- When defining Types, you really just specify Input Dots and Reply Dots.\n- Input is the Property of a Node that you can link to\n- Reply is the Function of a Node that gets executed via a downstream node\n- Nodes are decorated as Panels\n- Edges are decorated as Cables\n- Reactivity Links everything together.\n\n### Current State\n![art/fui-d.jpg](art/fui-d.jpg)\n![art/fui-c.jpg](art/fui-c.jpg)\n![art/fui-b.jpg](art/fui-b.jpg)\n![art/fui-a.jpg](art/fui-a.jpg)\n![art/fui-z.jpg](art/fui-z.jpg)\n![art/fui-y.jpg](art/fui-y.jpg)\n![art/fui-x.jpg](art/fui-x.jpg)\n\n### Design Ideas\n\n![art/fui-11.jpg](art/fui-11.jpg)\n![art/fui-10.jpg](art/fui-10.jpg)\n![art/fui-9.jpg](art/fui-9.jpg)\n![art/fui-8.jpg](art/fui-8.jpg)\n![art/fui-7.jpg](art/fui-7.jpg)\n![art/fui-6.jpg](art/fui-6.jpg)\n![art/fui-5.jpg](art/fui-5.jpg)\n![art/fui-4.jpg](art/fui-4.jpg)\n![art/fui-3.jpg](art/fui-3.jpg)\n![art/fui-2.jpg](art/fui-2.jpg)\n![art/fui-1.jpg](art/fui-1.jpg)\n![art/fui-0.jpg](art/fui-0.jpg)\n\n\n### Notes\n\n```JavaScript\n// centering a node, it requires an even emitter trigerring \"rendered\" and then measuring width and height of the rendered node\n// using the calculation below as base, but then setting CX/XY (centerX, centerY) by substracting half with/height from below\n// this means that cx/cy calls for use of event emitter, good idea but too early in development atm.\nx:  (0-this.view.transform.x+((this.view.svg.getBoundingClientRect().width/2)))/this.view.transform.scale,\ny:  (0-this.view.transform.y+((this.view.svg.getBoundingClientRect().width/2)))/this.view.transform.scale\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcatpea%2Fsignalcraft","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcatpea%2Fsignalcraft","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcatpea%2Fsignalcraft/lists"}