@kep-platform/basic-component 0.0.46 → 0.0.47
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/Draggable/index.d.ts +3 -0
- package/dist/Draggable/index.js +181 -0
- package/dist/Draggable/test.js +2 -10
- package/dist/ViewPort/ViewPort.d.ts +6 -8
- package/dist/ViewPort/ViewPort.js +20 -27
- package/dist/ViewPort/ViewPortStore.d.ts +9 -6
- package/dist/ViewPort/ViewPortStore.js +56 -19
- package/dist/ViewPort/ViewPortWindow.d.ts +3 -2
- package/dist/ViewPort/test.js +7 -4
- package/dist/Window/Window.js +3 -1
- package/dist/Window/WindowController.js +4 -5
- package/package.json +3 -3
package/dist/Draggable/index.js
CHANGED
@@ -0,0 +1,181 @@
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
2
|
+
import { observable, runInAction, toJS } from 'mobx';
|
3
|
+
import { observer, useLocalObservable } from 'mobx-react-lite';
|
4
|
+
import React, { useContext, useEffect, useRef } from 'react';
|
5
|
+
var posStore = observable({
|
6
|
+
left: 0,
|
7
|
+
top: 0,
|
8
|
+
setPos: function setPos(offsetLeft, offsetTop) {
|
9
|
+
this.left += offsetLeft;
|
10
|
+
this.top += offsetTop;
|
11
|
+
}
|
12
|
+
});
|
13
|
+
var DropContext = /*#__PURE__*/React.createContext(observable({
|
14
|
+
registedDrop: {},
|
15
|
+
registDrop: function registDrop(id, dropStore) {
|
16
|
+
this.registedDrop[id] = dropStore;
|
17
|
+
}
|
18
|
+
}));
|
19
|
+
function useDrag(props) {
|
20
|
+
var dragNodeRef = useRef(null);
|
21
|
+
var dropProviderStore = useContext(DropContext);
|
22
|
+
var onMove = props.onMove,
|
23
|
+
_props$stepX = props.stepX,
|
24
|
+
stepX = _props$stepX === void 0 ? 1 : _props$stepX,
|
25
|
+
_props$stepY = props.stepY,
|
26
|
+
stepY = _props$stepY === void 0 ? 1 : _props$stepY,
|
27
|
+
id = props.id;
|
28
|
+
var dragStore = useLocalObservable(function () {
|
29
|
+
return {
|
30
|
+
dragging: false,
|
31
|
+
lastPos: {
|
32
|
+
left: 0,
|
33
|
+
top: 0
|
34
|
+
},
|
35
|
+
offset: {
|
36
|
+
left: 0,
|
37
|
+
top: 0
|
38
|
+
},
|
39
|
+
id: id,
|
40
|
+
startMove: function startMove(left, top) {
|
41
|
+
this.lastPos.left = left;
|
42
|
+
this.lastPos.top = top;
|
43
|
+
this.dragging = true;
|
44
|
+
},
|
45
|
+
move: function move(left, top) {
|
46
|
+
this.offset.left = left - this.lastPos.left; //处理每次的偏移量
|
47
|
+
this.offset.top = top - this.lastPos.top; //处理每次的偏移量
|
48
|
+
this.lastPos.left = left;
|
49
|
+
this.lastPos.top = top;
|
50
|
+
},
|
51
|
+
endMove: function endMove() {
|
52
|
+
this.dragging = false;
|
53
|
+
this.offset.left = 0;
|
54
|
+
this.offset.top = 0;
|
55
|
+
}
|
56
|
+
};
|
57
|
+
});
|
58
|
+
useEffect(function () {
|
59
|
+
dropProviderStore.registDrop(dragStore.id, dragStore);
|
60
|
+
}, []);
|
61
|
+
function onDragStart(e) {
|
62
|
+
var event = e;
|
63
|
+
runInAction(function () {
|
64
|
+
event.dataTransfer.setDragImage(new Image(), 0, 0);
|
65
|
+
dragStore.startMove(e.clientX, e.clientY);
|
66
|
+
});
|
67
|
+
}
|
68
|
+
function onDragEnd() {
|
69
|
+
runInAction(function () {
|
70
|
+
dragStore.endMove();
|
71
|
+
});
|
72
|
+
}
|
73
|
+
function onDrag(e) {
|
74
|
+
var event = e;
|
75
|
+
var mouseMoveX = event.clientX - dragStore.lastPos.left;
|
76
|
+
var mouseMoveY = event.clientY - dragStore.lastPos.top;
|
77
|
+
var shouldMove = false;
|
78
|
+
var movePosX = dragStore.lastPos.left;
|
79
|
+
var movePosY = dragStore.lastPos.top;
|
80
|
+
if (Math.abs(mouseMoveX) > stepX) {
|
81
|
+
shouldMove = true;
|
82
|
+
var moveStepX = Math.floor(mouseMoveX / stepX) * stepX;
|
83
|
+
movePosX = movePosX + moveStepX;
|
84
|
+
}
|
85
|
+
if (Math.abs(mouseMoveY) > stepY) {
|
86
|
+
shouldMove = true;
|
87
|
+
var moveStepY = Math.floor(mouseMoveY / stepY) * stepY;
|
88
|
+
movePosY = movePosY + moveStepY;
|
89
|
+
}
|
90
|
+
if (!shouldMove) {
|
91
|
+
return;
|
92
|
+
}
|
93
|
+
runInAction(function () {
|
94
|
+
dragStore.move(movePosX, movePosY);
|
95
|
+
onMove === null || onMove === void 0 || onMove(toJS(dragStore));
|
96
|
+
});
|
97
|
+
}
|
98
|
+
return {
|
99
|
+
listeners: {
|
100
|
+
onDragStart: onDragStart,
|
101
|
+
onDrag: onDrag,
|
102
|
+
onDragEnd: onDragEnd
|
103
|
+
},
|
104
|
+
attributes: {
|
105
|
+
draggable: true,
|
106
|
+
'drag-id': id
|
107
|
+
},
|
108
|
+
dragNodeRef: dragNodeRef
|
109
|
+
};
|
110
|
+
}
|
111
|
+
function DndProvider(props) {
|
112
|
+
var dropProviderStore = useLocalObservable(function () {
|
113
|
+
return {
|
114
|
+
registedDrop: {},
|
115
|
+
registDrop: function registDrop(id, dropStore) {
|
116
|
+
this.registedDrop[id] = dropStore;
|
117
|
+
}
|
118
|
+
};
|
119
|
+
});
|
120
|
+
return /*#__PURE__*/React.createElement(DropContext.Provider, {
|
121
|
+
value: dropProviderStore
|
122
|
+
}, props.children);
|
123
|
+
}
|
124
|
+
function useDrop() {
|
125
|
+
var dropNodeRef = useRef(null);
|
126
|
+
var dropStore = useLocalObservable(function () {
|
127
|
+
return {
|
128
|
+
isOver: false,
|
129
|
+
setIsOver: function setIsOver(over) {
|
130
|
+
this.isOver = over;
|
131
|
+
},
|
132
|
+
id: 'dropContext'
|
133
|
+
};
|
134
|
+
});
|
135
|
+
var dropProviderStore = useContext(DropContext);
|
136
|
+
useEffect(function () {
|
137
|
+
dropProviderStore.registDrop(dropStore.id, dropStore);
|
138
|
+
}, []);
|
139
|
+
return {
|
140
|
+
isOver: dropStore.isOver,
|
141
|
+
dropNodeRef: dropNodeRef
|
142
|
+
};
|
143
|
+
}
|
144
|
+
export default observer(function CustomDraggable() {
|
145
|
+
var _useDrag = useDrag({
|
146
|
+
onMove: function onMove(v) {
|
147
|
+
posStore.left += v.offset.left;
|
148
|
+
posStore.top += v.offset.top;
|
149
|
+
},
|
150
|
+
id: 'div1s'
|
151
|
+
}),
|
152
|
+
listeners = _useDrag.listeners,
|
153
|
+
attributes = _useDrag.attributes,
|
154
|
+
dragNodeRef = _useDrag.dragNodeRef;
|
155
|
+
var _useDrop = useDrop(),
|
156
|
+
isOver = _useDrop.isOver,
|
157
|
+
dropNodeRef = _useDrop.dropNodeRef;
|
158
|
+
return /*#__PURE__*/React.createElement(DndProvider, null, /*#__PURE__*/React.createElement("div", {
|
159
|
+
onDragOver: function onDragOver(e) {
|
160
|
+
e.preventDefault();
|
161
|
+
},
|
162
|
+
ref: dropNodeRef,
|
163
|
+
style: {
|
164
|
+
width: '1000px',
|
165
|
+
height: '1000px',
|
166
|
+
position: 'relative',
|
167
|
+
backgroundColor: isOver ? 'yellow' : 'blue'
|
168
|
+
}
|
169
|
+
}, /*#__PURE__*/React.createElement("div", _extends({}, listeners, attributes, {
|
170
|
+
style: {
|
171
|
+
position: 'absolute',
|
172
|
+
left: posStore.left,
|
173
|
+
top: posStore.top,
|
174
|
+
backgroundColor: 'pink',
|
175
|
+
width: '200px',
|
176
|
+
height: '200px',
|
177
|
+
cursor: 'grab'
|
178
|
+
},
|
179
|
+
ref: dragNodeRef
|
180
|
+
}), "CustomDraggable")));
|
181
|
+
});
|
package/dist/Draggable/test.js
CHANGED
@@ -1,13 +1,5 @@
|
|
1
|
-
import { DndContext } from '@dnd-kit/core';
|
2
1
|
import React from 'react';
|
3
|
-
import
|
4
|
-
import Droppable from "./Droppable";
|
2
|
+
import CustomDraggable from '.';
|
5
3
|
export default (function () {
|
6
|
-
return /*#__PURE__*/React.createElement(
|
7
|
-
onDragStart: function onDragStart() {}
|
8
|
-
}, /*#__PURE__*/React.createElement(DndContext, {
|
9
|
-
onDragEnd: function onDragEnd() {}
|
10
|
-
}, /*#__PURE__*/React.createElement(Draggable, null, "123"), /*#__PURE__*/React.createElement(Droppable, null, "456")), /*#__PURE__*/React.createElement(DndContext, {
|
11
|
-
onDragEnd: function onDragEnd() {}
|
12
|
-
}, /*#__PURE__*/React.createElement(Draggable, null, "123"), /*#__PURE__*/React.createElement(Droppable, null, "456"))));
|
4
|
+
return /*#__PURE__*/React.createElement(CustomDraggable, null);
|
13
5
|
});
|
@@ -1,15 +1,13 @@
|
|
1
|
-
import React, { HtmlHTMLAttributes, ReactNode } from 'react';
|
1
|
+
import React, { FunctionComponent, HtmlHTMLAttributes, ReactNode } from 'react';
|
2
2
|
import { ViewPortStore } from './ViewPortStore';
|
3
|
+
import { ViewPortWindowProps } from './ViewPortWindow';
|
3
4
|
type ViewPortProps = {
|
4
|
-
children
|
5
|
+
children: ReactNode;
|
5
6
|
viewPortStore: ViewPortStore;
|
6
7
|
onScale?: (left: number, top: number, scale: number, ratio: number) => void;
|
7
8
|
onScroll?: (left: number, top: number, scale: number, ratio: number) => void;
|
8
9
|
} & HtmlHTMLAttributes<HTMLDivElement>;
|
9
|
-
declare
|
10
|
-
|
11
|
-
|
12
|
-
window: import("./ViewPortWindow").ViewPortWindowStore;
|
13
|
-
}>;
|
14
|
-
}
|
10
|
+
declare const ViewPort: React.FunctionComponent<ViewPortProps> & {
|
11
|
+
Window: FunctionComponent<ViewPortWindowProps>;
|
12
|
+
};
|
15
13
|
export default ViewPort;
|
@@ -1,12 +1,10 @@
|
|
1
|
-
var _excluded = ["children", "viewPortStore", "onScroll", "onScale"]
|
2
|
-
|
3
|
-
var _templateObject, _templateObject2;
|
1
|
+
var _excluded = ["children", "viewPortStore", "onScroll", "onScale"];
|
2
|
+
var _templateObject, _templateObject2, _templateObject3;
|
4
3
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
5
4
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
6
5
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
7
6
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
8
|
-
import {
|
9
|
-
import { useDebounce } from '@kep-platform/hooks';
|
7
|
+
import { useDraggable } from '@dnd-kit/core';
|
10
8
|
import { runInAction } from 'mobx';
|
11
9
|
import { observer } from 'mobx-react-lite';
|
12
10
|
import React, { useCallback, useEffect, useRef } from 'react';
|
@@ -15,16 +13,16 @@ import { RippleManagerStore } from "./Ripple";
|
|
15
13
|
import { ViewPortWindow } from "./ViewPortWindow";
|
16
14
|
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n border: 1px solid #eee;\n box-shadow: 0 0 7px 0 inset #fefefe;\n"])));
|
17
15
|
var Content = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: absolute;\n"])));
|
16
|
+
var Overlay = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([""])));
|
18
17
|
var rippleManagerStore = new RippleManagerStore();
|
19
|
-
var
|
18
|
+
var ViewPortComponent = observer(function (props) {
|
20
19
|
var children = props.children,
|
21
20
|
viewPortStore = props.viewPortStore,
|
22
21
|
onScroll = props.onScroll,
|
23
22
|
onScale = props.onScale,
|
24
23
|
rest = _objectWithoutProperties(props, _excluded);
|
25
24
|
var _useDraggable = useDraggable({
|
26
|
-
id: 'ViewPortEntity'
|
27
|
-
disabled: viewPortStore.isTransition
|
25
|
+
id: 'ViewPortEntity'
|
28
26
|
}),
|
29
27
|
setNodeRef = _useDraggable.setNodeRef,
|
30
28
|
attributes = _useDraggable.attributes,
|
@@ -75,7 +73,7 @@ var ViewPortEntity = observer(function (props) {
|
|
75
73
|
(_contentRef$current2 = contentRef.current) === null || _contentRef$current2 === void 0 || _contentRef$current2.removeEventListener('wheel', scaleHandler);
|
76
74
|
};
|
77
75
|
}, []);
|
78
|
-
var
|
76
|
+
var onContainerDoubleClickHandler = function onContainerDoubleClickHandler(e) {
|
79
77
|
//在transition期间禁止操作
|
80
78
|
if (viewPortStore.isTransition) {
|
81
79
|
return;
|
@@ -93,14 +91,13 @@ var ViewPortEntity = observer(function (props) {
|
|
93
91
|
if (viewPortStore.scale === 1) {
|
94
92
|
viewPortStore.unfocus();
|
95
93
|
} else viewPortStore.focus(offsetLeft, offsetTop);
|
96
|
-
}, 100);
|
97
|
-
var onContainerDoubleClickHandler = function onContainerDoubleClickHandler(e) {
|
98
|
-
debounceDoubleClick(e);
|
99
94
|
};
|
100
|
-
var
|
101
|
-
|
102
|
-
|
103
|
-
|
95
|
+
var onContentTransitionEnd = useCallback(function (e) {
|
96
|
+
if (e.target === contentRef.current) {
|
97
|
+
runInAction(function () {
|
98
|
+
viewPortStore.isTransition = false;
|
99
|
+
});
|
100
|
+
}
|
104
101
|
}, []);
|
105
102
|
var onContentPointerDownHandler = useCallback(function (e) {
|
106
103
|
if (viewPortStore.isTransition) return;
|
@@ -119,9 +116,10 @@ var ViewPortEntity = observer(function (props) {
|
|
119
116
|
return /*#__PURE__*/React.createElement(Container, _extends({
|
120
117
|
style: viewPortStore.containerStyle,
|
121
118
|
onDoubleClick: onContainerDoubleClickHandler,
|
122
|
-
onTransitionEnd: onContainerTransitionEnd,
|
123
119
|
ref: containerRef
|
124
|
-
}, rest),
|
120
|
+
}, rest), /*#__PURE__*/React.createElement(Overlay, {
|
121
|
+
style: viewPortStore.overlayStyle
|
122
|
+
}), /*#__PURE__*/React.createElement(Content, _extends({
|
125
123
|
ref: function ref(dom) {
|
126
124
|
contentRef.current = dom;
|
127
125
|
setNodeRef(contentRef.current);
|
@@ -130,15 +128,10 @@ var ViewPortEntity = observer(function (props) {
|
|
130
128
|
}, attributes, {
|
131
129
|
onPointerDown: onContentPointerDownHandler,
|
132
130
|
onPointerUp: onContentPointerUpHandler,
|
131
|
+
onTransitionEnd: onContentTransitionEnd,
|
133
132
|
style: viewPortStore.contentStyle
|
134
133
|
}), children));
|
135
134
|
});
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
rest = _objectWithoutProperties(props, _excluded2);
|
140
|
-
return /*#__PURE__*/React.createElement(DndContext, null, /*#__PURE__*/React.createElement(ViewPortEntity, _extends({
|
141
|
-
viewPortStore: viewPortStore
|
142
|
-
}, rest), children));
|
143
|
-
}
|
144
|
-
ViewPort.Window = ViewPortWindow;
|
135
|
+
var ViewPort = ViewPortComponent;
|
136
|
+
ViewPort.Window = ViewPortWindow;
|
137
|
+
export default ViewPort;
|
@@ -20,17 +20,22 @@ export declare class ViewPortStore {
|
|
20
20
|
get scaleStep(): number;
|
21
21
|
increaseScale(): void;
|
22
22
|
decreaseScale(): void;
|
23
|
-
|
24
|
-
|
25
|
-
|
23
|
+
validScale(scale: number): number;
|
24
|
+
setScale(scale: number): void;
|
25
|
+
setTransform(left: number, top: number): void;
|
26
26
|
get offsetLeft(): number;
|
27
27
|
get offsetTop(): number;
|
28
|
-
|
28
|
+
formatedTransform(left: number, top: number): {
|
29
|
+
left: number;
|
30
|
+
top: number;
|
31
|
+
};
|
29
32
|
focus(left: number, top: number): void;
|
30
33
|
unfocus(): void;
|
31
34
|
move(transform: Transform): void;
|
32
35
|
endMove(): void;
|
33
36
|
get contentStyle(): CSSProperties;
|
37
|
+
get containerStyle(): CSSProperties;
|
38
|
+
get overlayStyle(): CSSProperties;
|
34
39
|
get viewPortRect(): {
|
35
40
|
left: number;
|
36
41
|
top: number;
|
@@ -45,6 +50,4 @@ export declare class ViewPortStore {
|
|
45
50
|
height: number;
|
46
51
|
scale: number;
|
47
52
|
};
|
48
|
-
get containerStyle(): CSSProperties;
|
49
|
-
get info(): string;
|
50
53
|
}
|
@@ -5,7 +5,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
|
|
5
5
|
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; }
|
6
6
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
7
7
|
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); }
|
8
|
-
import {
|
8
|
+
import { action, computed, makeObservable, observable } from 'mobx';
|
9
9
|
export var ViewPortStore = /*#__PURE__*/function () {
|
10
10
|
//在动画执行期间,禁止任何鼠标操作
|
11
11
|
function ViewPortStore(width, height, ratio) {
|
@@ -29,7 +29,32 @@ export var ViewPortStore = /*#__PURE__*/function () {
|
|
29
29
|
if (ratio) this.ratio = ratio;
|
30
30
|
if (width) this.width = width;
|
31
31
|
if (height) this.height = height;
|
32
|
-
|
32
|
+
makeObservable(this, {
|
33
|
+
transform: observable.struct,
|
34
|
+
offset: observable.struct,
|
35
|
+
scale: observable,
|
36
|
+
width: observable,
|
37
|
+
height: observable,
|
38
|
+
ratio: observable,
|
39
|
+
isMoving: observable,
|
40
|
+
maxZIndex: observable,
|
41
|
+
isTransition: observable,
|
42
|
+
scaleStep: computed,
|
43
|
+
increaseScale: action,
|
44
|
+
decreaseScale: action,
|
45
|
+
setScale: action,
|
46
|
+
setTransform: action,
|
47
|
+
offsetLeft: computed,
|
48
|
+
offsetTop: computed,
|
49
|
+
focus: action,
|
50
|
+
unfocus: action,
|
51
|
+
move: action,
|
52
|
+
endMove: action,
|
53
|
+
containerStyle: computed.struct,
|
54
|
+
contentStyle: computed.struct,
|
55
|
+
viewPortRect: computed.struct,
|
56
|
+
overlayStyle: computed.struct
|
57
|
+
});
|
33
58
|
}
|
34
59
|
_createClass(ViewPortStore, [{
|
35
60
|
key: "scaleStep",
|
@@ -131,9 +156,10 @@ export var ViewPortStore = /*#__PURE__*/function () {
|
|
131
156
|
key: "contentStyle",
|
132
157
|
get: function get() {
|
133
158
|
return {
|
134
|
-
|
135
|
-
|
136
|
-
|
159
|
+
position: 'absolute',
|
160
|
+
left: 0,
|
161
|
+
top: 0,
|
162
|
+
transform: " translate(".concat(this.transform.left - this.offsetLeft, "px,").concat(this.transform.top - this.offsetTop, "px) scale(").concat(this.scale, ")"),
|
137
163
|
width: this.width * this.ratio + 'px',
|
138
164
|
height: this.height * this.ratio + 'px',
|
139
165
|
transformOrigin: 'left top',
|
@@ -142,6 +168,31 @@ export var ViewPortStore = /*#__PURE__*/function () {
|
|
142
168
|
cursor: this.isMoving ? 'grab' : 'default'
|
143
169
|
};
|
144
170
|
}
|
171
|
+
}, {
|
172
|
+
key: "containerStyle",
|
173
|
+
get: function get() {
|
174
|
+
return {
|
175
|
+
width: this.width + 'px',
|
176
|
+
height: this.height + 'px',
|
177
|
+
overflow: 'hidden'
|
178
|
+
};
|
179
|
+
}
|
180
|
+
}, {
|
181
|
+
key: "overlayStyle",
|
182
|
+
get: function get() {
|
183
|
+
return {
|
184
|
+
position: 'absolute',
|
185
|
+
top: 0,
|
186
|
+
left: 0,
|
187
|
+
width: this.width,
|
188
|
+
height: this.height,
|
189
|
+
pointerEvents: this.isTransition ? 'all' : 'none',
|
190
|
+
userSelect: 'none',
|
191
|
+
display: this.isTransition ? 'block' : 'none',
|
192
|
+
backgroundColor: 'transparent',
|
193
|
+
zIndex: 9999
|
194
|
+
};
|
195
|
+
}
|
145
196
|
}, {
|
146
197
|
key: "viewPortRect",
|
147
198
|
get: function get() {
|
@@ -160,20 +211,6 @@ export var ViewPortStore = /*#__PURE__*/function () {
|
|
160
211
|
scale: this.scale
|
161
212
|
};
|
162
213
|
}
|
163
|
-
}, {
|
164
|
-
key: "containerStyle",
|
165
|
-
get: function get() {
|
166
|
-
return {
|
167
|
-
width: this.width + 'px',
|
168
|
-
height: this.height + 'px',
|
169
|
-
overflow: 'hidden'
|
170
|
-
};
|
171
|
-
}
|
172
|
-
}, {
|
173
|
-
key: "info",
|
174
|
-
get: function get() {
|
175
|
-
return JSON.stringify(this.formatedTransform(this.transform.left, this.transform.top), null, 4);
|
176
|
-
}
|
177
214
|
}]);
|
178
215
|
return ViewPortStore;
|
179
216
|
}();
|
@@ -36,6 +36,7 @@ export declare class ViewPortWindowStore extends WindowStore {
|
|
36
36
|
constructor(id: string, viewPort: ViewPortStore, onClosedHandler?: (id: string) => void);
|
37
37
|
get disabled(): boolean;
|
38
38
|
}
|
39
|
-
export
|
39
|
+
export type ViewPortWindowProps = WindowProps & {
|
40
40
|
window: ViewPortWindowStore;
|
41
|
-
}
|
41
|
+
};
|
42
|
+
export declare const ViewPortWindow: React.FunctionComponent<ViewPortWindowProps>;
|
package/dist/ViewPort/test.js
CHANGED
@@ -7,6 +7,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
|
|
7
7
|
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; }
|
8
8
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
9
9
|
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); }
|
10
|
+
import { DndContext } from '@dnd-kit/core';
|
10
11
|
import { makeAutoObservable, runInAction } from 'mobx';
|
11
12
|
import { observer } from 'mobx-react-lite';
|
12
13
|
import React, { useEffect } from 'react';
|
@@ -66,13 +67,15 @@ export default observer(function Test() {
|
|
66
67
|
onClick: function onClick() {
|
67
68
|
windowManager.createWindow();
|
68
69
|
}
|
69
|
-
}, "\u65B0\u589E"), /*#__PURE__*/React.createElement(StyledViewPort, {
|
70
|
+
}, "\u65B0\u589E"), /*#__PURE__*/React.createElement(DndContext, null, /*#__PURE__*/React.createElement(StyledViewPort, {
|
70
71
|
viewPortStore: viewPortStore
|
71
72
|
}, windowManager.windows.map(function (windowStore) {
|
72
|
-
return /*#__PURE__*/React.createElement(
|
73
|
+
return /*#__PURE__*/React.createElement(DndContext, {
|
74
|
+
key: windowStore.id
|
75
|
+
}, /*#__PURE__*/React.createElement(ViewPort.Window, {
|
73
76
|
window: windowStore,
|
74
77
|
key: windowStore.id,
|
75
78
|
title: 'xixi'
|
76
|
-
}, /*#__PURE__*/React.createElement("br", null));
|
77
|
-
})));
|
79
|
+
}, /*#__PURE__*/React.createElement("br", null)));
|
80
|
+
}))));
|
78
81
|
});
|
package/dist/Window/Window.js
CHANGED
@@ -59,7 +59,9 @@ var Window = observer(function (props) {
|
|
59
59
|
style: window.style,
|
60
60
|
isMinimize: !!window.isMinimize,
|
61
61
|
onTransitionEnd: function onTransitionEnd(e) {
|
62
|
-
|
62
|
+
e.stopPropagation();
|
63
|
+
e.preventDefault();
|
64
|
+
if (e.target === e.currentTarget && e.propertyName === 'transform') {
|
63
65
|
runInAction(function () {
|
64
66
|
window.isTransition = false;
|
65
67
|
});
|
@@ -4,7 +4,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
|
|
4
4
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
5
5
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
6
6
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
7
|
-
import { useDraggable } from '@dnd-kit/core';
|
7
|
+
import { DndContext, useDraggable } from '@dnd-kit/core';
|
8
8
|
import { observer } from 'mobx-react-lite';
|
9
9
|
import React, { useEffect } from 'react';
|
10
10
|
import styled from 'styled-components';
|
@@ -15,8 +15,7 @@ export default observer(function WindowController(props) {
|
|
15
15
|
children = props.children,
|
16
16
|
rest = _objectWithoutProperties(props, _excluded);
|
17
17
|
var _useDraggable = useDraggable({
|
18
|
-
id: "".concat(window.id, "/").concat(type)
|
19
|
-
disabled: window.disabled
|
18
|
+
id: "".concat(window.id, "/").concat(type)
|
20
19
|
}),
|
21
20
|
attributes = _useDraggable.attributes,
|
22
21
|
transform = _useDraggable.transform,
|
@@ -30,8 +29,8 @@ export default observer(function WindowController(props) {
|
|
30
29
|
window.endControll();
|
31
30
|
}
|
32
31
|
}, [transform, isDragging, type]);
|
33
|
-
return /*#__PURE__*/React.createElement(WindowControllerContainer, _extends({}, rest, attributes, listeners, {
|
32
|
+
return /*#__PURE__*/React.createElement(DndContext, null, /*#__PURE__*/React.createElement(WindowControllerContainer, _extends({}, rest, attributes, listeners, {
|
34
33
|
ref: setNodeRef,
|
35
34
|
role: "div"
|
36
|
-
}), children);
|
35
|
+
}), children));
|
37
36
|
});
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@kep-platform/basic-component",
|
3
|
-
"version": "0.0.
|
3
|
+
"version": "0.0.47",
|
4
4
|
"description": "A react library developed with dumi",
|
5
5
|
"license": "MIT",
|
6
6
|
"module": "dist/index.js",
|
@@ -47,7 +47,7 @@
|
|
47
47
|
},
|
48
48
|
"dependencies": {
|
49
49
|
"@ant-design/icons": "^5.3.7",
|
50
|
-
"@kep-platform/hooks": "^0.0.
|
50
|
+
"@kep-platform/hooks": "^0.0.47",
|
51
51
|
"color": "^4.2.3",
|
52
52
|
"rc-pagination": "^4.1.0"
|
53
53
|
},
|
@@ -87,5 +87,5 @@
|
|
87
87
|
"authors": [
|
88
88
|
"less-step-jss 1599925910@qq.com"
|
89
89
|
],
|
90
|
-
"gitHead": "
|
90
|
+
"gitHead": "4d341942ad974a956b2eee087f28518e33425173"
|
91
91
|
}
|