@rxflow/base 0.0.2-alpha.7 → 0.0.2-alpha.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAgB,YAAY,EAA6D,MAAM,eAAe,CAAC;AAItH,OAAO,KAAK,EAAE,EAAO,SAAS,EAAC,MAAM,OAAO,CAAC;AAY7C,iBAAS,QAAQ,CACf,EACE,KAAK,EACL,QAAe,EACf,WAAkB,EAClB,eAAuB,EACvB,cAAqB,EACrB,WAAW,EACX,YAAY,EACZ,cAAc,EACd,QAAQ,EACR,SAAS,EACT,SAAS,EACT,mBAAmB,EACnB,SAAS,EACT,QAAQ,EACR,QAAwB,EACxB,WAAwB,EACxB,YAAY,EAAE,SAAiC,EAC/C,cAAc,EACd,iBAAiB,EACjB,eAAe,GAChB,EAAE,YAAY,GAAG;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,EAAE,OAAO,CAAC;IACxB,iBAAiB,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C,YAAY,CAAC,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CACjD,2CAuKF;;AAED,wBAA8B"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAgB,YAAY,EAA6D,MAAM,eAAe,CAAC;AAItH,OAAO,KAAK,EAAE,EAAO,SAAS,EAAU,MAAM,OAAO,CAAC;AAYtD,iBAAS,QAAQ,CACf,EACE,KAAK,EACL,QAAe,EACf,WAAkB,EAClB,eAAuB,EACvB,cAAqB,EACrB,WAAW,EACX,YAAY,EACZ,cAAc,EACd,QAAQ,EACR,SAAS,EACT,SAAS,EACT,mBAAmB,EACnB,SAAS,EACT,QAAQ,EACR,QAAwB,EACxB,WAAwB,EACxB,YAAY,EAAE,SAAiC,EAC/C,cAAc,EACd,iBAAiB,EACjB,eAAe,GAChB,EAAE,YAAY,GAAG;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,EAAE,OAAO,CAAC;IACxB,iBAAiB,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C,YAAY,CAAC,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CACjD,2CAsMF;;AAED,wBAA8B"}
@@ -57,6 +57,36 @@ function Controls({
57
57
  const [isFullscreen, {
58
58
  toggleFullscreen
59
59
  }] = (0, _ahooks.useFullscreen)(containerRef);
60
+ const tooltipPlacement = (0, _react2.useMemo)(() => {
61
+ switch (position) {
62
+ case 'top-left':
63
+ case 'center-left':
64
+ case 'top-center':
65
+ if (orientation === 'horizontal') {
66
+ return 'bottom';
67
+ }
68
+ return 'right';
69
+ case 'top-right':
70
+ case 'center-right':
71
+ if (orientation === 'horizontal') {
72
+ return 'bottom';
73
+ }
74
+ return 'left';
75
+ case 'bottom-left':
76
+ case 'bottom-center':
77
+ if (orientation === 'horizontal') {
78
+ return 'top';
79
+ }
80
+ return 'right';
81
+ case 'bottom-right':
82
+ if (orientation === 'horizontal') {
83
+ return 'top';
84
+ }
85
+ return 'left';
86
+ default:
87
+ return 'top';
88
+ }
89
+ }, []);
60
90
  const store = (0, _react.useStoreApi)();
61
91
  const {
62
92
  isInteractive,
@@ -104,7 +134,7 @@ function Controls({
104
134
  children: [showZoom && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
105
135
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
106
136
  title: '放大',
107
- placement: 'right',
137
+ placement: tooltipPlacement,
108
138
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
109
139
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.ControlButton, {
110
140
  onClick: onZoomInHandler,
@@ -117,7 +147,7 @@ function Controls({
117
147
  })
118
148
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
119
149
  title: '缩小',
120
- placement: 'right',
150
+ placement: tooltipPlacement,
121
151
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
122
152
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.ControlButton, {
123
153
  onClick: onZoomOutHandler,
@@ -131,7 +161,7 @@ function Controls({
131
161
  })]
132
162
  }), showFitView && /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
133
163
  title: '自适应视图',
134
- placement: 'right',
164
+ placement: tooltipPlacement,
135
165
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
136
166
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.ControlButton, {
137
167
  className: "react-flow__controls-fitview",
@@ -143,7 +173,7 @@ function Controls({
143
173
  })
144
174
  }), showFullscreen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
145
175
  title: isFullscreen ? '取消全屏' : '全屏',
146
- placement: 'right',
176
+ placement: tooltipPlacement,
147
177
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
148
178
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.ControlButton, {
149
179
  className: "react-flow__controls-fullscreen",
@@ -155,7 +185,7 @@ function Controls({
155
185
  })
156
186
  }), showMiniMap && /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
157
187
  title: minimapVisible ? '关闭缩略图' : '开启缩略图',
158
- placement: 'right',
188
+ placement: tooltipPlacement,
159
189
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
160
190
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.ControlButton, {
161
191
  className: "react-flow__controls-interactive",
@@ -167,7 +197,7 @@ function Controls({
167
197
  })
168
198
  }), showInteractive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
169
199
  title: isInteractive ? '解锁' : '锁定',
170
- placement: 'right',
200
+ placement: tooltipPlacement,
171
201
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
172
202
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.ControlButton, {
173
203
  className: "react-flow__controls-interactive",
@@ -179,7 +209,7 @@ function Controls({
179
209
  })
180
210
  }), showForceLayout && /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
181
211
  title: '美化布局',
182
- placement: 'right',
212
+ placement: tooltipPlacement,
183
213
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
184
214
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.ControlButton, {
185
215
  className: "react-flow__controls-layout",
@@ -1 +1 @@
1
- {"version":3,"file":"PropsStore.d.ts","sourceRoot":"","sources":["PropsStore.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAC,cAAc,EAAkB,MAAM,UAAU,CAAC;AAEzD,OAAO,EAAC,IAAI,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AAEzC,OAAc,EAAC,SAAS,EAA6B,MAAM,OAAO,CAAC;AAKnE,eAAO,MAAM,UAAU;WAQZ,eAAe,QAAQ,EAAE,QAAQ,CAAC;cAC/B,SAAS;6CAoDtB,CAAA"}
1
+ {"version":3,"file":"PropsStore.d.ts","sourceRoot":"","sources":["PropsStore.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAC,cAAc,EAAkB,MAAM,UAAU,CAAC;AAEzD,OAAO,EAAC,IAAI,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AAEzC,OAAc,EAAC,SAAS,EAA6B,MAAM,OAAO,CAAC;AAKnE,eAAO,MAAM,UAAU;WAQZ,eAAe,QAAQ,EAAE,QAAQ,CAAC;cAC/B,SAAS;6CAqDtB,CAAA"}
@@ -53,6 +53,8 @@ const PropsStore = ({
53
53
  }
54
54
  return map;
55
55
  }, [nodeTypes]);
56
+
57
+ // TODO 更新属性怎么更好的区分
56
58
  (0, _ahooks.useDeepCompareEffect)(() => {
57
59
  setState({
58
60
  props: props,
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAgB,YAAY,EAA6D,MAAM,eAAe,CAAC;AAItH,OAAO,KAAK,EAAE,EAAO,SAAS,EAAC,MAAM,OAAO,CAAC;AAY7C,iBAAS,QAAQ,CACf,EACE,KAAK,EACL,QAAe,EACf,WAAkB,EAClB,eAAuB,EACvB,cAAqB,EACrB,WAAW,EACX,YAAY,EACZ,cAAc,EACd,QAAQ,EACR,SAAS,EACT,SAAS,EACT,mBAAmB,EACnB,SAAS,EACT,QAAQ,EACR,QAAwB,EACxB,WAAwB,EACxB,YAAY,EAAE,SAAiC,EAC/C,cAAc,EACd,iBAAiB,EACjB,eAAe,GAChB,EAAE,YAAY,GAAG;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,EAAE,OAAO,CAAC;IACxB,iBAAiB,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C,YAAY,CAAC,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CACjD,2CAuKF;;AAED,wBAA8B"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAgB,YAAY,EAA6D,MAAM,eAAe,CAAC;AAItH,OAAO,KAAK,EAAE,EAAO,SAAS,EAAU,MAAM,OAAO,CAAC;AAYtD,iBAAS,QAAQ,CACf,EACE,KAAK,EACL,QAAe,EACf,WAAkB,EAClB,eAAuB,EACvB,cAAqB,EACrB,WAAW,EACX,YAAY,EACZ,cAAc,EACd,QAAQ,EACR,SAAS,EACT,SAAS,EACT,mBAAmB,EACnB,SAAS,EACT,QAAQ,EACR,QAAwB,EACxB,WAAwB,EACxB,YAAY,EAAE,SAAiC,EAC/C,cAAc,EACd,iBAAiB,EACjB,eAAe,GAChB,EAAE,YAAY,GAAG;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,EAAE,OAAO,CAAC;IACxB,iBAAiB,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C,YAAY,CAAC,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CACjD,2CAsMF;;AAED,wBAA8B"}
@@ -20,7 +20,7 @@ import { ControlButton, Panel, useReactFlow, useStore, useStoreApi } from "@xyfl
20
20
  import { useFullscreen } from "ahooks";
21
21
  import { Tooltip } from 'antd';
22
22
  import cc from 'classcat';
23
- import React, { memo } from "react";
23
+ import React, { memo, useMemo } from "react";
24
24
  import { Fragment } from "react/jsx-runtime";
25
25
  import { shallow } from "zustand/shallow";
26
26
  import { FitViewIcon, ForceLayout, LockIcon, Minimap, UnlockIcon, UnMinimap } from "./icons";
@@ -65,6 +65,36 @@ function Controls(_ref) {
65
65
  _useFullscreen2 = _slicedToArray(_useFullscreen, 2),
66
66
  isFullscreen = _useFullscreen2[0],
67
67
  toggleFullscreen = _useFullscreen2[1].toggleFullscreen;
68
+ var tooltipPlacement = useMemo(function () {
69
+ switch (position) {
70
+ case 'top-left':
71
+ case 'center-left':
72
+ case 'top-center':
73
+ if (orientation === 'horizontal') {
74
+ return 'bottom';
75
+ }
76
+ return 'right';
77
+ case 'top-right':
78
+ case 'center-right':
79
+ if (orientation === 'horizontal') {
80
+ return 'bottom';
81
+ }
82
+ return 'left';
83
+ case 'bottom-left':
84
+ case 'bottom-center':
85
+ if (orientation === 'horizontal') {
86
+ return 'top';
87
+ }
88
+ return 'right';
89
+ case 'bottom-right':
90
+ if (orientation === 'horizontal') {
91
+ return 'top';
92
+ }
93
+ return 'left';
94
+ default:
95
+ return 'top';
96
+ }
97
+ }, []);
68
98
  var store = useStoreApi();
69
99
  var _useStore = useStore(selector, shallow),
70
100
  isInteractive = _useStore.isInteractive,
@@ -110,7 +140,7 @@ function Controls(_ref) {
110
140
  children: [showZoom && /*#__PURE__*/_jsxs(Fragment, {
111
141
  children: [/*#__PURE__*/_jsx(Tooltip, {
112
142
  title: '放大',
113
- placement: 'right',
143
+ placement: tooltipPlacement,
114
144
  children: /*#__PURE__*/_jsx("span", {
115
145
  children: /*#__PURE__*/_jsx(ControlButton, {
116
146
  onClick: onZoomInHandler,
@@ -123,7 +153,7 @@ function Controls(_ref) {
123
153
  })
124
154
  }), /*#__PURE__*/_jsx(Tooltip, {
125
155
  title: '缩小',
126
- placement: 'right',
156
+ placement: tooltipPlacement,
127
157
  children: /*#__PURE__*/_jsx("span", {
128
158
  children: /*#__PURE__*/_jsx(ControlButton, {
129
159
  onClick: onZoomOutHandler,
@@ -137,7 +167,7 @@ function Controls(_ref) {
137
167
  })]
138
168
  }), showFitView && /*#__PURE__*/_jsx(Tooltip, {
139
169
  title: '自适应视图',
140
- placement: 'right',
170
+ placement: tooltipPlacement,
141
171
  children: /*#__PURE__*/_jsx("span", {
142
172
  children: /*#__PURE__*/_jsx(ControlButton, {
143
173
  className: "react-flow__controls-fitview",
@@ -149,7 +179,7 @@ function Controls(_ref) {
149
179
  })
150
180
  }), showFullscreen && /*#__PURE__*/_jsx(Tooltip, {
151
181
  title: isFullscreen ? '取消全屏' : '全屏',
152
- placement: 'right',
182
+ placement: tooltipPlacement,
153
183
  children: /*#__PURE__*/_jsx("span", {
154
184
  children: /*#__PURE__*/_jsx(ControlButton, {
155
185
  className: "react-flow__controls-fullscreen",
@@ -161,7 +191,7 @@ function Controls(_ref) {
161
191
  })
162
192
  }), showMiniMap && /*#__PURE__*/_jsx(Tooltip, {
163
193
  title: minimapVisible ? '关闭缩略图' : '开启缩略图',
164
- placement: 'right',
194
+ placement: tooltipPlacement,
165
195
  children: /*#__PURE__*/_jsx("span", {
166
196
  children: /*#__PURE__*/_jsx(ControlButton, {
167
197
  className: "react-flow__controls-interactive",
@@ -173,7 +203,7 @@ function Controls(_ref) {
173
203
  })
174
204
  }), showInteractive && /*#__PURE__*/_jsx(Tooltip, {
175
205
  title: isInteractive ? '解锁' : '锁定',
176
- placement: 'right',
206
+ placement: tooltipPlacement,
177
207
  children: /*#__PURE__*/_jsx("span", {
178
208
  children: /*#__PURE__*/_jsx(ControlButton, {
179
209
  className: "react-flow__controls-interactive",
@@ -185,7 +215,7 @@ function Controls(_ref) {
185
215
  })
186
216
  }), showForceLayout && /*#__PURE__*/_jsx(Tooltip, {
187
217
  title: '美化布局',
188
- placement: 'right',
218
+ placement: tooltipPlacement,
189
219
  children: /*#__PURE__*/_jsx("span", {
190
220
  children: /*#__PURE__*/_jsx(ControlButton, {
191
221
  className: "react-flow__controls-layout",
@@ -1 +1 @@
1
- {"version":3,"file":"PropsStore.d.ts","sourceRoot":"","sources":["PropsStore.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAC,cAAc,EAAkB,MAAM,UAAU,CAAC;AAEzD,OAAO,EAAC,IAAI,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AAEzC,OAAc,EAAC,SAAS,EAA6B,MAAM,OAAO,CAAC;AAKnE,eAAO,MAAM,UAAU;WAQZ,eAAe,QAAQ,EAAE,QAAQ,CAAC;cAC/B,SAAS;6CAoDtB,CAAA"}
1
+ {"version":3,"file":"PropsStore.d.ts","sourceRoot":"","sources":["PropsStore.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAC,cAAc,EAAkB,MAAM,UAAU,CAAC;AAEzD,OAAO,EAAC,IAAI,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AAEzC,OAAc,EAAC,SAAS,EAA6B,MAAM,OAAO,CAAC;AAKnE,eAAO,MAAM,UAAU;WAQZ,eAAe,QAAQ,EAAE,QAAQ,CAAC;cAC/B,SAAS;6CAqDtB,CAAA"}
@@ -46,6 +46,8 @@ export var PropsStore = function PropsStore(_ref) {
46
46
  }
47
47
  return map;
48
48
  }, [nodeTypes]);
49
+
50
+ // TODO 更新属性怎么更好的区分
49
51
  useDeepCompareEffect(function () {
50
52
  setState({
51
53
  props: props,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rxflow/base",
3
- "version": "0.0.2-alpha.7",
3
+ "version": "0.0.2-alpha.8",
4
4
  "description": "BaseFlow - 核心 Flow 组件库",
5
5
  "keywords": [
6
6
  "reactflow",
@@ -42,7 +42,7 @@
42
42
  "dependencies": {
43
43
  "@ant-design/icons": "^6.0.0",
44
44
  "@antv/hierarchy": "0.6.14",
45
- "@rxflow/manhattan": "^0.0.2-alpha.7",
45
+ "@rxflow/manhattan": "^0.0.2-alpha.8",
46
46
  "@xyflow/react": "^12.8.6",
47
47
  "@xyflow/system": "^0.0.70",
48
48
  "@zumer/snapdom": "^1.9.9",