ebaoferc 0.0.1 → 0.0.2-beta.0
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.
- package/dist/{FlexRowCol → components/FlexRowCol}/index.js +1 -1
- package/dist/components/MindGraph/core/default.d.ts +6 -0
- package/dist/components/MindGraph/core/default.js +81 -0
- package/dist/components/MindGraph/core/graphic/drag.d.ts +42 -0
- package/dist/components/MindGraph/core/graphic/drag.js +120 -0
- package/dist/components/MindGraph/core/graphic/index.d.ts +181 -0
- package/dist/components/MindGraph/core/graphic/index.js +423 -0
- package/dist/components/MindGraph/core/graphic/node-translate-to.d.ts +11 -0
- package/dist/components/MindGraph/core/graphic/node-translate-to.js +55 -0
- package/dist/components/MindGraph/core/graphic/zoom.d.ts +17 -0
- package/dist/components/MindGraph/core/graphic/zoom.js +89 -0
- package/dist/components/MindGraph/core/helper/breadth-first-walk-tree.d.ts +5 -0
- package/dist/components/MindGraph/core/helper/breadth-first-walk-tree.js +21 -0
- package/dist/components/MindGraph/core/helper/depth-first-walk-tree.d.ts +10 -0
- package/dist/components/MindGraph/core/helper/depth-first-walk-tree.js +17 -0
- package/dist/components/MindGraph/core/helper/descendant.d.ts +6 -0
- package/dist/components/MindGraph/core/helper/descendant.js +28 -0
- package/dist/components/MindGraph/core/helper/error.d.ts +1 -0
- package/dist/components/MindGraph/core/helper/error.js +3 -0
- package/dist/components/MindGraph/core/helper/get-layout-calc-children.d.ts +10 -0
- package/dist/components/MindGraph/core/helper/get-layout-calc-children.js +37 -0
- package/dist/components/MindGraph/core/helper/get-svg-path-id.d.ts +1 -0
- package/dist/components/MindGraph/core/helper/get-svg-path-id.js +4 -0
- package/dist/components/MindGraph/core/helper/index.d.ts +23 -0
- package/dist/components/MindGraph/core/helper/index.js +26 -0
- package/dist/components/MindGraph/core/helper/judge-if-all-child-fold.d.ts +7 -0
- package/dist/components/MindGraph/core/helper/judge-if-all-child-fold.js +14 -0
- package/dist/components/MindGraph/core/helper/judge-if-heir-and-fold.d.ts +10 -0
- package/dist/components/MindGraph/core/helper/judge-if-heir-and-fold.js +26 -0
- package/dist/components/MindGraph/core/helper/judge-if-visual-leaf.d.ts +6 -0
- package/dist/components/MindGraph/core/helper/judge-if-visual-leaf.js +7 -0
- package/dist/components/MindGraph/core/helper/root-to-node-array.d.ts +2 -0
- package/dist/components/MindGraph/core/helper/root-to-node-array.js +27 -0
- package/dist/components/MindGraph/core/helper/transform-root-to-walkable.d.ts +5 -0
- package/dist/components/MindGraph/core/helper/transform-root-to-walkable.js +32 -0
- package/dist/components/MindGraph/core/helper/with-prefix.d.ts +1 -0
- package/dist/components/MindGraph/core/helper/with-prefix.js +3 -0
- package/dist/components/MindGraph/core/index.d.ts +394 -0
- package/dist/components/MindGraph/core/index.js +86 -0
- package/dist/components/MindGraph/core/process/anchor.d.ts +12 -0
- package/dist/components/MindGraph/core/process/anchor.js +63 -0
- package/dist/components/MindGraph/core/process/index.d.ts +91 -0
- package/dist/components/MindGraph/core/process/index.js +30 -0
- package/dist/components/MindGraph/core/process/layout/dagre.d.ts +2 -0
- package/dist/components/MindGraph/core/process/layout/dagre.js +20 -0
- package/dist/components/MindGraph/core/process/layout/descendant-center.d.ts +10 -0
- package/dist/components/MindGraph/core/process/layout/descendant-center.js +146 -0
- package/dist/components/MindGraph/core/process/layout/heir-center.d.ts +10 -0
- package/dist/components/MindGraph/core/process/layout/heir-center.js +52 -0
- package/dist/components/MindGraph/core/process/layout/index.d.ts +3 -0
- package/dist/components/MindGraph/core/process/layout/index.js +3 -0
- package/dist/components/MindGraph/core/process/layout/structured/calc-drag-attach.d.ts +2 -0
- package/dist/components/MindGraph/core/process/layout/structured/calc-drag-attach.js +172 -0
- package/dist/components/MindGraph/core/process/layout/structured/calc-drop-index.d.ts +2 -0
- package/dist/components/MindGraph/core/process/layout/structured/calc-drop-index.js +38 -0
- package/dist/components/MindGraph/core/process/layout/structured/get-node-cross-boundary.d.ts +10 -0
- package/dist/components/MindGraph/core/process/layout/structured/get-node-cross-boundary.js +35 -0
- package/dist/components/MindGraph/core/process/layout/structured/index.d.ts +13 -0
- package/dist/components/MindGraph/core/process/layout/structured/index.js +321 -0
- package/dist/components/MindGraph/core/process/layout/type.d.ts +44 -0
- package/dist/components/MindGraph/core/process/layout/type.js +51 -0
- package/dist/components/MindGraph/core/process/line.d.ts +9 -0
- package/dist/components/MindGraph/core/process/line.js +69 -0
- package/dist/components/MindGraph/core/process/node-valid.d.ts +6 -0
- package/dist/components/MindGraph/core/process/node-valid.js +35 -0
- package/dist/components/MindGraph/core/process/orientation.d.ts +8 -0
- package/dist/components/MindGraph/core/process/orientation.js +40 -0
- package/dist/components/MindGraph/core/process/size.d.ts +4 -0
- package/dist/components/MindGraph/core/process/size.js +16 -0
- package/dist/components/MindGraph/core/process/visible.d.ts +16 -0
- package/dist/components/MindGraph/core/process/visible.js +99 -0
- package/dist/components/MindGraph/core/render/calc-visible.d.ts +11 -0
- package/dist/components/MindGraph/core/render/calc-visible.js +25 -0
- package/dist/components/MindGraph/core/render/connect/bezier.d.ts +2 -0
- package/dist/components/MindGraph/core/render/connect/bezier.js +12 -0
- package/dist/components/MindGraph/core/render/connect/get-path-render.d.ts +2 -0
- package/dist/components/MindGraph/core/render/connect/get-path-render.js +17 -0
- package/dist/components/MindGraph/core/render/connect/index.d.ts +10 -0
- package/dist/components/MindGraph/core/render/connect/index.js +45 -0
- package/dist/components/MindGraph/core/render/connect/line.d.ts +2 -0
- package/dist/components/MindGraph/core/render/connect/line.js +71 -0
- package/dist/components/MindGraph/core/render/connect/temporary-line.d.ts +15 -0
- package/dist/components/MindGraph/core/render/connect/temporary-line.js +44 -0
- package/dist/components/MindGraph/core/render/index.d.ts +27 -0
- package/dist/components/MindGraph/core/render/index.js +8 -0
- package/dist/components/MindGraph/core/render/layout.d.ts +12 -0
- package/dist/components/MindGraph/core/render/layout.js +85 -0
- package/dist/components/MindGraph/demo.js +54 -0
- package/dist/components/MindGraph/index.d.ts +3 -0
- package/dist/components/MindGraph/index.js +3 -0
- package/dist/components/MindGraph/react/component/index.d.ts +3 -0
- package/dist/components/MindGraph/react/component/index.js +227 -0
- package/dist/components/MindGraph/react/component/index.module.less +72 -0
- package/dist/components/MindGraph/react/component/nodes.d.ts +13 -0
- package/dist/components/MindGraph/react/component/nodes.js +153 -0
- package/dist/components/MindGraph/react/hook/use-drag.d.ts +20 -0
- package/dist/components/MindGraph/react/hook/use-drag.js +191 -0
- package/dist/components/MindGraph/react/hook/use-shadow-state.d.ts +2 -0
- package/dist/components/MindGraph/react/hook/use-shadow-state.js +24 -0
- package/dist/components/MindGraph/react/index.d.ts +154 -0
- package/dist/components/MindGraph/react/index.js +9 -0
- package/dist/components/MindGraph/react/scrollbar/axis/index.d.ts +25 -0
- package/dist/components/MindGraph/react/scrollbar/axis/index.js +143 -0
- package/dist/components/MindGraph/react/scrollbar/axis/index.module.less +48 -0
- package/dist/components/MindGraph/react/scrollbar/index.d.ts +8 -0
- package/dist/components/MindGraph/react/scrollbar/index.js +134 -0
- package/dist/components/MindGraph/react/tools/class-name-wrapper.d.ts +1 -0
- package/dist/components/MindGraph/react/tools/class-name-wrapper.js +5 -0
- package/dist/{SliderVerify → components/SliderVerify}/icons/close.js +0 -1
- package/dist/{SliderVerify → components/SliderVerify}/icons/refresh.js +0 -1
- package/dist/components/SliderVerify/icons/slider.d.ts +1 -0
- package/dist/{SliderVerify → components/SliderVerify}/icons/slider.js +0 -1
- package/dist/{SliderVerify → components/SliderVerify}/style.module.less +119 -121
- package/dist/{StyledQueryFilter → components/StyledQueryFilter}/index.less +22 -22
- package/dist/{StyledTable → components/StyledTable}/index.less +11 -11
- package/dist/{TabSearchTools → components/TabSearchTools}/index.d.ts +2 -2
- package/dist/{TabSearchTools → components/TabSearchTools}/index.js +1 -1
- package/dist/components/index.d.ts +6 -0
- package/dist/components/index.js +6 -0
- package/dist/index.d.ts +3 -5
- package/dist/index.js +3 -5
- package/dist/utils/format/index.js +8 -8
- package/package.json +32 -20
- /package/dist/{FlexRowCol → components/FlexRowCol}/index.d.ts +0 -0
- /package/dist/{SliderVerify/icons/close.d.ts → components/MindGraph/demo.d.ts} +0 -0
- /package/dist/{SliderVerify/icons/refresh.d.ts → components/SliderVerify/icons/close.d.ts} +0 -0
- /package/dist/{SliderVerify/icons/slider.d.ts → components/SliderVerify/icons/refresh.d.ts} +0 -0
- /package/dist/{SliderVerify → components/SliderVerify}/index.d.ts +0 -0
- /package/dist/{SliderVerify → components/SliderVerify}/index.js +0 -0
- /package/dist/{StyledQueryFilter → components/StyledQueryFilter}/index.d.ts +0 -0
- /package/dist/{StyledQueryFilter → components/StyledQueryFilter}/index.js +0 -0
- /package/dist/{StyledTable → components/StyledTable}/index.d.ts +0 -0
- /package/dist/{StyledTable → components/StyledTable}/index.js +0 -0
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
3
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
4
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
5
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
6
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
7
|
+
import { useCallback, useRef, useState } from 'react';
|
|
8
|
+
export var useShadowState = function useShadowState(init) {
|
|
9
|
+
var _useState = useState(init),
|
|
10
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
11
|
+
state = _useState2[0],
|
|
12
|
+
setState = _useState2[1];
|
|
13
|
+
var shadow = useRef(state);
|
|
14
|
+
var setStateWrapper = useCallback(function (update) {
|
|
15
|
+
var result = update;
|
|
16
|
+
if (typeof update === 'function') {
|
|
17
|
+
result = update(shadow.current);
|
|
18
|
+
}
|
|
19
|
+
shadow.current = result;
|
|
20
|
+
setState(result);
|
|
21
|
+
}, /* eslint-disable-next-line */
|
|
22
|
+
[]);
|
|
23
|
+
return [state, setStateWrapper, shadow];
|
|
24
|
+
};
|
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Mind } from '../core';
|
|
3
|
+
export declare namespace MindReact {
|
|
4
|
+
const View: React.ForwardRefExoticComponent<ViewProps & React.RefAttributes<GraphicRef>>;
|
|
5
|
+
interface GraphicRef {
|
|
6
|
+
mind?: Mind.Graphic;
|
|
7
|
+
}
|
|
8
|
+
interface Node extends Omit<Mind.Node, 'sizeof' | 'children'> {
|
|
9
|
+
/**
|
|
10
|
+
* 当设置 size 时,将会禁止自动测量,提升速率
|
|
11
|
+
*/
|
|
12
|
+
size?: Mind.Size;
|
|
13
|
+
/**
|
|
14
|
+
* 节点是否受到保护(超出可视区域不会被销毁,但会设置`visible=hidden`)
|
|
15
|
+
* @default false
|
|
16
|
+
*/
|
|
17
|
+
beProtected?: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* 是否需要更新节点尺寸(设置为 true 之后会更新一次节点尺寸,后组件将自动设置此值为false)
|
|
20
|
+
* @default false
|
|
21
|
+
*/
|
|
22
|
+
needUpdateSize?: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* 节点总是可见(超出可视区域不会被销毁也不会改变`visible`状态)
|
|
25
|
+
* @default false
|
|
26
|
+
*/
|
|
27
|
+
alwaysVisible?: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* 禁用尺寸缓存
|
|
30
|
+
* @default false
|
|
31
|
+
*/
|
|
32
|
+
disableSizeCache?: boolean;
|
|
33
|
+
/**
|
|
34
|
+
* 子代节点
|
|
35
|
+
*/
|
|
36
|
+
children?: Node[];
|
|
37
|
+
/**
|
|
38
|
+
* 节点是否可拖拽
|
|
39
|
+
* @default false
|
|
40
|
+
*/
|
|
41
|
+
draggable?: boolean;
|
|
42
|
+
/**
|
|
43
|
+
* 节点是否可被拖拽节点依附作为其子节点
|
|
44
|
+
* @default true
|
|
45
|
+
*/
|
|
46
|
+
droppable?: boolean;
|
|
47
|
+
}
|
|
48
|
+
interface Root {
|
|
49
|
+
node: Node;
|
|
50
|
+
positive?: Node[];
|
|
51
|
+
negative?: Node[];
|
|
52
|
+
}
|
|
53
|
+
type Render = (data: Node, mirror: boolean) => React.ReactNode;
|
|
54
|
+
type DragStartEvent = (event: {
|
|
55
|
+
node: Node;
|
|
56
|
+
}) => void;
|
|
57
|
+
type DragEvent = (event: {
|
|
58
|
+
node: Node;
|
|
59
|
+
attach: {
|
|
60
|
+
parent: Node;
|
|
61
|
+
orientation: Mind.Orientation;
|
|
62
|
+
} | undefined;
|
|
63
|
+
mirrorPosition: Mind.Coordinate;
|
|
64
|
+
}) => void;
|
|
65
|
+
type DragEndEvent = (event: {
|
|
66
|
+
node: Node;
|
|
67
|
+
attach: {
|
|
68
|
+
parent: Node;
|
|
69
|
+
orientation: Mind.Orientation;
|
|
70
|
+
index: number;
|
|
71
|
+
} | undefined;
|
|
72
|
+
original: {
|
|
73
|
+
parent: Node;
|
|
74
|
+
orientation: Mind.Orientation;
|
|
75
|
+
};
|
|
76
|
+
}) => void;
|
|
77
|
+
interface ViewProps {
|
|
78
|
+
/**
|
|
79
|
+
* bade mind 配置项
|
|
80
|
+
* - 做浅比较,引用出现改变则重新绘制
|
|
81
|
+
*/
|
|
82
|
+
options?: Mind.Options;
|
|
83
|
+
/**
|
|
84
|
+
* 脑图结构数据
|
|
85
|
+
* - 做浅比较,引用出现改变则重新绘制
|
|
86
|
+
* - html 值将由组件自动注入到对象中(不改变对象引用,只是注入值)
|
|
87
|
+
* - 如果节点**长宽固定值**,则,请直接设置 size,避免性能损耗
|
|
88
|
+
*/
|
|
89
|
+
data: Root;
|
|
90
|
+
/**
|
|
91
|
+
* 节点渲染器
|
|
92
|
+
* - 做浅比较,引用出现改变则重新绘制
|
|
93
|
+
* - 请在节点**第一次渲染时就确定其尺寸**,当节点尺寸改变时,需要修改`data`引用,唤起重计算
|
|
94
|
+
* - 请保持镜像节点尺寸与源节点尺寸一致
|
|
95
|
+
* @param data 节点数据
|
|
96
|
+
* @param mirror 渲染节点是否为镜像节点(拖拽)
|
|
97
|
+
*/
|
|
98
|
+
render: Render;
|
|
99
|
+
/**
|
|
100
|
+
* 渲染锚点数据
|
|
101
|
+
* - 在启动重渲染时保持 anchor 对应节点在屏幕上的相对位置不变
|
|
102
|
+
* - 如不设定,则清空锚点,根节点居中,缩放比归一
|
|
103
|
+
*/
|
|
104
|
+
anchor?: string;
|
|
105
|
+
/**
|
|
106
|
+
* 是否展示滚动条
|
|
107
|
+
* - 当展示滚动条时,将会自动限定位移区域
|
|
108
|
+
* - 当隐藏滚动条时,位移范围无限制
|
|
109
|
+
* @default false
|
|
110
|
+
*/
|
|
111
|
+
scrollbar?: boolean;
|
|
112
|
+
/**
|
|
113
|
+
* 图形更新完成
|
|
114
|
+
* - 由 data 和 options 改变所引起,脑图控制对象内部状态刷新
|
|
115
|
+
* - 即,此时,脑图所有的状态以及渲染已经完成
|
|
116
|
+
* @param mind 脑图控制对象
|
|
117
|
+
*/
|
|
118
|
+
onUpdated?: (mind: Mind.Graphic) => void;
|
|
119
|
+
/**
|
|
120
|
+
* 注入到根上的 `class`
|
|
121
|
+
*/
|
|
122
|
+
className?: string;
|
|
123
|
+
/**
|
|
124
|
+
* 注入到根上的 `style`
|
|
125
|
+
*/
|
|
126
|
+
style?: React.CSSProperties;
|
|
127
|
+
/**
|
|
128
|
+
* 滚轮移动速度
|
|
129
|
+
* @default 0.5
|
|
130
|
+
*/
|
|
131
|
+
wheelMoveSpeed?: number;
|
|
132
|
+
/**
|
|
133
|
+
* 拖拽开始事件
|
|
134
|
+
* @param node 拖拽的节点
|
|
135
|
+
*/
|
|
136
|
+
onDragStart?: DragStartEvent;
|
|
137
|
+
/**
|
|
138
|
+
* 拖拽中事件
|
|
139
|
+
* @param event.node 拖拽的节点
|
|
140
|
+
* @param event.attach 拖拽节点关联的节点(关联父级),可能为空
|
|
141
|
+
* @param event.position 拖拽节点镜像中心当前位置
|
|
142
|
+
* @param event.orientation 拖拽节点当前位于哪个区域(位于根节点区域时为空,此时无法附着在任何一个节点上)
|
|
143
|
+
*/
|
|
144
|
+
onDrag?: DragEvent;
|
|
145
|
+
/**
|
|
146
|
+
* 拖拽结束事件
|
|
147
|
+
* @param event.node 拖拽的节点
|
|
148
|
+
* @param event.attach 拖拽节点最终关联的节点(关联父级),可能为空
|
|
149
|
+
* @param event.orientation 拖拽节点当前最终位于哪个区域(位于根节点区域时为空,此时无法附着在任何一个节点上)
|
|
150
|
+
* @param event.id 拖拽节点位于最终关联节点子代(关联父级)中的目标位置(-1代表无需改变位置)(需要注意的是,关联的父节点可能仍然是拖动节点自身的父节点)
|
|
151
|
+
*/
|
|
152
|
+
onDragEnd?: DragEndEvent;
|
|
153
|
+
}
|
|
154
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
interface AxisProps {
|
|
2
|
+
/**
|
|
3
|
+
* value最大数值
|
|
4
|
+
*/
|
|
5
|
+
total: number;
|
|
6
|
+
/**
|
|
7
|
+
* 滑块所占长度(可视区域尺寸,滚动条真实尺寸)
|
|
8
|
+
*/
|
|
9
|
+
thumb: number;
|
|
10
|
+
/**
|
|
11
|
+
* 当前值
|
|
12
|
+
*/
|
|
13
|
+
value: number;
|
|
14
|
+
/**
|
|
15
|
+
* 滚动位置改变事件
|
|
16
|
+
* @param percentage 滚动比例
|
|
17
|
+
*/
|
|
18
|
+
onChange: (percentage: number) => void;
|
|
19
|
+
/**
|
|
20
|
+
* 是否是垂直坐标
|
|
21
|
+
*/
|
|
22
|
+
vertical: boolean;
|
|
23
|
+
}
|
|
24
|
+
export declare const Axis: (props: AxisProps) => import("react/jsx-runtime").JSX.Element;
|
|
25
|
+
export {};
|
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
3
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
4
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
5
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
6
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
7
|
+
import * as React from 'react';
|
|
8
|
+
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
9
|
+
import Classnames from 'classnames';
|
|
10
|
+
import { classNameWrapper } from "../../tools/class-name-wrapper";
|
|
11
|
+
|
|
12
|
+
// @ts-ignore-next-line
|
|
13
|
+
import Style from "./index.module.less";
|
|
14
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
15
|
+
export var Axis = function Axis(props) {
|
|
16
|
+
var total = props.total,
|
|
17
|
+
thumb = props.thumb,
|
|
18
|
+
value = props.value,
|
|
19
|
+
onChange = props.onChange,
|
|
20
|
+
vertical = props.vertical;
|
|
21
|
+
var containerRef = useRef(null);
|
|
22
|
+
// 滑块容器尺度
|
|
23
|
+
// 因为滑块滑到底的时候,实际上还占有了一定区域
|
|
24
|
+
var withThumbTotal = useMemo(function () {
|
|
25
|
+
return total + thumb;
|
|
26
|
+
}, [total, thumb]);
|
|
27
|
+
// 滑块屏幕尺寸(已经缩放转换,为真实屏幕尺寸)
|
|
28
|
+
var thumbSize = useMemo(function () {
|
|
29
|
+
return thumb * thumb / withThumbTotal;
|
|
30
|
+
}, [thumb, withThumbTotal]);
|
|
31
|
+
// 移动距离屏幕尺寸(已经缩放转换,为真实屏幕尺寸))
|
|
32
|
+
var moveDistance = useMemo(function () {
|
|
33
|
+
return value * thumb / withThumbTotal;
|
|
34
|
+
}, [value, thumb, withThumbTotal]);
|
|
35
|
+
// 鼠标是否按下
|
|
36
|
+
var _useState = useState(false),
|
|
37
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
38
|
+
isMouseDown = _useState2[0],
|
|
39
|
+
setIsMouseDown = _useState2[1];
|
|
40
|
+
// 开始位移时的位置
|
|
41
|
+
var startMovePosition = useRef();
|
|
42
|
+
var thumbStyle = useMemo(function () {
|
|
43
|
+
var result = {};
|
|
44
|
+
if (vertical) {
|
|
45
|
+
result.height = "".concat(thumbSize, "px");
|
|
46
|
+
result.transform = "translateY(".concat(moveDistance, "px)");
|
|
47
|
+
} else {
|
|
48
|
+
result.width = "".concat(thumbSize, "px");
|
|
49
|
+
result.transform = "translateX(".concat(moveDistance, "px)");
|
|
50
|
+
}
|
|
51
|
+
return result;
|
|
52
|
+
}, [thumbSize, moveDistance, vertical]);
|
|
53
|
+
var onChangeDispose = useCallback(function (screenPercentage) {
|
|
54
|
+
// 限定范围
|
|
55
|
+
if (screenPercentage < 0) {
|
|
56
|
+
screenPercentage = 0;
|
|
57
|
+
} else if (screenPercentage > 1 - thumbSize / thumb) {
|
|
58
|
+
screenPercentage = 1 - thumbSize / thumb;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
// 得出虚拟尺寸
|
|
62
|
+
// 计算位移比例
|
|
63
|
+
onChange(screenPercentage * withThumbTotal / total);
|
|
64
|
+
}, [onChange, total, withThumbTotal]);
|
|
65
|
+
var onClick = useCallback(function (e) {
|
|
66
|
+
// 避免拖动事件干扰
|
|
67
|
+
if (e.target === containerRef.current) {
|
|
68
|
+
var diff = 0;
|
|
69
|
+
// 计算比例,滑块居中处理
|
|
70
|
+
if (vertical) {
|
|
71
|
+
// 计算比例,滑块居中处理
|
|
72
|
+
diff = (e.nativeEvent.offsetY - thumbSize / 2) / thumb;
|
|
73
|
+
} else {
|
|
74
|
+
diff = (e.nativeEvent.offsetX - thumbSize / 2) / thumb;
|
|
75
|
+
}
|
|
76
|
+
onChangeDispose(diff);
|
|
77
|
+
}
|
|
78
|
+
e.stopPropagation();
|
|
79
|
+
}, [thumb, thumbSize, onChangeDispose]);
|
|
80
|
+
var onMouseMove = useCallback(function (e) {
|
|
81
|
+
if (!isMouseDown) {
|
|
82
|
+
return;
|
|
83
|
+
}
|
|
84
|
+
if (!startMovePosition.current) {
|
|
85
|
+
startMovePosition.current = {
|
|
86
|
+
absolute: 0,
|
|
87
|
+
relative: 0
|
|
88
|
+
};
|
|
89
|
+
startMovePosition.current.relative = moveDistance;
|
|
90
|
+
if (vertical) {
|
|
91
|
+
startMovePosition.current.absolute = e.clientY;
|
|
92
|
+
} else {
|
|
93
|
+
startMovePosition.current.absolute = e.clientX;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
var absolute = 0;
|
|
97
|
+
if (vertical) {
|
|
98
|
+
absolute = e.clientY;
|
|
99
|
+
} else {
|
|
100
|
+
absolute = e.clientX;
|
|
101
|
+
}
|
|
102
|
+
var diff = absolute - startMovePosition.current.absolute;
|
|
103
|
+
var result = diff + startMovePosition.current.relative;
|
|
104
|
+
onChangeDispose(result / thumb);
|
|
105
|
+
e.stopPropagation();
|
|
106
|
+
}, [onChangeDispose, isMouseDown, moveDistance, vertical, thumb]);
|
|
107
|
+
// 全局监听 move 事件
|
|
108
|
+
useEffect(function () {
|
|
109
|
+
window.addEventListener('mousemove', onMouseMove);
|
|
110
|
+
return function () {
|
|
111
|
+
return window.removeEventListener('mousemove', onMouseMove);
|
|
112
|
+
};
|
|
113
|
+
}, [onMouseMove]);
|
|
114
|
+
|
|
115
|
+
// 全局监听鼠标松开事件
|
|
116
|
+
useEffect(function () {
|
|
117
|
+
var onMouseUp = function onMouseUp(e) {
|
|
118
|
+
setIsMouseDown(false);
|
|
119
|
+
startMovePosition.current = undefined;
|
|
120
|
+
e.stopPropagation();
|
|
121
|
+
};
|
|
122
|
+
window.addEventListener('mouseup', onMouseUp);
|
|
123
|
+
return function () {
|
|
124
|
+
return window.removeEventListener('mouseup', onMouseUp);
|
|
125
|
+
};
|
|
126
|
+
}, [setIsMouseDown]);
|
|
127
|
+
return /*#__PURE__*/_jsx("div", {
|
|
128
|
+
className: Classnames(classNameWrapper(Style, 'axis'), classNameWrapper(Style, vertical ? 'axis--y' : 'axis--x'), isMouseDown ? classNameWrapper(Style, 'axis--active') : ''),
|
|
129
|
+
onClick: onClick,
|
|
130
|
+
ref: containerRef,
|
|
131
|
+
children: /*#__PURE__*/_jsx("div", {
|
|
132
|
+
className: classNameWrapper(Style, 'thumb'),
|
|
133
|
+
style: thumbStyle,
|
|
134
|
+
onMouseDown: function onMouseDown(e) {
|
|
135
|
+
setIsMouseDown(true);
|
|
136
|
+
// 禁用默认(防止选中文字)
|
|
137
|
+
e.preventDefault();
|
|
138
|
+
e.stopPropagation();
|
|
139
|
+
return false;
|
|
140
|
+
}
|
|
141
|
+
})
|
|
142
|
+
});
|
|
143
|
+
};
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
@size: 8px;
|
|
2
|
+
@border-radius: 4px;
|
|
3
|
+
@active-background: #7a7374;
|
|
4
|
+
|
|
5
|
+
.axis{
|
|
6
|
+
position: absolute;
|
|
7
|
+
|
|
8
|
+
.thumb{
|
|
9
|
+
position: absolute;
|
|
10
|
+
left: 0;
|
|
11
|
+
top: 0;
|
|
12
|
+
border-radius: @border-radius;
|
|
13
|
+
// 大理石灰
|
|
14
|
+
background: #c4cbcf;
|
|
15
|
+
|
|
16
|
+
&:hover{
|
|
17
|
+
background: @active-background;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
&--active{
|
|
22
|
+
.thumb{
|
|
23
|
+
background: @active-background;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
&--y{
|
|
28
|
+
right: 0;
|
|
29
|
+
top: 0;
|
|
30
|
+
height: 100%;
|
|
31
|
+
width: @size;
|
|
32
|
+
|
|
33
|
+
.thumb{
|
|
34
|
+
width: 100%;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
&--x{
|
|
39
|
+
left: 0;
|
|
40
|
+
bottom: 0;
|
|
41
|
+
width: 100%;
|
|
42
|
+
height: @size;
|
|
43
|
+
|
|
44
|
+
.thumb{
|
|
45
|
+
height: 100%;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Mind } from '../../core';
|
|
2
|
+
export declare const Scrollbar: (props: {
|
|
3
|
+
viewport?: HTMLElement | null | undefined;
|
|
4
|
+
container?: HTMLElement | null | undefined;
|
|
5
|
+
mind?: Mind.Graphic | undefined;
|
|
6
|
+
transform?: Mind.Transform | undefined;
|
|
7
|
+
options: Mind.Options;
|
|
8
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
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); }
|
|
2
|
+
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; }
|
|
3
|
+
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; }
|
|
4
|
+
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; }
|
|
5
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
6
|
+
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); }
|
|
7
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
8
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
9
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
10
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
11
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
12
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
13
|
+
import React, { useEffect, useState } from 'react';
|
|
14
|
+
import { Axis } from "./axis";
|
|
15
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
16
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
17
|
+
export var Scrollbar = function Scrollbar(props) {
|
|
18
|
+
var viewport = props.viewport,
|
|
19
|
+
container = props.container,
|
|
20
|
+
mind = props.mind,
|
|
21
|
+
transform = props.transform,
|
|
22
|
+
options = props.options;
|
|
23
|
+
var _useState = useState({
|
|
24
|
+
x: {
|
|
25
|
+
max: 0,
|
|
26
|
+
min: 0
|
|
27
|
+
},
|
|
28
|
+
y: {
|
|
29
|
+
max: 0,
|
|
30
|
+
min: 0
|
|
31
|
+
}
|
|
32
|
+
}),
|
|
33
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
34
|
+
boundary = _useState2[0],
|
|
35
|
+
setBoundary = _useState2[1];
|
|
36
|
+
var _useState3 = useState({
|
|
37
|
+
height: 0,
|
|
38
|
+
width: 0
|
|
39
|
+
}),
|
|
40
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
41
|
+
viewportSize = _useState4[0],
|
|
42
|
+
setViewportSize = _useState4[1];
|
|
43
|
+
var _useState5 = useState({
|
|
44
|
+
height: 0,
|
|
45
|
+
width: 0
|
|
46
|
+
}),
|
|
47
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
48
|
+
containerSize = _useState6[0],
|
|
49
|
+
setContainerSize = _useState6[1];
|
|
50
|
+
|
|
51
|
+
// 监听视窗和容器尺寸改变
|
|
52
|
+
useEffect(function () {
|
|
53
|
+
if (viewport && container) {
|
|
54
|
+
var observer = new ResizeObserver(function () {
|
|
55
|
+
setViewportSize({
|
|
56
|
+
height: viewport.clientHeight,
|
|
57
|
+
width: viewport.clientWidth
|
|
58
|
+
});
|
|
59
|
+
setContainerSize({
|
|
60
|
+
height: container.clientHeight,
|
|
61
|
+
width: container.clientWidth
|
|
62
|
+
});
|
|
63
|
+
});
|
|
64
|
+
observer.observe(viewport);
|
|
65
|
+
observer.observe(container);
|
|
66
|
+
return function () {
|
|
67
|
+
observer.unobserve(viewport);
|
|
68
|
+
observer.unobserve(container);
|
|
69
|
+
};
|
|
70
|
+
}
|
|
71
|
+
}, [viewport, container]);
|
|
72
|
+
useEffect(function () {
|
|
73
|
+
if (containerSize.width && viewportSize.width && transform && mind) {
|
|
74
|
+
// 设定位移边界
|
|
75
|
+
mind.setOptions({
|
|
76
|
+
zoomExtent: {
|
|
77
|
+
translate: [{
|
|
78
|
+
x: -viewportSize.width / transform.scale,
|
|
79
|
+
y: -viewportSize.height / transform.scale
|
|
80
|
+
}, {
|
|
81
|
+
x: containerSize.width + viewportSize.width / transform.scale,
|
|
82
|
+
y: containerSize.height + viewportSize.height / transform.scale
|
|
83
|
+
}]
|
|
84
|
+
}
|
|
85
|
+
}, true);
|
|
86
|
+
|
|
87
|
+
// 设定边界
|
|
88
|
+
setBoundary({
|
|
89
|
+
x: {
|
|
90
|
+
max: viewportSize.width,
|
|
91
|
+
min: -containerSize.width * transform.scale
|
|
92
|
+
},
|
|
93
|
+
y: {
|
|
94
|
+
max: viewportSize.height,
|
|
95
|
+
min: -containerSize.height * transform.scale
|
|
96
|
+
}
|
|
97
|
+
});
|
|
98
|
+
}
|
|
99
|
+
},
|
|
100
|
+
// 当 options 改变时,需要为mind重新设定 zoom 界限
|
|
101
|
+
[containerSize, viewportSize, options, transform, mind]);
|
|
102
|
+
|
|
103
|
+
// 没有初始化完成之前不展示滚动条
|
|
104
|
+
if (!viewport || !container || !mind || !transform || !containerSize.width || !viewportSize.width) {
|
|
105
|
+
return /*#__PURE__*/_jsx(React.Fragment, {});
|
|
106
|
+
}
|
|
107
|
+
return /*#__PURE__*/_jsxs(React.Fragment, {
|
|
108
|
+
children: [/*#__PURE__*/_jsx(Axis, {
|
|
109
|
+
total: boundary.x.max - boundary.x.min,
|
|
110
|
+
thumb: viewportSize.width,
|
|
111
|
+
value: boundary.x.max - transform.x,
|
|
112
|
+
onChange: function onChange(percentage) {
|
|
113
|
+
if (mind) {
|
|
114
|
+
mind.setTransform(_objectSpread(_objectSpread({}, mind.getTransform()), {}, {
|
|
115
|
+
x: boundary.x.max - (boundary.x.max - boundary.x.min) * percentage
|
|
116
|
+
}));
|
|
117
|
+
}
|
|
118
|
+
},
|
|
119
|
+
vertical: false
|
|
120
|
+
}), /*#__PURE__*/_jsx(Axis, {
|
|
121
|
+
total: boundary.y.max - boundary.y.min,
|
|
122
|
+
thumb: viewportSize.height,
|
|
123
|
+
value: boundary.y.max - transform.y,
|
|
124
|
+
onChange: function onChange(percentage) {
|
|
125
|
+
if (mind) {
|
|
126
|
+
mind.setTransform(_objectSpread(_objectSpread({}, mind.getTransform()), {}, {
|
|
127
|
+
y: boundary.y.max - (boundary.y.max - boundary.y.min) * percentage
|
|
128
|
+
}));
|
|
129
|
+
}
|
|
130
|
+
},
|
|
131
|
+
vertical: true
|
|
132
|
+
})]
|
|
133
|
+
});
|
|
134
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const classNameWrapper: (style: Record<string, any>, name: string) => string;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function (): import("react/jsx-runtime").JSX.Element;
|