@rxflow/bloodline 0.0.1-alpha.0

package/esm/constants.js

@@ -0,0 +1,30 @@
+/**
+ * @author: yanxianliang
+ * @date: 2025-07-05 15:48
+ * @desc: 常量
+ *
+ * Copyright (c) 2025 by yanxianliang, All Rights Reserved.
+ */
+
+export var BloodlineDirection = /*#__PURE__*/function (BloodlineDirection) {
+  BloodlineDirection["upstream"] = "upstream";
+  BloodlineDirection["downstream"] = "downstream";
+  return BloodlineDirection;
+}({});
+export var BloodlineNodeType = /*#__PURE__*/function (BloodlineNodeType) {
+  BloodlineNodeType["Service"] = "service";
+  BloodlineNodeType["ServiceGroup"] = "service-group";
+  return BloodlineNodeType;
+}({});
+export var Align = /*#__PURE__*/function (Align) {
+  Align["center"] = "center";
+  Align["top"] = "top";
+  return Align;
+}({});
+export var sideSymbol = Symbol.for('__node_side__');
+export var parentIdSymbol = Symbol.for('__parent_id__');
+export var SplitSide = /*#__PURE__*/function (SplitSide) {
+  SplitSide["left"] = "left";
+  SplitSide["right"] = "right";
+  return SplitSide;
+}({});

package/esm/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { IBloodlineFlowProps } from "./types";
+declare const BloodlineFlow: (props: import("react").PropsWithChildren<IBloodlineFlowProps>) => import("react/jsx-runtime").JSX.Element;
+export default BloodlineFlow;
+export * from './types';
+export * from './constants';
+//# sourceMappingURL=index.d.ts.map

package/esm/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAuB,mBAAmB,EAAC,MAAM,SAAS,CAAC;AAYlE,QAAA,MAAM,aAAa,4GA6BjB,CAAA;AAGF,eAAe,aAAa,CAAC;AAG7B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC"}

package/esm/index.js

@@ -0,0 +1,55 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/*
+ * @author: yanxianliang
+ * @date: 2025-06-01 18:36
+ * @desc: 血缘视图
+ *
+ * Copyright (c) 2025 by yanxianliang, All Rights Reserved.
+ */
+
+import { createFlow, Flow } from '@rxflow/base';
+import { useMemo } from "react";
+import { BaseNodeWrapper } from "./BaseNodeWrapper";
+import { GroupWrapper } from "./GroupNodeWrapper";
+import { layoutCells } from "./utils/layoutCells";
+var fitViewOptions = {
+  padding: 2,
+  minZoom: 1,
+  maxZoom: 1
+};
+var omitProps = ['root', 'getRelation', 'mode'];
+var BloodlineFlow = createFlow(Flow, function (props) {
+  var root = props.root,
+    nodeTypes = props.nodeTypes;
+  var nodes = useMemo(function () {
+    return root ? [root] : [];
+  }, [root]);
+  var _nodeTypes = useMemo(function () {
+    return nodeTypes === null || nodeTypes === void 0 ? void 0 : nodeTypes.map(function (nodeType) {
+      return _objectSpread(_objectSpread({}, nodeType), {}, {
+        _component: nodeType.component,
+        // 真实的节点组件
+        component: nodeType.type === 'fields' ? GroupWrapper : BaseNodeWrapper
+      });
+    });
+  }, [nodeTypes]);
+  return _objectSpread(_objectSpread({}, props), {}, {
+    edgesFocusable: false,
+    fitViewOptions: fitViewOptions,
+    autoCenter: true,
+    nodes: nodes,
+    layout: layoutCells,
+    nodeTypes: _nodeTypes,
+    omitProps: omitProps,
+    selectionOnDrag: false,
+    nodesDraggable: false
+  });
+});
+export default BloodlineFlow;
+export * from "./types";
+export * from "./constants";

package/esm/style/index.less

@@ -0,0 +1 @@
+@import "theme";

package/esm/style/theme.less

@@ -0,0 +1,16 @@
+@padding-left: 18px;
+@main-color: #69b1ff;
+@border-color: #E8E8E8;
+@hit-border-color: #69b1ff;
+
+@second-border-color: #BBBBBB;
+
+@changed-color: #ff4d4f;
+
+@txt-color: rgba(0,0,0,0.88);
+
+@text-second-color: rgba(0, 0, 0, 0.45);
+
+@root-node-ng: #E8F0FD;
+
+@text-space: 12px;

package/esm/types.d.ts

