@zerodep-dev/vue-tsx-pro-ui 0.0.0-stage → 0.1.0

package/dist/date/picker-popover.js

@@ -0,0 +1,126 @@
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+import { useRecipe } from "../config/styles.js";
+import { Button } from "../base/Button.js";
+import { IconButton } from "../base/IconButton.js";
+import { focusFirst } from "../utils/dom/focus.js";
+import { toElement } from "../utils/dom/element.js";
+import { anchoredPanelSx, useAnchoredPopover } from "../utils/dom/floating.js";
+import { inputRecipe } from "../input/control.js";
+import { createVNode, mergeProps, shallowRef, useId } from "vue";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/date/picker-popover.tsx
+/** 选择器上的打开按钮与弹层的部件属性 */
+/** usePickerPopover 每次渲染读取的状态 */
+/** usePickerPopover 的回调 */
+/** 选择器的打开按钮与弹层 */
+function usePickerPopover(read, events) {
+	const id = useId();
+	let anchor = shallowRef(null);
+	let panel = shallowRef(null);
+	let trigger = shallowRef(null);
+	const shell = useRecipe(inputRecipe);
+	const { onToggle } = useAnchoredPopover(() => {
+		const { open, placement = "bottom-start", matchWidth } = read();
+		return {
+			open,
+			anchor: anchor.value,
+			panel: panel.value,
+			floating: {
+				placement,
+				matchWidth
+			},
+			restoreFocus: trigger.value
+		};
+	}, {
+		close: (reason, event) => events.toggle(false, reason, event),
+		shown: events.shown
+	});
+	return {
+		/** 弹层的 id（按钮的 aria-controls）；弹层里的元素可以据此派生自己的 id */
+		id,
+		/** 输入框外壳（锚点）：放进 propsRoot 的 ref */
+		anchorRef: (element) => anchor.value = toElement(element),
+		/** 输入框外壳：选完日期后把焦点交给其中的某一段 */
+		get anchor() {
+			return anchor.value;
+		},
+		/** 分段上的 keydown：Alt + ↓ 打开 */
+		onKeydown: (event) => {
+			if (!event.altKey || event.key !== "ArrowDown" || !read().editable) return;
+			event.preventDefault();
+			events.toggle(true, "trigger", event);
+		},
+		/** 输入框后缀里的打开按钮 */
+		button(icon, user) {
+			const { open, editable, label } = read();
+			return createVNode(IconButton, mergePartProps({
+				...shell().button,
+				radius: "full",
+				icon,
+				"aria-label": label
+			}, user, {
+				ref: (element) => trigger.value = toElement(element),
+				disabled: !editable,
+				"aria-haspopup": "dialog",
+				"aria-expanded": open,
+				"aria-controls": id,
+				onClick: (event) => events.toggle(!open, "trigger", event)
+			}), null);
+		},
+		/** 弹层：内容只在打开时渲染（由调用方按 open 给） */
+		panel(sx, user, children) {
+			const { open, label, size } = read();
+			return createVNode("div", mergeProps(mergeAttrs({
+				sx: [anchoredPanelSx(size), sx],
+				"aria-label": label
+			}, user, {
+				ref: panel,
+				id,
+				popover: "auto",
+				role: "dialog",
+				onToggle
+			}), { "data-state": open ? "open" : "closed" }), [children]);
+		}
+	};
+}
+/** 弹层里是日历时：焦点进日历当前的那一格（已选或今天），不是“上个月”按钮 */
+function focusCalendar(panel) {
+	const cell = panel.querySelector("[role=\"grid\"] [tabindex=\"0\"]");
+	if (cell) cell.focus();
+	else focusFirst(panel);
+}
+/** 弹层里的一个快捷选项（“今天”“最近 7 天”） */
+/** 快捷选项的样式：presets（一列，靠日历那边有分隔线）、preset（按钮文字靠左） */
+var pickerPresetStyles = css.create({
+	presets: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "_xs",
+		paddingInlineEnd: "_sm",
+		borderInlineEndWidth: "_xs",
+		borderInlineEndStyle: "solid",
+		borderInlineEndColor: "_borderMuted"
+	},
+	preset: { justifyContent: "flex-start" }
+});
+/** 日历旁边的一列快捷选项（DatePicker、DateRangePicker 共用）：一组按钮，当前值对应的那一项按下 */
+function renderPickerPresets(presets, label, user) {
+	if (presets.length === 0) return null;
+	return createVNode("div", mergeAttrs({ sx: pickerPresetStyles.presets }, user, {
+		role: "group",
+		"aria-label": label
+	}), [presets.map((preset) => createVNode(Button, {
+		"key": preset.key,
+		"sx": pickerPresetStyles.preset,
+		"size": "sm",
+		"variant": preset.active ? "soft" : "ghost",
+		"tone": "neutral",
+		"aria-pressed": preset.active,
+		"disabled": preset.disabled,
+		"onClick": preset.onPick
+	}, { default: () => [preset.label] }))]);
+}
+//#endregion
+export { focusCalendar, pickerPresetStyles, renderPickerPresets, usePickerPopover };
+
+//# sourceMappingURL=picker-popover.js.map

