jeffemmett
/
folk-canvas
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

rope edges

This commit is contained in:
Orion Reed 2024-12-16 00:31:25 -05:00
parent 8468f02d31
commit 4bfda5c51f
1 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
demo/graph layout.html
View File

@ -22,6 +22,10 @@
background-color: rgba(100, 100, 100, 0.5); background-color: rgba(100, 100, 100, 0.5);
border: 2px solid rgba(0, 0, 0, 0.5); border: 2px solid rgba(0, 0, 0, 0.5);
} }
folk-rope {
pointer-events: none;
}
</style> </style>
</head> </head>
<body> <body>
@ -34,18 +38,19 @@
<folk-shape id="shape6" x="180" y="250" width="65" height="55" rotation="-40"></folk-shape> <folk-shape id="shape6" x="180" y="250" width="65" height="55" rotation="-40"></folk-shape>
<folk-shape id="shape7" x="420" y="150" width="110" height="25" rotation="10"></folk-shape> <folk-shape id="shape7" x="420" y="150" width="110" height="25" rotation="10"></folk-shape>
<folk-shape id="shape8" x="280" y="380" width="75" height="95" rotation="-50"></folk-shape> <folk-shape id="shape8" x="280" y="380" width="75" height="95" rotation="-50"></folk-shape>
<folk-arrow source="#shape1" target="#shape2"></folk-arrow> <folk-rope source="#shape1" target="#shape2"></folk-rope>
<folk-arrow source="#shape1" target="#shape3"></folk-arrow> <folk-rope source="#shape1" target="#shape3"></folk-rope>
<folk-arrow source="#shape2" target="#shape3"></folk-arrow> <folk-rope source="#shape2" target="#shape3"></folk-rope>
<folk-arrow source="#shape3" target="#shape4"></folk-arrow> <folk-rope source="#shape3" target="#shape4"></folk-rope>
<folk-arrow source="#shape4" target="#shape8"></folk-arrow> <folk-rope source="#shape4" target="#shape8"></folk-rope>
<folk-arrow source="#shape5" target="#shape8"></folk-arrow> <folk-rope source="#shape5" target="#shape8"></folk-rope>
</folk-graph> </folk-graph>
<script type="module"> <script type="module">
import '../src/standalone/folk-shape.ts'; import '../src/standalone/folk-shape.ts';
import '../src/standalone/folk-graph.ts'; import '../src/standalone/folk-graph.ts';
import '../src/standalone/folk-arrow.ts'; import '../src/standalone/folk-arrow.ts';
import '../src/standalone/folk-rope.ts';
</script> </script>
</body> </body>
</html> </html>