@kep-platform/basic-component 1.0.10 → 1.0.12
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/LICENSE +21 -21
- package/README.md +43 -43
- package/dist/@types/styled-components.d.ts +9 -9
- package/dist/@types/theme.d.ts +38 -38
- package/dist/ViewPort/ViewPort.js +30 -26
- package/dist/ViewPort/ViewPortStore.js +0 -2
- package/dist/ViewPort/ViewPortWindow.d.ts +2 -0
- package/dist/ViewPort/ViewPortWindow.js +85 -55
- package/dist/ViewPort/test.js +18 -4
- package/dist/Window/Window.d.ts +1 -0
- package/dist/Window/Window.js +50 -30
- package/dist/Window/WindowStore.d.ts +4 -0
- package/dist/Window/WindowStore.js +75 -55
- package/dist/Window/test.js +7 -2
- package/package.json +2 -2
package/LICENSE
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) lee-step-jss 1599925910@qq.com
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) lee-step-jss 1599925910@qq.com
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,43 +1,43 @@
|
|
|
1
|
-
# @kep-platform/basic-component
|
|
2
|
-
|
|
3
|
-
[](https://npmjs.org/package/@kep-platform/basic-component)
|
|
4
|
-
[](https://npmjs.org/package/@kep-platform/basic-component)
|
|
5
|
-
|
|
6
|
-
A react library developed with dumi
|
|
7
|
-
|
|
8
|
-
## Usage
|
|
9
|
-
|
|
10
|
-
TODO
|
|
11
|
-
|
|
12
|
-
## Options
|
|
13
|
-
|
|
14
|
-
TODO
|
|
15
|
-
|
|
16
|
-
## Development
|
|
17
|
-
|
|
18
|
-
```bash
|
|
19
|
-
# install dependencies
|
|
20
|
-
$ npm install
|
|
21
|
-
|
|
22
|
-
# develop library by docs demo
|
|
23
|
-
$ npm start
|
|
24
|
-
|
|
25
|
-
# build library source code
|
|
26
|
-
$ npm run build
|
|
27
|
-
|
|
28
|
-
# build library source code in watch mode
|
|
29
|
-
$ npm run build:watch
|
|
30
|
-
|
|
31
|
-
# build docs
|
|
32
|
-
$ npm run docs:build
|
|
33
|
-
|
|
34
|
-
# Locally preview the production build.
|
|
35
|
-
$ npm run docs:preview
|
|
36
|
-
|
|
37
|
-
# check your project for potential problems
|
|
38
|
-
$ npm run doctor
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
## LICENSE
|
|
42
|
-
|
|
43
|
-
MIT
|
|
1
|
+
# @kep-platform/basic-component
|
|
2
|
+
|
|
3
|
+
[](https://npmjs.org/package/@kep-platform/basic-component)
|
|
4
|
+
[](https://npmjs.org/package/@kep-platform/basic-component)
|
|
5
|
+
|
|
6
|
+
A react library developed with dumi
|
|
7
|
+
|
|
8
|
+
## Usage
|
|
9
|
+
|
|
10
|
+
TODO
|
|
11
|
+
|
|
12
|
+
## Options
|
|
13
|
+
|
|
14
|
+
TODO
|
|
15
|
+
|
|
16
|
+
## Development
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
# install dependencies
|
|
20
|
+
$ npm install
|
|
21
|
+
|
|
22
|
+
# develop library by docs demo
|
|
23
|
+
$ npm start
|
|
24
|
+
|
|
25
|
+
# build library source code
|
|
26
|
+
$ npm run build
|
|
27
|
+
|
|
28
|
+
# build library source code in watch mode
|
|
29
|
+
$ npm run build:watch
|
|
30
|
+
|
|
31
|
+
# build docs
|
|
32
|
+
$ npm run docs:build
|
|
33
|
+
|
|
34
|
+
# Locally preview the production build.
|
|
35
|
+
$ npm run docs:preview
|
|
36
|
+
|
|
37
|
+
# check your project for potential problems
|
|
38
|
+
$ npm run doctor
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## LICENSE
|
|
42
|
+
|
|
43
|
+
MIT
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
// styled.d.ts 文件
|
|
2
|
-
import 'styled-components';
|
|
3
|
-
import { ButtonTheme } from './theme';
|
|
4
|
-
|
|
5
|
-
declare module 'styled-components' {
|
|
6
|
-
export interface DefaultTheme {
|
|
7
|
-
button?: ButtonTheme;
|
|
8
|
-
}
|
|
9
|
-
}
|
|
1
|
+
// styled.d.ts 文件
|
|
2
|
+
import 'styled-components';
|
|
3
|
+
import { ButtonTheme } from './theme';
|
|
4
|
+
|
|
5
|
+
declare module 'styled-components' {
|
|
6
|
+
export interface DefaultTheme {
|
|
7
|
+
button?: ButtonTheme;
|
|
8
|
+
}
|
|
9
|
+
}
|
package/dist/@types/theme.d.ts
CHANGED
|
@@ -1,38 +1,38 @@
|
|
|
1
|
-
export type ButtonTheme = {
|
|
2
|
-
/* all */
|
|
3
|
-
fontWeight?: string;
|
|
4
|
-
borderRadius?: string;
|
|
5
|
-
borderWidth?: string;
|
|
6
|
-
shadowAnimation?: Keyframes;
|
|
7
|
-
/* Default */
|
|
8
|
-
defaultTextColor?: string;
|
|
9
|
-
defaultBorderColor?: string;
|
|
10
|
-
defaultBackgroundColor?: string;
|
|
11
|
-
defaultHoverBackgroundColor?: string;
|
|
12
|
-
defaultHoverBorderColor: string;
|
|
13
|
-
defaultHoverTextColor?: string;
|
|
14
|
-
/* Danger */
|
|
15
|
-
dangerTextColor?: string;
|
|
16
|
-
dangerBorderColor?: string;
|
|
17
|
-
dangerBackgroundColor?: string;
|
|
18
|
-
dangerHoverBackgroundColor: string;
|
|
19
|
-
dangerHoverTextColor?: string;
|
|
20
|
-
dangerShadowAnimation?: Keyframes;
|
|
21
|
-
/* Primary */
|
|
22
|
-
primaryTextColor?: string;
|
|
23
|
-
primaryBorderColor?: string;
|
|
24
|
-
primaryBackgroundColor?: string;
|
|
25
|
-
primaryHoverBackgroundColor: string;
|
|
26
|
-
primaryHoverTextColor?: string;
|
|
27
|
-
primaryShadowAnimation?: Keyframes;
|
|
28
|
-
/* Small */
|
|
29
|
-
smallPaddingTop?: string;
|
|
30
|
-
smallPaddingLeft?: string;
|
|
31
|
-
smallFontSize?: string;
|
|
32
|
-
smallBorderRadius?: string;
|
|
33
|
-
/* Large */
|
|
34
|
-
bargePaddingTop?: string;
|
|
35
|
-
bargePaddingLeft?: string;
|
|
36
|
-
bargeFontSize?: string;
|
|
37
|
-
bargeBorderRadius?: string;
|
|
38
|
-
};
|
|
1
|
+
export type ButtonTheme = {
|
|
2
|
+
/* all */
|
|
3
|
+
fontWeight?: string;
|
|
4
|
+
borderRadius?: string;
|
|
5
|
+
borderWidth?: string;
|
|
6
|
+
shadowAnimation?: Keyframes;
|
|
7
|
+
/* Default */
|
|
8
|
+
defaultTextColor?: string;
|
|
9
|
+
defaultBorderColor?: string;
|
|
10
|
+
defaultBackgroundColor?: string;
|
|
11
|
+
defaultHoverBackgroundColor?: string;
|
|
12
|
+
defaultHoverBorderColor: string;
|
|
13
|
+
defaultHoverTextColor?: string;
|
|
14
|
+
/* Danger */
|
|
15
|
+
dangerTextColor?: string;
|
|
16
|
+
dangerBorderColor?: string;
|
|
17
|
+
dangerBackgroundColor?: string;
|
|
18
|
+
dangerHoverBackgroundColor: string;
|
|
19
|
+
dangerHoverTextColor?: string;
|
|
20
|
+
dangerShadowAnimation?: Keyframes;
|
|
21
|
+
/* Primary */
|
|
22
|
+
primaryTextColor?: string;
|
|
23
|
+
primaryBorderColor?: string;
|
|
24
|
+
primaryBackgroundColor?: string;
|
|
25
|
+
primaryHoverBackgroundColor: string;
|
|
26
|
+
primaryHoverTextColor?: string;
|
|
27
|
+
primaryShadowAnimation?: Keyframes;
|
|
28
|
+
/* Small */
|
|
29
|
+
smallPaddingTop?: string;
|
|
30
|
+
smallPaddingLeft?: string;
|
|
31
|
+
smallFontSize?: string;
|
|
32
|
+
smallBorderRadius?: string;
|
|
33
|
+
/* Large */
|
|
34
|
+
bargePaddingTop?: string;
|
|
35
|
+
bargePaddingLeft?: string;
|
|
36
|
+
bargeFontSize?: string;
|
|
37
|
+
bargeBorderRadius?: string;
|
|
38
|
+
};
|
|
@@ -11,8 +11,8 @@ import React, { useCallback, useEffect, useRef } from 'react';
|
|
|
11
11
|
import styled from 'styled-components';
|
|
12
12
|
import { RippleManagerStore } from "./Ripple";
|
|
13
13
|
import { ViewPortWindow } from "./ViewPortWindow";
|
|
14
|
-
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n
|
|
15
|
-
var Content = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n
|
|
14
|
+
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tposition: relative;\n\tborder: 1px solid #eee;\n\tbox-shadow: 0 0 7px 0 inset #fefefe;\n"])));
|
|
15
|
+
var Content = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\tposition: absolute;\n"])));
|
|
16
16
|
var Overlay = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([""])));
|
|
17
17
|
var rippleManagerStore = new RippleManagerStore();
|
|
18
18
|
var ViewPortComponent = observer(function (props) {
|
|
@@ -32,19 +32,6 @@ var ViewPortComponent = observer(function (props) {
|
|
|
32
32
|
var contentRef = useRef(null);
|
|
33
33
|
var containerRef = useRef(null);
|
|
34
34
|
var pointerDownTimer = useRef();
|
|
35
|
-
var createRipple = function createRipple(event) {
|
|
36
|
-
var _containerRef$current;
|
|
37
|
-
event.preventDefault();
|
|
38
|
-
event.stopPropagation();
|
|
39
|
-
var rect = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.getBoundingClientRect();
|
|
40
|
-
if (!rect) return;
|
|
41
|
-
var left = event.clientX - rect.left;
|
|
42
|
-
var top = event.clientY - rect.top;
|
|
43
|
-
rippleManagerStore.addRipple(left, top);
|
|
44
|
-
setTimeout(function () {
|
|
45
|
-
rippleManagerStore.clearList();
|
|
46
|
-
}, 30000);
|
|
47
|
-
};
|
|
48
35
|
useEffect(function () {
|
|
49
36
|
if (transform) {
|
|
50
37
|
viewPortStore.move(transform);
|
|
@@ -54,7 +41,7 @@ var ViewPortComponent = observer(function (props) {
|
|
|
54
41
|
}
|
|
55
42
|
}, [transform]);
|
|
56
43
|
useEffect(function () {
|
|
57
|
-
var _contentRef$current;
|
|
44
|
+
var _contentRef$current, _contentRef$current2, _contentRef$current3;
|
|
58
45
|
function scaleHandler(e) {
|
|
59
46
|
e.stopPropagation();
|
|
60
47
|
e.preventDefault();
|
|
@@ -65,21 +52,30 @@ var ViewPortComponent = observer(function (props) {
|
|
|
65
52
|
}
|
|
66
53
|
onScale === null || onScale === void 0 || onScale(viewPortStore.transform.left, viewPortStore.transform.top, viewPortStore.scale, viewPortStore.ratio);
|
|
67
54
|
}
|
|
55
|
+
function onContentTransitionEnd(e) {
|
|
56
|
+
if (e.target === contentRef.current) {
|
|
57
|
+
runInAction(function () {
|
|
58
|
+
viewPortStore.isTransition = false;
|
|
59
|
+
});
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
function onContentTransitionStart(e) {
|
|
63
|
+
if (e.target === contentRef.current) {
|
|
64
|
+
runInAction(function () {
|
|
65
|
+
viewPortStore.isTransition = true;
|
|
66
|
+
});
|
|
67
|
+
}
|
|
68
|
+
}
|
|
68
69
|
(_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 || _contentRef$current.addEventListener('wheel', scaleHandler, {
|
|
69
70
|
passive: false
|
|
70
71
|
});
|
|
72
|
+
(_contentRef$current2 = contentRef.current) === null || _contentRef$current2 === void 0 || _contentRef$current2.addEventListener('transitionend', onContentTransitionEnd);
|
|
73
|
+
(_contentRef$current3 = contentRef.current) === null || _contentRef$current3 === void 0 || _contentRef$current3.addEventListener('transitionstart', onContentTransitionStart);
|
|
71
74
|
return function () {
|
|
72
|
-
var _contentRef$
|
|
73
|
-
(_contentRef$
|
|
75
|
+
var _contentRef$current4;
|
|
76
|
+
(_contentRef$current4 = contentRef.current) === null || _contentRef$current4 === void 0 || _contentRef$current4.removeEventListener('wheel', scaleHandler);
|
|
74
77
|
};
|
|
75
78
|
}, []);
|
|
76
|
-
var onContentTransitionEnd = useCallback(function (e) {
|
|
77
|
-
if (e.target === contentRef.current) {
|
|
78
|
-
runInAction(function () {
|
|
79
|
-
viewPortStore.isTransition = false;
|
|
80
|
-
});
|
|
81
|
-
}
|
|
82
|
-
}, []);
|
|
83
79
|
var onContentPointerDownHandler = useCallback(function (e) {
|
|
84
80
|
if (viewPortStore.isTransition) return;
|
|
85
81
|
//鼠标点击的时候，先清除定时器，然后再异步触发pointerDown操作，这样保证doubleClick的优先级高于pointerDown
|
|
@@ -108,7 +104,15 @@ var ViewPortComponent = observer(function (props) {
|
|
|
108
104
|
}, attributes, {
|
|
109
105
|
onPointerDown: onContentPointerDownHandler,
|
|
110
106
|
onPointerUp: onContentPointerUpHandler,
|
|
111
|
-
|
|
107
|
+
onDoubleClick: function onDoubleClick(e) {
|
|
108
|
+
if (viewPortStore.scale !== 1 / viewPortStore.ratio) {
|
|
109
|
+
viewPortStore.unfocus();
|
|
110
|
+
return;
|
|
111
|
+
}
|
|
112
|
+
var target = e.target;
|
|
113
|
+
var rect = target.getBoundingClientRect();
|
|
114
|
+
viewPortStore.focus(e.clientX - rect.left, e.clientY - rect.top);
|
|
115
|
+
},
|
|
112
116
|
style: viewPortStore.contentStyle
|
|
113
117
|
}), children));
|
|
114
118
|
});
|
|
@@ -127,14 +127,12 @@ export var ViewPortStore = /*#__PURE__*/function () {
|
|
|
127
127
|
value: function focus(left, top) {
|
|
128
128
|
this.setScale(1);
|
|
129
129
|
this.setTransform((1 - this.ratio) * left + this.offsetLeft, (1 - this.ratio) * top + this.offsetTop);
|
|
130
|
-
this.isTransition = true;
|
|
131
130
|
}
|
|
132
131
|
}, {
|
|
133
132
|
key: "unfocus",
|
|
134
133
|
value: function unfocus() {
|
|
135
134
|
this.setScale(1 / this.ratio);
|
|
136
135
|
this.setTransform(0, 0);
|
|
137
|
-
this.isTransition = true;
|
|
138
136
|
}
|
|
139
137
|
}, {
|
|
140
138
|
key: "move",
|
|
@@ -26,6 +26,7 @@ export declare class ViewPortWindowStore extends WindowStore {
|
|
|
26
26
|
transformOrigin?: undefined;
|
|
27
27
|
};
|
|
28
28
|
focus(): void;
|
|
29
|
+
get isActive(): boolean;
|
|
29
30
|
calculateTransform(transform: Transform): {
|
|
30
31
|
x: number;
|
|
31
32
|
y: number;
|
|
@@ -33,6 +34,7 @@ export declare class ViewPortWindowStore extends WindowStore {
|
|
|
33
34
|
controll(transform: Transform, type: WindowControllerType): void;
|
|
34
35
|
centerDisplay(): void;
|
|
35
36
|
fullscreenWindow(func?: () => void): void;
|
|
37
|
+
toggleWindow(): void;
|
|
36
38
|
constructor(id: string, viewPort: ViewPortStore, onClosedHandler?: (id: string) => void);
|
|
37
39
|
get disabled(): boolean;
|
|
38
40
|
}
|
|
@@ -42,68 +42,75 @@ export var ViewPortWindowStore = /*#__PURE__*/function (_WindowStore) {
|
|
|
42
42
|
_createClass(ViewPortWindowStore, [{
|
|
43
43
|
key: "style",
|
|
44
44
|
get: function get() {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
45
|
+
switch (this.status) {
|
|
46
|
+
case 'closed':
|
|
47
|
+
return {
|
|
48
|
+
left: this.left + 'px',
|
|
49
|
+
top: this.top + 'px',
|
|
50
|
+
width: this.width + 'px',
|
|
51
|
+
height: this.height + 'px',
|
|
52
|
+
zIndex: this.zIndex,
|
|
53
|
+
transform: 'scale(0)',
|
|
54
|
+
transformOrigin: 'center center',
|
|
55
|
+
transition: 'all 0.3s ease-out'
|
|
56
|
+
};
|
|
57
|
+
case 'minimize':
|
|
58
|
+
return {
|
|
59
|
+
left: this.minimizePos.left + 'px',
|
|
60
|
+
top: this.minimizePos.top + 'px',
|
|
61
|
+
width: this.width + 'px',
|
|
62
|
+
height: this.height + 'px',
|
|
63
|
+
zIndex: this.zIndex,
|
|
64
|
+
transform: 'scale(0)',
|
|
65
|
+
transformOrigin: 'left top',
|
|
66
|
+
transition: "all ".concat(0.5 + this.viewPortStore.scale, "s ease-out")
|
|
67
|
+
};
|
|
68
|
+
case 'fullscreen':
|
|
69
|
+
return {
|
|
70
|
+
left: this.fullscreenPos.left + 'px',
|
|
71
|
+
top: this.fullscreenPos.top + 'px',
|
|
72
|
+
width: this.fullscreenPos.width * this.viewPortStore.scale + 'px',
|
|
73
|
+
height: this.fullscreenPos.height * this.viewPortStore.scale + 'px',
|
|
74
|
+
transform: "scale(".concat(1 / this.viewPortStore.scale, ")"),
|
|
75
|
+
zIndex: this.zIndex,
|
|
76
|
+
transformOrigin: 'left top',
|
|
77
|
+
transition: 'width height 0.5s ease-out'
|
|
78
|
+
};
|
|
79
|
+
case 'normal':
|
|
80
|
+
default:
|
|
81
|
+
if (this.isMoving || this.isResizing) {
|
|
82
|
+
return {
|
|
83
|
+
left: this.left + 'px',
|
|
84
|
+
top: this.top + 'px',
|
|
85
|
+
width: this.width + 'px',
|
|
86
|
+
height: this.height + 'px',
|
|
87
|
+
zIndex: this.zIndex,
|
|
88
|
+
transform: 'none',
|
|
89
|
+
transition: 'none'
|
|
90
|
+
};
|
|
91
|
+
} else {
|
|
92
|
+
return {
|
|
93
|
+
left: this.left + 'px',
|
|
94
|
+
top: this.top + 'px',
|
|
95
|
+
width: this.width + 'px',
|
|
96
|
+
height: this.height + 'px',
|
|
97
|
+
zIndex: this.zIndex,
|
|
98
|
+
transform: 'none',
|
|
99
|
+
transition: 'all 0.3s ease-out'
|
|
100
|
+
};
|
|
101
|
+
}
|
|
56
102
|
}
|
|
57
|
-
if (this.isMinimize && this.minimizePos) {
|
|
58
|
-
return {
|
|
59
|
-
left: this.minimizePos.left + 'px',
|
|
60
|
-
top: this.minimizePos.top + 'px',
|
|
61
|
-
width: this.width + 'px',
|
|
62
|
-
height: this.height + 'px',
|
|
63
|
-
zIndex: this.zIndex,
|
|
64
|
-
transform: 'scale(0)',
|
|
65
|
-
transformOrigin: 'left top',
|
|
66
|
-
transition: "all ".concat(0.5 + this.viewPortStore.scale, "s ease-out")
|
|
67
|
-
};
|
|
68
|
-
}
|
|
69
|
-
if (this.fullscreen) {
|
|
70
|
-
return {
|
|
71
|
-
left: this.fullscreenPos.left + 'px',
|
|
72
|
-
top: this.fullscreenPos.top + 'px',
|
|
73
|
-
width: this.fullscreenPos.width * this.viewPortStore.scale + 'px',
|
|
74
|
-
height: this.fullscreenPos.height * this.viewPortStore.scale + 'px',
|
|
75
|
-
transform: "scale(".concat(1 / this.viewPortStore.scale, ")"),
|
|
76
|
-
zIndex: this.zIndex,
|
|
77
|
-
transformOrigin: 'left top',
|
|
78
|
-
transition: 'width height 0.5s ease-out'
|
|
79
|
-
};
|
|
80
|
-
}
|
|
81
|
-
if (this.isMoving || this.isResizing) {
|
|
82
|
-
return {
|
|
83
|
-
left: this.left + 'px',
|
|
84
|
-
top: this.top + 'px',
|
|
85
|
-
width: this.width + 'px',
|
|
86
|
-
height: this.height + 'px',
|
|
87
|
-
zIndex: this.zIndex,
|
|
88
|
-
transform: 'none',
|
|
89
|
-
transition: 'none'
|
|
90
|
-
};
|
|
91
|
-
}
|
|
92
|
-
return {
|
|
93
|
-
left: this.left + 'px',
|
|
94
|
-
top: this.top + 'px',
|
|
95
|
-
width: this.width + 'px',
|
|
96
|
-
height: this.height + 'px',
|
|
97
|
-
zIndex: this.zIndex,
|
|
98
|
-
transform: 'none',
|
|
99
|
-
transition: 'all 0.3s ease-out'
|
|
100
|
-
};
|
|
101
103
|
}
|
|
102
104
|
}, {
|
|
103
105
|
key: "focus",
|
|
104
106
|
value: function focus() {
|
|
105
107
|
this.zIndex = ++this.viewPortStore.maxZIndex;
|
|
106
108
|
}
|
|
109
|
+
}, {
|
|
110
|
+
key: "isActive",
|
|
111
|
+
get: function get() {
|
|
112
|
+
return this.zIndex === this.viewPortStore.maxZIndex;
|
|
113
|
+
}
|
|
107
114
|
}, {
|
|
108
115
|
key: "calculateTransform",
|
|
109
116
|
value: function calculateTransform(transform) {
|
|
@@ -160,6 +167,29 @@ export var ViewPortWindowStore = /*#__PURE__*/function (_WindowStore) {
|
|
|
160
167
|
func === null || func === void 0 || func();
|
|
161
168
|
this.fullscreenPos = this.viewPortStore.viewPortRect;
|
|
162
169
|
}
|
|
170
|
+
}, {
|
|
171
|
+
key: "toggleWindow",
|
|
172
|
+
value: function toggleWindow() {
|
|
173
|
+
switch (this.status) {
|
|
174
|
+
case 'normal':
|
|
175
|
+
if (this.isActive) {
|
|
176
|
+
this.minimizeWindow();
|
|
177
|
+
} else {
|
|
178
|
+
this.normalizeWindow();
|
|
179
|
+
}
|
|
180
|
+
break;
|
|
181
|
+
case 'minimize':
|
|
182
|
+
this.normalizeWindow();
|
|
183
|
+
break;
|
|
184
|
+
case 'fullscreen':
|
|
185
|
+
if (!this.isActive) {
|
|
186
|
+
this.normalizeWindow();
|
|
187
|
+
} else this.minimizeWindow();
|
|
188
|
+
break;
|
|
189
|
+
default:
|
|
190
|
+
break;
|
|
191
|
+
}
|
|
192
|
+
}
|
|
163
193
|
}, {
|
|
164
194
|
key: "disabled",
|
|
165
195
|
get: function get() {
|
package/dist/ViewPort/test.js
CHANGED
|
@@ -16,7 +16,7 @@ import { Button, GlobalStyles } from '..';
|
|
|
16
16
|
import ViewPort from "./ViewPort";
|
|
17
17
|
import { ViewPortStore } from "./ViewPortStore";
|
|
18
18
|
import { ViewPortWindowStore } from "./ViewPortWindow";
|
|
19
|
-
var viewPortStore = new ViewPortStore(600, 600,
|
|
19
|
+
var viewPortStore = new ViewPortStore(600, 600, 1);
|
|
20
20
|
var WindowManager = /*#__PURE__*/function () {
|
|
21
21
|
function WindowManager() {
|
|
22
22
|
_classCallCheck(this, WindowManager);
|
|
@@ -35,6 +35,16 @@ var WindowManager = /*#__PURE__*/function () {
|
|
|
35
35
|
return window.id !== id;
|
|
36
36
|
});
|
|
37
37
|
}
|
|
38
|
+
}, {
|
|
39
|
+
key: "toggleWindowIdIsJss",
|
|
40
|
+
value: function toggleWindowIdIsJss() {
|
|
41
|
+
var window = this.windows.find(function (window) {
|
|
42
|
+
return window.id === 'jss';
|
|
43
|
+
});
|
|
44
|
+
if (window) {
|
|
45
|
+
window.toggleWindow();
|
|
46
|
+
}
|
|
47
|
+
}
|
|
38
48
|
}, {
|
|
39
49
|
key: "report",
|
|
40
50
|
get: function get() {
|
|
@@ -46,7 +56,7 @@ var WindowManager = /*#__PURE__*/function () {
|
|
|
46
56
|
return WindowManager;
|
|
47
57
|
}();
|
|
48
58
|
var windowManager = new WindowManager();
|
|
49
|
-
var StyledViewPort = styled(ViewPort)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n
|
|
59
|
+
var StyledViewPort = styled(ViewPort)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tborder: 1px solid #eee;\n"])));
|
|
50
60
|
export default observer(function Test() {
|
|
51
61
|
useEffect(function () {
|
|
52
62
|
function setWidthHeight() {
|
|
@@ -67,13 +77,17 @@ export default observer(function Test() {
|
|
|
67
77
|
onClick: function onClick() {
|
|
68
78
|
windowManager.createWindow();
|
|
69
79
|
}
|
|
70
|
-
}, "\u65B0\u589E"), /*#__PURE__*/React.createElement(
|
|
80
|
+
}, "\u65B0\u589E"), /*#__PURE__*/React.createElement(Button, {
|
|
81
|
+
onClick: function onClick() {
|
|
82
|
+
windowManager.toggleWindowIdIsJss();
|
|
83
|
+
}
|
|
84
|
+
}, "\u5207\u6362"), /*#__PURE__*/React.createElement(DndContext, null, /*#__PURE__*/React.createElement(StyledViewPort, {
|
|
71
85
|
viewPortStore: viewPortStore
|
|
72
86
|
}, windowManager.windows.map(function (windowStore) {
|
|
73
87
|
return /*#__PURE__*/React.createElement(ViewPort.Window, {
|
|
74
88
|
window: windowStore,
|
|
75
89
|
key: windowStore.id,
|
|
76
|
-
title:
|
|
90
|
+
title: windowStore.id
|
|
77
91
|
}, /*#__PURE__*/React.createElement("div", {
|
|
78
92
|
style: {
|
|
79
93
|
height: '2000px',
|
package/dist/Window/Window.d.ts
CHANGED
package/dist/Window/Window.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
|
|
2
2
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
3
|
-
import { BorderOutlined, CloseOutlined, CompressOutlined, MinusOutlined } from '@ant-design/icons';
|
|
3
|
+
import { BorderOutlined, CloseOutlined, CompressOutlined, MinusOutlined, ShareAltOutlined } from '@ant-design/icons';
|
|
4
4
|
import { runInAction } from 'mobx';
|
|
5
5
|
import { observer } from 'mobx-react-lite';
|
|
6
6
|
import React, { useEffect, useRef } from 'react';
|
|
@@ -11,45 +11,74 @@ var WindowContainer = styled.div.withConfig({
|
|
|
11
11
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
12
12
|
return !['isMinimize'].includes(prop);
|
|
13
13
|
}
|
|
14
|
-
})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n
|
|
14
|
+
})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tbox-shadow: ", ";\n\tposition: absolute;\n\tpadding: 0px;\n\tborder-radius: ", ";\n\tbackground-color: #fff;\n\toverflow: hidden;\n\tborder: 1px solid rgba(50, 58, 67, 0.15);\n"])), function (props) {
|
|
15
15
|
return props.isFullscreen ? 'none' : 'var(--kep-platform-box-shadow)';
|
|
16
16
|
}, function (props) {
|
|
17
17
|
return props.isFullscreen ? '4px' : '12px';
|
|
18
18
|
});
|
|
19
|
-
var WindowEntity = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n
|
|
19
|
+
var WindowEntity = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\twidth: 100%;\n\theight: 100%;\n\tdisplay: flex;\n\tflex-direction: column;\n"])));
|
|
20
20
|
var WindowHeader = styled.div.withConfig({
|
|
21
21
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
22
22
|
return !['isDragging'].includes(prop);
|
|
23
23
|
}
|
|
24
|
-
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n
|
|
25
|
-
var WindowHeaderOptions = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n
|
|
26
|
-
var WindowBody = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n
|
|
27
|
-
var WindowControllerLeft = styled(WindowController)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n
|
|
28
|
-
var WindowControllerRight = styled(WindowController)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n
|
|
29
|
-
var WindowControllerTop = styled(WindowController)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n
|
|
30
|
-
var WindowControllerBottom = styled(WindowController)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n
|
|
31
|
-
var WindowControllerLeftTop = styled(WindowController)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n
|
|
32
|
-
var WindowControllerLeftBottom = styled(WindowController)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n
|
|
33
|
-
var WindowControllerRightTop = styled(WindowController)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n
|
|
34
|
-
var WindowControllerRightBottom = styled(WindowController)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n
|
|
24
|
+
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\theight: 40px;\n\tpadding: 6px 12px;\n\tline-height: 26px;\n\tfont-size: 16px;\n\tbackground-color: var(--kep-platform-color-bg-layout-header);\n\ttransition: margin 0.35s, opacity 0.7s, box-shadow 0.7s;\n\tposition: relative;\n\tcolor: #000;\n\tcursor: move;\n\t& > h5 {\n\t\tcolor: #000;\n\t}\n"])));
|
|
25
|
+
var WindowHeaderOptions = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n\theight: 100%;\n\tdisplay: flex;\n\tz-index: 3;\n"])));
|
|
26
|
+
var WindowBody = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\toverflow: auto;\n\tpadding: 12px;\n\tflex: 1;\n"])));
|
|
27
|
+
var WindowControllerLeft = styled(WindowController)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\tposition: absolute;\n\twidth: 6px;\n\tleft: 0;\n\ttop: 0;\n\tbottom: 0;\n\tcursor: e-resize;\n\tz-index: 2;\n"])));
|
|
28
|
+
var WindowControllerRight = styled(WindowController)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n\tposition: absolute;\n\twidth: 6px;\n\theight: 100%;\n\tright: 0;\n\ttop: 0;\n\tbottom: 0;\n\tcursor: e-resize;\n\tz-index: 2;\n"])));
|
|
29
|
+
var WindowControllerTop = styled(WindowController)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\tposition: absolute;\n\twidth: 100%;\n\theight: 6px;\n\tleft: 0;\n\tright: 0;\n\ttop: 0;\n\tcursor: n-resize;\n\tz-index: 2;\n"])));
|
|
30
|
+
var WindowControllerBottom = styled(WindowController)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\tposition: absolute;\n\twidth: 100%;\n\theight: 6px;\n\tleft: 0;\n\tright: 0;\n\tbottom: 0;\n\tcursor: n-resize;\n\tz-index: 2;\n"])));
|
|
31
|
+
var WindowControllerLeftTop = styled(WindowController)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n\tposition: absolute;\n\twidth: 6px;\n\theight: 6px;\n\tleft: 0;\n\ttop: 0;\n\tcursor: nwse-resize;\n\tz-index: 2;\n"])));
|
|
32
|
+
var WindowControllerLeftBottom = styled(WindowController)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n\tposition: absolute;\n\twidth: 6px;\n\theight: 6px;\n\tleft: 0;\n\tbottom: 0;\n\tcursor: nesw-resize;\n\tz-index: 2;\n"])));
|
|
33
|
+
var WindowControllerRightTop = styled(WindowController)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n\tposition: absolute;\n\twidth: 6px;\n\theight: 6px;\n\tright: 0;\n\ttop: 0;\n\tcursor: nesw-resize;\n\tz-index: 2;\n"])));
|
|
34
|
+
var WindowControllerRightBottom = styled(WindowController)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n\tposition: absolute;\n\twidth: 6px;\n\theight: 6px;\n\tright: 0;\n\tbottom: 0;\n\tcursor: nwse-resize;\n\tz-index: 2;\n"])));
|
|
35
35
|
var Window = observer(function (props) {
|
|
36
36
|
var window = props.window,
|
|
37
37
|
title = props.title,
|
|
38
38
|
children = props.children,
|
|
39
39
|
onFullscreenHandler = props.onFullscreenHandler,
|
|
40
|
-
onFocusHandler = props.onFocusHandler
|
|
40
|
+
onFocusHandler = props.onFocusHandler,
|
|
41
|
+
onShareWindow = props.onShareWindow;
|
|
41
42
|
var windowContainerRef = useRef(null);
|
|
42
43
|
useEffect(function () {
|
|
43
|
-
var _windowContainerRef$c;
|
|
44
|
+
var _windowContainerRef$c, _windowContainerRef$c2, _windowContainerRef$c3;
|
|
44
45
|
function stopWheel(e) {
|
|
45
46
|
e.stopPropagation();
|
|
46
47
|
}
|
|
48
|
+
function startTransition(e) {
|
|
49
|
+
e.stopPropagation();
|
|
50
|
+
if (e.target === e.currentTarget) {
|
|
51
|
+
runInAction(function () {
|
|
52
|
+
window.isTransition = true;
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
function stopTransition(e) {
|
|
57
|
+
e.stopPropagation();
|
|
58
|
+
if (e.target === e.currentTarget) {
|
|
59
|
+
runInAction(function () {
|
|
60
|
+
window.isTransition = false;
|
|
61
|
+
});
|
|
62
|
+
}
|
|
63
|
+
if (e.target === e.currentTarget && window.isClosed && e.propertyName === 'transform') {
|
|
64
|
+
var _window$onClosedHandl;
|
|
65
|
+
(_window$onClosedHandl = window.onClosedHandler) === null || _window$onClosedHandl === void 0 || _window$onClosedHandl.call(window, window.id);
|
|
66
|
+
}
|
|
67
|
+
}
|
|
47
68
|
(_windowContainerRef$c = windowContainerRef.current) === null || _windowContainerRef$c === void 0 || _windowContainerRef$c.addEventListener('wheel', stopWheel, {
|
|
48
69
|
passive: false
|
|
49
70
|
});
|
|
71
|
+
(_windowContainerRef$c2 = windowContainerRef.current) === null || _windowContainerRef$c2 === void 0 || _windowContainerRef$c2.addEventListener('transitionstart', startTransition, {
|
|
72
|
+
passive: false
|
|
73
|
+
});
|
|
74
|
+
(_windowContainerRef$c3 = windowContainerRef.current) === null || _windowContainerRef$c3 === void 0 || _windowContainerRef$c3.addEventListener('transitionend', stopTransition, {
|
|
75
|
+
passive: false
|
|
76
|
+
});
|
|
50
77
|
return function () {
|
|
51
|
-
var _windowContainerRef$
|
|
52
|
-
(_windowContainerRef$
|
|
78
|
+
var _windowContainerRef$c4, _windowContainerRef$c5, _windowContainerRef$c6;
|
|
79
|
+
(_windowContainerRef$c4 = windowContainerRef.current) === null || _windowContainerRef$c4 === void 0 || _windowContainerRef$c4.removeEventListener('wheel', stopWheel);
|
|
80
|
+
(_windowContainerRef$c5 = windowContainerRef.current) === null || _windowContainerRef$c5 === void 0 || _windowContainerRef$c5.removeEventListener('transitionstart', startTransition);
|
|
81
|
+
(_windowContainerRef$c6 = windowContainerRef.current) === null || _windowContainerRef$c6 === void 0 || _windowContainerRef$c6.removeEventListener('transitionend', stopTransition);
|
|
53
82
|
};
|
|
54
83
|
}, []);
|
|
55
84
|
|
|
@@ -59,18 +88,6 @@ var Window = observer(function (props) {
|
|
|
59
88
|
style: window.style,
|
|
60
89
|
isMinimize: !!window.isMinimize,
|
|
61
90
|
isFullscreen: !!window.fullscreen,
|
|
62
|
-
onTransitionEnd: function onTransitionEnd(e) {
|
|
63
|
-
e.stopPropagation();
|
|
64
|
-
if (e.target === e.currentTarget) {
|
|
65
|
-
runInAction(function () {
|
|
66
|
-
window.isTransition = false;
|
|
67
|
-
});
|
|
68
|
-
}
|
|
69
|
-
if (e.target === e.currentTarget && window.isClosed && e.nativeEvent.propertyName === 'transform') {
|
|
70
|
-
var _window$onClosedHandl;
|
|
71
|
-
(_window$onClosedHandl = window.onClosedHandler) === null || _window$onClosedHandl === void 0 || _window$onClosedHandl.call(window, window.id);
|
|
72
|
-
}
|
|
73
|
-
},
|
|
74
91
|
onDoubleClick: function onDoubleClick(e) {
|
|
75
92
|
e.stopPropagation();
|
|
76
93
|
},
|
|
@@ -126,6 +143,9 @@ var Window = observer(function (props) {
|
|
|
126
143
|
e.stopPropagation();
|
|
127
144
|
}
|
|
128
145
|
}, /*#__PURE__*/React.createElement(WindowOption, {
|
|
146
|
+
icon: /*#__PURE__*/React.createElement(ShareAltOutlined, null),
|
|
147
|
+
onClick: onShareWindow
|
|
148
|
+
}), /*#__PURE__*/React.createElement(WindowOption, {
|
|
129
149
|
icon: /*#__PURE__*/React.createElement(MinusOutlined, null),
|
|
130
150
|
onClick: function onClick() {
|
|
131
151
|
if (window.disabled) return;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { Transform } from '@dnd-kit/utilities';
|
|
2
2
|
import { CSSProperties } from 'react';
|
|
3
3
|
import { WindowControllerType } from './WindowController';
|
|
4
|
+
type WindowStatus = 'normal' | 'minimize' | 'fullscreen' | 'closed';
|
|
4
5
|
export default class WindowStore {
|
|
5
6
|
width: number;
|
|
6
7
|
height: number;
|
|
@@ -42,8 +43,11 @@ export default class WindowStore {
|
|
|
42
43
|
endControll(): void;
|
|
43
44
|
minimizeWindow(): void;
|
|
44
45
|
normalizeWindow(): void;
|
|
46
|
+
restoreWindow(): void;
|
|
45
47
|
closeWindow(): void;
|
|
46
48
|
focus(): void;
|
|
49
|
+
get status(): WindowStatus;
|
|
47
50
|
get style(): CSSProperties;
|
|
48
51
|
get info(): string;
|
|
49
52
|
}
|
|
53
|
+
export {};
|
|
@@ -55,6 +55,7 @@ var WindowStore = /*#__PURE__*/function () {
|
|
|
55
55
|
fullscreenPos: observable.struct,
|
|
56
56
|
minimizeWindow: action,
|
|
57
57
|
normalizeWindow: action,
|
|
58
|
+
restoreWindow: action,
|
|
58
59
|
closeWindow: action,
|
|
59
60
|
resetState: action,
|
|
60
61
|
focus: action,
|
|
@@ -69,14 +70,13 @@ var WindowStore = /*#__PURE__*/function () {
|
|
|
69
70
|
value: function fullscreenWindow(func) {
|
|
70
71
|
this.resetState();
|
|
71
72
|
this.fullscreen = true;
|
|
72
|
-
this.
|
|
73
|
+
this.focus();
|
|
73
74
|
func === null || func === void 0 || func();
|
|
74
75
|
}
|
|
75
76
|
}, {
|
|
76
77
|
key: "fullscreenExitWindow",
|
|
77
78
|
value: function fullscreenExitWindow() {
|
|
78
79
|
this.resetState();
|
|
79
|
-
this.isTransition = true;
|
|
80
80
|
this.fullscreen = false;
|
|
81
81
|
}
|
|
82
82
|
}, {
|
|
@@ -140,23 +140,27 @@ var WindowStore = /*#__PURE__*/function () {
|
|
|
140
140
|
key: "minimizeWindow",
|
|
141
141
|
value: function minimizeWindow() {
|
|
142
142
|
this.isMinimize = true;
|
|
143
|
-
this.fullscreen = false;
|
|
144
|
-
this.isTransition = true;
|
|
145
143
|
this.resetState();
|
|
146
144
|
}
|
|
147
145
|
}, {
|
|
148
146
|
key: "normalizeWindow",
|
|
149
147
|
value: function normalizeWindow() {
|
|
148
|
+
this.isMinimize = false;
|
|
149
|
+
this.resetState();
|
|
150
|
+
this.focus();
|
|
151
|
+
}
|
|
152
|
+
}, {
|
|
153
|
+
key: "restoreWindow",
|
|
154
|
+
value: function restoreWindow() {
|
|
150
155
|
this.isMinimize = false;
|
|
151
156
|
this.fullscreen = false;
|
|
152
|
-
this.isTransition = true;
|
|
153
157
|
this.resetState();
|
|
158
|
+
this.focus();
|
|
154
159
|
}
|
|
155
160
|
}, {
|
|
156
161
|
key: "closeWindow",
|
|
157
162
|
value: function closeWindow() {
|
|
158
163
|
this.isClosed = true;
|
|
159
|
-
this.isTransition = true;
|
|
160
164
|
this.resetState();
|
|
161
165
|
}
|
|
162
166
|
}, {
|
|
@@ -165,63 +169,79 @@ var WindowStore = /*#__PURE__*/function () {
|
|
|
165
169
|
this.zIndex++;
|
|
166
170
|
}
|
|
167
171
|
}, {
|
|
168
|
-
key: "
|
|
172
|
+
key: "status",
|
|
169
173
|
get: function get() {
|
|
170
174
|
if (this.isClosed) {
|
|
171
|
-
return
|
|
172
|
-
left: this.left + 'px',
|
|
173
|
-
top: this.top + 'px',
|
|
174
|
-
width: this.width + 'px',
|
|
175
|
-
height: this.height + 'px',
|
|
176
|
-
zIndex: this.zIndex,
|
|
177
|
-
transform: 'scale(0)',
|
|
178
|
-
transformOrigin: 'center center',
|
|
179
|
-
transition: 'all 0.3s ease-in-out'
|
|
180
|
-
};
|
|
175
|
+
return 'closed';
|
|
181
176
|
}
|
|
182
177
|
if (this.isMinimize && this.minimizePos) {
|
|
183
|
-
return
|
|
184
|
-
left: this.minimizePos.left + 'px',
|
|
185
|
-
top: this.minimizePos.top + 'px',
|
|
186
|
-
width: this.width + 'px',
|
|
187
|
-
height: this.width + 'px',
|
|
188
|
-
zIndex: this.zIndex,
|
|
189
|
-
transform: 'scale(0)',
|
|
190
|
-
transformOrigin: 'left top',
|
|
191
|
-
transition: 'all 0.3s ease-in-out'
|
|
192
|
-
};
|
|
178
|
+
return 'minimize';
|
|
193
179
|
}
|
|
194
180
|
if (this.fullscreen) {
|
|
195
|
-
return
|
|
196
|
-
left: this.fullscreenPos.left + 'px',
|
|
197
|
-
top: this.fullscreenPos.top + 'px',
|
|
198
|
-
width: this.fullscreenPos.width + 'px',
|
|
199
|
-
height: this.fullscreenPos.height + 'px',
|
|
200
|
-
zIndex: this.zIndex,
|
|
201
|
-
transform: 'none',
|
|
202
|
-
transition: 'all 0.3s ease-in-out'
|
|
203
|
-
};
|
|
181
|
+
return 'fullscreen';
|
|
204
182
|
}
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
183
|
+
return 'normal';
|
|
184
|
+
}
|
|
185
|
+
}, {
|
|
186
|
+
key: "style",
|
|
187
|
+
get: function get() {
|
|
188
|
+
switch (this.status) {
|
|
189
|
+
case 'closed':
|
|
190
|
+
return {
|
|
191
|
+
left: this.left + 'px',
|
|
192
|
+
top: this.top + 'px',
|
|
193
|
+
width: this.width + 'px',
|
|
194
|
+
height: this.height + 'px',
|
|
195
|
+
zIndex: this.zIndex,
|
|
196
|
+
transform: 'scale(0)',
|
|
197
|
+
transformOrigin: 'center center',
|
|
198
|
+
transition: 'all 0.3s ease-in-out'
|
|
199
|
+
};
|
|
200
|
+
case 'minimize':
|
|
201
|
+
return {
|
|
202
|
+
left: this.minimizePos.left + 'px',
|
|
203
|
+
top: this.minimizePos.top + 'px',
|
|
204
|
+
width: this.width + 'px',
|
|
205
|
+
height: this.width + 'px',
|
|
206
|
+
zIndex: this.zIndex,
|
|
207
|
+
transform: 'scale(0)',
|
|
208
|
+
transformOrigin: 'left top',
|
|
209
|
+
transition: 'all 0.3s ease-in-out'
|
|
210
|
+
};
|
|
211
|
+
case 'fullscreen':
|
|
212
|
+
return {
|
|
213
|
+
left: this.fullscreenPos.left + 'px',
|
|
214
|
+
top: this.fullscreenPos.top + 'px',
|
|
215
|
+
width: this.fullscreenPos.width + 'px',
|
|
216
|
+
height: this.fullscreenPos.height + 'px',
|
|
217
|
+
zIndex: this.zIndex,
|
|
218
|
+
transform: 'none',
|
|
219
|
+
transition: 'all 0.3s ease-in-out'
|
|
220
|
+
};
|
|
221
|
+
case 'normal':
|
|
222
|
+
default:
|
|
223
|
+
if (this.isMoving || this.isResizing) {
|
|
224
|
+
return {
|
|
225
|
+
left: this.left + 'px',
|
|
226
|
+
top: this.top + 'px',
|
|
227
|
+
width: this.width + 'px',
|
|
228
|
+
height: this.height + 'px',
|
|
229
|
+
zIndex: this.zIndex,
|
|
230
|
+
transform: 'none',
|
|
231
|
+
transition: 'none'
|
|
232
|
+
};
|
|
233
|
+
} else {
|
|
234
|
+
return {
|
|
235
|
+
left: this.left + 'px',
|
|
236
|
+
top: this.top + 'px',
|
|
237
|
+
width: this.width + 'px',
|
|
238
|
+
height: this.height + 'px',
|
|
239
|
+
zIndex: this.zIndex,
|
|
240
|
+
transform: 'none',
|
|
241
|
+
transition: 'all 0.3s ease-in-out'
|
|
242
|
+
};
|
|
243
|
+
}
|
|
215
244
|
}
|
|
216
|
-
return {
|
|
217
|
-
left: this.left + 'px',
|
|
218
|
-
top: this.top + 'px',
|
|
219
|
-
width: this.width + 'px',
|
|
220
|
-
height: this.height + 'px',
|
|
221
|
-
zIndex: this.zIndex,
|
|
222
|
-
transform: 'none',
|
|
223
|
-
transition: 'all 0.3s ease-in-out'
|
|
224
|
-
};
|
|
225
245
|
}
|
|
226
246
|
}, {
|
|
227
247
|
key: "info",
|
package/dist/Window/test.js
CHANGED
|
@@ -4,6 +4,7 @@ import React from 'react';
|
|
|
4
4
|
import { GlobalStyles } from "../__styles";
|
|
5
5
|
import Window from "./Window";
|
|
6
6
|
import { WindowStore } from "./index";
|
|
7
|
+
import { Button } from "../Button";
|
|
7
8
|
export default observer(function Test() {
|
|
8
9
|
var windowStore = useLocalObservable(function () {
|
|
9
10
|
return new WindowStore('jss');
|
|
@@ -15,7 +16,11 @@ export default observer(function Test() {
|
|
|
15
16
|
position: 'relative',
|
|
16
17
|
height: '1000px'
|
|
17
18
|
}
|
|
18
|
-
}, /*#__PURE__*/React.createElement(
|
|
19
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
20
|
+
onClick: function onClick() {
|
|
21
|
+
windowStore.normalizeWindow();
|
|
22
|
+
}
|
|
23
|
+
}, "\u6B63\u5E38\u5316"), /*#__PURE__*/React.createElement(Window, {
|
|
19
24
|
window: windowStore,
|
|
20
25
|
key: windowStore.id,
|
|
21
26
|
title: 'xixi'
|
|
@@ -24,5 +29,5 @@ export default observer(function Test() {
|
|
|
24
29
|
backgroundColor: 'pink',
|
|
25
30
|
width: '1000px'
|
|
26
31
|
}
|
|
27
|
-
}, "121asdjklfjikasdhujikfh awkldjnfhb qweuijfklasdbnhuifwoqnf jkhweuof jkhwuifhqwdh jknwjkd klfhwdujih fuoqwjn klnfkmsdhnajikfh jklasdkl jdklajkl jfklasdjkl jkldjiof1huihfklnsdjklf2", /*#__PURE__*/React.createElement("br", null), "asdjklfjasdklj kljasdkldjf iawhjio jkldjnsajhnfujihnfffffffffffffffffffffffffffffffffffffffffffffffffklasdnmkdlf djkafljkdlfjkl;asdf fjklasdjkl;fjdaskl;jfk;asdf asdjfkasdjkf;f asjfiko;djaskl;fjas fjikasdjfk;asd", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "djklasdjkl;jaksdjkl; askdjkl jaksdjk l;asd"))));
|
|
32
|
+
}, "\u7A97\u4F53\u72B6\u6001\uFF1A", windowStore.status, /*#__PURE__*/React.createElement("br", null), "\u7A97\u4F53\u662F\u5426\u7981\u64CD\u4F5C\uFF1A", windowStore.disabled ? 'disabled' : 'enabled', /*#__PURE__*/React.createElement("br", null), "121asdjklfjikasdhujikfh awkldjnfhb qweuijfklasdbnhuifwoqnf jkhweuof jkhwuifhqwdh jknwjkd klfhwdujih fuoqwjn klnfkmsdhnajikfh jklasdkl jdklajkl jfklasdjkl jkldjiof1huihfklnsdjklf2", /*#__PURE__*/React.createElement("br", null), "asdjklfjasdklj kljasdkldjf iawhjio jkldjnsajhnfujihnfffffffffffffffffffffffffffffffffffffffffffffffffklasdnmkdlf djkafljkdlfjkl;asdf fjklasdjkl;fjdaskl;jfk;asdf asdjfkasdjkf;f asjfiko;djaskl;fjas fjikasdjfk;asd", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "djklasdjkl;jaksdjkl; askdjkl jaksdjk l;asd"))));
|
|
28
33
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kep-platform/basic-component",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.12",
|
|
4
4
|
"description": "A react library developed with dumi",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -86,5 +86,5 @@
|
|
|
86
86
|
"authors": [
|
|
87
87
|
"less-step-jss 1599925910@qq.com"
|
|
88
88
|
],
|
|
89
|
-
"gitHead": "
|
|
89
|
+
"gitHead": "7783ce84a532de38c3ecb9d0691425dccf9d7545"
|
|
90
90
|
}
|