@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.
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ declare const _default: React.FunctionComponent<object>;
3
+ export default _default;
@@ -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
+ });
@@ -1,13 +1,5 @@
1
- import { DndContext } from '@dnd-kit/core';
2
1
  import React from 'react';
3
- import Draggable from "./Draggable";
4
- import Droppable from "./Droppable";
2
+ import CustomDraggable from '.';
5
3
  export default (function () {
6
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DndContext, {
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?: ReactNode;
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 function ViewPort(props: ViewPortProps): React.JSX.Element;
10
- declare namespace ViewPort {
11
- var Window: React.FunctionComponent<import("../Window/Window").WindowProps & {
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
- _excluded2 = ["children", "viewPortStore"];
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 { DndContext, useDraggable } from '@dnd-kit/core';
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 ViewPortEntity = observer(function (props) {
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 debounceDoubleClick = useDebounce(function (e) {
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 onContainerTransitionEnd = useCallback(function () {
101
- runInAction(function () {
102
- viewPortStore.isTransition = false;
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), rippleManagerStore.rippleInfo, /*#__PURE__*/React.createElement(Content, _extends({
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
- export default function ViewPort(props) {
137
- var children = props.children,
138
- viewPortStore = props.viewPortStore,
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
- private validScale;
24
- private setScale;
25
- private setTransform;
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
- private formatedTransform;
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 { makeAutoObservable } from 'mobx';
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
- makeAutoObservable(this);
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
- left: -this.offsetLeft,
135
- top: -this.offsetTop,
136
- transform: " translate(".concat(this.transform.left, "px,").concat(this.transform.top, "px) scale(").concat(this.scale, ")"),
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 declare const ViewPortWindow: React.FunctionComponent<WindowProps & {
39
+ export type ViewPortWindowProps = WindowProps & {
40
40
  window: ViewPortWindowStore;
41
- }>;
41
+ };
42
+ export declare const ViewPortWindow: React.FunctionComponent<ViewPortWindowProps>;
@@ -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(ViewPort.Window, {
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
  });
@@ -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
- if (e.target === e.currentTarget) {
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.46",
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.46",
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": "a68fe348236a6319c9232ac8d12e9cd567c1fe91"
90
+ "gitHead": "4d341942ad974a956b2eee087f28518e33425173"
91
91
  }