@kep-platform/basic-component 0.0.37 → 0.0.38
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/ViewPort/ViewPort.d.ts +13 -2
- package/dist/ViewPort/ViewPort.js +97 -15
- package/dist/ViewPort/test.js +2 -2
- package/dist/Window/Window.d.ts +2 -0
- package/dist/Window/Window.js +10 -5
- package/dist/Window/WindowStore.d.ts +2 -2
- package/dist/Window/WindowStore.js +8 -5
- package/package.json +3 -3
@@ -2,6 +2,7 @@ import { Transform } from '@dnd-kit/utilities';
|
|
2
2
|
import React, { HtmlHTMLAttributes, ReactNode } from 'react';
|
3
3
|
import { WindowStore } from '../Window';
|
4
4
|
import { WindowProps } from '../Window/Window';
|
5
|
+
import { WindowControllerType } from '../Window/WindowController';
|
5
6
|
type ViewPortProps = {
|
6
7
|
children?: ReactNode;
|
7
8
|
viewPortStore: ViewPortStore;
|
@@ -21,8 +22,12 @@ export declare class ViewPortStore {
|
|
21
22
|
width: number;
|
22
23
|
height: number;
|
23
24
|
ratio: number;
|
25
|
+
isMoving: boolean;
|
26
|
+
maxZIndex: number;
|
24
27
|
constructor(width?: number, height?: number, ratio?: number);
|
25
28
|
increaseScale(): void;
|
29
|
+
setScale(scale: number): void;
|
30
|
+
focus(left: number, top: number): void;
|
26
31
|
decreaseScale(): void;
|
27
32
|
move(transform: Transform): void;
|
28
33
|
endMove(): void;
|
@@ -42,18 +47,19 @@ export declare class ViewPortStore {
|
|
42
47
|
};
|
43
48
|
get formatedScale(): number;
|
44
49
|
get contentStyle(): {
|
45
|
-
left: string;
|
46
|
-
top: string;
|
47
50
|
transform: string;
|
48
51
|
width: string;
|
49
52
|
height: string;
|
50
53
|
transformOrigin: string;
|
54
|
+
backgroundColor: string;
|
55
|
+
transition: string;
|
51
56
|
};
|
52
57
|
get containerStyle(): {
|
53
58
|
width: string;
|
54
59
|
height: string;
|
55
60
|
overflow: string;
|
56
61
|
};
|
62
|
+
get info(): string;
|
57
63
|
}
|
58
64
|
declare function ViewPort(props: ViewPortProps): React.JSX.Element;
|
59
65
|
declare namespace ViewPort {
|
@@ -93,5 +99,10 @@ export declare class ViewPortWindowStore extends WindowStore {
|
|
93
99
|
transformOrigin: string;
|
94
100
|
transition: string;
|
95
101
|
};
|
102
|
+
calculateTransform(transform: Transform): {
|
103
|
+
x: number;
|
104
|
+
y: number;
|
105
|
+
};
|
106
|
+
controll(transform: Transform, type: WindowControllerType): void;
|
96
107
|
constructor(id: string, onClosedHandler?: (id: string) => void);
|
97
108
|
}
|
@@ -28,13 +28,12 @@ import { GlobalStyles } from "../__styles";
|
|
28
28
|
var Container = styled.div.withConfig({
|
29
29
|
displayName: "Container",
|
30
30
|
componentId: "basic-component-347b__sc-1qpmpop-0"
|
31
|
-
})(["position:relative;border:1px solid #eee;"]);
|
31
|
+
})(["position:relative;border:1px solid #eee;box-shadow:0 0 7px 0 inset #fefefe;"]);
|
32
32
|
var Content = styled.div.withConfig({
|
33
33
|
displayName: "Content",
|
34
34
|
componentId: "basic-component-347b__sc-1qpmpop-1"
|
35
35
|
})(["position:absolute;"]);
|
36
36
|
export var ViewPortStore = /*#__PURE__*/function () {
|
37
|
-
//缩放比例
|
38
37
|
function ViewPortStore(width, height, ratio) {
|
39
38
|
_classCallCheck(this, ViewPortStore);
|
40
39
|
_defineProperty(this, "transform", {
|
@@ -46,9 +45,12 @@ export var ViewPortStore = /*#__PURE__*/function () {
|
|
46
45
|
y: 0
|
47
46
|
});
|
48
47
|
_defineProperty(this, "scale", 1);
|
49
|
-
_defineProperty(this, "width",
|
50
|
-
_defineProperty(this, "height",
|
48
|
+
_defineProperty(this, "width", 600);
|
49
|
+
_defineProperty(this, "height", 600);
|
51
50
|
_defineProperty(this, "ratio", 5);
|
51
|
+
//缩放比例
|
52
|
+
_defineProperty(this, "isMoving", false);
|
53
|
+
_defineProperty(this, "maxZIndex", 1);
|
52
54
|
if (ratio) this.ratio = ratio;
|
53
55
|
if (width) this.width = width;
|
54
56
|
if (height) this.height = height;
|
@@ -59,6 +61,20 @@ export var ViewPortStore = /*#__PURE__*/function () {
|
|
59
61
|
value: function increaseScale() {
|
60
62
|
if (this.scale < 1) this.scale += 0.03125;else this.scale = 1;
|
61
63
|
}
|
64
|
+
}, {
|
65
|
+
key: "setScale",
|
66
|
+
value: function setScale(scale) {
|
67
|
+
this.scale = scale;
|
68
|
+
}
|
69
|
+
}, {
|
70
|
+
key: "focus",
|
71
|
+
value: function focus(left, top) {
|
72
|
+
this.scale = 0.8;
|
73
|
+
this.transform = {
|
74
|
+
left: (1 - this.ratio) * left,
|
75
|
+
top: (1 - this.ratio) * top
|
76
|
+
};
|
77
|
+
}
|
62
78
|
}, {
|
63
79
|
key: "decreaseScale",
|
64
80
|
value: function decreaseScale() {
|
@@ -67,6 +83,7 @@ export var ViewPortStore = /*#__PURE__*/function () {
|
|
67
83
|
}, {
|
68
84
|
key: "move",
|
69
85
|
value: function move(transform) {
|
86
|
+
this.isMoving = true;
|
70
87
|
this.transform = this.formatedTransform(transform.x - this.offset.x + this.transform.left, transform.y - this.offset.y + this.transform.top);
|
71
88
|
this.offset.x = transform.x;
|
72
89
|
this.offset.y = transform.y;
|
@@ -76,6 +93,7 @@ export var ViewPortStore = /*#__PURE__*/function () {
|
|
76
93
|
value: function endMove() {
|
77
94
|
this.offset.x = 0;
|
78
95
|
this.offset.y = 0;
|
96
|
+
this.isMoving = false;
|
79
97
|
}
|
80
98
|
}, {
|
81
99
|
key: "transformLimit",
|
@@ -102,18 +120,19 @@ export var ViewPortStore = /*#__PURE__*/function () {
|
|
102
120
|
}, {
|
103
121
|
key: "formatedScale",
|
104
122
|
get: function get() {
|
105
|
-
return Math.min(1, Math.max(
|
123
|
+
return Math.min(1, Math.max(1 / this.ratio, this.scale));
|
106
124
|
}
|
107
125
|
}, {
|
108
126
|
key: "contentStyle",
|
109
127
|
get: function get() {
|
128
|
+
var transform = this.formatedTransform(this.transform.left, this.transform.top);
|
110
129
|
return {
|
111
|
-
|
112
|
-
top: this.transform.top + 'px',
|
113
|
-
transform: "scale(".concat(this.formatedScale, ")"),
|
130
|
+
transform: "translate(".concat(transform.left, "px,").concat(transform.top, "px) scale(").concat(this.formatedScale, ")"),
|
114
131
|
width: this.width * this.ratio + 'px',
|
115
132
|
height: this.height * this.ratio + 'px',
|
116
|
-
transformOrigin:
|
133
|
+
transformOrigin: "0 0",
|
134
|
+
backgroundColor: 'pink',
|
135
|
+
transition: this.isMoving ? 'none' : 'all 0.5s'
|
117
136
|
};
|
118
137
|
}
|
119
138
|
}, {
|
@@ -125,6 +144,11 @@ export var ViewPortStore = /*#__PURE__*/function () {
|
|
125
144
|
overflow: 'hidden'
|
126
145
|
};
|
127
146
|
}
|
147
|
+
}, {
|
148
|
+
key: "info",
|
149
|
+
get: function get() {
|
150
|
+
return JSON.stringify(this.formatedTransform(this.transform.left, this.transform.top), null, 4);
|
151
|
+
}
|
128
152
|
}]);
|
129
153
|
return ViewPortStore;
|
130
154
|
}();
|
@@ -171,7 +195,18 @@ var ViewPortEntity = observer(function (props) {
|
|
171
195
|
};
|
172
196
|
}, []);
|
173
197
|
return /*#__PURE__*/React.createElement(Container, {
|
174
|
-
style: viewPortStore.containerStyle
|
198
|
+
style: viewPortStore.containerStyle,
|
199
|
+
onDoubleClick: function onDoubleClick(e) {
|
200
|
+
var container = e.target;
|
201
|
+
var _container$getBoundin = container.getBoundingClientRect(),
|
202
|
+
left = _container$getBoundin.left,
|
203
|
+
top = _container$getBoundin.top;
|
204
|
+
var offsetLeft = e.clientX - left;
|
205
|
+
var offsetTop = e.clientY - top;
|
206
|
+
if (viewPortStore.formatedScale > 0.5) {
|
207
|
+
viewPortStore.setScale(1 / viewPortStore.ratio);
|
208
|
+
} else viewPortStore.focus(offsetLeft, offsetTop);
|
209
|
+
}
|
175
210
|
}, /*#__PURE__*/React.createElement(Content, _extends({
|
176
211
|
ref: function ref(dom) {
|
177
212
|
_ref.current = dom;
|
@@ -202,7 +237,8 @@ export var ViewPortWindowStore = /*#__PURE__*/function (_WindowStore) {
|
|
202
237
|
_defineProperty(_assertThisInitialized(_this), "scale", 1);
|
203
238
|
makeObservable(_assertThisInitialized(_this), {
|
204
239
|
style: override,
|
205
|
-
scale: observable
|
240
|
+
scale: observable,
|
241
|
+
controll: override
|
206
242
|
});
|
207
243
|
return _this;
|
208
244
|
}
|
@@ -264,6 +300,46 @@ export var ViewPortWindowStore = /*#__PURE__*/function (_WindowStore) {
|
|
264
300
|
transition: 'all 0.5s ease-out'
|
265
301
|
};
|
266
302
|
}
|
303
|
+
}, {
|
304
|
+
key: "calculateTransform",
|
305
|
+
value: function calculateTransform(transform) {
|
306
|
+
var _this$transform, _this$transform2;
|
307
|
+
return {
|
308
|
+
x: (transform.x - (((_this$transform = this.transform) === null || _this$transform === void 0 ? void 0 : _this$transform.x) || 0)) / this.scale,
|
309
|
+
y: (transform.y - (((_this$transform2 = this.transform) === null || _this$transform2 === void 0 ? void 0 : _this$transform2.y) || 0)) / this.scale
|
310
|
+
};
|
311
|
+
}
|
312
|
+
}, {
|
313
|
+
key: "controll",
|
314
|
+
value: function controll(transform, type) {
|
315
|
+
var offsetTransform = this.calculateTransform(transform);
|
316
|
+
if (type === 'move') {
|
317
|
+
this.isMoving = true;
|
318
|
+
this.isResizing = false;
|
319
|
+
} else {
|
320
|
+
this.isMoving = false;
|
321
|
+
this.isResizing = true;
|
322
|
+
}
|
323
|
+
if (type.includes('left')) {
|
324
|
+
this.left = Math.round(this.left + offsetTransform.x);
|
325
|
+
this.width = Math.round(this.width - offsetTransform.x);
|
326
|
+
}
|
327
|
+
if (type.includes('right')) {
|
328
|
+
this.width = Math.round(this.width + offsetTransform.x);
|
329
|
+
}
|
330
|
+
if (type.includes('top')) {
|
331
|
+
this.top = Math.round(this.top + offsetTransform.y);
|
332
|
+
this.height = Math.round(this.height - offsetTransform.y);
|
333
|
+
}
|
334
|
+
if (type.includes('bottom')) {
|
335
|
+
this.height = Math.round(this.height + offsetTransform.y);
|
336
|
+
}
|
337
|
+
if (type.includes('move')) {
|
338
|
+
this.left = Math.round(this.left + offsetTransform.x);
|
339
|
+
this.top = Math.round(this.top + offsetTransform.y);
|
340
|
+
}
|
341
|
+
this.transform = transform;
|
342
|
+
}
|
267
343
|
}]);
|
268
344
|
return ViewPortWindowStore;
|
269
345
|
}(WindowStore);
|
@@ -273,14 +349,20 @@ ViewPort.Window = observer(function ViewPortWindow(props) {
|
|
273
349
|
rest = _objectWithoutProperties(props, _excluded2);
|
274
350
|
useEffect(function () {
|
275
351
|
runInAction(function () {
|
276
|
-
|
277
|
-
window.fullscreenPos.
|
352
|
+
var transform = viewPortStore.formatedTransform(viewPortStore.transform.left, viewPortStore.transform.top);
|
353
|
+
window.fullscreenPos.left = -transform.left;
|
354
|
+
window.fullscreenPos.top = -transform.top;
|
278
355
|
window.fullscreenPos.width = viewPortStore.width;
|
279
356
|
window.fullscreenPos.height = viewPortStore.height;
|
280
|
-
window.scale = viewPortStore.
|
357
|
+
window.scale = viewPortStore.formatedScale;
|
281
358
|
});
|
282
359
|
}, [viewPortStore.transform.left, viewPortStore.transform.top, viewPortStore.scale, viewPortStore.ratio, viewPortStore.width, viewPortStore.height]);
|
283
360
|
return /*#__PURE__*/React.createElement(Window, _extends({
|
284
361
|
window: window
|
285
|
-
}, rest
|
362
|
+
}, rest, {
|
363
|
+
onFocusHandler: function onFocusHandler() {
|
364
|
+
viewPortStore.maxZIndex++;
|
365
|
+
window.zIndex = viewPortStore.maxZIndex;
|
366
|
+
}
|
367
|
+
}));
|
286
368
|
});
|
package/dist/ViewPort/test.js
CHANGED
@@ -12,7 +12,7 @@ import ViewPort, { ViewPortStore, ViewPortWindowStore } from "./ViewPort";
|
|
12
12
|
var WindowManager = /*#__PURE__*/function () {
|
13
13
|
function WindowManager() {
|
14
14
|
_classCallCheck(this, WindowManager);
|
15
|
-
_defineProperty(this, "windows", [new ViewPortWindowStore('jss', this.closeWindowHanlder.bind(this))]);
|
15
|
+
_defineProperty(this, "windows", [new ViewPortWindowStore('jss', this.closeWindowHanlder.bind(this)), new ViewPortWindowStore('jss12', this.closeWindowHanlder.bind(this))]);
|
16
16
|
makeAutoObservable(this);
|
17
17
|
}
|
18
18
|
_createClass(WindowManager, [{
|
@@ -35,7 +35,7 @@ var WindowManager = /*#__PURE__*/function () {
|
|
35
35
|
var windowManager = new WindowManager();
|
36
36
|
export default observer(function Test() {
|
37
37
|
var viewPortStore = useLocalObservable(function () {
|
38
|
-
return new ViewPortStore(
|
38
|
+
return new ViewPortStore(600, 600, 5);
|
39
39
|
});
|
40
40
|
useEffect(function () {
|
41
41
|
function setWidthHeight() {
|
package/dist/Window/Window.d.ts
CHANGED
package/dist/Window/Window.js
CHANGED
@@ -74,7 +74,9 @@ var WindowControllerRightBottom = styled(WindowController).withConfig({
|
|
74
74
|
var Window = observer(function (props) {
|
75
75
|
var window = props.window,
|
76
76
|
title = props.title,
|
77
|
-
children = props.children
|
77
|
+
children = props.children,
|
78
|
+
onFullscreenHandler = props.onFullscreenHandler,
|
79
|
+
onFocusHandler = props.onFocusHandler;
|
78
80
|
var windowContainerRef = useRef(null);
|
79
81
|
useEffect(function () {
|
80
82
|
var _windowContainerRef$c;
|
@@ -100,6 +102,7 @@ var Window = observer(function (props) {
|
|
100
102
|
},
|
101
103
|
onPointerDown: function onPointerDown(e) {
|
102
104
|
e.stopPropagation();
|
105
|
+
onFocusHandler === null || onFocusHandler === void 0 || onFocusHandler();
|
103
106
|
},
|
104
107
|
ref: windowContainerRef
|
105
108
|
}, /*#__PURE__*/React.createElement(WindowControllerLeft, {
|
@@ -131,11 +134,13 @@ var Window = observer(function (props) {
|
|
131
134
|
type: "move"
|
132
135
|
}, /*#__PURE__*/React.createElement(WindowHeader, {
|
133
136
|
isDragging: window.isMoving,
|
134
|
-
onDoubleClick: function onDoubleClick() {
|
137
|
+
onDoubleClick: function onDoubleClick(e) {
|
138
|
+
e.stopPropagation();
|
139
|
+
e.preventDefault();
|
135
140
|
if (window.fullscreen) {
|
136
141
|
window.fullscreenExitWindow();
|
137
142
|
} else {
|
138
|
-
window.fullscreenWindow();
|
143
|
+
window.fullscreenWindow(onFullscreenHandler);
|
139
144
|
}
|
140
145
|
}
|
141
146
|
}, /*#__PURE__*/React.createElement("h5", null, title), /*#__PURE__*/React.createElement(WindowHeaderOptions, {
|
@@ -146,7 +151,7 @@ var Window = observer(function (props) {
|
|
146
151
|
color: "var(--kep-platform-orange-4)",
|
147
152
|
icon: /*#__PURE__*/React.createElement(FullscreenOutlined, null),
|
148
153
|
onClick: function onClick() {
|
149
|
-
|
154
|
+
window.fullscreenWindow(onFullscreenHandler);
|
150
155
|
}
|
151
156
|
}) : /*#__PURE__*/React.createElement(WindowOption, {
|
152
157
|
color: "var(--kep-platform-orange-4)",
|
@@ -166,6 +171,6 @@ var Window = observer(function (props) {
|
|
166
171
|
},
|
167
172
|
icon: /*#__PURE__*/React.createElement(CloseCircleOutlined, null),
|
168
173
|
color: "var(--kep-platform-red)"
|
169
|
-
}))))), /*#__PURE__*/React.createElement(WindowBody, null,
|
174
|
+
}))))), /*#__PURE__*/React.createElement(WindowBody, null, children)));
|
170
175
|
});
|
171
176
|
export default Window;
|
@@ -17,7 +17,7 @@ export default class WindowStore {
|
|
17
17
|
minimizePos: {
|
18
18
|
left: number;
|
19
19
|
top: number;
|
20
|
-
}
|
20
|
+
};
|
21
21
|
fullscreenPos: {
|
22
22
|
left: number;
|
23
23
|
top: number;
|
@@ -28,7 +28,7 @@ export default class WindowStore {
|
|
28
28
|
isClosed: boolean;
|
29
29
|
onClosedHandler: ((id: string) => void) | undefined;
|
30
30
|
constructor(id: string, onClosedHandler?: (id: string) => void);
|
31
|
-
fullscreenWindow(): void;
|
31
|
+
fullscreenWindow(func?: () => void): void;
|
32
32
|
fullscreenExitWindow(): void;
|
33
33
|
resetState(): void;
|
34
34
|
calculateTransform(transform: Transform): {
|
@@ -19,12 +19,15 @@ var WindowStore = /*#__PURE__*/function () {
|
|
19
19
|
_defineProperty(this, "transform", null);
|
20
20
|
_defineProperty(this, "isMoving", false);
|
21
21
|
_defineProperty(this, "isResizing", false);
|
22
|
-
_defineProperty(this, "minimizePos",
|
22
|
+
_defineProperty(this, "minimizePos", {
|
23
|
+
left: 0,
|
24
|
+
top: 0
|
25
|
+
});
|
23
26
|
_defineProperty(this, "fullscreenPos", {
|
24
27
|
left: 0,
|
25
28
|
top: 0,
|
26
|
-
width:
|
27
|
-
height:
|
29
|
+
width: 1000,
|
30
|
+
height: 1000
|
28
31
|
});
|
29
32
|
_defineProperty(this, "isMinimize", false);
|
30
33
|
_defineProperty(this, "isClosed", false);
|
@@ -59,9 +62,10 @@ var WindowStore = /*#__PURE__*/function () {
|
|
59
62
|
}
|
60
63
|
_createClass(WindowStore, [{
|
61
64
|
key: "fullscreenWindow",
|
62
|
-
value: function fullscreenWindow() {
|
65
|
+
value: function fullscreenWindow(func) {
|
63
66
|
this.resetState();
|
64
67
|
this.fullscreen = true;
|
68
|
+
func === null || func === void 0 || func();
|
65
69
|
}
|
66
70
|
}, {
|
67
71
|
key: "fullscreenExitWindow",
|
@@ -131,7 +135,6 @@ var WindowStore = /*#__PURE__*/function () {
|
|
131
135
|
}, {
|
132
136
|
key: "normalizeWindow",
|
133
137
|
value: function normalizeWindow() {
|
134
|
-
this.minimizePos = null;
|
135
138
|
this.isMinimize = false;
|
136
139
|
this.fullscreen = false;
|
137
140
|
this.resetState();
|
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.38",
|
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.38",
|
51
51
|
"color": "^4.2.3",
|
52
52
|
"rc-pagination": "^4.1.0",
|
53
53
|
"styled-components": "^6.1.11"
|
@@ -87,5 +87,5 @@
|
|
87
87
|
"authors": [
|
88
88
|
"lee-step-jss 1599925910@qq.com"
|
89
89
|
],
|
90
|
-
"gitHead": "
|
90
|
+
"gitHead": "8e28a8926ce994e43661454098fac1f15d7e9ead"
|
91
91
|
}
|