@dou-ui/flow 0.0.0-stage → 0.1.0-alpha.1

package/dist/types/whiteboard/board-node.vue.d.ts

@@ -0,0 +1,19 @@
+import type { NodeViewProps } from '../core/node-types';
+import type { Tone } from 'dou-ui';
+import { type WhiteboardShape } from './model';
+type BoardData = {
+    [key: string]: unknown;
+    text?: string;
+    shape?: WhiteboardShape;
+    tone?: Tone;
+    rotation?: number;
+    points?: number[];
+    box?: [number, number];
+    size?: number;
+    src?: string;
+    alt?: string;
+};
+type __VLS_Props = NodeViewProps<BoardData>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/types/whiteboard/connector.d.ts

@@ -0,0 +1,12 @@
+import type { FlowEditorContext } from '../context';
+import type { FlowToolbarItem } from '../core/menu';
+import type { FlowEdge } from '../core/model';
+import type { WhiteboardConnectorData } from './model';
+/**
+ * The whiteboard's line: straight, with right-angled turns or curved
+ * (`data.route`), solid or dashed (`data.dash`), with arrowheads at the end,
+ * both ends or neither (`data.arrow`).
+ */
+export declare const connectorEdge: import("..").EdgeTypeSpec<WhiteboardConnectorData>;
+/** Route, dash and arrow choices over the selected connectors. */
+export declare function connectorToolbar(ctx: FlowEditorContext, edges: FlowEdge[]): FlowToolbarItem[];

package/dist/types/whiteboard/draw.d.ts

@@ -0,0 +1,5 @@
+import type { FlowNode } from '../core/model';
+import type { FlowDrawContext } from '../export/context';
+import type { WhiteboardNodeData } from './model';
+/** A board node as SVG, as `board-node.vue` draws it. */
+export declare function drawBoardNode(node: FlowNode<WhiteboardNodeData>, draw: FlowDrawContext): string;

package/dist/types/whiteboard/image.d.ts

@@ -0,0 +1,27 @@
+import type { FlowEditorContext } from '../context';
+import type { Point } from '../core/model';
+/**
+ * Turns a file into the `src` an image node keeps, e.g. by uploading it.
+ * Return `{ src, alt }` to give the image its description; it is the file's
+ * name otherwise.
+ */
+export type WhiteboardUpload = (file: File) => WhiteboardUploaded | Promise<WhiteboardUploaded>;
+/** An image's address, or its address and description. */
+export type WhiteboardUploaded = string | {
+    src: string;
+    alt?: string;
+};
+export interface WhiteboardImageOptions {
+    /** Where the images go, in canvas units; the middle of the view by default. */
+    at?: Point;
+    /** Overrides the kit's `upload` option for these images. */
+    upload?: WhiteboardUpload;
+}
+export declare const imageFiles: (files: Iterable<File> | null | undefined) => File[];
+/**
+ * Adds an image node for each file, centred on `at` and stepped down and
+ * right when there are several. Files go through the kit's `upload` option.
+ */
+export declare function insertImages(ctx: FlowEditorContext, files: File[], options?: WhiteboardImageOptions): Promise<void>;
+/** Opens the file picker and inserts what is picked, as `insertImages` does. */
+export declare function pickImages(ctx: FlowEditorContext, options?: WhiteboardImageOptions): void;

package/dist/types/whiteboard/index.d.ts

@@ -0,0 +1,6 @@
+export { connectorEdge, imageNode, inkNode, shapeNode, stickyNode, textNode, whiteboardKit, } from './kit';
+export { imageKey, whiteboardKeys } from './model';
+export { insertImages, pickImages } from './image';
+export type { WhiteboardKitOptions } from './kit';
+export type { WhiteboardImageOptions, WhiteboardUpload, WhiteboardUploaded } from './image';
+export type { WhiteboardImageData, WhiteboardInkData, WhiteboardNodeData, WhiteboardShape, WhiteboardShapeData, WhiteboardShapeTool, WhiteboardStickyData, WhiteboardTextData, WhiteboardTool, WhiteboardArrow, WhiteboardConnectorData, WhiteboardDash, WhiteboardRoute, } from './model';

package/dist/types/whiteboard/ink.d.ts