package/dist/date/picker-popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"picker-popover.js","names":["_vue_shallowRef","_createVNode","_mergeProps"],"sources":["../../src/date/picker-popover.tsx"],"sourcesContent":["/**\n * 日期、时间选择器共用的打开按钮与弹层（DatePicker、DateRangePicker、TimePicker），以及日历旁边的快捷选项：\n * 输入框外壳是定位的锚点，后缀里的按钮打开，弹层是 role=\"dialog\" 的原生 popover（Esc、点外部关闭）；\n * 关闭时焦点还给按钮（外壳不可聚焦）；分段里按 Alt + ↓ 打开（同原生 select）。在组件 setup 里调用。\n *\n *   const picker = usePickerPopover(() => ({ open, editable, label: lang.datePickerOpen }), {\n *     toggle: setOpen,\n *     shown: (panel) => panel.querySelector('…')?.focus(),\n *   });\n *   <DateField propsRoot={{ ref: picker.anchorRef }} onKeydown={picker.onKeydown} suffix={picker.button(CalendarDays, propsButton)} />\n *   {picker.panel(sx, propsPopover, open && <Calendar … />)}\n */\nimport { useId, type VNodeChild } from 'vue';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { Button } from '../base/Button';\nimport type { IconData } from '../base/Icon';\nimport { IconButton, type IconButtonProps } from '../base/IconButton';\nimport { useRecipe } from '../config/styles';\nimport { inputRecipe } from '../input/control';\nimport { anchoredPanelSx, useAnchoredPopover, type FloatingPlacement } from '../utils/dom/floating';\nimport { focusFirst } from '../utils/dom/focus';\nimport type { SetOpen } from '../utils/dom/open-change';\nimport { toElement } from '../utils/dom/element';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport type { TextSize } from '../utils/style/typography';\n\n/** 选择器上的打开按钮与弹层的部件属性 */\nexport interface PickerPopoverParts {\n  /** 弹出位置，默认 bottom-start；空间不够时自动翻转 */\n  placement?: FloatingPlacement;\n  /** 打开按钮的部件属性 */\n  propsButton?: Omit<Partial<IconButtonProps>, 'onClick' | 'aria-expanded' | 'aria-controls'>;\n  /** 弹层的部件属性 */\n  propsPopover?: PartProps<'div', 'id' | 'popover' | 'role'>;\n}\n\n/** usePickerPopover 每次渲染读取的状态 */\nexport interface PickerPopoverState {\n  /** 是否打开 */\n  open: boolean;\n  /** 能不能打开：不可用、只读时按钮也不可用 */\n  editable: boolean;\n  /** 按钮与弹层的名称（“选择日期”） */\n  label: string;\n  /** 弹出位置 */\n  placement?: FloatingPlacement;\n  /** 弹层与输入框同宽（时间列表） */\n  matchWidth?: boolean;\n  /** 控件的字号档位：弹层渲染在顶层、不继承输入框的字号，按它设置 */\n  size?: TextSize;\n}\n\n/** usePickerPopover 的回调 */\nexport interface PickerPopoverEvents {\n  /** 打开或关闭（按钮、Alt + ↓、Esc、点外部）：写回组件的 open 并通知 onOpenChange，一般是组件的 openSetter */\n  toggle: SetOpen;\n  /** 打开后、第一次定位完成时：把焦点交给弹层里合适的元素 */\n  shown: (panel: HTMLElement) => void;\n}\n\n/** 选择器的打开按钮与弹层 */\nexport function usePickerPopover(read: () => PickerPopoverState, events: PickerPopoverEvents) {\n  const id = useId();\n  let anchor = _state.raw<HTMLElement | null>(null);\n  let panel = _state.raw<HTMLElement | null>(null);\n  let trigger = _state.raw<HTMLElement | null>(null);\n  // 打开按钮放在输入框外壳里：用外壳配方的 button 部件（带 styles.Input 的定制）\n  const shell = useRecipe(inputRecipe);\n\n  const { onToggle } = useAnchoredPopover(\n    () => {\n      const { open, placement = 'bottom-start', matchWidth } = read();\n      return { open, anchor, panel, floating: { placement, matchWidth }, restoreFocus: trigger };\n    },\n    { close: (reason, event) => events.toggle(false, reason, event), shown: events.shown },\n  );\n\n  return {\n    /** 弹层的 id（按钮的 aria-controls）；弹层里的元素可以据此派生自己的 id */\n    id,\n    /** 输入框外壳（锚点）：放进 propsRoot 的 ref */\n    anchorRef: (element: unknown) => (anchor = toElement(element)),\n    /** 输入框外壳：选完日期后把焦点交给其中的某一段 */\n    get anchor() {\n      return anchor;\n    },\n    /** 分段上的 keydown：Alt + ↓ 打开 */\n    onKeydown: (event: KeyboardEvent) => {\n      if (!event.altKey || event.key !== 'ArrowDown' || !read().editable) return;\n      event.preventDefault();\n      events.toggle(true, 'trigger', event);\n    },\n    /** 输入框后缀里的打开按钮 */\n    button(icon: IconData, user?: PickerPopoverParts['propsButton']) {\n      const { open, editable, label } = read();\n      return (\n        <IconButton\n          {...mergePartProps<IconButtonProps>(\n            { ...shell().button, radius: 'full', icon, 'aria-label': label },\n            user,\n            {\n              ref: (element: unknown) => (trigger = toElement(element)),\n              disabled: !editable,\n              'aria-haspopup': 'dialog',\n              'aria-expanded': open,\n              'aria-controls': id,\n              onClick: (event: MouseEvent) => events.toggle(!open, 'trigger', event),\n            },\n          )}\n        />\n      );\n    },\n    /** 弹层：内容只在打开时渲染（由调用方按 open 给） */\n    panel(sx: css.SxStyles, user: PickerPopoverParts['propsPopover'], children: VNodeChild) {\n      const { open, label, size } = read();\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              sx: [anchoredPanelSx(size), sx],\n              'aria-label': label,\n            },\n            user,\n            { ref: _toRef(panel), id, popover: 'auto', role: 'dialog', onToggle },\n          )}\n          data-state={open ? 'open' : 'closed'}\n        >\n          {children}\n        </div>\n      );\n    },\n  };\n}\n\n/** 弹层里是日历时：焦点进日历当前的那一格（已选或今天），不是“上个月”按钮 */\nexport function focusCalendar(panel: HTMLElement): void {\n  const cell = panel.querySelector<HTMLElement>('[role=\"grid\"] [tabindex=\"0\"]');\n  if (cell) cell.focus();\n  else focusFirst(panel);\n}\n\n/** 弹层里的一个快捷选项（“今天”“最近 7 天”） */\nexport interface PickerPreset {\n  /** 列表里的 key */\n  key: string;\n  /** 按钮上的文字 */\n  label: string;\n  /** 当前值就是它：按钮按下（aria-pressed） */\n  active: boolean;\n  /** 超出可选范围：不可用 */\n  disabled?: boolean;\n  /** 点了 */\n  onPick: () => void;\n}\n\n/** 快捷选项的样式：presets（一列，靠日历那边有分隔线）、preset（按钮文字靠左） */\nexport const pickerPresetStyles = css.create({\n  presets: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '_xs',\n    paddingInlineEnd: '_sm',\n    borderInlineEndWidth: '_xs',\n    borderInlineEndStyle: 'solid',\n    borderInlineEndColor: '_borderMuted',\n  },\n  preset: { justifyContent: 'flex-start' },\n});\n\n/** 日历旁边的一列快捷选项（DatePicker、DateRangePicker 共用）：一组按钮，当前值对应的那一项按下 */\nexport function renderPickerPresets(\n  presets: readonly PickerPreset[],\n  label: string,\n  user?: PartProps<'div', 'role'>,\n): VNodeChild {\n  if (presets.length === 0) return null;\n  return (\n    <div\n      {...mergeAttrs<'div'>({ sx: pickerPresetStyles.presets }, user, {\n        role: 'group',\n        'aria-label': label,\n      })}\n    >\n      {presets.map((preset) => (\n        <Button\n          key={preset.key}\n          sx={pickerPresetStyles.preset}\n          size=\"sm\"\n          variant={preset.active ? 'soft' : 'ghost'}\n          tone=\"neutral\"\n          aria-pressed={preset.active}\n          disabled={preset.disabled}\n          onClick={preset.onPick}\n        >\n          {preset.label}\n        </Button>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AA6DA,SAAgB,iBAAiB,MAAgC,QAA6B;CAC5F,MAAM,KAAK,MAAM;CACjB,IAAI,SAAMA,WAAkC,IAAI;CAChD,IAAI,QAAKA,WAAkC,IAAI;CAC/C,IAAI,UAAOA,WAAkC,IAAI;CAEjD,MAAM,QAAQ,UAAU,WAAW;CAEnC,MAAM,EAAE,aAAa,yBACb;EACJ,MAAM,EAAE,MAAM,YAAY,gBAAgB,eAAe,KAAK;EAC9D,OAAO;GAAE;GAAM,QAAM,OAAA;GAAE,OAAK,MAAA;GAAE,UAAU;IAAE;IAAW;GAAW;GAAG,cAAY,QAAA;EAAU;CAC3F,GACA;EAAE,QAAQ,QAAQ,UAAU,OAAO,OAAO,OAAO,QAAQ,KAAK;EAAG,OAAO,OAAO;CAAM,CACvF;CAEA,OAAO;;EAEL;;EAEA,YAAY,YAAsB,OAAA,QAAS,UAAU,OAAO;;EAE5D,IAAI,SAAS;GACX,OAAA,OAAA;EACF;;EAEA,YAAY,UAAyB;GACnC,IAAI,CAAC,MAAM,UAAU,MAAM,QAAQ,eAAe,CAAC,KAAK,CAAC,CAAC,UAAU;GACpE,MAAM,eAAe;GACrB,OAAO,OAAO,MAAM,WAAW,KAAK;EACtC;;EAEA,OAAO,MAAgB,MAA0C;GAC/D,MAAM,EAAE,MAAM,UAAU,UAAU,KAAK;GACvC,OAAAC,YAAA,YAEQ,eACF;IAAE,GAAG,MAAM,CAAC,CAAC;IAAQ,QAAQ;IAAQ;IAAM,cAAc;GAAM,GAC/D,MACA;IACE,MAAM,YAAsB,QAAA,QAAU,UAAU,OAAO;IACvD,UAAU,CAAC;IACX,iBAAiB;IACjB,iBAAiB;IACjB,iBAAiB;IACjB,UAAU,UAAsB,OAAO,OAAO,CAAC,MAAM,WAAW,KAAK;GACvE,CACF,GAAC,IAAA;EAGP;;EAEA,MAAM,IAAkB,MAA0C,UAAsB;GACtF,MAAM,EAAE,MAAM,OAAO,SAAS,KAAK;GACnC,OAAAA,YAAA,OAAAC,WAEQ,WACF;IACE,IAAI,CAAC,gBAAgB,IAAI,GAAG,EAAE;IAC9B,cAAc;GAChB,GACA,MACA;IAAE,KAAG;IAAiB;IAAI,SAAS;IAAQ,MAAM;IAAU;GAAS,CACtE,GAAC,EAAA,cACW,OAAO,SAAS,SAAQ,CAAA,GAAA,CAEnC,QAAQ,CAAA;EAGf;CACF;AACF;;AAGA,SAAgB,cAAc,OAA0B;CACtD,MAAM,OAAO,MAAM,cAA2B,kCAA8B;CAC5E,IAAI,MAAM,KAAK,MAAM;MAChB,WAAW,KAAK;AACvB;;;AAiBA,IAAa,qBAAqB,IAAI,OAAO;CAC3C,SAAS;EACP,SAAS;EACT,eAAe;EACf,KAAK;EACL,kBAAkB;EAClB,sBAAsB;EACtB,sBAAsB;EACtB,sBAAsB;CACxB;CACA,QAAQ,EAAE,gBAAgB,aAAa;AACzC,CAAC;;AAGD,SAAgB,oBACd,SACA,OACA,MACY;CACZ,IAAI,QAAQ,WAAW,GAAG,OAAO;CACjC,OAAAD,YAAA,OAEQ,WAAkB,EAAE,IAAI,mBAAmB,QAAQ,GAAG,MAAM;EAC9D,MAAM;EACN,cAAc;CAChB,CAAC,GAAC,CAED,QAAQ,KAAK,WAAMA,YAAA,QAAA;EAAA,OAEX,OAAO;EAAG,MACX,mBAAmB;EAAM,QAAA;EAAA,WAEpB,OAAO,SAAS,SAAS;EAAO,QAAA;EAAA,gBAE3B,OAAO;EAAM,YACjB,OAAO;EAAQ,WAChB,OAAO;CAAM,GAAA,EAAA,eAAA,CAErB,OAAO,KAAK,EAAA,CAAA,CAEhB,CAAC,CAAA;AAGR"}

