Last active
August 18, 2018 22:13
-
-
Save bergie/026a7bc8f1b482f56ad336c9d72dd72f to your computer and use it in GitHub Desktop.
Draggable demo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "caseSensitive": false, | |
| "properties": { | |
| "name": "Movable image", | |
| "environment": { | |
| "type": "noflo-browser", | |
| "content": "<style>\n.area {\n width: 100%;\n height: 300px;\n user-select: none;\n}\n.draggable {\n -moz-user-select: none;\n -khtml-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n -khtml-user-drag: element;\n -webkit-user-drag: element;\n cursor: -webkit-grab;\n cursor: -moz-grab;\n cursor: grab;\n width: 40px;\n height: 40px;\n border-radius: 20px;\n background-color:hsl(220,20%,20%);\n box-shadow: \n 0 -1px 0px hsl(220,100%,100%),\n 0 1px 1px hsla(220,20%,0%,.2),\n 0 3px 8px hsla(220,20%,0%,.1);\n}\n.draggable:active {\n cursor: -webkit-grabbing;\n cursor: -moz-grabbing;\n cursor: grabbing;\n}\n</style>\n\n<div class=\"area\">\n <img class=\"draggable\" src=\"https://meemoo.org/hack-our-apps/shots/recursive.png\" draggable=\"true\">\n</div>" | |
| }, | |
| "icon": "" | |
| }, | |
| "inports": {}, | |
| "outports": {}, | |
| "groups": [ | |
| { | |
| "name": "X axis", | |
| "nodes": [ | |
| "AnchorX", | |
| "NewX", | |
| "SpringX", | |
| "StartXSpring" | |
| ], | |
| "metadata": { | |
| "description": "" | |
| } | |
| }, | |
| { | |
| "name": "Y axis", | |
| "nodes": [ | |
| "AnchorY", | |
| "NewY", | |
| "SpringY", | |
| "StartYSpring" | |
| ], | |
| "metadata": { | |
| "description": "" | |
| } | |
| } | |
| ], | |
| "processes": { | |
| "Image": { | |
| "component": "dom/GetElement", | |
| "metadata": { | |
| "x": 36, | |
| "y": 288, | |
| "width": 72, | |
| "height": 72, | |
| "label": "Image" | |
| } | |
| }, | |
| "NewX": { | |
| "component": "core/Kick", | |
| "metadata": { | |
| "x": 504, | |
| "y": 180, | |
| "width": 72, | |
| "height": 72, | |
| "label": "NewX" | |
| } | |
| }, | |
| "SpringX": { | |
| "component": "physics/Spring", | |
| "metadata": { | |
| "x": 864, | |
| "y": 180, | |
| "width": 72, | |
| "height": 72, | |
| "label": "SpringX" | |
| } | |
| }, | |
| "NewY": { | |
| "component": "core/Kick", | |
| "metadata": { | |
| "x": 504, | |
| "y": 360, | |
| "width": 72, | |
| "height": 72, | |
| "label": "NewY" | |
| } | |
| }, | |
| "SpringY": { | |
| "component": "physics/Spring", | |
| "metadata": { | |
| "x": 864, | |
| "y": 504, | |
| "width": 72, | |
| "height": 72, | |
| "label": "SpringY" | |
| } | |
| }, | |
| "Move": { | |
| "component": "css/MoveElement", | |
| "metadata": { | |
| "x": 1152, | |
| "y": 288, | |
| "width": 72, | |
| "height": 72, | |
| "label": "Move" | |
| } | |
| }, | |
| "interaction/ListenDrag_17mu4": { | |
| "component": "interaction/ListenDrag", | |
| "metadata": { | |
| "label": "ListenDrag", | |
| "x": 288, | |
| "y": 324, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "AnchorY": { | |
| "component": "math/SendNumber", | |
| "metadata": { | |
| "label": "AnchorY", | |
| "x": 504, | |
| "y": 504, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "AnchorX": { | |
| "component": "math/SendNumber", | |
| "metadata": { | |
| "label": "AnchorX", | |
| "x": 576, | |
| "y": 36, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "StartXSpring": { | |
| "component": "core/RepeatDelayed", | |
| "metadata": { | |
| "label": "StartXSpring", | |
| "x": 684, | |
| "y": 180, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "StartYSpring": { | |
| "component": "core/RepeatDelayed", | |
| "metadata": { | |
| "label": "StartYSpring", | |
| "x": 684, | |
| "y": 432, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| } | |
| }, | |
| "connections": [ | |
| { | |
| "src": { | |
| "process": "interaction/ListenDrag_17mu4", | |
| "port": "movex" | |
| }, | |
| "tgt": { | |
| "process": "NewX", | |
| "port": "data" | |
| }, | |
| "metadata": { | |
| "route": 1 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "interaction/ListenDrag_17mu4", | |
| "port": "movey" | |
| }, | |
| "tgt": { | |
| "process": "NewY", | |
| "port": "data" | |
| }, | |
| "metadata": { | |
| "route": 4 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "Image", | |
| "port": "element" | |
| }, | |
| "tgt": { | |
| "process": "interaction/ListenDrag_17mu4", | |
| "port": "element" | |
| }, | |
| "metadata": { | |
| "route": 7 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "AnchorX", | |
| "port": "out" | |
| }, | |
| "tgt": { | |
| "process": "SpringX", | |
| "port": "anchor" | |
| }, | |
| "metadata": { | |
| "route": 2 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "AnchorY", | |
| "port": "out" | |
| }, | |
| "tgt": { | |
| "process": "SpringY", | |
| "port": "anchor" | |
| }, | |
| "metadata": { | |
| "route": 10 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "Image", | |
| "port": "element" | |
| }, | |
| "tgt": { | |
| "process": "AnchorY", | |
| "port": "in" | |
| }, | |
| "metadata": { | |
| "route": 7 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "Image", | |
| "port": "element" | |
| }, | |
| "tgt": { | |
| "process": "AnchorX", | |
| "port": "in" | |
| }, | |
| "metadata": { | |
| "route": 7 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "Image", | |
| "port": "element" | |
| }, | |
| "tgt": { | |
| "process": "Move", | |
| "port": "element" | |
| }, | |
| "metadata": { | |
| "route": 7 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "AnchorX", | |
| "port": "out" | |
| }, | |
| "tgt": { | |
| "process": "Move", | |
| "port": "x" | |
| }, | |
| "metadata": { | |
| "route": 2 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "SpringX", | |
| "port": "out" | |
| }, | |
| "tgt": { | |
| "process": "Move", | |
| "port": "x" | |
| }, | |
| "metadata": { | |
| "route": 1 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "SpringY", | |
| "port": "out" | |
| }, | |
| "tgt": { | |
| "process": "Move", | |
| "port": "y" | |
| }, | |
| "metadata": { | |
| "route": 4 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "AnchorY", | |
| "port": "out" | |
| }, | |
| "tgt": { | |
| "process": "Move", | |
| "port": "y" | |
| }, | |
| "metadata": { | |
| "route": 10 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "interaction/ListenDrag_17mu4", | |
| "port": "end" | |
| }, | |
| "tgt": { | |
| "process": "NewX", | |
| "port": "in" | |
| }, | |
| "metadata": { | |
| "route": 9 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "interaction/ListenDrag_17mu4", | |
| "port": "end" | |
| }, | |
| "tgt": { | |
| "process": "NewY", | |
| "port": "in" | |
| }, | |
| "metadata": { | |
| "route": 9 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "NewY", | |
| "port": "out" | |
| }, | |
| "tgt": { | |
| "process": "Move", | |
| "port": "y" | |
| }, | |
| "metadata": { | |
| "route": 4 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "NewX", | |
| "port": "out" | |
| }, | |
| "tgt": { | |
| "process": "Move", | |
| "port": "x" | |
| }, | |
| "metadata": { | |
| "route": 1 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "StartXSpring", | |
| "port": "out" | |
| }, | |
| "tgt": { | |
| "process": "SpringX", | |
| "port": "in" | |
| }, | |
| "metadata": { | |
| "route": 1 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "NewX", | |
| "port": "out" | |
| }, | |
| "tgt": { | |
| "process": "StartXSpring", | |
| "port": "in" | |
| }, | |
| "metadata": { | |
| "route": 1 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "NewY", | |
| "port": "out" | |
| }, | |
| "tgt": { | |
| "process": "StartYSpring", | |
| "port": "in" | |
| }, | |
| "metadata": { | |
| "route": 4 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "StartYSpring", | |
| "port": "out" | |
| }, | |
| "tgt": { | |
| "process": "SpringY", | |
| "port": "in" | |
| }, | |
| "metadata": { | |
| "route": 4 | |
| } | |
| }, | |
| { | |
| "data": 50, | |
| "tgt": { | |
| "process": "SpringY", | |
| "port": "stiffness" | |
| } | |
| }, | |
| { | |
| "data": 20, | |
| "tgt": { | |
| "process": "SpringY", | |
| "port": "mass" | |
| } | |
| }, | |
| { | |
| "data": 2, | |
| "tgt": { | |
| "process": "SpringY", | |
| "port": "friction" | |
| } | |
| }, | |
| { | |
| "data": 20, | |
| "tgt": { | |
| "process": "SpringX", | |
| "port": "mass" | |
| } | |
| }, | |
| { | |
| "data": 2, | |
| "tgt": { | |
| "process": "SpringX", | |
| "port": "friction" | |
| } | |
| }, | |
| { | |
| "data": 60, | |
| "tgt": { | |
| "process": "SpringX", | |
| "port": "stiffness" | |
| } | |
| }, | |
| { | |
| "data": ".area .draggable", | |
| "tgt": { | |
| "process": "Image", | |
| "port": "selector" | |
| } | |
| }, | |
| { | |
| "data": 130, | |
| "tgt": { | |
| "process": "AnchorX", | |
| "port": "number" | |
| } | |
| }, | |
| { | |
| "data": 100, | |
| "tgt": { | |
| "process": "AnchorY", | |
| "port": "number" | |
| } | |
| }, | |
| { | |
| "data": 300, | |
| "tgt": { | |
| "process": "StartYSpring", | |
| "port": "delay" | |
| } | |
| }, | |
| { | |
| "data": 300, | |
| "tgt": { | |
| "process": "StartXSpring", | |
| "port": "delay" | |
| } | |
| } | |
| ] | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment