479 lines
20 KiB
TypeScript
479 lines
20 KiB
TypeScript
import type { CanvasContent, CanvasEdge, CanvasNode } from "~/types/canvas";
|
|
import { clamp, lerp } from "#shared/general.util";
|
|
import { dom, icon, svg, text } from "./dom.util";
|
|
import render from "./markdown.util";
|
|
import { popper } from "#shared/floating.util";
|
|
import { Content } from "./content.util";
|
|
|
|
export type Direction = 'bottom' | 'top' | 'left' | 'right';
|
|
export type Position = { x: number, y: number };
|
|
export type Box = Position & { w: number, h: number };
|
|
export type Path = {
|
|
path: string;
|
|
from: Position;
|
|
to: Position;
|
|
side: Direction;
|
|
}
|
|
|
|
export const rotation: Record<Direction, string> = {
|
|
top: "180",
|
|
bottom: "0",
|
|
left: "90",
|
|
right: "270"
|
|
};
|
|
export const opposite: Record<Direction, Direction> = {
|
|
top: "bottom",
|
|
bottom: "top",
|
|
left: "right",
|
|
right: "left"
|
|
}
|
|
|
|
export function edgePos(side: Direction, pos: Position, offset: number): Position {
|
|
switch (side) {
|
|
case "left":
|
|
return {
|
|
x: pos.x - offset,
|
|
y: pos.y
|
|
};
|
|
case "right":
|
|
return {
|
|
x: pos.x + offset,
|
|
y: pos.y
|
|
};
|
|
case "top":
|
|
return {
|
|
x: pos.x,
|
|
y: pos.y - offset
|
|
};
|
|
case "bottom":
|
|
return {
|
|
x: pos.x,
|
|
y: pos.y + offset
|
|
}
|
|
}
|
|
}
|
|
export function getNode(nodes: CanvasNode[], id: string): CanvasNode | undefined
|
|
{
|
|
return nodes.find(e => e.id === id);
|
|
}
|
|
export function posFromDir(e: { minX: number, minY: number, maxX: number, maxY: number }, t: Direction): Position {
|
|
switch (t) {
|
|
case "top":
|
|
return { x: (e.minX + e.maxX) / 2, y: e.minY };
|
|
case "right":
|
|
return { x: e.maxX, y: (e.minY + e.maxY) / 2 };
|
|
case "bottom":
|
|
return { x: (e.minX + e.maxX) / 2, y: e.maxY };
|
|
case "left":
|
|
return { x: e.minX, y: (e.minY + e.maxY) / 2 };
|
|
}
|
|
}
|
|
export function getBbox(node: CanvasNode): { minX: number, minY: number, maxX: number, maxY: number } {
|
|
return { minX: node.x, minY: node.y, maxX: node.x + node.width, maxY: node.y + node.height };
|
|
}
|
|
export function getPath(from: CanvasNode, fromSide: Direction, to: CanvasNode, toSide: Direction): Path | undefined {
|
|
if(from === undefined || to === undefined)
|
|
return;
|
|
|
|
const start = posFromDir(getBbox(from), fromSide), end = posFromDir(getBbox(to), toSide);
|
|
return bezier(start, fromSide, end, toSide);
|
|
}
|
|
export function bezier(from: Position, fromSide: Direction, to: Position, toSide: Direction): Path {
|
|
const r = Math.hypot(from.x - to.x, from.y - to.y), o = clamp(r / 2, 70, 150), a = edgePos(fromSide, from, o), s = edgePos(toSide, to, o);
|
|
return {
|
|
path: `M${from.x},${from.y} C${a.x},${a.y} ${s.x},${s.y} ${to.x},${to.y}`,
|
|
from: from,
|
|
to: to,
|
|
side: toSide,
|
|
};
|
|
}
|
|
export function labelCenter(from: CanvasNode, fromSide: Direction, to: CanvasNode, toSide: Direction): string {
|
|
const start = posFromDir(getBbox(from), fromSide), end = posFromDir(getBbox(to), toSide);
|
|
const len = Math.hypot(start.x - end.x, start.y - end.y), offset = clamp(len / 2, 70, 150), b = edgePos(fromSide, start, offset), s = edgePos(toSide, end, offset);
|
|
const center = getCenter(start, end, b, s, 0.5);
|
|
return `translate(${center.x}px, ${center.y}px)`;
|
|
}
|
|
export function getCenter(n: Position, i: Position, r: Position, o: Position, e: number): Position {
|
|
const a = 1 - e, s = a * a * a, l = 3 * e * a * a, c = 3 * e * e * a, u = e * e * e;
|
|
return {
|
|
x: s * n.x + l * r.x + c * o.x + u * i.x,
|
|
y: s * n.y + l * r.y + c * o.y + u * i.y
|
|
};
|
|
}
|
|
|
|
export function gridSnap(value: number, grid: number): number
|
|
{
|
|
return Math.round(value / grid) * grid;
|
|
}
|
|
|
|
const cancelEvent = (e: Event) => e.preventDefault();
|
|
function center(touches: TouchList): Position
|
|
{
|
|
const pos = { x: 0, y: 0 };
|
|
|
|
for(const touch of touches)
|
|
{
|
|
pos.x += touch.clientX;
|
|
pos.y += touch.clientY;
|
|
}
|
|
|
|
pos.x /= touches.length;
|
|
pos.y /= touches.length;
|
|
return pos;
|
|
}
|
|
function distance(touches: TouchList): number
|
|
{
|
|
const [A, B] = touches;
|
|
return Math.hypot(B.clientX - A.clientX, B.clientY - A.clientY);
|
|
}
|
|
|
|
export class Node
|
|
{
|
|
properties: CanvasNode;
|
|
|
|
nodeDom: HTMLDivElement;
|
|
|
|
constructor(properties: CanvasNode)
|
|
{
|
|
this.properties = properties;
|
|
|
|
const style = this.style;
|
|
|
|
this.nodeDom = dom('div', { class: ['absolute', {'-z-10': properties.type === 'group', 'z-10': properties.type !== 'group'}], style: { transform: `translate(${properties.x}px, ${properties.y}px)`, width: `${properties.width}px`, height: `${properties.height}px`, '--canvas-color': properties.color?.hex } }, [
|
|
dom('div', { class: ['outline-0 transition-[outline-width] border-2 bg-light-20 dark:bg-dark-20 w-full h-full hover:outline-4', style.border] }, [
|
|
dom('div', { class: ['w-full h-full py-2 px-4 flex !bg-opacity-[0.07] overflow-auto', style.bg] }, [properties.text ? dom('div', { class: 'flex items-center' }, [render(properties.text)]) : undefined])
|
|
])
|
|
]);
|
|
|
|
if(properties.type === 'group')
|
|
{
|
|
if(properties.label !== undefined)
|
|
{
|
|
this.nodeDom.appendChild(dom('div', { class: ['origin-bottom-left tracking-wider border-4 truncate inline-block text-light-100 dark:text-dark-100 absolute bottom-[100%] mb-2 px-2 py-1 font-thin', style.border], style: 'max-width: 100%; font-size: calc(18px * var(--zoom-multiplier))', text: properties.label }));
|
|
}
|
|
}
|
|
}
|
|
|
|
get style()
|
|
{
|
|
return this.properties.color ? this.properties.color?.class ?
|
|
{ bg: `bg-light-${this.properties.color?.class} dark:bg-dark-${this.properties.color?.class}`, border: `border-light-${this.properties.color?.class} dark:border-dark-${this.properties.color?.class}` } :
|
|
{ bg: `bg-colored`, border: `border-[color:var(--canvas-color)]` } :
|
|
{ border: `border-light-40 dark:border-dark-40`, bg: `bg-light-40 dark:bg-dark-40` }
|
|
}
|
|
}
|
|
export class Edge
|
|
{
|
|
properties: CanvasEdge;
|
|
|
|
edgeDom: HTMLDivElement;
|
|
#from: CanvasNode;
|
|
#to: CanvasNode;
|
|
#path: Path;
|
|
#labelPos: string;
|
|
|
|
constructor(properties: CanvasEdge, nodes: CanvasNode[])
|
|
{
|
|
this.properties = properties;
|
|
|
|
this.#from = nodes.find(f => f.id === properties.fromNode)!;
|
|
this.#to = nodes.find(f => f.id === properties.toNode)!;
|
|
this.#path = getPath(this.#from, properties.fromSide, this.#to, properties.toSide)!;
|
|
this.#labelPos = labelCenter(this.#from, properties.fromSide, this.#to, properties.toSide);
|
|
|
|
const style = this.style;
|
|
|
|
/* <div class="absolute overflow-visible">
|
|
<div v-if="edge.label" :style="{ transform: `${labelPos} translate(-50%, -50%)` }" class="relative bg-light-20 dark:bg-dark-20 border border-light-35 dark:border-dark-35 px-4 py-2 z-20">{{ edge.label }}</div>
|
|
<svg class="absolute top-0 overflow-visible h-px w-px">
|
|
<g :style="{'--canvas-color': edge.color?.hex}" class="z-0">
|
|
<g :style="`transform: translate(${this.#path!.to.x}px, ${this.#path!.to.y}px) scale(var(--zoom-multiplier)) rotate(${rotation[this.#path!.side]}deg);`">
|
|
<polygon :class="style.fill" points="0,0 6.5,10.4 -6.5,10.4"></polygon>
|
|
</g>
|
|
<path :style="`stroke-width: calc(3px * var(--zoom-multiplier));`" style="stroke-linecap: butt;" :class="style.stroke" class="fill-none stroke-[4px]" :d="this.#path!.path"></path>
|
|
</g>
|
|
</svg>
|
|
</div> */
|
|
this.edgeDom = dom('div', { class: 'absolute overflow-visible' }, [
|
|
properties.label ? dom('div', { style: { transform: `${this.#labelPos} translate(-50%, -50%)` }, class: 'relative bg-light-20 dark:bg-dark-20 border border-light-35 dark:border-dark-35 px-4 py-2 z-20', text: properties.label }) : undefined,
|
|
svg('svg', { class: 'absolute top-0 overflow-visible h-px w-px' }, [
|
|
svg('g', { style: {'--canvas-color': properties.color?.hex}, class: 'z-0' }, [
|
|
svg('g', { style: `transform: translate(${this.#path!.to.x}px, ${this.#path!.to.y}px) scale(var(--zoom-multiplier)) rotate(${rotation[this.#path!.side]}deg);` }, [
|
|
svg('polygon', { class: style.fill, attributes: { points: '0,0 6.5,10.4 -6.5,10.4' } }),
|
|
]),
|
|
svg('path', { style: `stroke-width: calc(3px * var(--zoom-multiplier)); stroke-linecap: butt;`, class: [style.stroke, 'fill-none stroke-[4px]'], attributes: { d: this.#path!.path } }),
|
|
]),
|
|
]),
|
|
]);
|
|
}
|
|
|
|
get style()
|
|
{
|
|
return this.properties.color ? this.properties.color?.class ?
|
|
{ fill: `fill-light-${this.properties.color?.class} dark:fill-dark-${this.properties.color?.class}`, stroke: `stroke-light-${this.properties.color?.class} dark:stroke-dark-${this.properties.color?.class}` } :
|
|
{ fill: `fill-colored`, stroke: `stroke-[color:var(--canvas-color)]` } :
|
|
{ stroke: `stroke-light-40 dark:stroke-dark-40`, fill: `fill-light-40 dark:fill-dark-40` }
|
|
}
|
|
}
|
|
|
|
export class Canvas
|
|
{
|
|
static minZoom: number = 0.3;
|
|
static maxZoom: number = 3;
|
|
|
|
private content: Required<CanvasContent>;
|
|
private zoom: number = 0.5;
|
|
private x: number = 0;
|
|
private y: number = 0;
|
|
|
|
private visualZoom: number = this.zoom;
|
|
private visualX: number = this.x;
|
|
private visualY: number = this.y;
|
|
|
|
private tweener: Tweener = new Tweener();
|
|
private debouncedTimeout: Timer = setTimeout(() => {}, 0);
|
|
|
|
private transform: HTMLDivElement;
|
|
container: HTMLDivElement;
|
|
|
|
constructor(content?: CanvasContent)
|
|
{
|
|
if(!content)
|
|
content = { nodes: [], edges: [], groups: [] };
|
|
|
|
if(!content.nodes)
|
|
content.nodes = [];
|
|
|
|
if(!content.edges)
|
|
content.edges = [];
|
|
|
|
if(!content.groups)
|
|
content.groups = [];
|
|
|
|
this.content = content as Required<CanvasContent>;
|
|
|
|
this.transform = dom('div', { class: 'origin-center h-full' }, [
|
|
dom('div', { class: 'absolute top-0 left-0 w-full h-full pointer-events-none *:pointer-events-auto *:select-none touch-none' }, [
|
|
...this.content.nodes.map(e => new Node(e).nodeDom), ...this.content.edges.map(e => new Edge(e, this.content.nodes).edgeDom),
|
|
])
|
|
]);
|
|
//TODO: --zoom-multiplier dynamic
|
|
this.container = dom('div', { class: 'absolute top-0 left-0 overflow-hidden w-full h-full touch-none' }, [
|
|
dom('div', { class: 'flex flex-col absolute sm:top-2 top-10 left-2 z-[35] overflow-hidden gap-4' }, [
|
|
dom('div', { class: 'border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10' }, [
|
|
popper(dom('span', { class: 'w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer', listeners: { click: () => this.zoomTo(this.x, this.y, clamp(this.zoom * 1.1, Canvas.minZoom, Canvas.maxZoom)) } }, [icon('radix-icons:plus')]), {
|
|
delay: 120, arrow: true, placement: 'right', offset: 8, content: [text('Zoom avant')], class: 'TooltipContent border border-light-30 dark:border-dark-30 px-2 py-1 bg-light-10 dark:bg-dark-10 text-light-70 dark:text-dark-70 z-50'
|
|
}),
|
|
popper(dom('span', { class: 'w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer', listeners: { click: (e: MouseEvent) => { this.reset(); } } }, [icon('radix-icons:reload')]), {
|
|
delay: 120, arrow: true, placement: 'right', offset: 8, content: [text('Reset')], class: 'TooltipContent border border-light-30 dark:border-dark-30 px-2 py-1 bg-light-10 dark:bg-dark-10 text-light-70 dark:text-dark-70 z-50'
|
|
}),
|
|
popper(dom('span', { class: 'w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer', listeners: { click: (e: MouseEvent) => { this.zoomTo(this.x, this.y, Canvas.minZoom); } } }, [icon('radix-icons:corners')]), {
|
|
delay: 120, arrow: true, placement: 'right', offset: 8, content: [text('Tout contenir')], class: 'TooltipContent border border-light-30 dark:border-dark-30 px-2 py-1 bg-light-10 dark:bg-dark-10 text-light-70 dark:text-dark-70 z-50'
|
|
}),
|
|
popper(dom('span', { class: 'w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer', listeners: { click: () => this.zoomTo(this.x, this.y, clamp(this.zoom / 1.1, Canvas.minZoom, Canvas.maxZoom)) } }, [icon('radix-icons:minus')]), {
|
|
delay: 120, arrow: true, placement: 'right', offset: 8, content: [text('Zoom arrière')], class: 'TooltipContent border border-light-30 dark:border-dark-30 px-2 py-1 bg-light-10 dark:bg-dark-10 text-light-70 dark:text-dark-70 z-50'
|
|
}),
|
|
]), //dom('a') Edition link
|
|
]), this.transform,
|
|
])
|
|
/*
|
|
<NuxtLink v-if="overview && isOwner || hasPermissions(user?.permissions ?? [], ['admin', 'editor'])" :to="{ name: 'explore-edit', hash: `#${encodeURIComponent(overview!.path)}` }" class="border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10">
|
|
<Tooltip message="Modifier" side="right">
|
|
<Icon icon="radix-icons:pencil-1" class="w-8 h-8 p-2" />
|
|
</Tooltip>
|
|
</NuxtLink>
|
|
*/
|
|
|
|
this.mount();
|
|
}
|
|
|
|
mount()
|
|
{
|
|
let lastX = 0, lastY = 0, lastDistance = 0;
|
|
const dragMove = (e: MouseEvent) => {
|
|
this.x = this.visualX = this.x - (lastX - e.layerX) / this.zoom;
|
|
this.y = this.visualY = this.y - (lastY - e.layerY) / this.zoom;
|
|
|
|
lastX = e.layerX;
|
|
lastY = e.layerY;
|
|
|
|
this.updateTransform();
|
|
};
|
|
const dragEnd = (e: MouseEvent) => {
|
|
window.removeEventListener('mouseup', dragEnd);
|
|
window.removeEventListener('mousemove', dragMove);
|
|
};
|
|
this.container.addEventListener('mouseenter', () => {
|
|
window.addEventListener('wheel', cancelEvent, { passive: false });
|
|
document.addEventListener('gesturestart', cancelEvent);
|
|
document.addEventListener('gesturechange', cancelEvent);
|
|
|
|
this.container.addEventListener('mouseleave', () => {
|
|
window.removeEventListener('wheel', cancelEvent);
|
|
document.removeEventListener('gesturestart', cancelEvent);
|
|
document.removeEventListener('gesturechange', cancelEvent);
|
|
});
|
|
})
|
|
this.container.addEventListener('mousedown', (e) => {
|
|
lastX = e.layerX;
|
|
lastY = e.layerY;
|
|
|
|
window.addEventListener('mouseup', dragEnd, { passive: true });
|
|
window.addEventListener('mousemove', dragMove, { passive: true });
|
|
}, { passive: true });
|
|
this.container.addEventListener('wheel', (e) => {
|
|
if((this.zoom >= Canvas.maxZoom && e.deltaY < 0) || (this.zoom <= Canvas.minZoom && e.deltaY > 0))
|
|
return;
|
|
|
|
let box = this.container.getBoundingClientRect()!;
|
|
|
|
const diff = Math.exp(e.deltaY * -0.001);
|
|
const centerX = (box.x + box.width / 2), centerY = (box.y + box.height / 2);
|
|
const mousex = centerX - e.clientX, mousey = centerY - e.clientY;
|
|
|
|
this.zoomTo(this.x - (mousex / (diff * this.zoom) - mousex / this.zoom), this.y - (mousey / (diff * this.zoom) - mousey / this.zoom), clamp(this.zoom * diff, Canvas.minZoom, Canvas.maxZoom));
|
|
}, { passive: true });
|
|
this.container.addEventListener('touchstart', (e) => {
|
|
({ x: lastX, y: lastY } = center(e.touches));
|
|
|
|
if(e.touches.length > 1)
|
|
{
|
|
lastDistance = distance(e.touches);
|
|
}
|
|
|
|
this.container.addEventListener('touchend', touchend, { passive: true });
|
|
this.container.addEventListener('touchcancel', touchcancel, { passive: true });
|
|
this.container.addEventListener('touchmove', touchmove, { passive: true });
|
|
}, { passive: true });
|
|
const touchend = (e: TouchEvent) => {
|
|
if(e.touches.length > 1)
|
|
{
|
|
({ x: lastX, y: lastY } = center(e.touches));
|
|
}
|
|
|
|
this.container.removeEventListener('touchend', touchend);
|
|
this.container.removeEventListener('touchcancel', touchcancel);
|
|
this.container.removeEventListener('touchmove', touchmove);
|
|
};
|
|
const touchcancel = (e: TouchEvent) => {
|
|
if(e.touches.length > 1)
|
|
{
|
|
({ x: lastX, y: lastY } = center(e.touches));
|
|
}
|
|
|
|
this.container.removeEventListener('touchend', touchend);
|
|
this.container.removeEventListener('touchcancel', touchcancel);
|
|
this.container.removeEventListener('touchmove', touchmove);
|
|
};
|
|
const touchmove = (e: TouchEvent) => {
|
|
const pos = center(e.touches);
|
|
this.x = this.visualX = this.x - (lastX - pos.x) / this.zoom;
|
|
this.y = this.visualY = this.y - (lastY - pos.y) / this.zoom;
|
|
lastX = pos.x;
|
|
lastY = pos.y;
|
|
|
|
if(e.touches.length === 2)
|
|
{
|
|
const dist = distance(e.touches);
|
|
const diff = dist / lastDistance;
|
|
|
|
this.zoom = clamp(this.zoom * diff, Canvas.minZoom, Canvas.maxZoom);
|
|
}
|
|
|
|
this.updateTransform();
|
|
};
|
|
|
|
this.updateTransform();
|
|
}
|
|
|
|
private updateTransform()
|
|
{
|
|
this.transform.style.transform = `scale3d(${this.visualZoom}, ${this.visualZoom}, 1) translate3d(${this.visualX}px, ${this.visualY}px, 0)`;
|
|
|
|
clearTimeout(this.debouncedTimeout);
|
|
this.debouncedTimeout = setTimeout(this.updateScale.bind(this), 150);
|
|
}
|
|
|
|
private updateScale()
|
|
{
|
|
this.transform.style.setProperty('--tw-scale', this.visualZoom.toString());
|
|
this.container.style.setProperty('--zoom-multiplier', (1 / Math.pow(this.visualZoom, 0.7)).toFixed(3));
|
|
}
|
|
|
|
private zoomTo(x: number, y: number, zoom: number)
|
|
{
|
|
const oldX = this.x, oldY = this.y, oldZoom = this.zoom;
|
|
this.x = x;
|
|
this.y = y;
|
|
this.zoom = zoom;
|
|
|
|
this.tweener.update((e) => {
|
|
this.visualX = lerp(e, oldX, x);
|
|
this.visualY = lerp(e, oldY, y);
|
|
this.visualZoom = lerp(e, oldZoom, zoom);
|
|
|
|
this.updateTransform();
|
|
}, 50);
|
|
}
|
|
|
|
private reset()
|
|
{
|
|
this.tweener.stop();
|
|
|
|
this.zoom = this.visualZoom = 0.5;
|
|
this.x = this.visualX = 0;
|
|
this.y = this.visualY = 0;
|
|
|
|
this.updateTransform();
|
|
this.updateScale();
|
|
}
|
|
}
|
|
|
|
class Tweener
|
|
{
|
|
static linear = (progress: number) => progress;
|
|
|
|
private progress: number;
|
|
private duration: number;
|
|
private last: number;
|
|
|
|
private animationFrame: number = 0;
|
|
|
|
private animation: (progress: number) => number;
|
|
private tick?: (progress: number) => void;
|
|
|
|
constructor(animation: (progress: number) => number = Tweener.linear)
|
|
{
|
|
this.progress = 0, this.duration = 0, this.last = 0;
|
|
this.animation = animation;
|
|
}
|
|
private loop(t: DOMHighResTimeStamp)
|
|
{
|
|
const elapsed = t - this.last;
|
|
this.progress = clamp(this.progress + elapsed, 0, this.duration);
|
|
this.last = t;
|
|
|
|
const step = this.animation(clamp(this.progress / this.duration, 0, 1));
|
|
this.tick!(step);
|
|
|
|
if(this.progress < this.duration)
|
|
this.animationFrame = requestAnimationFrame(this.loop.bind(this));
|
|
}
|
|
update(tick: (progress: number) => void, duration: number)
|
|
{
|
|
this.duration = duration + this.duration - this.progress;
|
|
this.progress = 0;
|
|
this.last = performance.now();
|
|
this.tick = tick;
|
|
|
|
cancelAnimationFrame(this.animationFrame);
|
|
this.animationFrame = requestAnimationFrame(this.loop.bind(this));
|
|
}
|
|
stop()
|
|
{
|
|
cancelAnimationFrame(this.animationFrame);
|
|
|
|
this.duration = 0;
|
|
this.progress = 0;
|
|
}
|
|
} |