@@ -0,0 +1,30 @@
+import type { FlowNode, Point } from '../core/model';
+import type { WhiteboardInkData } from './model';
+/** A sampled point: canvas position and pen pressure from 0 to 1. */
+export interface InkPoint extends Point {
+    pressure: number;
+}
+export declare const INK_SIZE = 4;
+/**
+ * Follows the pointer with a little lag, which smooths out the shake of a
+ * hand; samples closer than `gap` to the last one are dropped.
+ */
+export declare function follow(points: InkPoint[], next: InkPoint, gap: number): undefined;
+/** The node a finished stroke becomes: its box with room for the stroke's width. */
+export declare function strokeNode(id: string, points: InkPoint[], size?: number): FlowNode<WhiteboardInkData>;
+/**
+ * A stroke's points in a box of `width` by `height`: the line itself
+ * stretches, but the room left around it for the pen's width does not, so
+ * a stretched stroke keeps its thickness.
+ */
+export declare function fitInk(points: readonly InkPoint[], box: readonly [number, number], width: number, height: number, size?: number): InkPoint[];
+/** The triples of `data.points` as points. */
+export declare function unpack(flat: readonly number[]): InkPoint[];
+/**
+ * The outline of a stroke as a filled path: each side offset by half the
+ * width at that point, joined by round ends, with curves through the middles
+ * of the samples.
+ */
+export declare function inkOutline(points: readonly InkPoint[], size?: number): string;
+/** Whether a stroke passes within `radius` of a canvas point. */
+export declare function inkHit(node: FlowNode, point: Point, radius: number): boolean;

package/dist/types/whiteboard/kit.d.ts

@@ -0,0 +1,36 @@
+import { type Ref } from 'vue';
+import { type FlowExtension } from '../core/extension';
+import { type WhiteboardImageData, type WhiteboardInkData, type WhiteboardShapeData, type WhiteboardStickyData, type WhiteboardTextData, type WhiteboardTool } from './model';
+import { type WhiteboardUpload } from './image';
+import { connectorEdge } from './connector';
+/** A rectangle, ellipse or diamond with centred text; `data.shape` says which. */
+export declare const shapeNode: import("..").NodeTypeSpec<WhiteboardShapeData>;
+/** A square note in a soft color. */
+export declare const stickyNode: import("..").NodeTypeSpec<WhiteboardStickyData>;
+/** Text on its own; it grows as it is typed. */
+export declare const textNode: import("..").NodeTypeSpec<WhiteboardTextData>;
+/** A pen stroke; it stretches with its box. */
+export declare const inkNode: import("..").NodeTypeSpec<WhiteboardInkData>;
+/** An image; `data.src` is its address. */
+export declare const imageNode: import("..").NodeTypeSpec<WhiteboardImageData>;
+export interface WhiteboardKitOptions {
+    /**
+     * The current tool, to share with your own toolbar. Made inside the kit
+     * when left out.
+     */
+    tool?: Ref<WhiteboardTool>;
+    /** The built-in toolbar at the top of the editor. Defaults to `true`. */
+    toolbar?: boolean;
+    /**
+     * Turns an image file that is dropped, pasted or picked into the `src` it
+     * is kept as, e.g. by uploading it and returning its address. Without it,
+     * images are kept in the document as data URLs.
+     */
+    upload?: WhiteboardUpload;
+}
+/**
+ * The whiteboard: shape, sticky note and text nodes, the `connector` edge,
+ * the drawing tools with their keys, and a toolbar. Add it after `flowKit()`.
+ */
+export declare function whiteboardKit(options?: WhiteboardKitOptions): FlowExtension;
+export { connectorEdge };

package/dist/types/whiteboard/model.d.ts

@@ -0,0 +1,79 @@
+import type { Tone } from 'dou-ui';
+import type { FlowPortSpec } from '../core/model';
+/** What a press on the board does. */
+export type WhiteboardTool = 'select' | 'hand' | 'rect' | 'ellipse' | 'diamond' | 'sticky' | 'text' | 'pen' | 'eraser';
+/** The tools that put down a node with a box. */
+export type WhiteboardShapeTool = Exclude<WhiteboardTool, 'select' | 'hand' | 'pen' | 'eraser'>;
+export type WhiteboardShape = 'rect' | 'ellipse' | 'diamond';
+/** What every board node can carry. */
+export interface WhiteboardNodeData {
+    [key: string]: unknown;
+    /** Degrees clockwise around the node's centre. */
+    rotation?: number;
+}
+export interface WhiteboardShapeData extends WhiteboardNodeData {
+    shape: WhiteboardShape;
+    text?: string;
+    /** `neutral` by default. */
+    tone?: Tone;
+}
+export interface WhiteboardStickyData extends WhiteboardNodeData {
+    text?: string;
+    /** `warning` (yellow) by default. */
+    tone?: Tone;
+}
+export interface WhiteboardTextData extends WhiteboardNodeData {
+    text?: string;
+}
+/** A pen stroke. */
+export interface WhiteboardInkData extends WhiteboardNodeData {
+    /**
+     * The points as `x, y, pressure` triples, flat, in the node's own units:
+     * `0, 0` is its top left corner when it is `box` in size.
+     */
+    points: number[];
+    /** The size the points were drawn at; the stroke stretches with the node. */
+    box: [number, number];
+    /**
+     * The stroke's width drawn with a mouse or finger. `4` by default; a pen
+     * makes it 0.4 to 1.6 times as wide as it presses lighter or harder.
+     */
+    size?: number;
+    /** The text color when left out. */
+    tone?: Tone;
+}
+/** How a connector runs: one straight line, right-angled turns, or a smooth curve. */
+export type WhiteboardRoute = 'straight' | 'elbow' | 'curve';
+export type WhiteboardDash = 'solid' | 'dashed' | 'dotted' | 'dash-dot';
+/** Which ends of a connector have an arrowhead. */
+export type WhiteboardArrow = 'none' | 'end' | 'both';
+/** A `connector` edge's look. */
+export interface WhiteboardConnectorData {
+    [key: string]: unknown;
+    /** `straight` by default. */
+    route?: WhiteboardRoute;
+    /** `solid` by default. */
+    dash?: WhiteboardDash;
+    /** `end` by default. */
+    arrow?: WhiteboardArrow;
+    /** Where an `elbow` connector's middle run sits, from 0 to 1; set by dragging it. */
+    bend?: number;
+}
+export interface WhiteboardImageData extends WhiteboardNodeData {
+    src: string;
+    /** Read by screen readers. */
+    alt?: string;
+}
+/** Keys for the tools. */
+export declare const whiteboardKeys: Record<WhiteboardTool, string>;
+/** The key that inserts an image. */
+export declare const imageKey = "i";
+/**
+ * Four anchors, one on each side. Each is an output and an input at the
+ * same spot, so a connector can start and end on any of them. Edges in
+ * data go from an output (`right`) to an input (`left-in`). The order puts
+ * `right` and `left-in` first, so a node added after another joins it left
+ * to right.
+ */
+export declare const anchorPorts: FlowPortSpec[];
+export declare const anchorSides: readonly ["top", "right", "bottom", "left"];

