@kep-platform/basic-component 0.0.39 → 0.0.40
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/ViewPort/ViewPort.d.ts +1 -52
- package/dist/ViewPort/ViewPort.js +9 -131
- package/dist/ViewPort/ViewPortStore.d.ts +52 -0
- package/dist/ViewPort/ViewPortStore.js +126 -0
- package/dist/ViewPort/index.d.ts +2 -1
- package/dist/ViewPort/index.js +2 -1
- package/dist/ViewPort/test.js +2 -1
- package/package.json +3 -3
@@ -3,64 +3,13 @@ import React, { HtmlHTMLAttributes, ReactNode } from 'react';
|
|
3
3
|
import { WindowStore } from '../Window';
|
4
4
|
import { WindowProps } from '../Window/Window';
|
5
5
|
import { WindowControllerType } from '../Window/WindowController';
|
6
|
+
import { ViewPortStore } from './ViewPortStore';
|
6
7
|
type ViewPortProps = {
|
7
8
|
children?: ReactNode;
|
8
9
|
viewPortStore: ViewPortStore;
|
9
10
|
onScale?: (left: number, top: number, scale: number, ratio: number) => void;
|
10
11
|
onScroll?: (left: number, top: number, scale: number, ratio: number) => void;
|
11
12
|
} & HtmlHTMLAttributes<HTMLDivElement>;
|
12
|
-
export declare class ViewPortStore {
|
13
|
-
transform: {
|
14
|
-
left: number;
|
15
|
-
top: number;
|
16
|
-
};
|
17
|
-
offset: {
|
18
|
-
x: number;
|
19
|
-
y: number;
|
20
|
-
};
|
21
|
-
scale: number;
|
22
|
-
width: number;
|
23
|
-
height: number;
|
24
|
-
ratio: number;
|
25
|
-
isMoving: boolean;
|
26
|
-
maxZIndex: number;
|
27
|
-
constructor(width?: number, height?: number, ratio?: number);
|
28
|
-
increaseScale(): void;
|
29
|
-
setScale(scale: number): void;
|
30
|
-
focus(left: number, top: number): void;
|
31
|
-
decreaseScale(): void;
|
32
|
-
move(transform: Transform): void;
|
33
|
-
endMove(): void;
|
34
|
-
get transformLimit(): {
|
35
|
-
left: {
|
36
|
-
max: number;
|
37
|
-
min: number;
|
38
|
-
};
|
39
|
-
top: {
|
40
|
-
max: number;
|
41
|
-
min: number;
|
42
|
-
};
|
43
|
-
};
|
44
|
-
formatedTransform(left: number, top: number): {
|
45
|
-
left: number;
|
46
|
-
top: number;
|
47
|
-
};
|
48
|
-
get formatedScale(): number;
|
49
|
-
get contentStyle(): {
|
50
|
-
transform: string;
|
51
|
-
width: string;
|
52
|
-
height: string;
|
53
|
-
transformOrigin: string;
|
54
|
-
backgroundColor: string;
|
55
|
-
transition: string;
|
56
|
-
};
|
57
|
-
get containerStyle(): {
|
58
|
-
width: string;
|
59
|
-
height: string;
|
60
|
-
overflow: string;
|
61
|
-
};
|
62
|
-
get info(): string;
|
63
|
-
}
|
64
13
|
declare function ViewPort(props: ViewPortProps): React.JSX.Element;
|
65
14
|
declare namespace ViewPort {
|
66
15
|
var Window: React.FunctionComponent<WindowProps & {
|
@@ -1,6 +1,9 @@
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
1
2
|
var _excluded = ["children", "viewPortStore"],
|
2
3
|
_excluded2 = ["viewPortStore", "window"];
|
3
|
-
function
|
4
|
+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
5
|
+
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
|
6
|
+
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
4
7
|
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
5
8
|
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
6
9
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
@@ -8,23 +11,19 @@ function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) ===
|
|
8
11
|
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
9
12
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
10
13
|
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
11
|
-
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; }
|
12
|
-
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; }
|
13
|
-
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); }
|
14
|
-
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
15
|
-
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
|
16
|
-
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
17
14
|
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; }
|
18
15
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
19
16
|
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); }
|
17
|
+
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; }
|
18
|
+
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; }
|
19
|
+
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); }
|
20
20
|
import { DndContext, useDraggable } from '@dnd-kit/core';
|
21
|
-
import {
|
21
|
+
import { makeObservable, observable, override, runInAction } from 'mobx';
|
22
22
|
import { observer } from 'mobx-react-lite';
|
23
23
|
import React, { useEffect, useRef } from 'react';
|
24
24
|
import styled from 'styled-components';
|
25
25
|
import { WindowStore } from "../Window";
|
26
26
|
import { default as Window } from "../Window/Window";
|
27
|
-
import { GlobalStyles } from "../__styles";
|
28
27
|
var Container = styled.div.withConfig({
|
29
28
|
displayName: "Container",
|
30
29
|
componentId: "basic-component-347b__sc-1qpmpop-0"
|
@@ -33,125 +32,6 @@ var Content = styled.div.withConfig({
|
|
33
32
|
displayName: "Content",
|
34
33
|
componentId: "basic-component-347b__sc-1qpmpop-1"
|
35
34
|
})(["position:absolute;"]);
|
36
|
-
export var ViewPortStore = /*#__PURE__*/function () {
|
37
|
-
function ViewPortStore(width, height, ratio) {
|
38
|
-
_classCallCheck(this, ViewPortStore);
|
39
|
-
_defineProperty(this, "transform", {
|
40
|
-
left: 0,
|
41
|
-
top: 0
|
42
|
-
});
|
43
|
-
_defineProperty(this, "offset", {
|
44
|
-
x: 0,
|
45
|
-
y: 0
|
46
|
-
});
|
47
|
-
_defineProperty(this, "scale", 1);
|
48
|
-
_defineProperty(this, "width", 600);
|
49
|
-
_defineProperty(this, "height", 600);
|
50
|
-
_defineProperty(this, "ratio", 5);
|
51
|
-
//缩放比例
|
52
|
-
_defineProperty(this, "isMoving", false);
|
53
|
-
_defineProperty(this, "maxZIndex", 1);
|
54
|
-
if (ratio) this.ratio = ratio;
|
55
|
-
if (width) this.width = width;
|
56
|
-
if (height) this.height = height;
|
57
|
-
makeAutoObservable(this);
|
58
|
-
}
|
59
|
-
_createClass(ViewPortStore, [{
|
60
|
-
key: "increaseScale",
|
61
|
-
value: function increaseScale() {
|
62
|
-
if (this.scale < 1) this.scale += 0.03125;else this.scale = 1;
|
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
|
-
}
|
78
|
-
}, {
|
79
|
-
key: "decreaseScale",
|
80
|
-
value: function decreaseScale() {
|
81
|
-
if (this.scale > parseFloat((1 / this.ratio).toFixed(1))) this.scale -= 0.03125;
|
82
|
-
}
|
83
|
-
}, {
|
84
|
-
key: "move",
|
85
|
-
value: function move(transform) {
|
86
|
-
this.isMoving = true;
|
87
|
-
this.transform = this.formatedTransform(transform.x - this.offset.x + this.transform.left, transform.y - this.offset.y + this.transform.top);
|
88
|
-
this.offset.x = transform.x;
|
89
|
-
this.offset.y = transform.y;
|
90
|
-
}
|
91
|
-
}, {
|
92
|
-
key: "endMove",
|
93
|
-
value: function endMove() {
|
94
|
-
this.offset.x = 0;
|
95
|
-
this.offset.y = 0;
|
96
|
-
this.isMoving = false;
|
97
|
-
}
|
98
|
-
}, {
|
99
|
-
key: "transformLimit",
|
100
|
-
get: function get() {
|
101
|
-
return {
|
102
|
-
left: {
|
103
|
-
max: 0,
|
104
|
-
min: this.width - this.width * this.ratio * this.formatedScale
|
105
|
-
},
|
106
|
-
top: {
|
107
|
-
max: 0,
|
108
|
-
min: this.height - this.height * this.ratio * this.formatedScale
|
109
|
-
}
|
110
|
-
};
|
111
|
-
}
|
112
|
-
}, {
|
113
|
-
key: "formatedTransform",
|
114
|
-
value: function formatedTransform(left, top) {
|
115
|
-
return {
|
116
|
-
left: Math.max(this.transformLimit.left.min, Math.min(left, this.transformLimit.left.max)),
|
117
|
-
top: Math.max(this.transformLimit.top.min, Math.min(top, this.transformLimit.top.max))
|
118
|
-
};
|
119
|
-
}
|
120
|
-
}, {
|
121
|
-
key: "formatedScale",
|
122
|
-
get: function get() {
|
123
|
-
return Math.min(1, Math.max(1 / this.ratio, this.scale));
|
124
|
-
}
|
125
|
-
}, {
|
126
|
-
key: "contentStyle",
|
127
|
-
get: function get() {
|
128
|
-
var transform = this.formatedTransform(this.transform.left, this.transform.top);
|
129
|
-
return {
|
130
|
-
transform: "translate(".concat(transform.left, "px,").concat(transform.top, "px) scale(").concat(this.formatedScale, ")"),
|
131
|
-
width: this.width * this.ratio + 'px',
|
132
|
-
height: this.height * this.ratio + 'px',
|
133
|
-
transformOrigin: "0 0",
|
134
|
-
backgroundColor: 'pink',
|
135
|
-
transition: this.isMoving ? 'none' : 'all 0.5s'
|
136
|
-
};
|
137
|
-
}
|
138
|
-
}, {
|
139
|
-
key: "containerStyle",
|
140
|
-
get: function get() {
|
141
|
-
return {
|
142
|
-
width: this.width + 'px',
|
143
|
-
height: this.height + 'px',
|
144
|
-
overflow: 'hidden'
|
145
|
-
};
|
146
|
-
}
|
147
|
-
}, {
|
148
|
-
key: "info",
|
149
|
-
get: function get() {
|
150
|
-
return JSON.stringify(this.formatedTransform(this.transform.left, this.transform.top), null, 4);
|
151
|
-
}
|
152
|
-
}]);
|
153
|
-
return ViewPortStore;
|
154
|
-
}();
|
155
35
|
var ViewPortEntity = observer(function (props) {
|
156
36
|
var children = props.children,
|
157
37
|
viewPortStore = props.viewPortStore,
|
@@ -221,9 +101,7 @@ export default function ViewPort(props) {
|
|
221
101
|
var children = props.children,
|
222
102
|
viewPortStore = props.viewPortStore,
|
223
103
|
rest = _objectWithoutProperties(props, _excluded);
|
224
|
-
return /*#__PURE__*/React.createElement(DndContext, null, /*#__PURE__*/React.createElement(
|
225
|
-
$css: []
|
226
|
-
}), /*#__PURE__*/React.createElement(ViewPortEntity, _extends({
|
104
|
+
return /*#__PURE__*/React.createElement(DndContext, null, /*#__PURE__*/React.createElement(ViewPortEntity, _extends({
|
227
105
|
viewPortStore: viewPortStore
|
228
106
|
}, rest), children));
|
229
107
|
}
|
@@ -0,0 +1,52 @@
|
|
1
|
+
import { Transform } from '@dnd-kit/utilities';
|
2
|
+
export declare class ViewPortStore {
|
3
|
+
transform: {
|
4
|
+
left: number;
|
5
|
+
top: number;
|
6
|
+
};
|
7
|
+
offset: {
|
8
|
+
x: number;
|
9
|
+
y: number;
|
10
|
+
};
|
11
|
+
scale: number;
|
12
|
+
width: number;
|
13
|
+
height: number;
|
14
|
+
ratio: number;
|
15
|
+
isMoving: boolean;
|
16
|
+
maxZIndex: number;
|
17
|
+
constructor(width?: number, height?: number, ratio?: number);
|
18
|
+
increaseScale(): void;
|
19
|
+
setScale(scale: number): void;
|
20
|
+
focus(left: number, top: number): void;
|
21
|
+
decreaseScale(): void;
|
22
|
+
move(transform: Transform): void;
|
23
|
+
endMove(): void;
|
24
|
+
get transformLimit(): {
|
25
|
+
left: {
|
26
|
+
max: number;
|
27
|
+
min: number;
|
28
|
+
};
|
29
|
+
top: {
|
30
|
+
max: number;
|
31
|
+
min: number;
|
32
|
+
};
|
33
|
+
};
|
34
|
+
formatedTransform(left: number, top: number): {
|
35
|
+
left: number;
|
36
|
+
top: number;
|
37
|
+
};
|
38
|
+
get formatedScale(): number;
|
39
|
+
get contentStyle(): {
|
40
|
+
transform: string;
|
41
|
+
width: string;
|
42
|
+
height: string;
|
43
|
+
transformOrigin: string;
|
44
|
+
transition: string;
|
45
|
+
};
|
46
|
+
get containerStyle(): {
|
47
|
+
width: string;
|
48
|
+
height: string;
|
49
|
+
overflow: string;
|
50
|
+
};
|
51
|
+
get info(): string;
|
52
|
+
}
|
@@ -0,0 +1,126 @@
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
2
|
+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
3
|
+
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
|
4
|
+
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
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
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
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';
|
9
|
+
export var ViewPortStore = /*#__PURE__*/function () {
|
10
|
+
function ViewPortStore(width, height, ratio) {
|
11
|
+
_classCallCheck(this, ViewPortStore);
|
12
|
+
_defineProperty(this, "transform", {
|
13
|
+
left: 0,
|
14
|
+
top: 0
|
15
|
+
});
|
16
|
+
_defineProperty(this, "offset", {
|
17
|
+
x: 0,
|
18
|
+
y: 0
|
19
|
+
});
|
20
|
+
_defineProperty(this, "scale", 1);
|
21
|
+
_defineProperty(this, "width", 600);
|
22
|
+
_defineProperty(this, "height", 600);
|
23
|
+
_defineProperty(this, "ratio", 5);
|
24
|
+
//缩放比例
|
25
|
+
_defineProperty(this, "isMoving", false);
|
26
|
+
_defineProperty(this, "maxZIndex", 1);
|
27
|
+
if (ratio) this.ratio = ratio;
|
28
|
+
if (width) this.width = width;
|
29
|
+
if (height) this.height = height;
|
30
|
+
makeAutoObservable(this);
|
31
|
+
}
|
32
|
+
_createClass(ViewPortStore, [{
|
33
|
+
key: "increaseScale",
|
34
|
+
value: function increaseScale() {
|
35
|
+
if (this.scale < 1) this.scale += 0.03125;else this.scale = 1;
|
36
|
+
}
|
37
|
+
}, {
|
38
|
+
key: "setScale",
|
39
|
+
value: function setScale(scale) {
|
40
|
+
this.scale = scale;
|
41
|
+
}
|
42
|
+
}, {
|
43
|
+
key: "focus",
|
44
|
+
value: function focus(left, top) {
|
45
|
+
this.scale = 0.8;
|
46
|
+
this.transform = {
|
47
|
+
left: (1 - this.ratio) * left,
|
48
|
+
top: (1 - this.ratio) * top
|
49
|
+
};
|
50
|
+
}
|
51
|
+
}, {
|
52
|
+
key: "decreaseScale",
|
53
|
+
value: function decreaseScale() {
|
54
|
+
if (this.scale > parseFloat((1 / this.ratio).toFixed(1))) this.scale -= 0.03125;
|
55
|
+
}
|
56
|
+
}, {
|
57
|
+
key: "move",
|
58
|
+
value: function move(transform) {
|
59
|
+
this.isMoving = true;
|
60
|
+
this.transform = this.formatedTransform(transform.x - this.offset.x + this.transform.left, transform.y - this.offset.y + this.transform.top);
|
61
|
+
this.offset.x = transform.x;
|
62
|
+
this.offset.y = transform.y;
|
63
|
+
}
|
64
|
+
}, {
|
65
|
+
key: "endMove",
|
66
|
+
value: function endMove() {
|
67
|
+
this.offset.x = 0;
|
68
|
+
this.offset.y = 0;
|
69
|
+
this.isMoving = false;
|
70
|
+
}
|
71
|
+
}, {
|
72
|
+
key: "transformLimit",
|
73
|
+
get: function get() {
|
74
|
+
return {
|
75
|
+
left: {
|
76
|
+
max: 0,
|
77
|
+
min: this.width - this.width * this.ratio * this.formatedScale
|
78
|
+
},
|
79
|
+
top: {
|
80
|
+
max: 0,
|
81
|
+
min: this.height - this.height * this.ratio * this.formatedScale
|
82
|
+
}
|
83
|
+
};
|
84
|
+
}
|
85
|
+
}, {
|
86
|
+
key: "formatedTransform",
|
87
|
+
value: function formatedTransform(left, top) {
|
88
|
+
return {
|
89
|
+
left: Math.max(this.transformLimit.left.min, Math.min(left, this.transformLimit.left.max)),
|
90
|
+
top: Math.max(this.transformLimit.top.min, Math.min(top, this.transformLimit.top.max))
|
91
|
+
};
|
92
|
+
}
|
93
|
+
}, {
|
94
|
+
key: "formatedScale",
|
95
|
+
get: function get() {
|
96
|
+
return Math.min(1, Math.max(1 / this.ratio, this.scale));
|
97
|
+
}
|
98
|
+
}, {
|
99
|
+
key: "contentStyle",
|
100
|
+
get: function get() {
|
101
|
+
var transform = this.formatedTransform(this.transform.left, this.transform.top);
|
102
|
+
return {
|
103
|
+
transform: "translate(".concat(transform.left, "px,").concat(transform.top, "px) scale(").concat(this.formatedScale, ")"),
|
104
|
+
width: this.width * this.ratio + 'px',
|
105
|
+
height: this.height * this.ratio + 'px',
|
106
|
+
transformOrigin: 'left top',
|
107
|
+
transition: this.isMoving ? 'none' : 'all 0.5s'
|
108
|
+
};
|
109
|
+
}
|
110
|
+
}, {
|
111
|
+
key: "containerStyle",
|
112
|
+
get: function get() {
|
113
|
+
return {
|
114
|
+
width: this.width + 'px',
|
115
|
+
height: this.height + 'px',
|
116
|
+
overflow: 'hidden'
|
117
|
+
};
|
118
|
+
}
|
119
|
+
}, {
|
120
|
+
key: "info",
|
121
|
+
get: function get() {
|
122
|
+
return JSON.stringify(this.formatedTransform(this.transform.left, this.transform.top), null, 4);
|
123
|
+
}
|
124
|
+
}]);
|
125
|
+
return ViewPortStore;
|
126
|
+
}();
|
package/dist/ViewPort/index.d.ts
CHANGED
@@ -1 +1,2 @@
|
|
1
|
-
export { default as ViewPort
|
1
|
+
export { default as ViewPort } from './ViewPort';
|
2
|
+
export { ViewPortStore } from './ViewPortStore';
|
package/dist/ViewPort/index.js
CHANGED
@@ -1 +1,2 @@
|
|
1
|
-
export { default as ViewPort
|
1
|
+
export { default as ViewPort } from "./ViewPort";
|
2
|
+
export { ViewPortStore } from "./ViewPortStore";
|
package/dist/ViewPort/test.js
CHANGED
@@ -8,7 +8,8 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
|
|
8
8
|
import { makeAutoObservable, runInAction } from 'mobx';
|
9
9
|
import { observer, useLocalObservable } from 'mobx-react-lite';
|
10
10
|
import React, { useEffect } from 'react';
|
11
|
-
import ViewPort, {
|
11
|
+
import ViewPort, { ViewPortWindowStore } from "./ViewPort";
|
12
|
+
import { ViewPortStore } from "./ViewPortStore";
|
12
13
|
var WindowManager = /*#__PURE__*/function () {
|
13
14
|
function WindowManager() {
|
14
15
|
_classCallCheck(this, WindowManager);
|
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.40",
|
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.40",
|
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": "6bffe69d00a564159af57dba5e0922073da85a3c"
|
91
91
|
}
|