@kep-platform/basic-component 0.0.40 → 0.0.42

package/dist/ViewPort/Ripple.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+type RippleType = {
+    id: number;
+    left: number;
+    top: number;
+};
+export declare const Ripple: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare class RippleManagerStore {
+    list: RippleType[];
+    constructor();
+    clearList(): void;
+    addRipple(left: number, top: number): void;
+    get rippleInfo(): React.JSX.Element[];
+}
+export {};

package/dist/ViewPort/Ripple.js

@@ -0,0 +1,56 @@
+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); }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+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); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+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); }
+import { makeAutoObservable } from 'mobx';
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+var rippleAnimation = keyframes(["from{transform:scale(1);}to{transform:scale(4);opacity:0;}"]);
+export var Ripple = styled.div.withConfig({
+  displayName: "Ripple",
+  componentId: "basic-component-347b__sc-zqrqyo-0"
+})(["position:absolute;border-radius:50%;width:10px;height:10px;background-color:#fff0;& > div{position:absolute;left:0;top:0;width:10px;height:10px;background-color:#fff;border-radius:50%;margin-left:-5px;margin-top:-5px;transform:scale(0);animation:", " 500ms linear;}& .first{}& .second{animation-delay:150ms;}"], rippleAnimation);
+export var RippleManagerStore = /*#__PURE__*/function () {
+  function RippleManagerStore() {
+    _classCallCheck(this, RippleManagerStore);
+    _defineProperty(this, "list", []);
+    makeAutoObservable(this);
+  }
+  _createClass(RippleManagerStore, [{
+    key: "clearList",
+    value: function clearList() {
+      this.list = [];
+    }
+  }, {
+    key: "addRipple",
+    value: function addRipple(left, top) {
+      this.list.push({
+        id: new Date().getTime(),
+        left: left,
+        top: top
+      });
+    }
+  }, {
+    key: "rippleInfo",
+    get: function get() {
+      return this.list.map(function (ripple) {
+        return /*#__PURE__*/React.createElement(Ripple, {
+          key: ripple.id,
+          style: {
+            left: ripple.left,
+            top: ripple.top,
+            zIndex: 10
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "first"
+        }), /*#__PURE__*/React.createElement("div", {
+          className: "second"
+        }));
+      });
+    }
+  }]);
+  return RippleManagerStore;
+}();

package/dist/ViewPort/ViewPort.d.ts

@@ -1,8 +1,4 @@
-import { Transform } from '@dnd-kit/utilities';
 import React, { HtmlHTMLAttributes, ReactNode } from 'react';
-import { WindowStore } from '../Window';
-import { WindowProps } from '../Window/Window';
-import { WindowControllerType } from '../Window/WindowController';
 import { ViewPortStore } from './ViewPortStore';
 type ViewPortProps = {
     children?: ReactNode;
@@ -12,46 +8,9 @@ type ViewPortProps = {
 } & HtmlHTMLAttributes<HTMLDivElement>;
 declare function ViewPort(props: ViewPortProps): React.JSX.Element;
 declare namespace ViewPort {
-    var Window: React.FunctionComponent<WindowProps & {
+    var Window: React.FunctionComponent<import("../Window/Window").WindowProps & {
         viewPortStore: ViewPortStore;
-        window: ViewPortWindowStore;
+        window: import("./ViewPortWindow").ViewPortWindowStore;
     }>;
 }
 export default ViewPort;
-export declare class ViewPortWindowStore extends WindowStore {
-    scale: number;
-    get style(): {
-        left: string;
-        top: string;
-        width: string;
-        height: string;
-        zIndex: number;
-        transform: string;
-        transition: string;
-        transformOrigin?: undefined;
-    } | {
-        left: string;
-        top: string;
-        width: number;
-        height: number;
-        zIndex: number;
-        transform: string;
-        transition: string;
-        transformOrigin?: undefined;
-    } | {
-        left: string;
-        top: string;
-        width: string;
-        height: string;
-        zIndex: number;
-        transform: string;
-        transformOrigin: string;
-        transition: string;
-    };
-    calculateTransform(transform: Transform): {
-        x: number;
-        y: number;
-    };
-    controll(transform: Transform, type: WindowControllerType): void;
-    constructor(id: string, onClosedHandler?: (id: string) => void);
-}

package/dist/ViewPort/ViewPort.js

@@ -1,29 +1,14 @@
-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); }
-var _excluded = ["children", "viewPortStore"],
-  _excluded2 = ["viewPortStore", "window"];
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-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); } }
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-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); }
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-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); }; }
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-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; } }
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-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; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
-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); }
+var _excluded = ["children", "viewPortStore", "onScroll", "onScale"],
+  _excluded2 = ["children", "viewPortStore"];
+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); }
 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; }
 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; }