package/dist/types/whiteboard/pen.d.ts

@@ -0,0 +1,7 @@
+import type { FlowEditorContext } from '../context';
+import type { FlowPressHandler } from '../core/extension';
+import { type Point } from '../core/model';
+/** Draws a stroke with the pen; it becomes an `ink` node once let go. */
+export declare function drawInk(ctx: FlowEditorContext, event: PointerEvent): FlowPressHandler;
+/** Wipes the strokes the eraser passes over; they go once it lets go. */
+export declare function erase(ctx: FlowEditorContext, start: Point): FlowPressHandler;

package/dist/types/whiteboard/state.d.ts

@@ -0,0 +1,37 @@
+import { type Ref, type ShallowRef } from 'vue';
+import type { FlowEditorContext } from '../context';
+import type { Point, Rect } from '../core/model';
+import type { WhiteboardUpload } from './image';
+import type { InkPoint } from './ink';
+import type { WhiteboardShapeTool, WhiteboardTool } from './model';
+/** What the board's pieces share within one editor. */
+export interface WhiteboardState {
+    tool: Ref<WhiteboardTool>;
+    /** Keeps the tool after drawing, instead of going back to select. */
+    locked: Ref<boolean>;
+    /** The hand is dragging the view. */
+    panning: Ref<boolean>;
+    /** The node whose text is being typed. */
+    editing: ShallowRef<string | null>;
+    /** The box being drawn, with the tool drawing it. */
+    draft: ShallowRef<(Rect & {
+        tool: WhiteboardShapeTool;
+    }) | null>;
+    /** The stroke being drawn with the pen, in canvas coordinates. */
+    ink: ShallowRef<InkPoint[] | null>;
+    /** Strokes the eraser has touched, removed once it lets go. */
+    erasing: ShallowRef<ReadonlySet<string>>;
+    /** Where the eraser is, while it is pressed. */
+    eraser: ShallowRef<Point | null>;
+    /**
+     * Where the turn and corner handles of the selected node are drawn: a
+     * layer above every node, so a neighbour never covers them.
+     */
+    handles: ShallowRef<HTMLElement | null>;
+    /** Images being uploaded. */
+    uploading: Ref<number>;
+    /** The kit's `upload` option. */
+    upload?: WhiteboardUpload;
+}
+/** The board's state in an editor, made on first use. */
+export declare function boardState(context: FlowEditorContext): WhiteboardState;

package/dist/types/whiteboard/transform.d.ts

