mirror of
https://github.com/varkor/quiver.git
synced 2024-09-11 05:46:13 +03:00
Remove experimentation file
This commit is contained in:
parent
d7e7448926
commit
be476d518a
147
src/arrow.html
147
src/arrow.html
@ -1,147 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>quiver</title>
|
||||
<link rel="icon" href="icon.png">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
background: darkslategrey;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
svg {
|
||||
overflow: visible;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
/* background: hsla(0, 0%, 0%, 0.3); */
|
||||
}
|
||||
|
||||
.invalid {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript" src="ds.js"></script>
|
||||
<script type="text/javascript" src="dom.js"></script>
|
||||
<script type="text/javascript" src="bezier.js"></script>
|
||||
<script type="text/javascript" src="arrow.js"></script>
|
||||
<script>
|
||||
let drag = null;
|
||||
|
||||
class Box extends Shape.RoundedRect {
|
||||
constructor(x, y) {
|
||||
super(new Point(x, y), new Dimensions(64, 64), 16);
|
||||
this.svg = document.createElement("div");
|
||||
this.svg.classList.add("box");
|
||||
this.redraw();
|
||||
this.svg.addEventListener("mousedown", (event) => {
|
||||
if (drag === null) {
|
||||
const rect = this.svg.getBoundingClientRect();
|
||||
drag = [
|
||||
this, event.clientX - rect.left - this.size.width / 2,
|
||||
event.clientY - rect.top - this.size.height / 2,
|
||||
];
|
||||
}
|
||||
});
|
||||
document.body.appendChild(this.svg);
|
||||
}
|
||||
|
||||
redraw() {
|
||||
this.svg.style.left = `${this.origin.x - this.size.width / 2}px`;
|
||||
this.svg.style.top = `${this.origin.y - this.size.height / 2}px`;
|
||||
this.svg.style.width = `${this.size.width}px`;
|
||||
this.svg.style.height = `${this.size.height}px`;
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("mouseup", () => {
|
||||
drag = null;
|
||||
});
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const source = new Box(64, 240);
|
||||
const target = new Box(640, 240);
|
||||
target.size.width = 512;
|
||||
target.redraw();
|
||||
// const arrow2 = new Arrow2(source, target);
|
||||
|
||||
const arrow = new Arrow(source, target, new ArrowStyle(), new Label());
|
||||
// arrow.style.heads = ["hook-top"];
|
||||
arrow.style.tails = ["hook-bottom"];
|
||||
// arrow.style.heads = CONSTANTS.ARROW_HEAD_STYLE.CORNER;
|
||||
// arrow.style.tails = CONSTANTS.ARROW_HEAD_STYLE.MAPS_TO;
|
||||
// arrow.style.heads = CONSTANTS.ARROW_HEAD_STYLE.HARPOON_TOP;
|
||||
arrow.style.level = 3;
|
||||
// arrow.style.shorten = 400;
|
||||
// arrow.style.dash_style = CONSTANTS.ARROW_DASH_STYLE.DOTTED;
|
||||
arrow.style.body_style = CONSTANTS.ARROW_BODY_STYLE.SQUIGGLY;
|
||||
arrow.label.alignment = CONSTANTS.LABEL_ALIGNMENT.CENTRE;
|
||||
arrow.label.size = new Dimensions(100, 10);
|
||||
arrow.redraw();
|
||||
document.body.appendChild(arrow.element.element);
|
||||
|
||||
window.addEventListener("mousemove", (event) => {
|
||||
if (drag !== null) {
|
||||
const [shape, x, y] = drag;
|
||||
shape.origin.x = event.clientX - x;
|
||||
shape.origin.y = event.clientY - y;
|
||||
shape.redraw();
|
||||
arrow.redraw();
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener("wheel", (event) => {
|
||||
event.preventDefault();
|
||||
arrow.style.curve += event.deltaY;
|
||||
arrow.redraw();
|
||||
}, { passive: false });
|
||||
|
||||
window.addEventListener("keydown", (event) => {
|
||||
let redraw = false;
|
||||
if (event.key === "ArrowLeft") {
|
||||
--arrow.style.level;
|
||||
redraw = true;
|
||||
}
|
||||
if (event.key === "ArrowRight") {
|
||||
++arrow.style.level;
|
||||
redraw = true;
|
||||
}
|
||||
arrow.style.level = Math.max(1, arrow.style.level);
|
||||
if (redraw) {
|
||||
arrow.redraw();
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
function visualise_rounded_rect(svg, x, y, w, h, border_radius) {
|
||||
const points = new RoundedRectangle(
|
||||
x, y, w, h, border_radius,
|
||||
).points();
|
||||
let rr_path = "";
|
||||
let first = true;
|
||||
for (const p of points) {
|
||||
if (first) {
|
||||
rr_path += `M ${p.x} ${p.y} `;
|
||||
first = false;
|
||||
} else {
|
||||
rr_path += `L ${p.x} ${p.y} `;
|
||||
}
|
||||
}
|
||||
|
||||
new DOM.SVGElement("path", {
|
||||
d: rr_path,
|
||||
fill: "red",
|
||||
stroke: "none",
|
||||
}).add_to(svg);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
Loading…
Reference in New Issue
Block a user