-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); }
 import { DndContext, useDraggable } from '@dnd-kit/core';
-import { makeObservable, observable, override, runInAction } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import React, { useEffect, useRef } from 'react';
 import styled from 'styled-components';
-import { WindowStore } from "../Window";
-import { default as Window } from "../Window/Window";
+import { RippleManagerStore } from "./Ripple";
+import { ViewPortWindow } from "./ViewPortWindow";
 var Container = styled.div.withConfig({
   displayName: "Container",
   componentId: "basic-component-347b__sc-1qpmpop-0"
@@ -32,11 +17,13 @@ var Content = styled.div.withConfig({
   displayName: "Content",
   componentId: "basic-component-347b__sc-1qpmpop-1"
 })(["position:absolute;"]);
+var rippleManagerStore = new RippleManagerStore();
 var ViewPortEntity = observer(function (props) {
   var children = props.children,
     viewPortStore = props.viewPortStore,
     onScroll = props.onScroll,
-    onScale = props.onScale;
+    onScale = props.onScale,
+    rest = _objectWithoutProperties(props, _excluded);
   var _useDraggable = useDraggable({
       id: 'ViewPortEntity'
     }),
@@ -46,6 +33,17 @@ var ViewPortEntity = observer(function (props) {
     setActivatorNodeRef = _useDraggable.setActivatorNodeRef,
     transform = _useDraggable.transform;
   var _ref = useRef(null);
+  var createRipple = function createRipple(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    var rect = event.currentTarget.getBoundingClientRect();
+    var left = event.clientX - rect.left;
+    var top = event.clientY - rect.top;
+    rippleManagerStore.addRipple(left, top);
+    setTimeout(function () {
+      rippleManagerStore.clearList();
+    }, 30000);
+  };
   useEffect(function () {
     if (transform) {
       viewPortStore.move(transform);
@@ -74,8 +72,9 @@ var ViewPortEntity = observer(function (props) {
       (_ref$current2 = _ref.current) === null || _ref$current2 === void 0 || _ref$current2.removeEventListener('wheel', scaleHandler);
     };
   }, []);
-  return /*#__PURE__*/React.createElement(Container, {
+  return /*#__PURE__*/React.createElement(Container, _extends({
     style: viewPortStore.containerStyle,
+    onPointerDown: createRipple,
     onDoubleClick: function onDoubleClick(e) {
       var container = e.currentTarget;
       var _container$getBoundin = container.getBoundingClientRect(),
@@ -83,11 +82,11 @@ var ViewPortEntity = observer(function (props) {
         top = _container$getBoundin.top;
       var offsetLeft = e.clientX - left;
       var offsetTop = e.clientY - top;
-      if (viewPortStore.formatedScale > 0.5) {
-        viewPortStore.setScale(1 / viewPortStore.ratio);
+      if (viewPortStore.scale === 1) {
+        viewPortStore.unfocus();
       } else viewPortStore.focus(offsetLeft, offsetTop);
     }
-  }, /*#__PURE__*/React.createElement(Content, _extends({
+  }, rest), rippleManagerStore.rippleInfo, /*#__PURE__*/React.createElement(Content, _extends({
     ref: function ref(dom) {
       _ref.current = dom;
       setNodeRef(_ref.current);
@@ -100,147 +99,9 @@ var ViewPortEntity = observer(function (props) {
 export default function ViewPort(props) {
   var children = props.children,
     viewPortStore = props.viewPortStore,
-    rest = _objectWithoutProperties(props, _excluded);
+    rest = _objectWithoutProperties(props, _excluded2);
   return /*#__PURE__*/React.createElement(DndContext, null, /*#__PURE__*/React.createElement(ViewPortEntity, _extends({
     viewPortStore: viewPortStore
   }, rest), children));
 }
-export var ViewPortWindowStore = /*#__PURE__*/function (_WindowStore) {
-  _inherits(ViewPortWindowStore, _WindowStore);
-  var _super = _createSuper(ViewPortWindowStore);
-  function ViewPortWindowStore(id, onClosedHandler) {
-    var _this;
-    _classCallCheck(this, ViewPortWindowStore);
-    _this = _super.call(this, id, onClosedHandler);
-    _defineProperty(_assertThisInitialized(_this), "scale", 1);
-    makeObservable(_assertThisInitialized(_this), {
-      style: override,
-      scale: observable,
-      controll: override
-    });
-    return _this;
-  }
-  _createClass(ViewPortWindowStore, [{
-    key: "style",
-    get: function get() {
-      if (this.isClosed) {
-        return {
-          left: this.left + 'px',
-          top: this.top + 'px',
-          width: this.width + 'px',
-          height: this.height + 'px',
-          zIndex: this.zIndex,
-          transform: 'scale(0)',
-          transition: 'all 0.5s ease-out'
-        };
-      }
-      if (this.isMinimize && this.minimizePos) {
-        return {
-          left: this.minimizePos.left + 'px',
-          top: this.minimizePos.top + 'px',
-          width: 0,
-          height: 0,
-          zIndex: this.zIndex,
-          transform: 'scale(0)',
-          transition: 'all 0.5s ease-out'
-        };
-      }
-      if (this.fullscreen) {
-        return {
-          left: this.fullscreenPos.left / this.scale + 'px',
-          top: this.fullscreenPos.top / this.scale + 'px',
-          width: this.fullscreenPos.width + 'px',
-          height: this.fullscreenPos.height + 'px',
-          zIndex: this.zIndex,
-          transform: "scale(".concat(1 / this.scale, ") "),
-          transformOrigin: 'left top',
-          transition: 'width height 0.5s ease-out'
-        };
-      }
-      if (this.isMoving || this.isResizing) {
-        return {
-          left: this.left + 'px',
-          top: this.top + 'px',
-          width: this.width + 'px',
-          height: this.height + 'px',
-          zIndex: this.zIndex,
-          transform: 'none',
-          transition: 'none'
-        };
-      }
-      return {
-        left: this.left + 'px',
-        top: this.top + 'px',
-        width: this.width + 'px',
-        height: this.height + 'px',
-        zIndex: this.zIndex,
-        transform: 'none',
-        transition: 'all 0.5s ease-out'
-      };
-    }
-  }, {
-    key: "calculateTransform",
-    value: function calculateTransform(transform) {
-      var _this$transform, _this$transform2;
-      return {
-        x: (transform.x - (((_this$transform = this.transform) === null || _this$transform === void 0 ? void 0 : _this$transform.x) || 0)) / this.scale,
-        y: (transform.y - (((_this$transform2 = this.transform) === null || _this$transform2 === void 0 ? void 0 : _this$transform2.y) || 0)) / this.scale
-      };
-    }
-  }, {
-    key: "controll",
-    value: function controll(transform, type) {
-      var offsetTransform = this.calculateTransform(transform);
-      if (type === 'move') {
-        this.isMoving = true;
-        this.isResizing = false;
-      } else {
-        this.isMoving = false;
-        this.isResizing = true;
-      }
-      if (type.includes('left')) {
-        this.left = Math.round(this.left + offsetTransform.x);
-        this.width = Math.round(this.width - offsetTransform.x);
-      }
-      if (type.includes('right')) {
-        this.width = Math.round(this.width + offsetTransform.x);
-      }
-      if (type.includes('top')) {
-        this.top = Math.round(this.top + offsetTransform.y);
-        this.height = Math.round(this.height - offsetTransform.y);
-      }
-      if (type.includes('bottom')) {
-        this.height = Math.round(this.height + offsetTransform.y);
-      }
-      if (type.includes('move')) {
-        this.left = Math.round(this.left + offsetTransform.x);
-        this.top = Math.round(this.top + offsetTransform.y);
-      }
-      this.transform = transform;
-    }
-  }]);
-  return ViewPortWindowStore;
-}(WindowStore);
-ViewPort.Window = observer(function ViewPortWindow(props) {
-  var viewPortStore = props.viewPortStore,
-    window = props.window,
-    rest = _objectWithoutProperties(props, _excluded2);
-  useEffect(function () {
-    runInAction(function () {
-      var transform = viewPortStore.formatedTransform(viewPortStore.transform.left, viewPortStore.transform.top);
-      window.fullscreenPos.left = -transform.left;
-      window.fullscreenPos.top = -transform.top;
-      window.fullscreenPos.width = viewPortStore.width;
-      window.fullscreenPos.height = viewPortStore.height;
-      window.scale = viewPortStore.formatedScale;
-    });
-  }, [viewPortStore.transform.left, viewPortStore.transform.top, viewPortStore.scale, viewPortStore.ratio, viewPortStore.width, viewPortStore.height]);
-  return /*#__PURE__*/React.createElement(Window, _extends({
-    window: window
-  }, rest, {
-    onFocusHandler: function onFocusHandler() {
-      viewPortStore.maxZIndex++;
-      window.zIndex = viewPortStore.maxZIndex;
-    }
-  }));
-});
+ViewPort.Window = ViewPortWindow;

package/dist/ViewPort/ViewPortStore.d.ts

@@ -1,4 +1,5 @@
 import { Transform } from '@dnd-kit/utilities';
+import { CSSProperties } from 'react';
 export declare class ViewPortStore {
     transform: {
         left: number;
@@ -15,38 +16,20 @@ export declare class ViewPortStore {
     isMoving: boolean;
     maxZIndex: number;
     constructor(width?: number, height?: number, ratio?: number);
+    get scaleStep(): number;
     increaseScale(): void;
-    setScale(scale: number): void;
-    focus(left: number, top: number): void;
     decreaseScale(): void;
+    private validScale;
+    private setScale;
+    private setTransform;
+    get offsetLeft(): number;
+    get offsetTop(): number;
+    private formatedTransform;
+    focus(left: number, top: number): void;
+    unfocus(): void;
     move(transform: Transform): void;
     endMove(): void;
-    get transformLimit(): {
-        left: {
-            max: number;
-            min: number;
-        };
-        top: {
-            max: number;
-            min: number;
-        };
-    };
-    formatedTransform(left: number, top: number): {
-        left: number;
-        top: number;
-    };
-    get formatedScale(): number;
-    get contentStyle(): {
-        transform: string;
-        width: string;
-        height: string;
-        transformOrigin: string;
-        transition: string;
-    };
-    get containerStyle(): {
-        width: string;
-        height: string;
-        overflow: string;
-    };
+    get contentStyle(): CSSProperties;
+    get containerStyle(): CSSProperties;
     get info(): string;
 }

package/dist/ViewPort/ViewPortStore.js

@@ -30,34 +30,87 @@ export var ViewPortStore = /*#__PURE__*/function () {
     makeAutoObservable(this);
   }
   _createClass(ViewPortStore, [{
+    key: "scaleStep",
+    get: function get() {
+      return 1 / this.ratio * 0.125;
+    }
+  }, {
     key: "increaseScale",
     value: function increaseScale() {
-      if (this.scale < 1) this.scale += 0.03125;else this.scale = 1;
+      this.setScale(this.scale + this.scaleStep);
+      this.setTransform(this.transform.left, this.transform.top);
+    }
+  }, {
+    key: "decreaseScale",
+    value: function decreaseScale() {
+      this.setScale(this.scale - this.scaleStep);
+      this.setTransform(this.transform.left, this.transform.top);
+    }
+  }, {
+    key: "validScale",
+    value: function validScale(scale) {
+      return Math.min(1, Math.max(1 / this.ratio, scale));
     }
   }, {
     key: "setScale",
     value: function setScale(scale) {
-      this.scale = scale;
+      this.scale = this.validScale(scale);
+    }
+  }, {
+    key: "setTransform",
+    value: function setTransform(left, top) {
+      this.transform = this.formatedTransform(left, top);
+    }
+
+    /* 这个函数是获取left偏移量 */
+  }, {
+    key: "offsetLeft",
+    get: function get() {
+      return (this.width * this.ratio * this.scale - this.width) / 2;
+    }
+    /* 获取top偏移量 */
+  }, {
+    key: "offsetTop",
+    get: function get() {
+      return (this.height * this.ratio * this.scale - this.height) / 2;
+    }
+  }, {
+    key: "formatedTransform",
+    value: function formatedTransform(left, top) {
+      var areaLimit = {
+        left: {
+          min: -this.offsetLeft,
+          max: this.offsetLeft
+        },
+        top: {
+          min: -this.offsetTop,
+          max: this.offsetTop
+        }
+      };
+      return {
+        left: Math.max(areaLimit.left.min, Math.min(left, areaLimit.left.max)),
+        top: Math.max(areaLimit.top.min, Math.min(top, areaLimit.top.max))
+      };
     }
   }, {
     key: "focus",
     value: function focus(left, top) {
-      this.scale = 0.8;
-      this.transform = {
-        left: (1 - this.ratio) * left,
-        top: (1 - this.ratio) * top
-      };
+      this.setScale(1);
+      this.setTransform((1 - this.ratio) * left + this.offsetLeft, (1 - this.ratio) * top + this.offsetTop);
     }
   }, {
-    key: "decreaseScale",
-    value: function decreaseScale() {
-      if (this.scale > parseFloat((1 / this.ratio).toFixed(1))) this.scale -= 0.03125;
+    key: "unfocus",
+    value: function unfocus() {
+      this.setScale(1 / this.ratio);
+      this.setTransform(0, 0);
     }
   }, {
     key: "move",
     value: function move(transform) {
       this.isMoving = true;
-      this.transform = this.formatedTransform(transform.x - this.offset.x + this.transform.left, transform.y - this.offset.y + this.transform.top);
+      var calculateLeft = transform.x - this.offset.x + this.transform.left;
+      var calculateTop = transform.y - this.offset.y + this.transform.top;
+      this.setTransform(calculateLeft, calculateTop);
       this.offset.x = transform.x;
       this.offset.y = transform.y;
     }
@@ -68,43 +121,19 @@ export var ViewPortStore = /*#__PURE__*/function () {
       this.offset.y = 0;
       this.isMoving = false;
     }
-  }, {
-    key: "transformLimit",
-    get: function get() {
-      return {
-        left: {
-          max: 0,
-          min: this.width - this.width * this.ratio * this.formatedScale
-        },
-        top: {
-          max: 0,
-          min: this.height - this.height * this.ratio * this.formatedScale
-        }
-      };
-    }
-  }, {
-    key: "formatedTransform",
-    value: function formatedTransform(left, top) {
-      return {
-        left: Math.max(this.transformLimit.left.min, Math.min(left, this.transformLimit.left.max)),
-        top: Math.max(this.transformLimit.top.min, Math.min(top, this.transformLimit.top.max))
-      };
-    }
-  }, {
-    key: "formatedScale",
-    get: function get() {
-      return Math.min(1, Math.max(1 / this.ratio, this.scale));
-    }
   }, {
     key: "contentStyle",
     get: function get() {
-      var transform = this.formatedTransform(this.transform.left, this.transform.top);
       return {
-        transform: "translate(".concat(transform.left, "px,").concat(transform.top, "px) scale(").concat(this.formatedScale, ")"),
+        left: -this.offsetLeft,
+        top: -this.offsetTop,
+        transform: " translate(".concat(this.transform.left, "px,").concat(this.transform.top, "px) scale(").concat(this.scale, ")"),
         width: this.width * this.ratio + 'px',
         height: this.height * this.ratio + 'px',
         transformOrigin: 'left top',
-        transition: this.isMoving ? 'none' : 'all 0.5s'
+        transition: this.isMoving ? 'none' : 'all 0.5s',
+        background: '#188fff67',
+        cursor: this.isMoving ? 'grab' : 'default'
       };
     }
   }, {

package/dist/ViewPort/ViewPortWindow.d.ts

@@ -0,0 +1,47 @@
+import { Transform } from '@dnd-kit/utilities';
+import React from 'react';
+import { WindowStore } from '../Window';
+import { WindowProps } from '../Window/Window';
+import { WindowControllerType } from '../Window/WindowController';
+import { ViewPortStore } from './ViewPortStore';
+export declare class ViewPortWindowStore extends WindowStore {
+    scale: number;
+    get style(): {
+        left: string;
+        top: string;
+        width: string;
+        height: string;
+        zIndex: number;
+        transform: string;
+        transition: string;
+        transformOrigin?: undefined;
+    } | {
+        left: string;
+        top: string;
+        width: number;
+        height: number;
+        zIndex: number;
+        transform: string;
+        transition: string;
+        transformOrigin?: undefined;
+    } | {
+        left: string;
+        top: string;
+        width: string;
+        height: string;
+        zIndex: number;
+        transform: string;
+        transformOrigin: string;
+        transition: string;
+    };
+    calculateTransform(transform: Transform): {
+        x: number;
+        y: number;
+    };
+    controll(transform: Transform, type: WindowControllerType): void;
+    constructor(id: string, onClosedHandler?: (id: string) => void);
+}
+export declare const ViewPortWindow: React.FunctionComponent<WindowProps & {
+    viewPortStore: ViewPortStore;
+    window: ViewPortWindowStore;
+}>;

package/dist/ViewPort/ViewPortWindow.js

@@ -0,0 +1,165 @@
+var _excluded = ["viewPortStore", "window"];
+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); }
+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); }
+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; }
+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; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+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); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+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); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+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); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+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; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+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); }
+import { makeObservable, observable, override, runInAction } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import React, { useEffect } from 'react';
+import { WindowStore } from "../Window";
+import { default as Window } from "../Window/Window";
+export var ViewPortWindowStore = /*#__PURE__*/function (_WindowStore) {
+  _inherits(ViewPortWindowStore, _WindowStore);
+  var _super = _createSuper(ViewPortWindowStore);
+  function ViewPortWindowStore(id, onClosedHandler) {
+    var _this;
+    _classCallCheck(this, ViewPortWindowStore);
+    _this = _super.call(this, id, onClosedHandler);
+    _defineProperty(_assertThisInitialized(_this), "scale", 1);
+    makeObservable(_assertThisInitialized(_this), {
+      style: override,
+      scale: observable,
+      controll: override
+    });
+    return _this;
+  }
+  _createClass(ViewPortWindowStore, [{
+    key: "style",
+    get: function get() {
+      if (this.isClosed) {
+        return {
+          left: this.left + 'px',
+          top: this.top + 'px',
+          width: this.width + 'px',
+          height: this.height + 'px',
+          zIndex: this.zIndex,
+          transform: 'scale(0)',
+          transition: 'all 0.5s ease-out'
+        };
+      }
+      if (this.isMinimize && this.minimizePos) {
+        return {
+          left: this.minimizePos.left + 'px',
+          top: this.minimizePos.top + 'px',
+          width: 0,
+          height: 0,
+          zIndex: this.zIndex,
+          transform: 'scale(0)',
+          transition: 'all 0.5s ease-out'
+        };
+      }
+      if (this.fullscreen) {
+        return {
+          left: this.fullscreenPos.left / this.scale + 'px',
+          top: this.fullscreenPos.top / this.scale + 'px',
+          width: this.fullscreenPos.width + 'px',
+          height: this.fullscreenPos.height + 'px',
+          zIndex: this.zIndex,
+          transform: "scale(".concat(1 / this.scale, ") "),
+          transformOrigin: 'left top',
+          transition: 'width height 0.5s ease-out'
+        };
+      }
+      if (this.isMoving || this.isResizing) {
+        return {
+          left: this.left + 'px',
+          top: this.top + 'px',
+          width: this.width + 'px',
+          height: this.height + 'px',
+          zIndex: this.zIndex,
+          transform: 'none',
+          transition: 'none'
+        };
+      }
+      return {
+        left: this.left + 'px',
+        top: this.top + 'px',
+        width: this.width + 'px',
+        height: this.height + 'px',
+        zIndex: this.zIndex,
+        transform: 'none',
+        transition: 'all 0.5s ease-out'
+      };
+    }
+  }, {
+    key: "calculateTransform",
+    value: function calculateTransform(transform) {
+      var _this$transform, _this$transform2;
+      return {
+        x: (transform.x - (((_this$transform = this.transform) === null || _this$transform === void 0 ? void 0 : _this$transform.x) || 0)) / this.scale,
+        y: (transform.y - (((_this$transform2 = this.transform) === null || _this$transform2 === void 0 ? void 0 : _this$transform2.y) || 0)) / this.scale
+      };
+    }
+  }, {
+    key: "controll",
+    value: function controll(transform, type) {
+      var offsetTransform = this.calculateTransform(transform);
+      if (type === 'move') {
+        this.isMoving = true;
+        this.isResizing = false;
+      } else {
+        this.isMoving = false;
+        this.isResizing = true;
+      }
+      if (type.includes('left')) {
+        this.left = Math.round(this.left + offsetTransform.x);
+        this.width = Math.round(this.width - offsetTransform.x);
+      }
+      if (type.includes('right')) {
+        this.width = Math.round(this.width + offsetTransform.x);
+      }
+      if (type.includes('top')) {
+        this.top = Math.round(this.top + offsetTransform.y);
+        this.height = Math.round(this.height - offsetTransform.y);
+      }
+      if (type.includes('bottom')) {
+        this.height = Math.round(this.height + offsetTransform.y);
+      }
+      if (type.includes('move')) {
+        this.left = Math.round(this.left + offsetTransform.x);
+        this.top = Math.round(this.top + offsetTransform.y);
+      }
+      this.transform = transform;
+    }
+  }]);
+  return ViewPortWindowStore;
+}(WindowStore);
+export var ViewPortWindow = observer(function ViewPortWindow(props) {
+  var viewPortStore = props.viewPortStore,
+    window = props.window,
+    rest = _objectWithoutProperties(props, _excluded);
+  useEffect(function () {
+    runInAction(function () {
+      window.fullscreenPos.left = -viewPortStore.transform.left + viewPortStore.offsetLeft;
+      window.fullscreenPos.top = -viewPortStore.transform.top + viewPortStore.offsetTop;
+      window.fullscreenPos.width = viewPortStore.width;
+      window.fullscreenPos.height = viewPortStore.height;
+      window.scale = viewPortStore.scale;
+    });
+  }, [viewPortStore.transform.left, viewPortStore.transform.top, viewPortStore.scale, viewPortStore.ratio, viewPortStore.width, viewPortStore.height]);
+  useEffect(function () {
+    window.left = (viewPortStore.width * viewPortStore.ratio - viewPortStore.width) / 2;
+    window.top = (viewPortStore.width * viewPortStore.ratio - viewPortStore.width) / 2;
+  }, []);
+  return /*#__PURE__*/React.createElement(Window, _extends({
+    window: window
+  }, rest, {
+    onFocusHandler: function onFocusHandler() {
+      viewPortStore.maxZIndex++;
+      window.zIndex = viewPortStore.maxZIndex;
+    }
+  }));
+});

package/dist/ViewPort/index.d.ts

@@ -1,2 +1,3 @@
 export { default as ViewPort } from './ViewPort';
 export { ViewPortStore } from './ViewPortStore';
+export { ViewPortWindowStore } from './ViewPortWindow';

package/dist/ViewPort/index.js

@@ -1,2 +1,3 @@
 export { default as ViewPort } from "./ViewPort";
-export { ViewPortStore } from "./ViewPortStore";
+export { ViewPortStore } from "./ViewPortStore";
+export { ViewPortWindowStore } from "./ViewPortWindow";

package/dist/ViewPort/test.js

@@ -8,8 +8,11 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import { makeAutoObservable, runInAction } from 'mobx';
 import { observer, useLocalObservable } from 'mobx-react-lite';
 import React, { useEffect } from 'react';
-import ViewPort, { ViewPortWindowStore } from "./ViewPort";
+import styled from 'styled-components';
+import { GlobalStyles } from '..';
+import ViewPort from "./ViewPort";
 import { ViewPortStore } from "./ViewPortStore";
+import { ViewPortWindowStore } from "./ViewPortWindow";
 var WindowManager = /*#__PURE__*/function () {
   function WindowManager() {
     _classCallCheck(this, WindowManager);
@@ -34,15 +37,19 @@ var WindowManager = /*#__PURE__*/function () {
   return WindowManager;
 }();
 var windowManager = new WindowManager();
+var StyledViewPort = styled(ViewPort).withConfig({
+  displayName: "StyledViewPort",
+  componentId: "basic-component-347b__sc-1b1xrkc-0"
+})(["border:1px solid #eee;"]);
 export default observer(function Test() {
   var viewPortStore = useLocalObservable(function () {
-    return new ViewPortStore(600, 600, 5);
+    return new ViewPortStore(600, 600, 2);
   });
   useEffect(function () {
     function setWidthHeight() {
       runInAction(function () {
-        viewPortStore.width = 800;
-        viewPortStore.height = 800;
+        viewPortStore.width = 600;
+        viewPortStore.height = 600;
       });
     }
     window.addEventListener('resize', setWidthHeight);
@@ -51,7 +58,9 @@ export default observer(function Test() {
       window.removeEventListener('resize', setWidthHeight);
     };
   }, []);
-  return /*#__PURE__*/React.createElement(ViewPort, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(GlobalStyles, {
+    $css: []
+  }), /*#__PURE__*/React.createElement(StyledViewPort, {
     viewPortStore: viewPortStore
   }, windowManager.windows.map(function (windowStore) {
     return /*#__PURE__*/React.createElement(ViewPort.Window, {
@@ -60,5 +69,5 @@ export default observer(function Test() {
       title: 'xixi',
       viewPortStore: viewPortStore
     }, /*#__PURE__*/React.createElement("br", null));
-  }));
+  })));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kep-platform/basic-component",
-    "version": "0.0.40",
+    "version": "0.0.42",
     "description": "A react library developed with dumi",
     "license": "MIT",
     "module": "dist/index.js",
@@ -47,7 +47,7 @@
     },
     "dependencies": {
         "@ant-design/icons": "^5.3.7",
-        "@kep-platform/hooks": "^0.0.40",
+        "@kep-platform/hooks": "^0.0.42",
         "color": "^4.2.3",
         "rc-pagination": "^4.1.0",
         "styled-components": "^6.1.11"
@@ -87,5 +87,5 @@
     "authors": [
         "lee-step-jss 1599925910@qq.com"
     ],
-    "gitHead": "6bffe69d00a564159af57dba5e0922073da85a3c"
+    "gitHead": "345a676c9d5748fb2a93d5423e7517cbda956876"
 }