@@ -0,0 +1,49 @@
+import { BaseThemeConfig, IBaseFlowProps } from "@rxflow/base";
+import { Align, BloodlineDirection, parentIdSymbol, sideSymbol, SplitSide } from "./constants";
+export interface IBloodlineTheme extends BaseThemeConfig {
+    /**
+     * @description 对齐方式
+     * @default 'top'
+     */
+    align?: Align;
+    /**
+     * @description 布局方式
+     * @default 'compactBox'
+     */
+    layout?: 'compactBox' | 'mindmap';
+}
+export type BloodlineExtendProps = {
+    root?: BaseBloodNode;
+    theme?: IBloodlineTheme;
+    /**
+     * 异步加载关联节点
+     * @param direction
+     * @param source
+     */
+    getRelation?: (direction: BloodlineDirection, source: BaseBloodNode) => Promise<Omit<ConnectorState, 'state'>>;
+};
+export type IBloodlineFlowProps = Omit<IBaseFlowProps, 'nodes' | 'edges' | 'theme' | 'defaultNodes' | 'defaultEdges'> & BloodlineExtendProps;
+export type BaseBloodNode = {
+    relationLabel?: string;
+    id: string;
+    type: string;
+    width?: number;
+    height?: number;
+    upstream?: ConnectorState;
+    downstream?: ConnectorState;
+    innerNodes?: BaseBloodNode[];
+    [sideSymbol]?: SplitSide;
+    [parentIdSymbol]?: string;
+    [key: string]: any;
+};
+export type ConnectorState = {
+    state?: 'expanded' | 'loading' | 'collapsed';
+    count?: number;
+    disableCollapse?: boolean;
+    list?: Array<BaseBloodNode>;
+};
+export type InnerNodeData = {
+    isRoot: boolean;
+    depth: number;
+};
+//# sourceMappingURL=types.d.ts.map

package/esm/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["types.ts"],"names":[],"mappings":"AASA,OAAO,EAAC,eAAe,EAAE,cAAc,EAAC,MAAM,cAAc,CAAC;AAC7D,OAAO,EAAC,KAAK,EAAE,kBAAkB,EAAE,cAAc,EAAE,UAAU,EAAE,SAAS,EAAC,MAAM,aAAa,CAAC;AAI7F,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IAEd;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;CACnC;AAGD,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,SAAS,EAAE,kBAAkB,EAAE,MAAM,EAAE,aAAa,KAAK,OAAO,CAAC,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC,CAAC;CAChH,CAAA;AAGD,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,cAAc,GAAG,cAAc,CAAC,GAAG,oBAAoB,CAAC;AAE7I,MAAM,MAAM,aAAa,GAAG;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,QAAQ,CAAC,EAAE,cAAc,CAAC;IAE1B,UAAU,CAAC,EAAE,cAAc,CAAC;IAE5B,UAAU,CAAC,EAAE,aAAa,EAAE,CAAC;IAE7B,CAAC,UAAU,CAAC,CAAC,EAAE,SAAS,CAAC;IAEzB,CAAC,cAAc,CAAC,CAAC,EAAE,MAAM,CAAC;IAE1B,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CAAA;AAGD,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,WAAW,CAAC;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC;CAC7B,CAAA;AAID,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;CACf,CAAA"}

package/esm/types.js

@@ -0,0 +1,13 @@
+/*
+ * @author: yanxianliang
+ * @date: 2025-06-01 19:22
+ * @desc: 类型定义
+ *
+ * data ==> 具体引用数据，自动添加属性到。数据结构
+ *
+ * Copyright (c) 2025 by yanxianliang, All Rights Reserved.
+ */
+
+import { parentIdSymbol, sideSymbol } from "./constants";
+
+// 默认支持循环依赖，循环依赖会自动进行检索。

package/esm/utils/_layoutCells.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @author: yanxianliang
+ * @date: 2025-07-03 13:20
+ * @desc: 血缘布局
+ *
+ * Copyright (c) 2025 by yanxianliang, All Rights Reserved.
+ */
+import { LayoutConfig } from "@rxflow/base";
+import { Edge, Node } from "@xyflow/react";
+export declare const layoutCells: <NodeType extends Node = Node, EdgeType extends Edge = Edge>(config: LayoutConfig<NodeType, EdgeType>) => {
+    nodes: NodeType[];
+    edges: EdgeType[];
+};
+//# sourceMappingURL=_layoutCells.d.ts.map

package/esm/utils/_layoutCells.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"_layoutCells.d.ts","sourceRoot":"","sources":["_layoutCells.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,EAA8B,YAAY,EAAe,MAAM,cAAc,CAAC;AAErF,OAAO,EAAC,IAAI,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AAoGzC,eAAO,MAAM,WAAW,uEACd,aAAa,QAAQ,EAAE,QAAQ,CAAC;;;CA6WzC,CAAA"}