regraph-next - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

build/BaseLayout/index.d.ts

 import DAGAIU from './DAG/DAGAIU';
 import { GroupGraphLayout, GraphLayout } from './dagre';
-export { DAGAIU, GroupGraphLayout, GraphLayout };
+import { Bubble } from './Bubble';
+export { DAGAIU, GroupGraphLayout, GraphLayout, Bubble };

build/BaseLayout/index.js

@@ -8,2 +8,4 @@ "use strict";
 exports.GraphLayout = dagre_1.GraphLayout;
+var Bubble_1 = require("./Bubble");
+exports.Bubble = Bubble_1.Bubble;
 //# sourceMappingURL=index.js.map

build/index.d.ts

@@ -12,3 +12,3 @@ import ReScreen from './ReScreen';
     distance: (p1: Point, p2: Point) => number;
-    getControlPoint: (from: Point, to: Point, ratio: number) => Point;
+    getControlPoint: (from: Point, to: Point, ratio: number, direct?: number) => Point;
     quadratic: (sourcePoint: Point, targetPoint: Point) => string;
@@ -15,0 +15,0 @@ vectorAngle: (o: Point, p1: Point, p2: Point) => number;

build/ReScreen/index.js

@@ -133,2 +133,3 @@ "use strict";
         _this.handleShowAll = function () {
+            console.warn('handleShowAll 计划下线，适应画布请添加 contentRange 使用 handleAdapt 方法');
             var _a = _this.props, mapWidth = _a.mapWidth, mapHeight = _a.mapHeight;
@@ -135,0 +136,0 @@ var screenToMapTransform = _this.state.screenToMapTransform;

build/Utils/graph.d.ts

@@ -9,4 +9,4 @@ export declare class Point {
 export declare const distance: (p1: Point, p2: Point) => number;
-export declare const getControlPoint: (from: Point, to: Point, ratio: number) => Point;
+export declare const getControlPoint: (from: Point, to: Point, ratio: number, direct?: number) => Point;
 export declare const quadratic: (sourcePoint: Point, targetPoint: Point) => string;
 export declare const vectorAngle: (o: Point, p1: Point, p2: Point) => number;

build/Utils/graph.js

@@ -40,3 +40,4 @@ "use strict";
 };
-exports.getControlPoint = function (from, to, ratio) {
+exports.getControlPoint = function (from, to, ratio, direct) {
+    if (direct === void 0) { direct = 1; }
     var x1 = from.x, y1 = from.y;
@@ -68,4 +69,4 @@ var x2 = to.x, y2 = to.y;
     return {
-        x: midX + deltaX,
-        y: midY + normalSlope * deltaX,
+        x: midX + direct * deltaX,
+        y: midY + direct * normalSlope * deltaX
     };
@@ -72,0 +73,0 @@ };

docs/api/index.md

@@ -29,4 +29,2 @@ ---
 
-## API
-
 ## ReScreen
@@ -36,11 +34,119 @@
 
+### 使用
+
+```tsx
+import { ReScreen } from 'regraph-next';
+
+<ReScreen  
+  height = {500}
+  width = {500}
+  mapWidth = {200}
+  mapHeight = {200}
+  mapPosition = "RT-IN" >
+  <svg>
+    <g>
+      <circle cx={0} cy={0} r={500} fill="yellow" />
+      <circle cx={cx} cy={cy} r={250} fill="red" /> 
+    </g>
+  </svg> 
+</ReScreen>
+
+```
+
+### API
+| 参数           | 说明     | 类型         | 默认值                                                                    |
+| -------------- | -------- | --------------- | ------------------------------------------------------------------------------ |
+| type | 画布内容的类型 | 枚举值，可选值（`SVG` ,`DOM`) | SVG |
+| width | 组件整体的尺寸，支持传入百分数 | number/string | - | 
+| height | 组件整体的尺寸，支持传入百分数 | number/string | - | 
+| zoomEnabled | 是否启动鼠标滚动缩放画布 | boolean | true | 
+| focusEnabled | 是否启动聚焦功能，0表示不启动，1表示单击触发，2表示双击触发 | number | 0 | 
+| minZoom | 缩放范围，最小值 | number | - |
+| maxZoom | 缩放范围，最大值 | number | - |
+| dragDirection | `ALL`,`HOR`, `VER` | 拖拽方向的锁定 | `ALL` |
+| needMinimap | 是否需要缩略图 | boolean | true |
+| minimap | React.ReactElement<any> | 支持自定义传入缩略图组件 | - |
+| mapPosition | `RT`, `RB`, `LT`, `LB`,  `RT-IN`, `RB-IN`, `LT-IN`, `LB-IN` | 缩略图位置，右上角；-IN表示在画布的内部 | 默认为`RT` |
+| mapPadding | 缩略图和原图之间的大小 | number | 20| 
+| mapWidth | 缩略图大小 | number | 100px | 
+| mapHeight | 缩略图大小 | number | 100px | 
+| mapRectStyle | 缩略图矩形的样式 | object | - |
+| Buttons | 按钮组件 | React.ReactElement<any> | - |
+| needRefresh | 由于画布元素的变化而引起的视图变化 | boolean | - |
+| resetNeedRefresh | 通知外层重置needRefresh为false | function | - |
+| onScreenChange | 画布发生变化时的回调，对外暴露当前的缩放信息 | (transform: ZoomTransform) => void | - |
+| getScreenHandler | 对外暴露画布操作函数 | any | - |
+
+
 ## BaseGraph
 
-完善中，敬请期待
+BaseGraph 以树、图为基础数据结构，规范数据定义并提供基础操作库。
 
-## ReLayout
+### 功能
 
-完善中，敬请期待
+#### 树
 
+- 插入/删除/替换/查找节点/子树
+- 插入/删除/替换/查找边
+- 获取父节点/子节点/子孙节点/兄弟（层级结构/扁平结构/排序规则）
+- 获取两个子节点的相同父节点
+- 获取子节点到  任意节点（跟节点）的路径
 
+#### 图
 
+- 插入/删除/替换/查找节点
+- 插入/删除/替换/查找边
+- 获取父节点/子节点/子孙节点/兄弟（层级结构/扁平结构/排序规则）
+- 获取两个子节点的相同父节点
+- 获取子节点到任意节点（跟节点）的路径
+
+更多详细[BaseGraph API](https://github.com/nefe/regraph/blob/master/docs/api/BaseGraph.md)
+
+## BaseLayout
+
+BaseLayout 主要处理树图布局集成
+
+### 使用方式
+
+```ts
+import { ReLayout } from 'regraph-next';
+const { DAGAIU } = ReLayout;
+interface MyRelation {
+  sourceId: number;
+  targetId: number;
+  periodDiff: number;
+}
+interface MyNode {
+  id: number;
+  downRelations: MyRelation[];
+  upRelations: MyRelation[];
+  name: string;
+  desc: string;
+  nodeWidth?: number;
+  nodeHeight?: number;
+}
+// 生成dag图
+const dag = new DAGAIU<MyNode, MyRelation>({
+  isTransverse: true,
+  padding: 20,
+});
+```
+
+- 生成单个DAG
+
+```ts
+dag.getSingleDAG(data)
+```
+
+- 生成多个DAG
+
+```ts
+dag.getMultiDAG(data)
+```
+
+- 带组的图布局
+
+```ts
+this.groupLayout = new GroupGraphLayout(nodes, links, groups, groupLinks, config);
+this.groupLayout.layout();
+```

docs/api/ReScreen.md

 ---
-order: 2
+order: 1
 chinese: ReScreen使用文档
@@ -4,0 +4,0 @@ english: ReScreen document

package.json

 {
   "name": "regraph-next",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "ReGraph",
@@ -5,0 +5,0 @@ "main": "build/index.js",

README.md

@@ -72,8 +72,73 @@ # ReGraph
 
-### BaseGraph
+## BaseGraph
 
-完善中，敬请期待
+BaseGraph 以树、图为基础数据结构，规范数据定义并提供基础操作库。
 
-### ReLayout
+### 功能
 
-完善中，敬请期待
+#### 树
+
+- 插入/删除/替换/查找节点/子树
+- 插入/删除/替换/查找边
+- 获取父节点/子节点/子孙节点/兄弟（层级结构/扁平结构/排序规则）
+- 获取两个子节点的相同父节点
+- 获取子节点到  任意节点（跟节点）的路径
+
+#### 图
+
+- 插入/删除/替换/查找节点
+- 插入/删除/替换/查找边
+- 获取父节点/子节点/子孙节点/兄弟（层级结构/扁平结构/排序规则）
+- 获取两个子节点的相同父节点
+- 获取子节点到任意节点（跟节点）的路径
+
+更多详细[BaseGraph API](https://github.com/nefe/regraph/blob/master/docs/api/BaseGraph.md)
+
+## BaseLayout
+
+BaseLayout 主要处理树图布局集成
+
+### 使用方式
+
+```ts
+import { ReLayout } from 'regraph-next';
+const { DAGAIU } = ReLayout;
+interface MyRelation {
+  sourceId: number;
+  targetId: number;
+  periodDiff: number;
+}
+interface MyNode {
+  id: number;
+  downRelations: MyRelation[];
+  upRelations: MyRelation[];
+  name: string;
+  desc: string;
+  nodeWidth?: number;
+  nodeHeight?: number;
+}
+// 生成dag图
+const dag = new DAGAIU<MyNode, MyRelation>({
+  isTransverse: true,
+  padding: 20,
+});
+```
+
+- 生成单个DAG
+
+```ts
+dag.getSingleDAG(data)
+```
+
+- 生成多个DAG
+
+```ts
+dag.getMultiDAG(data)
+```
+
+- 带组的图布局
+
+```ts
+this.groupLayout = new GroupGraphLayout(nodes, links, groups, groupLinks, config);
+this.groupLayout.layout();
+```

src/BaseLayout/index.ts

 import DAGAIU from './DAG/DAGAIU';
 import { GroupGraphLayout, GraphLayout } from './dagre';
+import { Bubble } from './Bubble';
 
@@ -7,3 +8,5 @@ export {
   GroupGraphLayout,
-  GraphLayout
+  GraphLayout,
+  // Bubble Tree
+  Bubble
 };

src/Utils/graph.ts

@@ -59,3 +59,3 @@ /**
  */
-export const getControlPoint = (from: Point, to: Point, ratio: number): Point => {
+export const getControlPoint = (from: Point, to: Point, ratio: number, direct = 1): Point => {
   const { x: x1, y: y1 } = from;
@@ -95,4 +95,4 @@ const { x: x2, y: y2 } = to;
   return {
-    x: midX + deltaX,
-    y: midY + normalSlope * deltaX,
+    x: midX + direct * deltaX,
+    y: midY + direct * normalSlope * deltaX
   };
@@ -99,0 +99,0 @@ };

No alert changes

Improved metrics

Total package byte prevSize

1568866

increased by2.32%

Number of package files

135

increased by7.14%

Lines of code

12573

increased by4.3%

Number of lines in readme file

143

increased by81.01%

No dependency changes