@@ -0,0 +1,67 @@
+import { type Ref } from 'vue';
+import type { FlowEditorContext } from '../context';
+import type { FlowNode, Point } from '../core/model';
+/** Degrees in `[0, 360)`, rounded to a whole degree. */
+export declare const normalizeAngle: (degrees: number) => number;
+/** Where a turn lands: a multiple of 15° with Shift; near a right angle, the right angle. */
+export declare function snapAngle(degrees: number, shift: boolean): number;
+/** A resize handle: the side or corner it sits on, `-1`, `0` or `1` along each axis. */
+export interface ResizeHandle {
+    x: -1 | 0 | 1;
+    y: -1 | 0 | 1;
+}
+/** The eight handles, corners first. */
+export declare const RESIZE_HANDLES: readonly ResizeHandle[];
+/**
+ * The box a node gets when `handle` is dragged by `delta` (canvas units),
+ * turned by `rotation` or not: it grows along the node's own axes, and the
+ * corner or side across from the handle stays where it is. With `keepRatio`
+ * a corner keeps the box's proportions.
+ */
+export declare function resizeBox(start: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}, rotation: number, handle: ResizeHandle, delta: Point, min: {
+    width: number;
+    height: number;
+}, keepRatio?: boolean): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+/**
+ * The turn and corner handles of a board node. While a handle is dragged
+ * the node is only shown changed, through `previewNode`, so its frame,
+ * handles, ports and edges all follow; the document changes once, when it
+ * is let go. `turning` and `sizing` say what is being dragged to.
+ */
+export declare function useTransformHandles(ctx: FlowEditorContext, node: Ref<FlowNode>, rotation: Ref<number>, min: {
+    width: number;
+    height: number;
+}): {
+    turning: Ref<number | null, number | null>;
+    sizing: Ref<{
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    } | null, {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    } | {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    } | null>;
+    startTurn: (event: PointerEvent) => void;
+    startResize: (event: PointerEvent, handle: ResizeHandle, options?: {
+        keepRatio?: boolean;
+        widthOnly?: boolean;
+    }) => void;
+};

package/dist/types/whiteboard/whiteboard-toolbar.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/whiteboard/board-draft.js

@@ -0,0 +1,6 @@
+import board_draft_vue_vue_type_script_setup_true_lang_default from "./board-draft.vue_vue_type_script_setup_true_lang.js";
+// src/whiteboard/board-draft.vue
+var board_draft_default = board_draft_vue_vue_type_script_setup_true_lang_default;
+export { board_draft_default as default };
+
+//# sourceMappingURL=board-draft.js.map

package/dist/whiteboard/board-draft.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"board-draft.js","names":["_sfc_main"],"sources":["../../src/whiteboard/board-draft.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { useFlowEditor } from '../context'\nimport { inkOutline } from './ink'\nimport { boardState } from './state'\n\n// What a tool is drawing: the box of a shape, note or text, the pen's\n// stroke, or the eraser's reach.\nconst ctx = useFlowEditor()\nconst state = boardState(ctx)\nconst ink = computed(() => (state.ink.value ? inkOutline(state.ink.value) : ''))\nconst eraserRadius = computed(() => 8 / ctx.viewport.value.zoom)\n// the selected node's turn and corner handles are moved in here, above every node\nconst handles = (el: unknown) => (state.handles.value = (el as HTMLElement | null) ?? null)\n</script>\n\n<template>\n  <div :ref=\"handles\" class=\"dou-whiteboard-handles\" />\n  <div\n    v-if=\"state.draft.value\"\n    class=\"dou-whiteboard-draft\"\n    :class=\"`is-${state.draft.value.tool}`\"\n    :style=\"{\n      transform: `translate(${state.draft.value.x}px, ${state.draft.value.y}px)`,\n      width: `${state.draft.value.width}px`,\n      height: `${state.draft.value.height}px`,\n    }\"\n    aria-hidden=\"true\"\n  />\n  <svg v-if=\"ink || state.eraser.value\" class=\"dou-whiteboard-strokes\" aria-hidden=\"true\">\n    <path v-if=\"ink\" class=\"dou-whiteboard-strokes__ink\" :d=\"ink\" />\n    <circle\n      v-if=\"state.eraser.value\"\n      class=\"dou-whiteboard-strokes__eraser\"\n      :cx=\"state.eraser.value.x\"\n      :cy=\"state.eraser.value.y\"\n      :r=\"eraserRadius\"\n    />\n  </svg>\n</template>\n"],"mappings":""}

