@kep-platform/basic-component 1.0.21 → 1.0.22

package/dist/Tree/MainProperties.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-export declare const MainArea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("../Flex").FlexItemProps | keyof React.HtmlHTMLAttributes<HTMLDivElement>> & import("../Flex").FlexItemProps & React.HtmlHTMLAttributes<HTMLDivElement>, "ref"> & {
+export declare const MainArea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HtmlHTMLAttributes<HTMLDivElement> | keyof import("../Flex").FlexItemProps> & import("../Flex").FlexItemProps & React.HtmlHTMLAttributes<HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
 }, never>> & string;
 type MainPropertyProps = {

package/dist/ViewPort/ViewPortWindow.d.ts

@@ -7,6 +7,7 @@ import { ViewPortStore } from './ViewPortStore';
 export declare class ViewPortWindowStore extends WindowStore {
     viewPortStore: ViewPortStore;
     disableDefaultCenterDisplay: boolean;
+    allowOverflow: boolean;
     get style(): {
         left: string;
         top: string;
@@ -32,13 +33,15 @@ export declare class ViewPortWindowStore extends WindowStore {
         x: number;
         y: number;
     };
-    controll(transform: Transform, type: WindowControllerType): void;
+    control(transform: Transform, type: WindowControllerType): void;
     centerDisplay(): void;
     fullscreenWindow(func?: () => void): void;
     toggleWindow(): void;
     onSplitWindowHandler(arr: string[], index: number): void;
+    enforceBounds(): void;
     constructor(id: string, viewPort: ViewPortStore, config?: {
         disableDefaultCenterDisplay?: boolean;
+        allowOverflow?: boolean;
         onClosedHandler?: (id: string) => void;
     });
     get disabled(): boolean;

package/dist/ViewPort/ViewPortWindow.js

@@ -30,16 +30,20 @@ export var ViewPortWindowStore = /*#__PURE__*/function (_WindowStore) {
     _this = _super.call(this, id, config === null || config === void 0 ? void 0 : config.onClosedHandler);
     _defineProperty(_assertThisInitialized(_this), "viewPortStore", void 0);
     _defineProperty(_assertThisInitialized(_this), "disableDefaultCenterDisplay", false);
+    _defineProperty(_assertThisInitialized(_this), "allowOverflow", false);
     _this.viewPortStore = viewPort;
     _this.fullscreenPos = viewPort.viewPortRect;
     _this.disableDefaultCenterDisplay = (config === null || config === void 0 ? void 0 : config.disableDefaultCenterDisplay) || false;
+    _this.allowOverflow = (config === null || config === void 0 ? void 0 : config.allowOverflow) || false;
     makeObservable(_assertThisInitialized(_this), {
       style: override,
-      controll: override,
+      control: override,
       focus: override,
       centerDisplay: action,
       disabled: override,
-      disableDefaultCenterDisplay: observable
+      disableDefaultCenterDisplay: observable,
+      allowOverflow: observable,
+      enforceBounds: action
     });
     return _this;
   }
@@ -55,7 +59,7 @@ export var ViewPortWindowStore = /*#__PURE__*/function (_WindowStore) {
             height: this.height + 'px',
             zIndex: this.zIndex,
             transform: 'scale(0)',
-            transformOrigin: 'center center',
+            transformOrigin: 'center',
             transition: 'all 0.3s ease-out'
           };
         case 'minimize':
@@ -78,7 +82,7 @@ export var ViewPortWindowStore = /*#__PURE__*/function (_WindowStore) {
             transform: "scale(".concat(1 / this.viewPortStore.scale, ")"),
             zIndex: this.zIndex,
             transformOrigin: 'left top',
-            transition: 'width height 0.5s ease-out'
+            transition: 'all 0.3s ease-out'
           };
         case 'normal':
         default:
@@ -125,8 +129,8 @@ export var ViewPortWindowStore = /*#__PURE__*/function (_WindowStore) {
       };
     }
   }, {
-    key: "controll",
-    value: function controll(transform, type) {
+    key: "control",
+    value: function control(transform, type) {
       var offsetTransform = this.calculateTransform(transform);
       if (type === 'move') {
         this.isMoving = true;
@@ -154,6 +158,7 @@ export var ViewPortWindowStore = /*#__PURE__*/function (_WindowStore) {
         this.top = Math.round(this.top + offsetTransform.y);
       }
       this.transform = transform;
+      this.enforceBounds();
     }
   }, {
     key: "centerDisplay",
@@ -162,6 +167,7 @@ export var ViewPortWindowStore = /*#__PURE__*/function (_WindowStore) {
       var rect = this.viewPortStore.viewPortRect;
       this.left = rect.left + Math.max(0, rect.width - this.width) / 2;
       this.top = rect.top + Math.max(0, rect.height - this.height) / 2;
+      this.enforceBounds();
     }
   }, {
     key: "fullscreenWindow",
@@ -209,6 +215,30 @@ export var ViewPortWindowStore = /*#__PURE__*/function (_WindowStore) {
       this.top = 0;
       this.width = this.calculatePercentageValue(arr[index], this.viewPortStore.viewPortRect.width);
       this.height = this.viewPortStore.viewPortRect.height;
+      this.enforceBounds();
+    }
+
+    // 边界约束方法
+  }, {
+    key: "enforceBounds",
+    value: function enforceBounds() {
+      // 如果允许超出则不做任何约束
+      if (this.allowOverflow) return;
+      var rect = this.viewPortStore.viewPortRect;
+      var minWidth = 50;
+      var minHeight = 50;
+
+      // 限制尺寸不会超过 viewport
+      if (this.width > rect.width) this.width = rect.width;
+      if (this.height > rect.height) this.height = rect.height;
+
+      // 限制最小尺寸
+      this.width = Math.max(this.width, minWidth);
+      this.height = Math.max(this.height, minHeight);
+
+      // 限制位置在 viewport 内
+      this.left = Math.max(rect.left, Math.min(this.left, rect.left + rect.width - this.width));
+      this.top = Math.max(rect.top, Math.min(this.top, rect.top + rect.height - this.height));
     }
   }, {
     key: "disabled",

package/dist/Window/Window.js

@@ -25,10 +25,10 @@ var WindowHeader = styled.div.withConfig({
 })(_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\t& > h5 {\n\t\tcolor: #000;\n\t}\n"])));
 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"])));
 var WindowBody = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\toverflow: auto;\n\tpadding: 12px;\n\tflex: 1;\n"])));
-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"])));
-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"])));
-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"])));
-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"])));
+var WindowControllerLeft = styled(WindowController)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\tposition: absolute;\n\twidth: 6px;\n\tleft: 0;\n\ttop: 0;\n\tbottom: 0;\n\tcursor: ew-resize;\n\tz-index: 2;\n"])));
+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: ew-resize;\n\tz-index: 2;\n"])));
+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: ns-resize;\n\tz-index: 2;\n"])));
+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: ns-resize;\n\tz-index: 2;\n"])));
 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"])));
 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"])));
 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"])));
@@ -168,6 +168,7 @@ var Window = observer(function (props) {
       e.stopPropagation();
     }
   }, /*#__PURE__*/React.createElement(WindowOption, {
+    "aria-label": "\u5206\u4EAB\u7A97\u53E3",
     icon: /*#__PURE__*/React.createElement(ShareAltOutlined, null),
     onClick: onShareWindow
   }), 'viewPortStore' in window && window.viewPortStore && /*#__PURE__*/React.createElement(Popover, {
@@ -184,30 +185,31 @@ var Window = observer(function (props) {
   }, /*#__PURE__*/React.createElement(WindowOption, {
     icon: /*#__PURE__*/React.createElement(SplitCellsOutlined, null)
   })), /*#__PURE__*/React.createElement(WindowOption, {
+    "aria-label": "\u6700\u5C0F\u5316\u7A97\u53E3",
     icon: /*#__PURE__*/React.createElement(MinusOutlined, null),
     onClick: function onClick() {
       if (window.disabled) return;
       window.minimizeWindow();
     }
-  }), !window.fullscreen ? /*#__PURE__*/React.createElement(WindowOption, {
-    icon: /*#__PURE__*/React.createElement(BorderOutlined, null),
-    onClick: function onClick() {
-      if (window.disabled) return;
-      window.fullscreenWindow(onFullscreenHandler);
-    }
-  }) : /*#__PURE__*/React.createElement(WindowOption, {
-    icon: /*#__PURE__*/React.createElement(CompressOutlined, null),
+  }), /*#__PURE__*/React.createElement(WindowOption, {
+    "aria-label": window.fullscreen ? '退出全屏' : '进入全屏',
+    icon: window.fullscreen ? /*#__PURE__*/React.createElement(CompressOutlined, null) : /*#__PURE__*/React.createElement(BorderOutlined, null),
     onClick: function onClick() {
       if (window.disabled) return;
-      window.fullscreenExitWindow();
+      if (window.fullscreen) {
+        window.fullscreenExitWindow();
+      } else {
+        window.fullscreenWindow(onFullscreenHandler);
+      }
     }
   }), /*#__PURE__*/React.createElement(WindowOption, {
+    "aria-label": "\u5173\u95ED\u7A97\u53E3",
+    icon: /*#__PURE__*/React.createElement(CloseOutlined, null),
+    danger: true,
     onClick: function onClick() {
       if (window.disabled) return;
       window.closeWindow();
-    },
-    icon: /*#__PURE__*/React.createElement(CloseOutlined, null),
-    danger: true
+    }
   })))), /*#__PURE__*/React.createElement(WindowBody, null, children)));
 });
 export default Window;