package/dist/diagram/Diagram.d.ts

@@ -0,0 +1,223 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+import type { StatusTone } from '../utils/style/tone-styles';
+import { type DiagramController } from './controller';
+import { type DiagramPoint, type DiagramRect } from './geometry';
+import { type DiagramSide } from './route';
+/** 画布上的一个节点：位置与大小（画布坐标），其余字段使用方自己用 */
+export interface DiagramNodeItem extends DiagramRect {
+    /** 节点的标识：连线的 from、to 与选择里用它 */
+    id: string;
+}
+/** 画布上的一条连线 */
+export interface DiagramEdgeItem {
+    /** 连线的标识 */
+    id: string;
+    /** 起点节点 */
+    from: string;
+    /** 终点节点 */
+    to: string;
+    /** 折线经过的点（画布坐标，含两端）；不给时按 routing 画 */
+    points?: readonly DiagramPoint[];
+    /** 从起点的哪条边出去（routing="orthogonal" 时用）；不写时自动选 */
+    fromSide?: DiagramSide;
+    /** 从终点的哪条边进来；不写时自动选 */
+    toSide?: DiagramSide;
+    /** 连线文字的位置；不给时放在折线走到一半的地方 */
+    labelAt?: DiagramPoint;
+    /** 色调：线、箭头与连线文字的颜色（退回、驳回用 danger，走过的路径用 success），默认中性的灰 */
+    tone?: StatusTone;
+    /** 画成虚线：可选的、还没生效的连线 */
+    dashed?: boolean;
+}
+/** 选中的节点与连线（标识） */
+export interface DiagramSelection {
+    /** 选中的节点 */
+    readonly nodes: readonly string[];
+    /** 选中的连线 */
+    readonly edges: readonly string[];
+}
+/** 节点、连线渲染时的状态 */
+export interface DiagramItemState {
+    /** 已选中 */
+    readonly selected: boolean;
+}
+/** 拖动结束后一个节点的新位置 */
+export interface DiagramNodeMove {
+    /** 节点的标识 */
+    readonly id: string;
+    /** 新的横坐标 */
+    readonly x: number;
+    /** 新的纵坐标 */
+    readonly y: number;
+}
+/** 从端口拖出的一条新连线 */
+export interface DiagramConnection {
+    /** 起点节点 */
+    readonly from: string;
+    /** 终点节点 */
+    readonly to: string;
+    /** 从起点的哪条边出去 */
+    readonly fromSide: DiagramSide;
+    /** 从终点的哪条边进来（松开时离指针最近的边） */
+    readonly toSide: DiagramSide;
+}
+/** 拖动连线的一端改接到别的节点 */
+export interface DiagramReconnection {
+    /** 连线的标识 */
+    readonly edge: string;
+    /** 改的是哪一端 */
+    readonly end: 'from' | 'to';
+    /** 改接到的节点 */
+    readonly node: string;
+    /** 从这个节点的哪条边进出 */
+    readonly side: DiagramSide;
+}
+/** 拖动空白处做什么 */
+export interface DiagramDragModes {
+    /** 平移视口；按住 Shift 拖动是框选（看图为主：流程图、组织架构图） */
+    pan: unknown;
+    /** 框选；按住空格拖动、滚轮平移（编辑为主：设计器） */
+    select: unknown;
+}
+/** 框选时怎样算选中 */
+export interface DiagramSelectionModes {
+    /** 整个在框里才选中 */
+    full: unknown;
+    /** 碰到框就选中 */
+    partial: unknown;
+}
+/** 背景的网格 */
+export interface DiagramGrids {
+    /** 不画 */
+    none: unknown;
+    /** 点阵（设计器） */
+    dots: unknown;
+    /** 线格 */
+    lines: unknown;
+}
+/** 没给折线的连线怎样画 */
+export interface DiagramRoutings {
+    /** 两个节点之间的直线，两端落在边框上 */
+    straight: unknown;
+    /** 绕开节点的正交折线（横竖两个方向，拐弯少，同一条边上的几条线排开） */
+    orthogonal: unknown;
+}
+/** 未声明的属性落到视口（Root）上：aria-label 写画布画的是什么 */
+export interface DiagramProps<N extends DiagramNodeItem, E extends DiagramEdgeItem> extends PartProps<'div', 'role' | 'tabindex' | 'draggable'> {
+    /** 节点：位置与大小由使用方给（排布的结果或用户摆的位置） */
+    nodes: readonly N[];
+    /** 连线 */
+    edges?: readonly E[];
+    /** 节点的内容：节点框（定位、选中、焦点）由画布画，里面画什么由这里给，内容拉伸到节点的大小。默认是标题为 getNodeLabel 的 DiagramNode */
+    children?: (node: N, state: DiagramItemState) => VNodeChild;
+    /** 节点的无障碍名称（读屏念的；连线的默认名称“从 A 到 B”也用它）。节点里画了文字时按同样的先后写进来（如“姓名，岗位”），语音控制才能按看得见的字找到它 */
+    getNodeLabel: (node: N) => string;
+    /** 连线的无障碍名称，默认“从 A 到 B” */
+    getEdgeLabel?: (edge: E) => string;
+    /** 连线上的文字（处理结果、条件）；返回空时不画 */
+    edgeText?: (edge: E, state: DiagramItemState) => VNodeChild;
+    /**
+     * 视口的高（数字是 px）
+     * @default 360
+     */
+    height?: number | string;
+    /** 控制器（useDiagram）：画布外的按钮要缩放、适应内容时传进来；不传时画布自己建一个 */
+    controller?: DiagramController;
+    /** 节点与连线可以点选、框选 */
+    selectable?: boolean;
+    /** 选中的节点与连线：父级写 _selected={selection} 双向绑定 */
+    _selected?: DiagramSelection;
+    /** 拖动空白处做什么，默认 pan */
+    dragMode?: keyof DiagramDragModes;
+    /** 框选时怎样算选中，默认 full */
+    selectionMode?: keyof DiagramSelectionModes;
+    /** 背景的网格，默认 none */
+    grid?: keyof DiagramGrids;
+    /** 网格的间距（画布坐标），默认 20；snapToGrid 也按它吸附 */
+    gridSize?: number;
+    /** 第一次有尺寸时把全部内容放进视口（不超过原大）；用户动过视口之前，尺寸变了也重新适应。默认 false：从原点、原大开始 */
+    fitView?: boolean;
+    /** 内容的范围（画布坐标）：适应画布按它算。默认包住全部节点与连线；backdrop 比节点占得大时（泳道）写上它 */
+    extent?: DiagramRect;
+    /** 没给折线的连线怎样画，默认 straight；拖动时相连的线也按它重画 */
+    routing?: keyof DiagramRoutings;
+    /** 折线拐角的圆角半径，默认 6；0 为直角 */
+    edgeRadius?: number;
+    /** 节点可以拖动（可以按节点判断）；松开后 onNodesMove 给出新位置 */
+    draggable?: boolean | ((node: N) => boolean);
+    /** 拖动、方向键挪动时吸附到网格（gridSize） */
+    snapToGrid?: boolean;
+    /** 拖动时与别的节点的边、中线对齐就吸过去并画对齐线，默认 true */
+    guides?: boolean;
+    /** 拖动或方向键挪动后节点的新位置：使用方写回自己的数据（顺带记一步撤销） */
+    onNodesMove?: (moves: DiagramNodeMove[]) => void;
+    /** 能从节点的端口拖出连线；选中的连线两端可以拖去改接 */
+    connectable?: boolean;
+    /** 能不能从 from 连到 to（拖动时只高亮能连的节点）；默认除了自己都能连 */
+    canConnect?: (from: N, to: N) => boolean;
+    /** 从端口拖出连线、在另一个节点上松开 */
+    onConnect?: (connection: DiagramConnection) => void;
+    /** 拖动选中连线的一端、在别的节点上松开 */
+    onReconnect?: (change: DiagramReconnection) => void;
+    /** 画在连线下面、随视口平移缩放的内容（画布坐标的 HTML）：泳道、分区、背景标注 */
+    backdrop?: VNodeChild;
+    /** 浮在最上面、不随视口动的内容（视口坐标）：缩放按钮 DiagramControls、小地图 DiagramMinimap、图例 */
+    overlay?: VNodeChild;
+    /** 随视口平移缩放的那一层的部件属性 */
+    propsWorld?: PartProps<'div'>;
+    /** 节点框的部件属性，可以按节点计算 */
+    propsNode?: PartProps<'div'> | ((node: N, state: DiagramItemState) => PartProps<'div'>);
+    /** 端口的部件属性 */
+    propsPort?: PartProps<'span'>;
+    /** 连线（g）的部件属性，可以按连线计算（颜色、虚线用连线的 tone、dashed） */
+    propsEdge?: PartProps<'g'> | ((edge: E, state: DiagramItemState) => PartProps<'g'>);
+    /** 连线文字的部件属性，可以按连线计算 */
+    propsEdgeText?: PartProps<'div'> | ((edge: E, state: DiagramItemState) => PartProps<'div'>);
+    /** 框选框的部件属性 */
+    propsMarquee?: PartProps<'div'>;
+    /** 对齐线的部件属性 */
+    propsGuide?: PartProps<'line'>;
+}
+/** 画布里的部件（DiagramControls、DiagramMinimap）取控制器 */
+export declare const DiagramContext: import("@zerodep-dev/vue-tsx-pro-tsx").Context<DiagramController>;
+/** Diagram 的样式 */
+export declare const diagramStyles: Readonly<{
+    above: css.CompiledStyles;
+    edge: css.CompiledStyles;
+    edgeArrow: css.CompiledStyles;
+    edgeDashed: css.CompiledStyles;
+    edgeEnd: css.CompiledStyles;
+    edgeHit: css.CompiledStyles;
+    edgeLine: css.CompiledStyles;
+    edgeSelectable: css.CompiledStyles;
+    edgeText: css.CompiledStyles;
+    edges: css.CompiledStyles;
+    guide: css.CompiledStyles;
+    marquee: css.CompiledStyles;
+    node: css.CompiledStyles;
+    nodeDraggable: css.CompiledStyles;
+    nodeDragging: css.CompiledStyles;
+    nodeSelectable: css.CompiledStyles;
+    overlay: css.CompiledStyles;
+    port: css.CompiledStyles;
+    portBottom: css.CompiledStyles;
+    portLeft: css.CompiledStyles;
+    portRight: css.CompiledStyles;
+    portTop: css.CompiledStyles;
+    preview: css.CompiledStyles;
+    root: css.CompiledStyles;
+    rootSelect: css.CompiledStyles;
+    world: css.CompiledStyles;
+}>;
+/** 随视口变的样式：平移缩放、网格、节点与文字的位置（值变化只改元素上的变量，画布不重新渲染） */
+export declare const diagramDynamicStyles: Readonly<{
+    readonly world: (x: number, y: number, scale: number) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+    readonly grid: (kind: keyof DiagramGrids, x: number, y: number, scale: number, gridSize: number) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+    readonly box: (x: number, y: number, width: number, height: number) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+    readonly at: (x: number, y: number) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+    readonly height: (height: string | number) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+}>;
+/** 画布 */
+export declare const Diagram: <N extends DiagramNodeItem, E extends DiagramEdgeItem>(props: DiagramProps<N, E>) => import("@zerodep-dev/vue-tsx-pro-tsx").TsxNode;