package/dist/whiteboard/board-draft.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,58 @@
+import { useFlowEditor } from "../context.js";
+import { inkOutline } from "./ink.js";
+import { boardState } from "./state.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, unref } from "vue";
+// src/whiteboard/board-draft.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 1,
+	class: "dou-whiteboard-strokes",
+	"aria-hidden": "true"
+};
+var _hoisted_2 = ["d"];
+var _hoisted_3 = [
+	"cx",
+	"cy",
+	"r"
+];
+var board_draft_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "board-draft",
+	setup(__props) {
+		const ctx = useFlowEditor();
+		const state = boardState(ctx);
+		const ink = computed(() => state.ink.value ? inkOutline(state.ink.value) : "");
+		const eraserRadius = computed(() => 8 / ctx.viewport.value.zoom);
+		const handles = (el) => state.handles.value = el ?? null;
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [
+				createElementVNode("div", {
+					ref: handles,
+					class: "dou-whiteboard-handles"
+				}, null, 512),
+				unref(state).draft.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(["dou-whiteboard-draft", `is-${unref(state).draft.value.tool}`]),
+					style: normalizeStyle({
+						transform: `translate(${unref(state).draft.value.x}px, ${unref(state).draft.value.y}px)`,
+						width: `${unref(state).draft.value.width}px`,
+						height: `${unref(state).draft.value.height}px`
+					}),
+					"aria-hidden": "true"
+				}, null, 6)) : createCommentVNode("", true),
+				ink.value || unref(state).eraser.value ? (openBlock(), createElementBlock("svg", _hoisted_1, [ink.value ? (openBlock(), createElementBlock("path", {
+					key: 0,
+					class: "dou-whiteboard-strokes__ink",
+					d: ink.value
+				}, null, 8, _hoisted_2)) : createCommentVNode("", true), unref(state).eraser.value ? (openBlock(), createElementBlock("circle", {
+					key: 1,
+					class: "dou-whiteboard-strokes__eraser",
+					cx: unref(state).eraser.value.x,
+					cy: unref(state).eraser.value.y,
+					r: eraserRadius.value
+				}, null, 8, _hoisted_3)) : createCommentVNode("", true)])) : createCommentVNode("", true)
+			], 64);
+		};
+	}
+});
+export { board_draft_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=board-draft.vue_vue_type_script_setup_true_lang.js.map

package/dist/whiteboard/board-draft.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"board-draft.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_Fragment","_createElementVNode","_unref","_normalizeClass","_normalizeStyle","_createCommentVNode"],"sources":["../../src/whiteboard/board-draft.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { useFlowEditor } from '../context'\nimport { inkOutline } from './ink'\nimport { boardState } from './state'\n\n// What a tool is drawing: the box of a shape, note or text, the pen's\n// stroke, or the eraser's reach.\nconst ctx = useFlowEditor()\nconst state = boardState(ctx)\nconst ink = computed(() => (state.ink.value ? inkOutline(state.ink.value) : ''))\nconst eraserRadius = computed(() => 8 / ctx.viewport.value.zoom)\n// the selected node's turn and corner handles are moved in here, above every node\nconst handles = (el: unknown) => (state.handles.value = (el as HTMLElement | null) ?? null)\n</script>\n\n<template>\n  <div :ref=\"handles\" class=\"dou-whiteboard-handles\" />\n  <div\n    v-if=\"state.draft.value\"\n    class=\"dou-whiteboard-draft\"\n    :class=\"`is-${state.draft.value.tool}`\"\n    :style=\"{\n      transform: `translate(${state.draft.value.x}px, ${state.draft.value.y}px)`,\n      width: `${state.draft.value.width}px`,\n      height: `${state.draft.value.height}px`,\n    }\"\n    aria-hidden=\"true\"\n  />\n  <svg v-if=\"ink || state.eraser.value\" class=\"dou-whiteboard-strokes\" aria-hidden=\"true\">\n    <path v-if=\"ink\" class=\"dou-whiteboard-strokes__ink\" :d=\"ink\" />\n    <circle\n      v-if=\"state.eraser.value\"\n      class=\"dou-whiteboard-strokes__eraser\"\n      :cx=\"state.eraser.value.x\"\n      :cy=\"state.eraser.value.y\"\n      :r=\"eraserRadius\"\n    />\n  </svg>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAQA,MAAM,MAAM,cAAc;EAC1B,MAAM,QAAQ,WAAW,GAAG;EAC5B,MAAM,MAAM,eAAgB,MAAM,IAAI,QAAQ,WAAW,MAAM,IAAI,KAAK,IAAI,EAAG;EAC/E,MAAM,eAAe,eAAe,IAAI,IAAI,SAAS,MAAM,IAAI;EAE/D,MAAM,WAAW,OAAiB,MAAM,QAAQ,QAAS,MAA6B;;;IAIpFG,mBAAqD,OAAA;KAA/C,KAAK;KAAS,OAAM;;IAElBC,MAAA,KAAA,CAAK,CAAC,MAAM,SADpBJ,UAAA,GAAAC,mBAUE,OAAA;;KARA,OAAKI,eAAA,CAAC,wBAAsB,MACdD,MAAA,KAAA,CAAK,CAAC,MAAM,MAAM,MAAI,CAAA;KACnC,OAAKE,eAAA;MAAkC,WAAA,aAAAF,MAAA,KAAA,CAAK,CAAC,MAAM,MAAM,EAAC,MAAOA,MAAA,KAAA,CAAK,CAAC,MAAM,MAAM,EAAC;MAAuB,OAAA,GAAAA,MAAA,KAAA,CAAK,CAAC,MAAM,MAAM,MAAK;MAAuB,QAAA,GAAAA,MAAA,KAAA,CAAK,CAAC,MAAM,MAAM,OAAM;;KAKlL,eAAY;;IAEH,IAAA,SAAOA,MAAA,KAAA,CAAK,CAAC,OAAO,SAA/BJ,UAAA,GAAAC,mBASM,OATN,YASM,CARQ,IAAA,SAAZD,UAAA,GAAAC,mBAAgE,QAAA;;KAA/C,OAAM;KAA+B,GAAG,IAAA;I,yDAEjDG,MAAA,KAAA,CAAK,CAAC,OAAO,SADrBJ,UAAA,GAAAC,mBAME,UAAA;;KAJA,OAAM;KACL,IAAIG,MAAA,KAAA,CAAK,CAAC,OAAO,MAAM;KACvB,IAAIA,MAAA,KAAA,CAAK,CAAC,OAAO,MAAM;KACvB,GAAG,aAAA"}