package/dist/Window/WindowController.js

@@ -8,7 +8,7 @@ import { useDraggable } from '@dnd-kit/core';
 import { observer } from 'mobx-react-lite';
 import React, { useEffect } from 'react';
 import styled from 'styled-components';
-var WindowControllerContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    &:active,\n    &:focus {\n        outline: none;\n    }\n"])));
+var WindowControllerContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t&:active,\n\t&:focus {\n\t\toutline: none;\n\t}\n"])));
 export default observer(function WindowController(props) {
   var type = props.type,
     window = props.window,
@@ -24,9 +24,9 @@ export default observer(function WindowController(props) {
     isDragging = _useDraggable.isDragging;
   useEffect(function () {
     if (transform && isDragging) {
-      window.controll(transform, type);
+      window.control(transform, type);
     } else {
-      window.endControll();
+      window.endControl();
     }
   }, [transform, isDragging, type]);
   return /*#__PURE__*/React.createElement(WindowControllerContainer, _extends({}, rest, attributes, listeners, {

package/dist/Window/WindowStore.d.ts

@@ -40,8 +40,8 @@ export default class WindowStore {
         x: number;
         y: number;
     };
-    controll(transform: Transform, type: WindowControllerType): void;
-    endControll(): void;
+    control(transform: Transform, type: WindowControllerType): void;
+    endControl(): void;
     minimizeWindow(): void;
     normalizeWindow(): void;
     restoreWindow(): void;

package/dist/Window/WindowStore.js

@@ -5,7 +5,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 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 { action, computed, makeObservable, observable, runInAction } from 'mobx';
+import { action, computed, makeObservable, observable } from 'mobx';
 var WindowStore = /*#__PURE__*/function () {
   function WindowStore(id, onClosedHandler) {
     _classCallCheck(this, WindowStore);
@@ -48,8 +48,8 @@ var WindowStore = /*#__PURE__*/function () {
       isClosed: observable,
       fullscreenExitWindow: action,
       fullscreenWindow: action,
-      controll: action,
-      endControll: action,
+      control: action,
+      endControl: action,
       style: computed.struct,
       isMinimize: observable,
       minimizePos: observable.struct,
@@ -62,7 +62,8 @@ var WindowStore = /*#__PURE__*/function () {
       focus: action,
       info: computed,
       disabled: computed,
-      splitPanelVisible: observable
+      splitPanelVisible: observable,
+      onSplitWindowHandler: action
     });
     this.id = id;
     this.onClosedHandler = onClosedHandler;
@@ -101,37 +102,34 @@ var WindowStore = /*#__PURE__*/function () {
       };
     }
   }, {
-    key: "controll",
-    value: function controll(transform, type) {
-      var _this = this;
+    key: "control",
+    value: function control(transform, type) {
       var offsetTransform = this.calculateTransform(transform);
-      runInAction(function () {
-        _this.isMoving = type === 'move';
-        _this.isResizing = type !== 'move';
-        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;
-      });
+      this.isMoving = type === 'move';
+      this.isResizing = type !== 'move';
+      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;
     }
   }, {
-    key: "endControll",
-    value: function endControll() {
+    key: "endControl",
+    value: function endControl() {
       this.isMoving = false;
       this.isResizing = false;
       this.resetState();
@@ -167,6 +165,7 @@ var WindowStore = /*#__PURE__*/function () {
     key: "focus",
     value: function focus() {
       this.zIndex++;
+      this.isMinimize = false;
     }
   }, {
     key: "calculatePercentageValue",
@@ -178,12 +177,12 @@ var WindowStore = /*#__PURE__*/function () {
   }, {
     key: "onSplitWindowHandler",
     value: function onSplitWindowHandler(arr, index) {
-      var _this2 = this;
+      var _this = this;
       this.restoreWindow();
       this.splitPanelVisible = false;
       var leftPieces = arr.slice(0, index);
       var leftWidth = leftPieces.reduce(function (acc, cur) {
-        return acc + _this2.calculatePercentageValue(cur, _this2.fullscreenPos.width);
+        return acc + _this.calculatePercentageValue(cur, _this.fullscreenPos.width);
       }, 0);
       this.left = leftWidth;
       this.top = 0;
@@ -224,7 +223,7 @@ var WindowStore = /*#__PURE__*/function () {
             left: this.minimizePos.left + 'px',
             top: this.minimizePos.top + 'px',
             width: this.width + 'px',
-            height: this.width + 'px',
+            height: this.height + 'px',
             zIndex: this.zIndex,
             transform: 'scale(0)',
             transformOrigin: 'left top',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@kep-platform/basic-component",
-	"version": "1.0.21",
+	"version": "1.0.22",
 	"description": "A react library developed with dumi",
 	"license": "MIT",
 	"module": "dist/index.js",
@@ -87,5 +87,5 @@
 	"authors": [
 		"less-step-jss 1599925910@qq.com"
 	],
-	"gitHead": "8e45b692a1b25bfb1750114aefe5727edca77b09"
+	"gitHead": "15bac3be22032d6bc72a3d08502801bf3d1d5901"
 }