plain-design 1.0.0-beta.1 → 1.0.0-beta.10
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/plain-design.commonjs.min.js +11 -2
- package/dist/plain-design.min.css +3 -1
- package/dist/plain-design.min.js +11 -2
- package/dist/report.html +2 -2
- package/package.json +4 -4
- package/src/packages/build.ts +1 -1
- package/src/packages/components/Application/theme/theme.ts +1 -1
- package/src/packages/components/ColorPicker/sub/ColorSlider.tsx +8 -5
- package/src/packages/components/ColorPicker/sub/ColorSvPanel.tsx +7 -4
- package/src/packages/components/Dialog/index.tsx +2 -1
- package/src/packages/components/Dialog/useDialogMovable.tsx +7 -4
- package/src/packages/components/Dialog/utils/dialog.mouse.ts +4 -2
- package/src/packages/components/Input/useMultipleInput.tsx +5 -2
- package/src/packages/components/Input/useTextareaInput.tsx +10 -5
- package/src/packages/components/InputNumber/NumberResize.tsx +6 -2
- package/src/packages/components/Layout/index.tsx +31 -0
- package/src/packages/components/Layout/layout.scss +227 -0
- package/src/packages/components/Layout/layout.utils.ts +3 -0
- package/src/packages/components/LayoutSection/index.tsx +67 -0
- package/src/packages/components/LayoutSection/useLayoutSectionResizer.tsx +184 -0
- package/src/{pages/index/PageThemeUtils.tsx → packages/components/PageThemeUtils/index.tsx} +6 -4
- package/src/packages/components/Popup/index.tsx +20 -8
- package/src/packages/components/Rate/index.tsx +3 -1
- package/src/packages/components/Scroll/HorizontalScrollbar.tsx +7 -3
- package/src/packages/components/Scroll/VerticalScrollbar.tsx +7 -3
- package/src/packages/components/Slider/useSliderDotDragier.tsx +7 -4
- package/src/packages/components/Table/table/head/useHeadCellResize.ts +8 -3
- package/src/packages/components/Table/table/use/useTableDraggier.col.tsx +10 -5
- package/src/packages/components/Table/table/use/useTableDraggier.row.tsx +11 -6
- package/src/packages/components/ThemePrimaryColors/index.ts +5 -0
- package/src/packages/components/Tree/RenderTreeNode.tsx +2 -1
- package/src/packages/components/Tree/tree.scss +34 -8
- package/src/packages/components/TreeCore/TreeCore.type.tsx +2 -0
- package/src/packages/components/TreeCore/createTreeCore.tsx +5 -1
- package/src/packages/components/TreeCore/createTreeDraggier.tsx +9 -5
- package/src/packages/components/TreeCore/createTreeProps.ts +1 -0
- package/src/packages/components/TreeNodeWithMenu/index.tsx +53 -0
- package/src/packages/components/TreeNodeWithMenu/tree-node-with-menu.scss +38 -0
- package/src/packages/components/createProvider/index.ts +5 -0
- package/src/packages/components/nextPopupId/index.ts +5 -0
- package/src/packages/components/useImage/ImageService.tsx +7 -4
- package/src/packages/components/usePopupManager/index.ts +5 -0
- package/src/packages/components/usePopupTrigger/index.tsx +5 -0
- package/src/packages/components/useReferenceTrigger/index.tsx +5 -0
- package/src/packages/components/useTooltip/index.tsx +2 -0
- package/src/packages/components/useWatchAutoClear/index.ts +5 -0
- package/src/packages/entry.tsx +29 -0
- package/src/packages/utils/ClientZoom.ts +24 -2
- package/src/packages/utils/useMove.tsx +10 -4
- package/src/pages/index/App.tsx +3 -2
- package/src/pages/index/app.scss +5 -0
- package/src/pages/index/components/normal/DemoLayout.tsx +144 -0
- package/src/pages/index/components/normal/DemoLoading.tsx +3 -0
- package/src/pages/index/components/normal/DemoTree.tsx +71 -2
- package/src/pages/index/components/service/DemoPopupService.tsx +6 -3
- package/src/pages/index/home/AppHead.tsx +4 -4
- package/src/pages/index/home/menus.tsx +1 -0
- package/src/pages/index/home/plain-design.png +0 -0
- package/src/pages/index/main.tsx +0 -4
@@ -0,0 +1,184 @@
|
|
1
|
+
import Icon from "../Icon";
|
2
|
+
import {eLayoutSectionPosition} from "../Layout/layout.utils";
|
3
|
+
import {cacheComputed, computed, getComponentCls, iHTMLDivElement, iMouseEvent, useRefs} from "plain-design-composition";
|
4
|
+
import {createEffects} from "plain-utils/utils/createEffects";
|
5
|
+
import {ClientZoom} from "../../utils/ClientZoom";
|
6
|
+
|
7
|
+
export function useLayoutSectionResizer(
|
8
|
+
{
|
9
|
+
model,
|
10
|
+
collapseModel,
|
11
|
+
props
|
12
|
+
}: {
|
13
|
+
model: { value?: number },
|
14
|
+
collapseModel: { value?: boolean },
|
15
|
+
props: { position: typeof eLayoutSectionPosition.TYPE }
|
16
|
+
}
|
17
|
+
) {
|
18
|
+
|
19
|
+
const { refs, onRef } = useRefs({ sep: iHTMLDivElement });
|
20
|
+
|
21
|
+
const isVertical = computed(() => props.position === eLayoutSectionPosition.top || props.position === eLayoutSectionPosition.bottom);
|
22
|
+
|
23
|
+
const icon = cacheComputed(() => {
|
24
|
+
switch (props.position) {
|
25
|
+
case "center":
|
26
|
+
return null;
|
27
|
+
case "left":
|
28
|
+
return collapseModel.value ? 'pi-caret-right' : 'pi-caret-left';
|
29
|
+
case "right":
|
30
|
+
return collapseModel.value ? 'pi-caret-left' : 'pi-caret-right';
|
31
|
+
case "top":
|
32
|
+
return collapseModel.value ? 'pi-caret-down' : 'pi-caret-up';
|
33
|
+
case "bottom":
|
34
|
+
return collapseModel.value ? 'pi-caret-up' : 'pi-caret-down';
|
35
|
+
}
|
36
|
+
return null;
|
37
|
+
});
|
38
|
+
|
39
|
+
const draggier = computed(() => {
|
40
|
+
return isVertical.value ? (() => {
|
41
|
+
const { effects } = createEffects();
|
42
|
+
|
43
|
+
let staticState = null as null | {
|
44
|
+
startY: number,
|
45
|
+
moveY: number,
|
46
|
+
startValue: number,
|
47
|
+
shadowEl: HTMLDivElement,
|
48
|
+
};
|
49
|
+
|
50
|
+
const onMousedown = (e: iMouseEvent) => {
|
51
|
+
|
52
|
+
const { clientY } = ClientZoom.getClientPosition(e);
|
53
|
+
|
54
|
+
const shadowEl = (() => {
|
55
|
+
const rect = refs.sep!.getBoundingClientRect();
|
56
|
+
const el = document.createElement('div');
|
57
|
+
el.style.height = '1px';
|
58
|
+
el.style.position = 'fixed';
|
59
|
+
el.style.left = `${rect.left}px`;
|
60
|
+
el.style.top = `${clientY}px`;
|
61
|
+
el.style.width = `${rect.width}px`;
|
62
|
+
el.style.zIndex = "10";
|
63
|
+
el.style.backgroundColor = `var(--${getComponentCls('primary-6')})`;
|
64
|
+
document.body.appendChild(el);
|
65
|
+
effects.push(() => {
|
66
|
+
document.body.removeChild(el);
|
67
|
+
});
|
68
|
+
return el;
|
69
|
+
})();
|
70
|
+
|
71
|
+
staticState = {
|
72
|
+
startY: clientY,
|
73
|
+
moveY: clientY,
|
74
|
+
startValue: model.value!,
|
75
|
+
shadowEl,
|
76
|
+
};
|
77
|
+
|
78
|
+
window.addEventListener('mousemove', onMousemove);
|
79
|
+
window.addEventListener('mouseup', effects.clear);
|
80
|
+
effects.push(() => {
|
81
|
+
if (!staticState) {return;}
|
82
|
+
let durY = staticState!.moveY - staticState!.startY;
|
83
|
+
if (props.position === eLayoutSectionPosition.bottom) {
|
84
|
+
durY = -durY;
|
85
|
+
}
|
86
|
+
model.value = staticState.startValue + durY;
|
87
|
+
staticState = null;
|
88
|
+
window.removeEventListener('mousemove', onMousemove);
|
89
|
+
window.removeEventListener('mouseup', effects.clear);
|
90
|
+
});
|
91
|
+
};
|
92
|
+
|
93
|
+
const onMousemove = (e: MouseEvent) => {
|
94
|
+
if (!staticState) {return;}
|
95
|
+
const { clientY } = ClientZoom.getClientPosition(e);
|
96
|
+
staticState.moveY = clientY;
|
97
|
+
staticState.shadowEl.style.top = `${clientY}px`;
|
98
|
+
};
|
99
|
+
|
100
|
+
return {
|
101
|
+
onMousedown
|
102
|
+
};
|
103
|
+
})() : (() => {
|
104
|
+
const { effects } = createEffects();
|
105
|
+
|
106
|
+
let staticState = null as null | {
|
107
|
+
startX: number,
|
108
|
+
moveX: number,
|
109
|
+
startValue: number,
|
110
|
+
shadowEl: HTMLDivElement,
|
111
|
+
};
|
112
|
+
|
113
|
+
const onMousedown = (e: iMouseEvent) => {
|
114
|
+
|
115
|
+
const { clientX } = ClientZoom.getClientPosition(e);
|
116
|
+
|
117
|
+
const shadowEl = (() => {
|
118
|
+
const rect = refs.sep!.getBoundingClientRect();
|
119
|
+
const el = document.createElement('div');
|
120
|
+
el.style.width = '1px';
|
121
|
+
el.style.position = 'fixed';
|
122
|
+
el.style.top = `${rect.top}px`;
|
123
|
+
el.style.left = `${clientX}px`;
|
124
|
+
el.style.height = `${rect.height}px`;
|
125
|
+
el.style.zIndex = "10";
|
126
|
+
el.style.backgroundColor = `var(--${getComponentCls('primary-6')})`;
|
127
|
+
document.body.appendChild(el);
|
128
|
+
effects.push(() => {
|
129
|
+
document.body.removeChild(el);
|
130
|
+
});
|
131
|
+
return el;
|
132
|
+
})();
|
133
|
+
|
134
|
+
staticState = {
|
135
|
+
startX: clientX,
|
136
|
+
moveX: clientX,
|
137
|
+
startValue: model.value!,
|
138
|
+
shadowEl,
|
139
|
+
};
|
140
|
+
|
141
|
+
window.addEventListener('mousemove', onMousemove);
|
142
|
+
window.addEventListener('mouseup', effects.clear);
|
143
|
+
effects.push(() => {
|
144
|
+
if (!staticState) {return;}
|
145
|
+
let durX = staticState!.moveX - staticState!.startX;
|
146
|
+
if (props.position === eLayoutSectionPosition.right) {
|
147
|
+
durX = -durX;
|
148
|
+
}
|
149
|
+
model.value = staticState.startValue + durX;
|
150
|
+
staticState = null;
|
151
|
+
window.removeEventListener('mousemove', onMousemove);
|
152
|
+
window.removeEventListener('mouseup', effects.clear);
|
153
|
+
});
|
154
|
+
};
|
155
|
+
|
156
|
+
const onMousemove = (e: MouseEvent) => {
|
157
|
+
if (!staticState) {return;}
|
158
|
+
const { clientX } = ClientZoom.getClientPosition(e);
|
159
|
+
staticState.moveX = clientX;
|
160
|
+
staticState.shadowEl.style.left = `${clientX}px`;
|
161
|
+
};
|
162
|
+
|
163
|
+
return {
|
164
|
+
onMousedown
|
165
|
+
};
|
166
|
+
})();
|
167
|
+
});
|
168
|
+
|
169
|
+
const toggleCollapse = () => collapseModel.value = !collapseModel.value;
|
170
|
+
|
171
|
+
const render = () => {
|
172
|
+
return (
|
173
|
+
!icon.value ? null :
|
174
|
+
<>
|
175
|
+
{!collapseModel.value && <div className="layout-section-separator" onMouseDown={draggier.value.onMousedown} ref={onRef.sep}/>}
|
176
|
+
<div className="layout-section-collapse-btn" onClick={toggleCollapse}>
|
177
|
+
<Icon icon={icon.value}/>
|
178
|
+
</div>
|
179
|
+
</>
|
180
|
+
);
|
181
|
+
};
|
182
|
+
|
183
|
+
return { render };
|
184
|
+
}
|
@@ -1,8 +1,8 @@
|
|
1
1
|
import {computed, getComponentCls, reactive} from "plain-design-composition";
|
2
|
-
import {
|
3
|
-
import {
|
4
|
-
import {
|
5
|
-
import {
|
2
|
+
import {createCache} from "../../utils/createCache";
|
3
|
+
import {ThemeShape, ThemeSize} from "../../uses/useStyle";
|
4
|
+
import {DeepPartial} from "../../utils/type";
|
5
|
+
import {iApplicationConfiguration} from "../Application/utils/application.utils";
|
6
6
|
|
7
7
|
export const PageThemeUtils = (() => {
|
8
8
|
|
@@ -123,3 +123,5 @@ export const ThemePrimaryColors: Record<string, { label: string, primary: string
|
|
123
123
|
purple: { label: '酱紫', primary: '#722ed1', },
|
124
124
|
magenta: { label: '洋红', primary: '#eb2f96', },
|
125
125
|
};
|
126
|
+
|
127
|
+
export default PageThemeUtils;
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import {ComponentPropsType, computed, designComponent, getComponentCls, onBeforeUnmount, PropType, reactive, RenderNode, useClassCache, useModel, useStyleCache, watch, watchEffect} from "plain-design-composition";
|
1
|
+
import {ComponentPropsType, Fragment, computed, designComponent, getComponentCls, onBeforeUnmount, PropType, reactive, RenderNode, useClassCache, useModel, useStyleCache, watch, watchEffect} from "plain-design-composition";
|
2
2
|
import {iPopupAnimation, iPopupCustomOption, iPopupDefaultOption, iPopupPlacement, iPopupTrigger, iPopupUseOption, PopupItemProvide} from "../usePopup/utils/popup.utils";
|
3
3
|
import {Reference} from "../Reference";
|
4
4
|
import {usePopup} from "../usePopup";
|
@@ -139,7 +139,9 @@ export const Popup = designComponent({
|
|
139
139
|
const reference = computed(() => {
|
140
140
|
let reference: any = props.reference || state.getReference();
|
141
141
|
if (!!reference) {
|
142
|
-
if (typeof reference === "function") {
|
142
|
+
if (typeof reference === "function") {
|
143
|
+
reference = reference();
|
144
|
+
}
|
143
145
|
if (!!reference && !!reference.$el) {
|
144
146
|
reference = reference.$el;
|
145
147
|
}
|
@@ -155,7 +157,9 @@ export const Popup = designComponent({
|
|
155
157
|
const stickyReference = computed(() => {
|
156
158
|
let reference: any = props.stickyReference;
|
157
159
|
if (!!reference) {
|
158
|
-
if (typeof reference === "function") {
|
160
|
+
if (typeof reference === "function") {
|
161
|
+
reference = reference();
|
162
|
+
}
|
159
163
|
if (!!reference && !!reference.$el) {
|
160
164
|
reference = reference.$el;
|
161
165
|
}
|
@@ -266,12 +270,16 @@ export const Popup = designComponent({
|
|
266
270
|
},
|
267
271
|
/*开启之前检查,如果已经禁用则禁止显示*/
|
268
272
|
beforeShow: () => {
|
269
|
-
if (props.disabled || props.readonly) {
|
273
|
+
if (props.disabled || props.readonly) {
|
274
|
+
return false;
|
275
|
+
}
|
270
276
|
return props.beforeShow?.();
|
271
277
|
},
|
272
278
|
/*关闭之前检查,如果已经禁用则禁止关闭*/
|
273
279
|
beforeHide: () => {
|
274
|
-
if (props.disabled || props.readonly) {
|
280
|
+
if (props.disabled || props.readonly) {
|
281
|
+
return false;
|
282
|
+
}
|
275
283
|
return props.beforeHide?.();
|
276
284
|
},
|
277
285
|
|
@@ -284,7 +292,7 @@ export const Popup = designComponent({
|
|
284
292
|
{(slots.head.isExist() || !!props.title) && (
|
285
293
|
<div className="popper-head">{slots.head(typeof props.title === "function" ? props.title() : props.title)}</div>
|
286
294
|
)}
|
287
|
-
{slots.popper(typeof props.message === "function" ? props.message() : props.message)}
|
295
|
+
<Fragment key="popper">{slots.popper(typeof props.message === "function" ? props.message() : props.message)}</Fragment>
|
288
296
|
</div>
|
289
297
|
);
|
290
298
|
|
@@ -346,14 +354,18 @@ export const Popup = designComponent({
|
|
346
354
|
*/
|
347
355
|
if (!!model.value) {
|
348
356
|
const unwatch = watch(() => reference.value, reference => {
|
349
|
-
if (!reference) {
|
357
|
+
if (!reference) {
|
358
|
+
return;
|
359
|
+
}
|
350
360
|
unwatch();
|
351
361
|
$popup.show(state.getOption());
|
352
362
|
});
|
353
363
|
}
|
354
364
|
|
355
365
|
onBeforeUnmount(
|
356
|
-
watch(() => props.watchData, () => {
|
366
|
+
watch(() => props.watchData, () => {
|
367
|
+
$popup.update(state.getOption());
|
368
|
+
})
|
357
369
|
);
|
358
370
|
|
359
371
|
const refresh = () => {
|
@@ -5,6 +5,7 @@ import {Icon} from "../Icon";
|
|
5
5
|
import './rate.scss';
|
6
6
|
import {EditProps, useEdit} from "../../uses/useEdit";
|
7
7
|
import {StyleProps, ThemeStatus, useStyle} from "../../uses/useStyle";
|
8
|
+
import {ClientZoom} from "../ClientZoom";
|
8
9
|
|
9
10
|
export const Rate = designComponent({
|
10
11
|
name: 'rate',
|
@@ -79,7 +80,8 @@ export const Rate = designComponent({
|
|
79
80
|
|
80
81
|
const methods = {
|
81
82
|
reset: (e: MouseEvent | iMouseEvent) => {
|
82
|
-
|
83
|
+
const { clientX } = ClientZoom.getClientPosition(e);
|
84
|
+
let dur = clientX - (elLeft.value || 0);
|
83
85
|
let start = 0;
|
84
86
|
let end = totalWidth.value;
|
85
87
|
let step = end / props.count;
|
@@ -5,6 +5,7 @@ import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
|
|
5
5
|
import {Scroll} from "./index";
|
6
6
|
import {delay} from "plain-utils/utils/delay";
|
7
7
|
import Tooltip from "../Tooltip";
|
8
|
+
import {ClientZoom} from "../ClientZoom";
|
8
9
|
|
9
10
|
export const HorizontalScrollbar = designComponent({
|
10
11
|
props: {
|
@@ -41,15 +42,17 @@ export const HorizontalScrollbar = designComponent({
|
|
41
42
|
state.scrollLeft = (e.target as HTMLElement).scrollLeft;
|
42
43
|
},
|
43
44
|
onMousedown: (e: iMouseEvent) => {
|
45
|
+
const { clientX } = ClientZoom.getClientPosition(e);
|
44
46
|
scroll.freezeState.isDragging = true;
|
45
47
|
dragState.left = left.value;
|
46
|
-
dragState.clientX =
|
48
|
+
dragState.clientX = clientX;
|
47
49
|
document.addEventListener('mousemove', handler.onMousemove);
|
48
50
|
document.addEventListener('mouseup', handler.onMouseup);
|
49
51
|
disabledUserSelect();
|
50
52
|
},
|
51
53
|
onMousemove: (e: MouseEvent) => {
|
52
|
-
|
54
|
+
const { clientX } = ClientZoom.getClientPosition(e);
|
55
|
+
let deltaX = clientX - dragState.clientX;
|
53
56
|
const left = dragState.left + deltaX;
|
54
57
|
let scrollLeft = left * (scroll.state.contentWidth - scroll.state.hostWidth) / (scroll.state.hostWidth - width.value);
|
55
58
|
scrollLeft = Math.max(0, Math.min(scrollLeft, scroll.state.contentWidth - scroll.state.hostWidth));
|
@@ -66,7 +69,8 @@ export const HorizontalScrollbar = designComponent({
|
|
66
69
|
enableUserSelect();
|
67
70
|
|
68
71
|
if (scroll.props.scrollAfterDragEnd) {
|
69
|
-
|
72
|
+
const { clientX } = ClientZoom.getClientPosition(e);
|
73
|
+
let deltaX = clientX - dragState.clientX;
|
70
74
|
const left = dragState.left + deltaX;
|
71
75
|
scroll.refs.wrapper!.scrollLeft = left * (scroll.state.contentWidth - scroll.state.hostWidth) / (scroll.state.hostWidth - width.value);
|
72
76
|
}
|
@@ -5,6 +5,7 @@ import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
|
|
5
5
|
import {Scroll} from "./index";
|
6
6
|
import {delay} from "plain-utils/utils/delay";
|
7
7
|
import Tooltip from "../Tooltip";
|
8
|
+
import {ClientZoom} from "../ClientZoom";
|
8
9
|
|
9
10
|
export const VerticalScrollbar = designComponent({
|
10
11
|
props: {
|
@@ -46,15 +47,17 @@ export const VerticalScrollbar = designComponent({
|
|
46
47
|
state.scrollTop = (e.target as HTMLElement).scrollTop;
|
47
48
|
},
|
48
49
|
onMousedown: (e: iMouseEvent) => {
|
50
|
+
const { clientY } = ClientZoom.getClientPosition(e);
|
49
51
|
scroll.freezeState.isDragging = true;
|
50
52
|
dragState.top = top.value;
|
51
|
-
dragState.clientY =
|
53
|
+
dragState.clientY = clientY;
|
52
54
|
document.addEventListener('mousemove', handler.onMousemove);
|
53
55
|
document.addEventListener('mouseup', handler.onMouseup);
|
54
56
|
disabledUserSelect();
|
55
57
|
},
|
56
58
|
onMousemove: (e: MouseEvent) => {
|
57
|
-
|
59
|
+
const { clientY } = ClientZoom.getClientPosition(e);
|
60
|
+
let deltaY = clientY - dragState.clientY;
|
58
61
|
let top = dragState.top + deltaY;
|
59
62
|
let scrollTop = top * (scroll.state.contentHeight - scroll.state.hostHeight) / (scroll.state.hostHeight - height.value);
|
60
63
|
scrollTop = Math.max(0, Math.min(scrollTop, scroll.state.contentHeight - scroll.state.hostHeight));
|
@@ -72,7 +75,8 @@ export const VerticalScrollbar = designComponent({
|
|
72
75
|
enableUserSelect();
|
73
76
|
|
74
77
|
if (scroll.props.scrollAfterDragEnd) {
|
75
|
-
|
78
|
+
const { clientY } = ClientZoom.getClientPosition(e);
|
79
|
+
let deltaY = clientY - dragState.clientY;
|
76
80
|
let top = dragState.top + deltaY;
|
77
81
|
scroll.refs.wrapper!.scrollTop = top * (scroll.state.contentHeight - scroll.state.hostHeight) / (scroll.state.hostHeight - height.value);
|
78
82
|
}
|
@@ -3,6 +3,7 @@ import {disabledUserSelect} from "plain-utils/dom/disabledUserSelect";
|
|
3
3
|
import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
|
4
4
|
import {iMouseEvent, reactive} from "plain-design-composition";
|
5
5
|
import {iSliderHooks} from "./slider.utils";
|
6
|
+
import {ClientZoom} from "../ClientZoom";
|
6
7
|
|
7
8
|
export function useSliderDotDraggier<InitialState>(
|
8
9
|
hooks: iSliderHooks,
|
@@ -24,10 +25,11 @@ export function useSliderDotDraggier<InitialState>(
|
|
24
25
|
|
25
26
|
const handler = {
|
26
27
|
onMousedown: (e: iMouseEvent) => {
|
28
|
+
const { clientX, clientY } = ClientZoom.getClientPosition(e);
|
27
29
|
staticState = {
|
28
30
|
start: {
|
29
|
-
x:
|
30
|
-
y:
|
31
|
+
x: clientX,
|
32
|
+
y: clientY,
|
31
33
|
},
|
32
34
|
state: getInitialState(),
|
33
35
|
};
|
@@ -46,8 +48,9 @@ export function useSliderDotDraggier<InitialState>(
|
|
46
48
|
},
|
47
49
|
onMousemove: (e: MouseEvent) => {
|
48
50
|
if (!staticState) {return;}
|
49
|
-
const
|
50
|
-
const
|
51
|
+
const { clientX, clientY } = ClientZoom.getClientPosition(e);
|
52
|
+
const durX = clientX - staticState.start.x;
|
53
|
+
const durY = clientY - staticState.start.y;
|
51
54
|
handleDraggier({
|
52
55
|
durX,
|
53
56
|
durY,
|
@@ -4,6 +4,7 @@ import {Table} from "../../index";
|
|
4
4
|
import {tPlcType} from "../../plc/utils/plc.utils";
|
5
5
|
import {addClass} from "plain-utils/dom/addClass";
|
6
6
|
import {getComponentCls, iMouseEvent} from "plain-design-composition";
|
7
|
+
import {ClientZoom} from "../../../ClientZoom";
|
7
8
|
|
8
9
|
/**
|
9
10
|
* 处理表头拖拽调整宽度的功能
|
@@ -21,6 +22,8 @@ export function useHeadCellResize(table: typeof Table.use.class, getPlc: () => t
|
|
21
22
|
const handler = {
|
22
23
|
mousedown: (e: iMouseEvent) => {
|
23
24
|
|
25
|
+
const { clientX } = ClientZoom.getClientPosition(e);
|
26
|
+
|
24
27
|
const tableEl = table.refs.el!;
|
25
28
|
|
26
29
|
e.preventDefault();
|
@@ -29,7 +32,7 @@ export function useHeadCellResize(table: typeof Table.use.class, getPlc: () => t
|
|
29
32
|
window.addEventListener('mousemove', handler.mousemove);
|
30
33
|
window.addEventListener('mouseup', handler.mouseup);
|
31
34
|
disabledUserSelect();
|
32
|
-
state.startX =
|
35
|
+
state.startX = clientX;
|
33
36
|
|
34
37
|
state.indicatorEl = document.createElement('div');
|
35
38
|
|
@@ -55,14 +58,16 @@ export function useHeadCellResize(table: typeof Table.use.class, getPlc: () => t
|
|
55
58
|
document.body.appendChild(state.indicatorEl);
|
56
59
|
},
|
57
60
|
mousemove: (e: MouseEvent) => {
|
58
|
-
|
61
|
+
const { clientX } = ClientZoom.getClientPosition(e);
|
62
|
+
state.indicatorEl!.style.transform = `translate3d(${clientX}px,0,0)`;
|
59
63
|
},
|
60
64
|
mouseup: (e: MouseEvent) => {
|
65
|
+
const { clientX } = ClientZoom.getClientPosition(e);
|
61
66
|
window.removeEventListener('mousemove', handler.mousemove);
|
62
67
|
window.removeEventListener('mouseup', handler.mouseup);
|
63
68
|
enableUserSelect();
|
64
69
|
document.body.removeChild(state.indicatorEl!);
|
65
|
-
state.endX =
|
70
|
+
state.endX = clientX;
|
66
71
|
let durWidth = state.endX - state.startX!;
|
67
72
|
getPlc().setDurWidth(durWidth);
|
68
73
|
}
|
@@ -12,6 +12,7 @@ import {getComponentCls, iMouseEvent, nextIndex, StyleProperties} from "plain-de
|
|
12
12
|
import {iTableHooks} from "../utils/createTableHooks";
|
13
13
|
import {iElementRect} from "../../../../utils/getRowEl";
|
14
14
|
import {createEnum} from "plain-utils/utils/createEnum";
|
15
|
+
import {ClientZoom} from "../../../ClientZoom";
|
15
16
|
|
16
17
|
export function useTableDraggierCol(
|
17
18
|
{
|
@@ -223,11 +224,12 @@ export function useTableDraggierCol(
|
|
223
224
|
};
|
224
225
|
|
225
226
|
const start = (e: iMouseEvent, plc: tPlcType) => {
|
227
|
+
const { clientX, clientY } = ClientZoom.getClientPosition(e);
|
226
228
|
staticState = {
|
227
229
|
plc,
|
228
230
|
start: {
|
229
|
-
x:
|
230
|
-
y:
|
231
|
+
x: clientX,
|
232
|
+
y: clientY,
|
231
233
|
},
|
232
234
|
data: null
|
233
235
|
};
|
@@ -237,11 +239,13 @@ export function useTableDraggierCol(
|
|
237
239
|
const update = (e?: MouseEvent) => {
|
238
240
|
if (!staticState) {return;}
|
239
241
|
|
242
|
+
const { clientX, clientY } = !e ? { clientX: 0, clientY: 0 } : ClientZoom.getClientPosition(e);
|
243
|
+
|
240
244
|
let isDragging = !!staticState.data;
|
241
245
|
|
242
246
|
if (!isDragging) {
|
243
247
|
/*拖拽超过一定距离的时候才开始拖拽,避免与点击事件冲突*/
|
244
|
-
if (!!e && Math.abs(
|
248
|
+
if (!!e && Math.abs(clientX - staticState.start.x) > 5) {
|
245
249
|
isDragging = true;
|
246
250
|
initDraggierState();
|
247
251
|
}
|
@@ -253,7 +257,7 @@ export function useTableDraggierCol(
|
|
253
257
|
}
|
254
258
|
|
255
259
|
if (!!e) {
|
256
|
-
staticState.data.move = { x:
|
260
|
+
staticState.data.move = { x: clientX, y: clientY };
|
257
261
|
}
|
258
262
|
const { data: { cloneTable, move, table, left }, start } = staticState;
|
259
263
|
cloneTable.style.top = table.getBoundingClientRect().top + 'px';
|
@@ -470,7 +474,8 @@ export function useTableDraggierCol(
|
|
470
474
|
};
|
471
475
|
const update = (e?: MouseEvent) => {
|
472
476
|
if (!!e) {
|
473
|
-
|
477
|
+
const { clientX } = ClientZoom.getClientPosition(e);
|
478
|
+
staticState!.moveClientX = clientX;
|
474
479
|
} else {
|
475
480
|
staticState!.moveScrollLeft = staticState!.scrollParent!.scrollLeft;
|
476
481
|
}
|
@@ -9,6 +9,7 @@ import {hasClass} from "plain-utils/dom/hasClass";
|
|
9
9
|
import {addClass} from "plain-utils/dom/addClass";
|
10
10
|
import {disabledUserSelect} from "plain-utils/dom/disabledUserSelect";
|
11
11
|
import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
|
12
|
+
import {ClientZoom} from "../../../ClientZoom";
|
12
13
|
|
13
14
|
export function useTableDraggierRow(
|
14
15
|
{
|
@@ -85,9 +86,10 @@ export function useTableDraggierRow(
|
|
85
86
|
};
|
86
87
|
let prevClientY = 0;
|
87
88
|
const update = (e?: MouseEvent) => {
|
89
|
+
const { clientY } = !e ? { clientY: prevClientY } : ClientZoom.getClientPosition(e);
|
88
90
|
const moveIndex = (() => {
|
89
91
|
const hostRect = staticState!.bodyHostEl.getBoundingClientRect();
|
90
|
-
let index = Math.floor(((
|
92
|
+
let index = Math.floor(((clientY - hostRect.top + refs.virtual!.refs.scroll!.freezeState.wrapperScrollTop - (staticState!.headTableEl?.clientHeight || 0)) / numberState.bodyRowHeight));
|
91
93
|
if (index < 0) {index = 0;}
|
92
94
|
if (index > bodyNodes.value.length - 1) {
|
93
95
|
index = bodyNodes.value.length - 1;
|
@@ -95,7 +97,7 @@ export function useTableDraggierRow(
|
|
95
97
|
return index;
|
96
98
|
})();
|
97
99
|
if (moveIndex !== move.state.index) {move.state.index = moveIndex;}
|
98
|
-
if (!!e) {prevClientY =
|
100
|
+
if (!!e) {prevClientY = clientY;}
|
99
101
|
};
|
100
102
|
return { state, update, start, get staticState() {return staticState;} };
|
101
103
|
})();
|
@@ -188,9 +190,10 @@ export function useTableDraggierRow(
|
|
188
190
|
};
|
189
191
|
|
190
192
|
const start = (e: iMouseEvent, node: iTableNode) => {
|
193
|
+
const { clientY } = !e ? { clientY: prevClientY } : ClientZoom.getClientPosition(e);
|
191
194
|
const rowEl = (Array.from(refs.el!.querySelectorAll(`.plt-row`)) as HTMLTableRowElement[]).find(i => i.dataset.vid == node.state.index.toString())!;
|
192
195
|
const rowRect = rowEl.getBoundingClientRect();
|
193
|
-
staticState = { startY:
|
196
|
+
staticState = { startY: clientY, startTop: rowRect.top, node, rowEl, data: null, };
|
194
197
|
/*清理状态*/
|
195
198
|
draggierEffects.push(() => {staticState = null;});
|
196
199
|
};
|
@@ -199,11 +202,13 @@ export function useTableDraggierRow(
|
|
199
202
|
const update = (e?: MouseEvent) => {
|
200
203
|
if (!staticState) {return;}
|
201
204
|
|
205
|
+
const { clientY } = !e ? { clientY: prevClientY } : ClientZoom.getClientPosition(e);
|
206
|
+
|
202
207
|
let isDragging = !!staticState.data;
|
203
208
|
|
204
209
|
if (!isDragging) {
|
205
210
|
/*拖拽超过一定距离的时候才开始拖拽,避免与点击事件冲突*/
|
206
|
-
if (!!e && Math.abs(
|
211
|
+
if (!!e && Math.abs(clientY - staticState.startY) > 5) {
|
207
212
|
isDragging = true;
|
208
213
|
initDraggierState();
|
209
214
|
}
|
@@ -214,7 +219,7 @@ export function useTableDraggierRow(
|
|
214
219
|
return;
|
215
220
|
}
|
216
221
|
|
217
|
-
const durY =
|
222
|
+
const durY = clientY - staticState.startY;
|
218
223
|
let top = staticState.startTop + durY;
|
219
224
|
const minTop = move.staticState!.bodyHostEl.getBoundingClientRect().top + (move.staticState!.headTableEl?.clientHeight || 0);
|
220
225
|
if (top < minTop) {
|
@@ -229,7 +234,7 @@ export function useTableDraggierRow(
|
|
229
234
|
|
230
235
|
staticState.data!.cloneRowEl.style.top = `${top}px`;
|
231
236
|
if (!!e) {
|
232
|
-
prevClientY =
|
237
|
+
prevClientY = clientY;
|
233
238
|
}
|
234
239
|
|
235
240
|
/*更细move index信息*/
|
@@ -35,6 +35,7 @@ export const RenderTreeNode = designComponent({
|
|
35
35
|
{
|
36
36
|
'tree-node-current': tree.state.current === props.treeNode.key,
|
37
37
|
'tree-node-single-check': !props.multiple && props.treeNode.checkStatus() === CheckboxStatus.check,
|
38
|
+
'tree-node-multi-check': props.multiple && props.treeNode.checkStatus() === CheckboxStatus.check,
|
38
39
|
'tree-node-disable-check': !props.treeNode.isCheckAble(),
|
39
40
|
}
|
40
41
|
]);
|
@@ -124,7 +125,7 @@ export const RenderTreeNode = designComponent({
|
|
124
125
|
/>
|
125
126
|
}
|
126
127
|
</div>
|
127
|
-
{tree.props.draggable && (
|
128
|
+
{tree.props.draggable && !tree.props.customDraggier && (
|
128
129
|
<div
|
129
130
|
className={classnames(['tree-node-draggier', { 'tree-node-draggier-disable': !tree.utils.isAllowDraggable(props.treeNode) }])}
|
130
131
|
onMouseDown={handler.onMousedownDraggier.value}
|
@@ -3,6 +3,7 @@
|
|
3
3
|
align-items: center;
|
4
4
|
line-height: 22px;
|
5
5
|
padding-bottom: 1px;
|
6
|
+
position: relative;
|
6
7
|
|
7
8
|
.tree-node-operator > div, .tree-node-content {
|
8
9
|
transition: background-color linear 150ms, color linear 150ms;
|
@@ -88,19 +89,43 @@
|
|
88
89
|
.tree-node-content {
|
89
90
|
padding: 5px 8px;
|
90
91
|
color: plv(text-2);
|
92
|
+
}
|
91
93
|
|
92
|
-
|
94
|
+
.tree-node-operator, .tree-node-content {
|
95
|
+
position: relative;
|
96
|
+
z-index: 2;
|
97
|
+
}
|
98
|
+
|
99
|
+
&:after {
|
100
|
+
position: absolute;
|
101
|
+
top: 1px;
|
102
|
+
bottom: 1px;
|
103
|
+
left: 0;
|
104
|
+
right: 0;
|
105
|
+
z-index: 1;
|
106
|
+
border-radius: plv(border-radius-normal);
|
107
|
+
content: '';
|
108
|
+
transition: background-color ease 0.3s;
|
109
|
+
}
|
110
|
+
|
111
|
+
&:hover:not(.tree-node-current):not(.tree-node-single-check) {
|
112
|
+
cursor: pointer;
|
113
|
+
|
114
|
+
&:after {
|
93
115
|
background-color: plv(background-hover);
|
94
|
-
|
116
|
+
content: '';
|
95
117
|
}
|
96
118
|
}
|
97
119
|
|
98
|
-
&.tree-node-current, &.tree-node-single-check {
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
120
|
+
&.tree-node-current, &.tree-node-single-check, &.tree-node-multi-check {
|
121
|
+
|
122
|
+
.tree-node-operator, .tree-node-content {
|
123
|
+
color: plv(primary-6);
|
124
|
+
}
|
125
|
+
|
126
|
+
&:after {
|
127
|
+
background-color: plv(primary-light-1);
|
128
|
+
content: '';
|
104
129
|
}
|
105
130
|
}
|
106
131
|
|
@@ -216,6 +241,7 @@
|
|
216
241
|
@include comp(tree-draggier-indicator) {
|
217
242
|
position: fixed;
|
218
243
|
pointer-events: none;
|
244
|
+
z-index: 10;
|
219
245
|
|
220
246
|
&[data-available=true] {
|
221
247
|
background-color: plv(primary-6);
|