package/dist/whiteboard/board-node.js

@@ -0,0 +1,6 @@
+import board_node_vue_vue_type_script_setup_true_lang_default from "./board-node.vue_vue_type_script_setup_true_lang.js";
+// src/whiteboard/board-node.vue
+var board_node_default = board_node_vue_vue_type_script_setup_true_lang_default;
+export { board_node_default as default };
+
+//# sourceMappingURL=board-node.js.map

package/dist/whiteboard/board-node.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"board-node.js","names":["_sfc_main"],"sources":["../../src/whiteboard/board-node.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ImageOffIcon } from '@dou-ui/icons'\nimport { computed, nextTick, ref, toRef, useTemplateRef, watch } from 'vue'\nimport DouFlowPort from '../components/flow-port.vue'\nimport { useFlowEditor } from '../context'\nimport type { NodeViewProps } from '../core/node-types'\nimport type { Tone } from 'dou-ui'\nimport { fitInk, inkOutline, INK_SIZE, unpack } from './ink'\nimport { anchorSides, type WhiteboardShape } from './model'\nimport { boardState } from './state'\nimport { RESIZE_HANDLES, useTransformHandles, type ResizeHandle } from './transform'\n\ntype BoardData = {\n  [key: string]: unknown\n  text?: string\n  shape?: WhiteboardShape\n  tone?: Tone\n  rotation?: number\n  points?: number[]\n  box?: [number, number]\n  size?: number\n  src?: string\n  alt?: string\n}\n\ntype Kind = 'shape' | 'sticky' | 'text' | 'ink' | 'image'\n\nconst props = defineProps<NodeViewProps<BoardData>>()\nconst ctx = useFlowEditor()\nconst state = boardState(ctx)\n\nconst KINDS: readonly Kind[] = ['sticky', 'text', 'ink', 'image']\n/** What the node is: one of the shapes, a note, text, a pen stroke or an image. */\nconst kind = computed<Kind>(() => KINDS.find((k) => k === props.node.type) ?? 'shape')\nconst shape = computed<WhiteboardShape>(() => props.data.shape ?? 'rect')\nconst tone = computed<Tone>(\n  () => props.data.tone ?? (kind.value === 'sticky' ? 'warning' : 'neutral'),\n)\nconst writable = computed(() => ['shape', 'sticky', 'text'].includes(kind.value))\n\nconst MIN: Record<Kind, number> = { shape: 24, sticky: 64, text: 40, ink: 8, image: 24 }\nconst rotation = computed(() => props.data.rotation ?? 0)\nconst { turning, startTurn, startResize } = useTransformHandles(\n  ctx,\n  toRef(props, 'node'),\n  rotation,\n  { width: MIN[kind.value], height: MIN[kind.value] },\n)\n/*\n * A handle being dragged shows the node changed through the editor, so\n * `node` and `data` already are what it is dragged to: the node's own frame,\n * its ports and its edges follow along with it.\n */\nconst transform = computed(() => (rotation.value ? { rotate: `${rotation.value}deg` } : undefined))\n/**\n * The resize handles: an image keeps its proportions, from its corners; text\n * only widens, so it has no top or bottom side; the rest has every corner\n * and side.\n */\nconst resizeHandles = computed(() =>\n  kind.value === 'image'\n    ? RESIZE_HANDLES.filter((h) => h.x && h.y)\n    : kind.value === 'text'\n      ? RESIZE_HANDLES.filter((h) => h.x)\n      : RESIZE_HANDLES,\n)\nconst sideHandles = computed(() => resizeHandles.value.filter((h) => !h.x || !h.y))\nconst cornerHandles = computed(() => resizeHandles.value.filter((h) => h.x && h.y))\n/** The node's box, turned with it, for the handles drawn above every node. */\nconst frameStyle = computed(() => {\n  const rect = ctx.getNodeRect(props.node.id) ?? { ...props.node, width: 0, height: 0 }\n  return {\n    // `translate`, not `transform`: it applies before `rotate`, so the box\n    // turns about its own centre and its offset is not turned with it\n    translate: `${rect.x}px ${rect.y}px`,\n    width: `${rect.width}px`,\n    height: `${rect.height}px`,\n    rotate: rotation.value ? `${rotation.value}deg` : undefined,\n  }\n})\nconst CURSORS = ['ew-resize', 'nwse-resize', 'ns-resize', 'nesw-resize'] as const\n/** The resize cursor along a handle's way out, turned with the node. */\nfunction cursorOf(handle: ResizeHandle) {\n  // text only widens, from a corner too\n  if (kind.value === 'text') handle = { x: handle.x, y: 0 }\n  const degrees = (Math.atan2(handle.y, handle.x) * 180) / Math.PI + rotation.value\n  return CURSORS[((Math.round(degrees / 45) % 4) + 4) % 4]\n}\nfunction onResize(event: PointerEvent, handle: ResizeHandle) {\n  startResize(event, handle, {\n    keepRatio: kind.value === 'image',\n    widthOnly: kind.value === 'text',\n  })\n}\n/** Where a handle sits on the box: `-1` is the start, `1` the end. */\nconst place = (v: -1 | 0 | 1) => `${(v + 1) * 50}%`\n\n/** Handles show on the one selected node, while the select tool is in hand. */\nconst handles = computed(\n  () =>\n    props.selected &&\n    !props.readonly &&\n    !editing.value &&\n    state.tool.value === 'select' &&\n    ctx.selection.value.nodes.length === 1,\n)\n\n/** The stroke fitted to the box shown, so stretching it keeps its thickness. */\nconst ink = computed(() => {\n  const { points, box: inkBox } = props.data\n  if (kind.value !== 'ink' || !points || !inkBox) return ''\n  const size = props.data.size ?? INK_SIZE\n  return inkOutline(fitInk(unpack(points), inkBox, shown.value.w, shown.value.h, size), size)\n})\nconst erasing = computed(() => state.erasing.value.has(props.node.id))\n\n// drawn in the node's own units, half the 1.5px stroke in from the edge\nconst shown = computed(() => ({ w: props.node.width ?? 160, h: props.node.height ?? 100 }))\nconst diamond = computed(() => {\n  const { w, h } = shown.value\n  const i = 1\n  return `${w / 2},${i} ${w - i},${h / 2} ${w / 2},${h - i} ${i},${h / 2}`\n})\n\n// Whole lines that fit, the last one ending in an ellipsis, as an export draws them.\nconst textEl = useTemplateRef<HTMLElement>('textEl')\nconst textMetrics = ref<{ line: number; padding: number } | null>(null)\nwatch(\n  textEl,\n  (el) => {\n    if (!el) return\n    const s = getComputedStyle(el)\n    const line = Number.parseFloat(s.lineHeight)\n    if (!line) return\n    const padding = Number.parseFloat(s.paddingTop) + Number.parseFloat(s.paddingBottom)\n    textMetrics.value = { line, padding: padding || 0 }\n  },\n  { flush: 'post' },\n)\nconst textStyle = computed(() => {\n  const m = textMetrics.value\n  if (!m || kind.value === 'text') return undefined\n  const height = shown.value.h\n  return { '-webkit-line-clamp': Math.max(1, Math.floor((height - m.padding + 0.5) / m.line)) }\n})\n\n// An image that can't be loaded: a plain box with a sign, as an export draws it.\nconst broken = ref(false)\nwatch(\n  () => props.data.src,\n  () => (broken.value = false),\n)\n\nconst editing = computed(() => state.editing.value === props.node.id)\nconst draft = ref('')\nconst field = useTemplateRef<HTMLTextAreaElement>('field')\n\nwatch(\n  editing,\n  (on) => {\n    if (!on) return\n    draft.value = props.data.text ?? ''\n    void nextTick(() => {\n      fit()\n      field.value?.focus()\n      field.value?.select()\n    })\n  },\n  { immediate: true },\n)\n\n// browsers without `field-sizing` grow the field by hand\nfunction fit() {\n  const el = field.value\n  if (!el || CSS.supports?.('field-sizing', 'content')) return\n  el.style.height = 'auto'\n  el.style.height = `${el.scrollHeight}px`\n}\nwatch(draft, () => void nextTick(fit))\n\nfunction edit() {\n  if (props.readonly || !writable.value) return\n  state.editing.value = props.node.id\n}\n\nfunction finish() {\n  if (!editing.value) return\n  state.editing.value = null\n  const text = draft.value.replace(/\\s+$/, '')\n  // text with nothing written in it is nothing at all\n  if (!text && kind.value === 'text') ctx.transact((tr) => tr.removeNode(props.node.id))\n  else if (text !== (props.data.text ?? '')) props.updateData({ text: text || undefined })\n  // back to the canvas, so the keys go on working\n  ctx.root.value?.focus({ preventScroll: true })\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.isComposing) return\n  // Escape, or mod+Enter, puts the text down; Enter is a new line\n  if (event.key === 'Escape' || (event.key === 'Enter' && (event.metaKey || event.ctrlKey))) {\n    event.preventDefault()\n    event.stopPropagation()\n    finish()\n  }\n}\n</script>\n\n<template>\n  <div\n    class=\"dou-whiteboard-node\"\n    :class=\"[\n      `is-${kind}`,\n      kind === 'shape' && `is-${shape}`,\n      `is-${tone}`,\n      {\n        'is-editing': editing,\n        'is-turned': !!rotation,\n        'is-turning': turning !== null,\n        'is-selected': selected,\n        'is-erasing': erasing,\n      },\n    ]\"\n    :style=\"transform\"\n    @dblclick.stop=\"edit\"\n  >\n    <svg\n      v-if=\"kind === 'shape'\"\n      class=\"dou-whiteboard-node__shape\"\n      :viewBox=\"`0 0 ${shown.w} ${shown.h}`\"\n      aria-hidden=\"true\"\n    >\n      <rect\n        v-if=\"shape === 'rect'\"\n        x=\"0.75\"\n        y=\"0.75\"\n        :width=\"Math.max(0, shown.w - 1.5)\"\n        :height=\"Math.max(0, shown.h - 1.5)\"\n        rx=\"8\"\n      />\n      <ellipse\n        v-else-if=\"shape === 'ellipse'\"\n        :cx=\"shown.w / 2\"\n        :cy=\"shown.h / 2\"\n        :rx=\"Math.max(0, shown.w / 2 - 0.75)\"\n        :ry=\"Math.max(0, shown.h / 2 - 0.75)\"\n      />\n      <polygon v-else :points=\"diamond\" />\n    </svg>\n    <svg\n      v-else-if=\"kind === 'ink' && data.box\"\n      class=\"dou-whiteboard-node__ink\"\n      :viewBox=\"`0 0 ${shown.w} ${shown.h}`\"\n      aria-hidden=\"true\"\n    >\n      <path class=\"dou-whiteboard-node__ink-hit\" :d=\"ink\" />\n      <path :d=\"ink\" />\n    </svg>\n    <div\n      v-else-if=\"kind === 'image' && broken\"\n      class=\"dou-whiteboard-node__image is-broken\"\n      role=\"img\"\n      :aria-label=\"data.alt || undefined\"\n    >\n      <ImageOffIcon />\n    </div>\n    <img\n      v-else-if=\"kind === 'image'\"\n      class=\"dou-whiteboard-node__image\"\n      :src=\"data.src\"\n      :alt=\"data.alt ?? ''\"\n      draggable=\"false\"\n      @error=\"broken = true\"\n    />\n    <textarea\n      v-if=\"editing\"\n      ref=\"field\"\n      v-model=\"draft\"\n      class=\"dou-whiteboard-node__text dou-whiteboard-node__field\"\n      :aria-label=\"ctx.messages.value.board.editText\"\n      @keydown=\"onKeydown\"\n      @blur=\"finish\"\n      @pointerdown.stop\n    />\n    <div\n      v-else-if=\"writable\"\n      ref=\"textEl\"\n      class=\"dou-whiteboard-node__text\"\n      :style=\"textStyle\"\n      v-text=\"data.text\"\n    />\n    <div v-if=\"kind !== 'ink'\" class=\"dou-whiteboard-node__anchors\">\n      <template v-for=\"side in anchorSides\" :key=\"side\">\n        <DouFlowPort :id=\"`${side}-in`\" class=\"dou-whiteboard-node__anchor\" />\n        <DouFlowPort :id=\"side\" class=\"dou-whiteboard-node__anchor\" />\n      </template>\n    </div>\n    <template v-if=\"handles\">\n      <!-- the sides stay on the node, under its anchors; the turn and the\n           corners go above every node, so a neighbour never covers them -->\n      <span\n        v-for=\"handle in sideHandles\"\n        :key=\"`${handle.x},${handle.y}`\"\n        :class=\"['dou-whiteboard-node__side', handle.x ? 'is-x' : 'is-y']\"\n        :style=\"{ left: place(handle.x), top: place(handle.y), cursor: cursorOf(handle) }\"\n        :data-handle=\"`${handle.x},${handle.y}`\"\n        data-dou-nodrag\n        aria-hidden=\"true\"\n        @pointerdown=\"onResize($event, handle)\"\n      />\n      <Teleport :to=\"state.handles.value\" :disabled=\"!state.handles.value\">\n        <div class=\"dou-whiteboard-node__frame\" :style=\"frameStyle\" aria-hidden=\"true\">\n          <!-- data-flow-overlay on its target: the selection's toolbar keeps\n               clear of where a finger can take it, when it floats below the\n               node or the node is turned upside down -->\n          <span class=\"dou-whiteboard-node__turn\" data-dou-nodrag @pointerdown=\"startTurn\">\n            <span class=\"dou-whiteboard-node__target\" data-flow-overlay />\n          </span>\n          <span\n            v-for=\"handle in cornerHandles\"\n            :key=\"`${handle.x},${handle.y}`\"\n            class=\"dou-whiteboard-node__corner\"\n            :style=\"{ left: place(handle.x), top: place(handle.y), cursor: cursorOf(handle) }\"\n            :data-handle=\"`${handle.x},${handle.y}`\"\n            data-dou-nodrag\n            @pointerdown=\"onResize($event, handle)\"\n          />\n        </div>\n      </Teleport>\n    </template>\n  </div>\n</template>\n"],"mappings":""}