@mdesignable/react 1.0.0-beta.64

package/esm/panels/styles.less

@@ -0,0 +1,331 @@
+@import '../variables.less';
+
+.@{prefix-cls}-main-panel {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex: 1;
+  min-height: 0;
+  position: relative;
+  overflow: hidden;
+
+  &-container {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+
+    &.root {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+    &.absolute {
+      position: absolute;
+    }
+    &.relative {
+      position: relative;
+    }
+  }
+
+  &-header {
+    display: flex;
+    align-items: center;
+    flex-grow: 0;
+    flex-shrink: 0;
+    justify-content: space-between;
+    background: var(--dn-main-panel-header-bg-color);
+    border-bottom: 1px solid var(--dn-panel-border-color);
+    padding: 4px;
+
+    &-logo {
+      display: flex;
+      align-items: center;
+    }
+
+    &-actions {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+  }
+
+  &.root {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+}
+
+.@{prefix-cls}-composite-panel {
+  flex-grow: 0;
+  flex-shrink: 0;
+  display: flex;
+  position: relative;
+  user-select: none;
+  z-index: 2;
+
+  &-tabs {
+    display: flex;
+    flex-direction: column;
+    border-right: 1px solid var(--dn-panel-border-color);
+    background-color: var(--dn-composite-panel-tabs-bg-color);
+    z-index: 2;
+    position: relative;
+
+    &-pane {
+      color: var(--dn-composite-panel-tabs-color);
+      min-height: 48px;
+      min-width: 48px;
+      padding: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      position: relative;
+      font-size: 20px;
+      flex-direction: column;
+
+      &-title {
+        font-size: 10px;
+        margin-top: 6px;
+      }
+
+      &:hover {
+        color: var(--dn-composite-panel-tabs-hover-color);
+      }
+
+      &.active {
+        color: var(--dn-composite-panel-tabs-hover-color);
+
+        &::after {
+          position: absolute;
+          top: 0;
+          left: 0;
+          display: block;
+          content: '';
+          width: 3px;
+          height: 100%;
+          background-color: var(--dn-composite-panel-tabs-hover-color);
+        }
+      }
+    }
+
+    &-content {
+      width: 300px;
+      border-right: 1px solid var(--dn-panel-border-color);
+      background: var(--dn-composite-panel-tabs-content-bg-color);
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      box-sizing: content-box;
+
+      &.pinning {
+        position: absolute;
+        z-index: 1;
+        left: 100%;
+        top: 0;
+        border-right: 1px solid transparent;
+        box-shadow: -2px 5px 10px rgba(102, 102, 102, 0.42);
+      }
+    }
+
+    &-header {
+      padding: 14px 7px;
+      color: var(--dn-composite-panel-tabs-header-color);
+      line-height: 18px;
+      font-size: 16px;
+      border-bottom: 1px solid var(--dn-panel-border-color);
+      display: flex;
+      justify-content: space-between;
+
+      &-actions {
+        display: flex;
+        align-items: center;
+
+        & > * {
+          margin-right: 8px;
+
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+      }
+
+      &-pin {
+        transition: all 0.15s ease-in-out;
+
+        &:hover {
+          transform: scale(1.1);
+        }
+      }
+
+      &-title {
+        font-size: 20px;
+      }
+
+      &-close {
+        transition: all 0.15s ease-in-out;
+
+        &:hover {
+          transform: rotate(90deg);
+        }
+      }
+    }
+
+    &-body {
+      flex-grow: 2;
+      flex-shrink: 2;
+      overflow: overlay;
+      overflow-x: hidden;
+      height: 100%;
+    }
+  }
+
+  &.direction-right {
+    flex-direction: row-reverse;
+
+    .@{prefix-cls}-composite-panel-tabs-pane.active:after {
+      left: auto;
+      right: -1px;
+    }
+
+    .@{prefix-cls}-composite-panel-tabs-content.pinning {
+      left: auto;
+      right: 100%;
+      top: 0;
+    }
+
+    .@{prefix-cls}-composite-panel-tabs-content {
+      border-right: none;
+      border-left: 1px solid var(--dn-panel-border-color);
+    }
+    .@{prefix-cls}-composite-panel-tabs {
+      border-left: 1px solid var(--dn-panel-border-color);
+    }
+  }
+}
+
+.@{prefix-cls}-workspace-panel {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  padding: 4px;
+  overflow: hidden;
+  box-sizing: border-box;
+  background-color: var(--dn-workspace-panel-bg-color);
+  position: relative;
+  z-index: 1;
+
+  &-item {
+    position: relative;
+  }
+
+  button[disabled] {
+    pointer-events: none !important;
+  }
+}
+
+.@{prefix-cls}-settings-panel {
+  flex-grow: 0;
+  flex-shrink: 0;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  z-index: 2;
+  width: 300px;
+  background: var(--dn-composite-panel-tabs-content-bg-color);
+  border-left: 1px solid var(--dn-panel-border-color);
+  height: 100%;
+  box-sizing: content-box;
+  user-select: none;
+
+  &.pinning {
+    position: absolute;
+    z-index: 10;
+    top: 0;
+    right: 0;
+    box-shadow: 2px 5px 10px rgba(102, 102, 102, 0.52);
+    border-left: 1px solid transparent;
+  }
+
+  &-header {
+    padding: 14px 7px;
+    color: var(--dn-composite-panel-tabs-header-color);
+    line-height: 18px;
+    font-size: 16px;
+    border-bottom: 1px solid var(--dn-panel-border-color);
+    display: flex;
+    justify-content: space-between;
+
+    &-actions {
+      display: flex;
+      align-items: center;
+
+      & > * {
+        margin-right: 8px;
+
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+
+    &-pin {
+      transition: all 0.15s ease-in-out;
+
+      &:hover {
+        transform: scale(1.1);
+      }
+    }
+
+    &-title {
+      font-size: 20px;
+    }
+
+    &-close {
+      transition: all 0.15s ease-in-out;
+
+      &:hover {
+        transform: rotate(90deg);
+      }
+    }
+  }
+
+  &-body {
+    flex-grow: 2;
+    flex-shrink: 2;
+    overflow: overlay;
+    height: 100%;
+  }
+
+  &-opener {
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 2;
+    background: var(--dn-composite-panel-tabs-content-bg-color);
+    border: 1px solid var(--dn-panel-border-color);
+    color: var(--dn-composite-panel-tabs-color);
+    box-shadow: 0 0 6px rgb(0 0 0 / 10%);
+    border-radius: 3px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+
+    .dn-icon {
+      transition: all 0.15s ease-in-out;
+    }
+
+    &:hover .dn-icon {
+      transform: rotate(45deg);
+    }
+  }
+}

package/esm/simulators/MobileSimulator/body.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export interface IMobileBodyProps {
+}
+export declare const MobileBody: React.FC<IMobileBodyProps>;

package/esm/simulators/MobileSimulator/body.js

@@ -0,0 +1,57 @@
+import { observer } from '@formily/reactive-react';
+import React from 'react';
+import { useScreen, usePrefix, useTheme } from '../../hooks';
+var MockupImages = {
+    dark: [
+        '//img.alicdn.com/imgextra/i3/O1CN01zXMc8W26oJZGUaCK1_!!6000000007708-55-tps-946-459.svg',
+        '//img.alicdn.com/imgextra/i3/O1CN012KWk2i1DLduN7InSK_!!6000000000200-55-tps-459-945.svg',
+    ],
+    light: [
+        '//img.alicdn.com/imgextra/i4/O1CN01vuXGe31tEy00v2xBx_!!6000000005871-55-tps-946-459.svg',
+        '//img.alicdn.com/imgextra/i4/O1CN01ehfzMc1QPqY6HONTJ_!!6000000001969-55-tps-459-945.svg',
+    ],
+};
+export var MobileBody = observer(function (props) {
+    var screen = useScreen();
+    var theme = useTheme();
+    var prefix = usePrefix('mobile-simulator-body');
+    var getContentStyles = function () {
+        if (screen.flip) {
+            return {
+                position: 'absolute',
+                width: 736,
+                height: 414,
+                top: 43.3333,
+                left: 106.667,
+                overflow: 'hidden',
+            };
+        }
+        return {
+            position: 'absolute',
+            width: 414,
+            height: 736,
+            top: 126.667,
+            left: 23.3333,
+            overflow: 'hidden',
+        };
+    };
+    return (React.createElement("div", { className: prefix, style: {
+            alignItems: screen.flip ? 'center' : '',
+            minWidth: screen.flip ? 1000 : 0,
+        } },
+        React.createElement("div", { className: prefix + '-wrapper', style: {
+                position: 'relative',
+                minHeight: screen.flip ? 0 : 1000,
+            } },
+            React.createElement("img", { src: screen.flip ? MockupImages[theme][0] : MockupImages[theme][1], style: {
+                    display: 'block',
+                    margin: '20px 0',
+                    width: screen.flip ? 946.667 : 460,
+                    height: screen.flip ? 460 : 946.667,
+                    boxShadow: '0 0 20px #0000004d',
+                    borderRadius: 60,
+                    backfaceVisibility: 'hidden',
+                } }),
+            React.createElement("div", { className: prefix + '-content', style: getContentStyles() }, props.children))));
+});
+MobileBody.defaultProps = {};

package/esm/simulators/MobileSimulator/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import './styles.less';
+export interface IMobileSimulatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const MobileSimulator: React.FC<IMobileSimulatorProps>;

package/esm/simulators/MobileSimulator/index.js

@@ -0,0 +1,22 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import { MobileBody } from './body';
+import { usePrefix } from '../../hooks';
+import cls from 'classnames';
+import './styles.less';
+export var MobileSimulator = function (props) {
+    var prefix = usePrefix('mobile-simulator');
+    return (React.createElement("div", __assign({}, props, { className: cls(prefix, props.className) }),
+        React.createElement("div", { className: prefix + '-content' },
+            React.createElement(MobileBody, null, props.children))));
+};

package/esm/simulators/MobileSimulator/styles.less

@@ -0,0 +1,29 @@
+@import '../../variables.less';
+
+.@{prefix-cls}-mobile-simulator {
+  position: relative;
+  min-height: 100px;
+  height: 100%;
+  width: 100%;
+  background-color: var(--dn-mobile-simulator-bg-color);
+
+  &-content {
+    width: 100%;
+    top: 0;
+    left: 0;
+    height: 100%;
+    position: absolute;
+    overflow: overlay;
+  }
+
+  &-body {
+    display: flex;
+    justify-content: center;
+    height: 100%;
+
+    &-content {
+      background-color: var(--dn-mobile-simulator-body-bg-color);
+      border: 3px solid var(--dn-mobile-simulator-border-color)
+    }
+  }
+}

package/esm/simulators/PCSimulator/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import './styles.less';
+export interface IPCSimulatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const PCSimulator: React.FC<IPCSimulatorProps>;

package/esm/simulators/PCSimulator/index.js

@@ -0,0 +1,19 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import cls from 'classnames';
+import { usePrefix } from '../../hooks';
+import './styles.less';
+export var PCSimulator = function (props) {
+    var prefix = usePrefix('pc-simulator');
+    return (React.createElement("div", __assign({}, props, { className: cls(prefix, props.className) }), props.children));
+};

package/esm/simulators/PCSimulator/styles.less

@@ -0,0 +1,11 @@
+@import '../../variables.less';
+
+.@{prefix-cls}-pc-simulator {
+  background-color: var(--dn-pc-simulator-bg-color);
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  box-sizing: border-box;
+}

package/esm/simulators/ResponsiveSimulator/handle.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export declare enum ResizeHandleType {
+    Resize = "RESIZE",
+    ResizeWidth = "RESIZE_WIDTH",
+    ResizeHeight = "RESIZE_HEIGHT"
+}
+export interface IResizeHandleProps {
+    type?: ResizeHandleType;
+}
+export declare const ResizeHandle: React.FC<IResizeHandleProps>;

package/esm/simulators/ResponsiveSimulator/handle.js

@@ -0,0 +1,28 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import { useDesigner, usePrefix } from '../../hooks';
+import cls from 'classnames';
+export var ResizeHandleType;
+(function (ResizeHandleType) {
+    ResizeHandleType["Resize"] = "RESIZE";
+    ResizeHandleType["ResizeWidth"] = "RESIZE_WIDTH";
+    ResizeHandleType["ResizeHeight"] = "RESIZE_HEIGHT";
+})(ResizeHandleType || (ResizeHandleType = {}));
+export var ResizeHandle = function (props) {
+    var _a, _b;
+    var prefix = usePrefix('resize-handle');
+    var designer = useDesigner();
+    return (React.createElement("div", __assign({}, props, (_a = {}, _a[designer.props.screenResizeHandlerAttrName] = props.type, _a.className = cls(prefix, (_b = {},
+        _b["".concat(prefix, "-").concat(props.type)] = !!props.type,
+        _b)), _a)), props.children));
+};

package/esm/simulators/ResponsiveSimulator/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import './styles.less';
+export interface IResponsiveSimulatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const ResponsiveSimulator: React.FC<IResponsiveSimulatorProps>;

package/esm/simulators/ResponsiveSimulator/index.js

@@ -0,0 +1,157 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React, { useRef } from 'react';
+import { observer } from '@formily/reactive-react';
+import { DragStartEvent, DragMoveEvent, DragStopEvent, CursorDragType, } from '@mdesignable/core';
+import { calcSpeedFactor, createUniformSpeedAnimation, } from '@mdesignable/shared';
+import { useScreen, useDesigner, usePrefix } from '../../hooks';
+import { IconWidget } from '../../widgets';
+import { ResizeHandle, ResizeHandleType } from './handle';
+import cls from 'classnames';
+import './styles.less';
+var useResizeEffect = function (container, content, engine) {
+    var status = null;
+    var startX = 0;
+    var startY = 0;
+    var startWidth = 0;
+    var startHeight = 0;
+    var animationX = null;
+    var animationY = null;
+    var getStyle = function (status) {
+        if (status === ResizeHandleType.Resize)
+            return 'nwse-resize';
+        if (status === ResizeHandleType.ResizeHeight)
+            return 'ns-resize';
+        if (status === ResizeHandleType.ResizeWidth)
+            return 'ew-resize';
+    };
+    var updateSize = function (deltaX, deltaY) {
+        var _a;
+        var containerRect = (_a = container.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (status === ResizeHandleType.Resize) {
+            engine.screen.setSize(startWidth + deltaX, startHeight + deltaY);
+            container.current.scrollBy(containerRect.width + deltaX, containerRect.height + deltaY);
+        }
+        else if (status === ResizeHandleType.ResizeHeight) {
+            engine.screen.setSize(startWidth, startHeight + deltaY);
+            container.current.scrollBy(container.current.scrollLeft, containerRect.height + deltaY);
+        }
+        else if (status === ResizeHandleType.ResizeWidth) {
+            engine.screen.setSize(startWidth + deltaX, startHeight);
+            container.current.scrollBy(containerRect.width + deltaX, container.current.scrollTop);
+        }
+    };
+    engine.subscribeTo(DragStartEvent, function (e) {
+        var _a, _b;
+        if (!((_a = engine.workbench.currentWorkspace) === null || _a === void 0 ? void 0 : _a.viewport))
+            return;
+        var target = e.data.target;
+        if (target === null || target === void 0 ? void 0 : target.closest("*[".concat(engine.props.screenResizeHandlerAttrName, "]"))) {
+            var rect = (_b = content.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+            if (!rect)
+                return;
+            status = target.getAttribute(engine.props.screenResizeHandlerAttrName);
+            engine.cursor.setStyle(getStyle(status));
+            startX = e.data.topClientX;
+            startY = e.data.topClientY;
+            startWidth = rect.width;
+            startHeight = rect.height;
+            engine.cursor.setDragType(CursorDragType.Resize);
+        }
+    });
+    engine.subscribeTo(DragMoveEvent, function (e) {
+        var _a, _b;
+        if (!((_a = engine.workbench.currentWorkspace) === null || _a === void 0 ? void 0 : _a.viewport))
+            return;
+        if (!status)
+            return;
+        var deltaX = e.data.topClientX - startX;
+        var deltaY = e.data.topClientY - startY;
+        var containerRect = (_b = container.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+        var distanceX = Math.floor(containerRect.right - e.data.topClientX);
+        var distanceY = Math.floor(containerRect.bottom - e.data.topClientY);
+        var factorX = calcSpeedFactor(distanceX, 10);
+        var factorY = calcSpeedFactor(distanceY, 10);
+        updateSize(deltaX, deltaY);
+        if (distanceX <= 10) {
+            if (!animationX) {
+                animationX = createUniformSpeedAnimation(1000 * factorX, function (delta) {
+                    updateSize(deltaX + delta, deltaY);
+                });
+            }
+        }
+        else {
+            if (animationX) {
+                animationX = animationX();
+            }
+        }
+        if (distanceY <= 10) {
+            if (!animationY) {
+                animationY = createUniformSpeedAnimation(300 * factorY, function (delta) {
+                    updateSize(deltaX, deltaY + delta);
+                });
+            }
+        }
+        else {
+            if (animationY) {
+                animationY = animationY();
+            }
+        }
+    });
+    engine.subscribeTo(DragStopEvent, function () {
+        if (!status)
+            return;
+        status = null;
+        engine.cursor.setStyle('');
+        engine.cursor.setDragType(CursorDragType.Move);
+        if (animationX) {
+            animationX = animationX();
+        }
+        if (animationY) {
+            animationY = animationY();
+        }
+    });
+};
+export var ResponsiveSimulator = observer(function (props) {
+    var container = useRef();
+    var content = useRef();
+    var prefix = usePrefix('responsive-simulator');
+    var screen = useScreen();
+    useDesigner(function (engine) {
+        useResizeEffect(container, content, engine);
+    });
+    return (React.createElement("div", __assign({}, props, { className: cls(prefix, props.className), style: __assign({ height: '100%', width: '100%', minHeight: 100, position: 'relative' }, props.style) }),
+        React.createElement("div", { ref: container, style: {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                height: '100%',
+                width: '100%',
+                overflow: 'overlay',
+            } },
+            React.createElement("div", { ref: content, style: {
+                    width: screen.width,
+                    height: screen.height,
+                    paddingRight: 15,
+                    paddingBottom: 15,
+                    position: 'relative',
+                    boxSizing: 'border-box',
+                    overflow: 'hidden',
+                } },
+                props.children,
+                React.createElement(ResizeHandle, { type: ResizeHandleType.Resize },
+                    React.createElement(IconWidget, { infer: "DragMove", style: { pointerEvents: 'none' } })),
+                React.createElement(ResizeHandle, { type: ResizeHandleType.ResizeHeight },
+                    React.createElement(IconWidget, { infer: "Menu", style: { pointerEvents: 'none' } })),
+                React.createElement(ResizeHandle, { type: ResizeHandleType.ResizeWidth },
+                    React.createElement(IconWidget, { infer: "Menu", style: { pointerEvents: 'none' } }))))));
+});