awatif-ui
Version:
Awatif User Interface
59 lines (51 loc) • 1.42 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Awatif UI - Drawing</title>
<script type="module">
import { viewer } from "../viewer";
import van from "vanjs-core";
const points = van.state([
[10, 0, 0],
[10, 10, 0],
[5, 5, 0],
[10, 0.5, 5], // this point is out of plane and should not be dragged
]);
const polylines = van.state([[0, 1, 2]]);
const nodes = van.state([]);
const elements = van.state([]);
// default grid target
const gridTarget = van.state({
position: [10, 10, 0],
rotation: [Math.PI / 2, 0, 0],
});
// on drawing change update nodes and elements
van.derive(() => {
nodes.val = points.val;
elements.val = polylines.val;
});
// simulate change of grid target
setTimeout(() => {
gridTarget.val = {
position: [10, 0, 0],
rotation: [Math.PI / 2, Math.PI / 2, Math.PI / 2],
};
}, 3000);
const viewerElm = viewer({
structure: {
nodes,
elements,
},
drawingObj: {
points,
polylines,
gridTarget,
},
});
document.body.appendChild(viewerElm);
</script>
</head>
<body></body>
</html>