@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.
@@ -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", 800);
50
- _defineProperty(this, "height", 800);
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(parseFloat((1 / this.ratio).toFixed(1)), this.scale));
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
- left: this.transform.left + 'px',
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: 'left top'
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
- window.fullscreenPos.left = -viewPortStore.transform.left;
277
- window.fullscreenPos.top = -viewPortStore.transform.top;
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.scale;
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
  });
@@ -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(0, 0, 5);
38
+ return new ViewPortStore(600, 600, 5);
39
39
  });
40
40
  useEffect(function () {
41
41
  function setWidthHeight() {
@@ -4,6 +4,8 @@ export type WindowProps = {
4
4
  window: WindowStore;
5
5
  children: ReactNode;
6
6
  title: ReactNode;
7
+ onFullscreenHandler?: () => void;
8
+ onFocusHandler?: () => void;
7
9
  };
8
10
  declare const Window: ((props: WindowProps) => React.JSX.Element) & {
9
11
  displayName: string;
@@ -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
- return window.fullscreenWindow();
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, window.info, children)));
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
- } | null;
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", null);
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: 0,
27
- height: 0
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.37",
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.37",
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": "80925e92fb2de497863b5dd479f24a343e62ca38"
90
+ "gitHead": "8e28a8926ce994e43661454098fac1f15d7e9ead"
91
91
  }