@mdesignable/react 1.0.0-beta.64

package/esm/widgets/AuxToolWidget/styles.less

@@ -0,0 +1,383 @@
+@import '../../variables.less';
+
+@keyframes dn-animate-slide-to-top {
+  from {
+    transform: translateY(-10%);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateY(0);
+    opacity: 0.8;
+  }
+}
+
+.@{prefix-cls}-auxtool {
+  transform: perspective(1px) translate3d(0, 0, 0);
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+
+  z-index: 9998;
+}
+
+.dn-aux-button {
+  button {
+    font-size: 12px !important;
+    display: flex;
+    align-items: center;
+    padding: 0 3px;
+    height: 20px;
+    color: var(--dn-aux-selector-btn-color); //#fff
+    background: var(--dn-aux-selector-btn-bg-color); //#1890ff
+    border-color: var(--dn-aux-selector-btn-border-color); //#1890ff
+
+    &:hover,
+    &:focus {
+      color: var(--dn-aux-selector-btn-hover-color); //#fff
+      background: var(--dn-aux-selector-btn-hover-bg-color); //#40a9ff
+      border-color: var(--dn-aux-selector-btn-hover-border-color); //#40a9ff
+    }
+
+    &:active {
+      color: var(--dn-aux-selector-btn-active-color); //#fff
+      background: var(--dn-aux-selector-btn-active-bg-color); //#096dd9
+      border-color: var(--dn-aux-selector-btn-active-border-color); //#096dd9
+    }
+  }
+}
+
+.@{prefix-cls}-aux-cover-rect {
+  &.dragging {
+    background-color: var(--dn-aux-cover-rect-dragging-color);
+  }
+
+  &.dropping {
+    background-color: var(--dn-aux-cover-rect-dropping-color);
+  }
+}
+
+.@{prefix-cls}-aux-free-selection {
+  background-color: var(--dn-aux-free-selection-background-color);
+  border-color: var(--dn-aux-free-selection-border-color);
+}
+
+.@{prefix-cls}-aux-helpers {
+  position: absolute;
+  pointer-events: all;
+  z-index: 10;
+  user-select: none;
+
+  .dn-aux-button();
+
+  &.bottom-right {
+    top: 100%;
+    right: 0;
+  }
+
+  &.bottom-left {
+    top: 100%;
+    left: 0;
+  }
+
+  &.bottom-center {
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  &.inner-top-right {
+    top: -2px;
+    right: 2px;
+  }
+
+  &.inner-top-left {
+    top: -2px;
+    left: 2px;
+  }
+
+  &.inner-top-center {
+    top: -2px;
+    right: 2px;
+  }
+
+  &.inner-bottom-right {
+    bottom: -2px;
+    right: 2px;
+  }
+
+  &.inner-bottom-left {
+    bottom: -2px;
+    left: 2px;
+  }
+
+  &.inner-bottom-center {
+    bottom: -2px;
+    right: 2px;
+  }
+
+  &.top-right {
+    bottom: 100%;
+    right: 0;
+  }
+
+  &.top-left {
+    bottom: 100%;
+    left: 0;
+  }
+
+  &.top-center {
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  button {
+    span {
+      transform: scale(0.9);
+      margin-left: 2px;
+
+      &.@{prefix-cls}-icon {
+        transform: scale(1);
+        margin-left: 0;
+      }
+    }
+  }
+
+  &-content {
+    display: flex;
+    flex-wrap: nowrap;
+    white-space: nowrap;
+
+    button {
+      font-size: 12px !important;
+      display: flex;
+      align-items: center;
+      padding: 0 3px;
+      height: 20px;
+    }
+
+    & > * {
+      margin-top: 4px;
+      margin-bottom: 4px;
+      margin-left: 2px;
+
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+  }
+}
+
+.@{prefix-cls}-aux-insertion {
+  background-color: var(--dn-aux-insertion-color);
+}
+
+.@{prefix-cls}-aux-dashed-box {
+  border: 1px dashed var(--dn-aux-dashed-box-color);
+
+  &-title {
+    color: var(--dn-aux-dashed-box-title-color);
+  }
+}
+
+.@{prefix-cls}-aux-selection-box {
+  border: 2px solid var(--dn-aux-selection-box-border-color);
+  position: relative;
+  pointer-events: none;
+
+  &-inner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  &-title {
+    color: var(--dn-aux-selection-box-color);
+  }
+}
+
+.@{prefix-cls}-aux-selector {
+  .dn-aux-button();
+
+  &-menu {
+    margin-top: -4px;
+    animation: dn-animate-slide-to-top 0.2s;
+    opacity: 0.8;
+
+    button {
+      font-size: 12px !important;
+      display: flex;
+      align-items: center;
+      padding: 0 3px;
+      height: 20px;
+      margin-top: 2px;
+    }
+  }
+}
+
+.@{prefix-cls}-aux-drag-handler {
+  cursor: move;
+}
+
+.@{prefix-cls}-aux-node-resize-handler {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  pointer-events: all;
+  border-radius: 10px;
+  background-color: #fff;
+  border: 1px solid var(--dn-brand-color);
+
+  &.left-center {
+    left: 0;
+    top: 50%;
+    transform: translate(calc(-50% - 1px), -50%);
+    cursor: ew-resize;
+  }
+
+  &.right-center {
+    left: 100%;
+    top: 50%;
+    transform: translate(calc(-50% + 1px), -50%);
+    cursor: ew-resize;
+  }
+
+  &.center-top {
+    left: 50%;
+    top: 0;
+    transform: translate(-50%, calc(-50% - 1px));
+    cursor: ns-resize;
+  }
+
+  &.center-bottom {
+    left: 50%;
+    top: 100%;
+    transform: translate(-50%, calc(-50% + 1px));
+    cursor: ns-resize;
+  }
+
+  &.left-top {
+    left: 0;
+    top: 0;
+    transform: translate(calc(-50% + 1px), calc(-50% + 1px));
+    cursor: nwse-resize;
+  }
+
+  &.left-bottom {
+    left: 0;
+    top: 100%;
+    transform: translate(-50%, -50%);
+    cursor: nesw-resize;
+  }
+
+  &.right-bottom {
+    left: 100%;
+    top: 100%;
+    transform: translate(-50%, -50%);
+    cursor: nwse-resize;
+  }
+
+  &.right-top {
+    left: 100%;
+    top: 0;
+    transform: translate(-50%, -50%);
+    cursor: nesw-resize;
+  }
+}
+
+.@{prefix-cls}-aux-node-translate-handler {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 2px;
+  width: 40px;
+  height: 20px;
+  background: #1890ff;
+  opacity: 0.5;
+  pointer-events: all;
+}
+
+.@{prefix-cls}-aux-space-block-ruler-indicator {
+  position: absolute;
+  background-color: var(--dn-brand-color);
+  color: var(--dn-white);
+  border-radius: 8px;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  span {
+    margin: 0 6px;
+    display: inline-block;
+    font-size: 12px;
+  }
+}
+
+.@{prefix-cls}-aux-space-block-ruler-h {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translate(0, -50%);
+  width: 100%;
+  height: 12px;
+  border-left: 1px solid var(--dn-brand-color);
+  border-right: 1px solid var(--dn-brand-color);
+
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    transform: translate(0, -50%);
+    width: 100%;
+    height: 1px;
+    background-color: var(--dn-brand-color);
+    z-index: 1;
+  }
+
+  .@{prefix-cls}-aux-space-block-ruler-indicator {
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%) scale(0.7);
+  }
+}
+
+.@{prefix-cls}-aux-space-block-ruler-v {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, 0);
+  height: 100%;
+  width: 12px;
+  border-top: 1px solid var(--dn-brand-color);
+  border-bottom: 1px solid var(--dn-brand-color);
+
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, 0);
+    height: 100%;
+    width: 1px;
+    background-color: var(--dn-brand-color);
+    z-index: 1;
+  }
+
+  .@{prefix-cls}-aux-space-block-ruler-indicator {
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%) scale(0.7);
+  }
+}

package/esm/widgets/ComponentTreeWidget/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { IDesignerComponents } from '../../types';
+import { TreeNode } from '@mdesignable/core';
+import './styles.less';
+export interface IComponentTreeWidgetProps {
+    style?: React.CSSProperties;
+    className?: string;
+    components: IDesignerComponents;
+}
+export interface ITreeNodeWidgetProps {
+    node: TreeNode;
+    children?: React.ReactChild;
+}
+export declare const TreeNodeWidget: React.FC<ITreeNodeWidgetProps>;
+export declare const ComponentTreeWidget: React.FC<IComponentTreeWidgetProps>;

package/esm/widgets/ComponentTreeWidget/index.js

@@ -0,0 +1,106 @@
+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);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React, { Fragment, useEffect } from 'react';
+import { useTree, usePrefix, useDesigner, useComponents } from '../../hooks';
+import { TreeNodeContext, DesignerComponentsContext } from '../../context';
+import { GlobalRegistry } from '@mdesignable/core';
+import { observer } from '@formily/reactive-react';
+import cls from 'classnames';
+import './styles.less';
+export var TreeNodeWidget = observer(function (props) {
+    var _a, _b;
+    var designer = useDesigner((_b = (_a = props.node) === null || _a === void 0 ? void 0 : _a.designerProps) === null || _b === void 0 ? void 0 : _b.effects);
+    var components = useComponents();
+    var node = props.node;
+    var renderChildren = function () {
+        var _a, _b;
+        if ((_a = node === null || node === void 0 ? void 0 : node.designerProps) === null || _a === void 0 ? void 0 : _a.selfRenderChildren)
+            return [];
+        return (_b = node === null || node === void 0 ? void 0 : node.children) === null || _b === void 0 ? void 0 : _b.map(function (child) {
+            return React.createElement(TreeNodeWidget, { key: child.id, node: child });
+        });
+    };
+    var renderProps = function (extendsProps) {
+        var _a, _b, _c;
+        if (extendsProps === void 0) { extendsProps = {}; }
+        var props = __assign(__assign(__assign(__assign({}, (_a = node.designerProps) === null || _a === void 0 ? void 0 : _a.defaultProps), extendsProps), node.props), (_c = (_b = node.designerProps) === null || _b === void 0 ? void 0 : _b.getComponentProps) === null || _c === void 0 ? void 0 : _c.call(_b, node));
+        if (node.depth === 0) {
+            delete props.style;
+        }
+        return props;
+    };
+    var renderComponent = function () {
+        var _a, _b;
+        var componentName = node.componentName;
+        var Component = components[componentName];
+        var dataId = {};
+        if (Component) {
+            if (designer) {
+                dataId[(_a = designer === null || designer === void 0 ? void 0 : designer.props) === null || _a === void 0 ? void 0 : _a.nodeIdAttrName] = node.id;
+            }
+            return React.createElement.apply(React, __spreadArray([Component,
+                renderProps(dataId)], __read(renderChildren()), false));
+        }
+        else {
+            if ((_b = node === null || node === void 0 ? void 0 : node.children) === null || _b === void 0 ? void 0 : _b.length) {
+                return React.createElement(Fragment, null, renderChildren());
+            }
+        }
+    };
+    if (!node)
+        return null;
+    if (node.hidden)
+        return null;
+    return React.createElement(TreeNodeContext.Provider, { value: node }, renderComponent());
+});
+export var ComponentTreeWidget = observer(function (props) {
+    var _a, _b;
+    var tree = useTree();
+    var prefix = usePrefix('component-tree');
+    var designer = useDesigner();
+    var dataId = {};
+    if (designer && tree) {
+        dataId[(_a = designer === null || designer === void 0 ? void 0 : designer.props) === null || _a === void 0 ? void 0 : _a.nodeIdAttrName] = tree.id;
+    }
+    useEffect(function () {
+        GlobalRegistry.registerDesignerBehaviors(props.components);
+    }, []);
+    return (React.createElement("div", __assign({ style: __assign(__assign({}, props.style), (_b = tree === null || tree === void 0 ? void 0 : tree.props) === null || _b === void 0 ? void 0 : _b.style), className: cls(prefix, props.className) }, dataId),
+        React.createElement(DesignerComponentsContext.Provider, { value: props.components },
+            React.createElement(TreeNodeWidget, { node: tree }))));
+});
+ComponentTreeWidget.displayName = 'ComponentTreeWidget';

package/esm/widgets/ComponentTreeWidget/styles.less

@@ -0,0 +1,6 @@
+@import '../../variables.less';
+
+.@{prefix-cls}-component-tree {
+  min-height: 100%;
+  min-width: 100%;
+}

package/esm/widgets/DesignerToolsWidget/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './styles.less';
+type DesignerToolsType = 'HISTORY' | 'CURSOR' | 'SCREEN_TYPE';
+export type IDesignerToolsWidgetProps = {
+    className?: string;
+    style?: React.CSSProperties;
+    use?: DesignerToolsType[];
+};
+export declare const DesignerToolsWidget: React.FC<IDesignerToolsWidgetProps>;
+export {};

package/esm/widgets/DesignerToolsWidget/index.js

@@ -0,0 +1,109 @@
+import React, { Fragment, useRef } from 'react';
+import { Button, InputNumber } from 'antd';
+import { observer } from '@formily/reactive-react';
+import { CursorType, ScreenType } from '@mdesignable/core';
+import { useCursor, useHistory, useScreen, usePrefix, useWorkbench, } from '../../hooks';
+import { IconWidget } from '../IconWidget';
+import cls from 'classnames';
+import './styles.less';
+export var DesignerToolsWidget = observer(function (props) {
+    var screen = useScreen();
+    var cursor = useCursor();
+    var workbench = useWorkbench();
+    var history = useHistory();
+    var sizeRef = useRef({});
+    var prefix = usePrefix('designer-tools');
+    var renderHistoryController = function () {
+        if (!props.use.includes('HISTORY'))
+            return null;
+        return (React.createElement(Button.Group, { size: "small", style: { marginRight: 20 } },
+            React.createElement(Button, { size: "small", disabled: !(history === null || history === void 0 ? void 0 : history.allowUndo), onClick: function () {
+                    history.undo();
+                } },
+                React.createElement(IconWidget, { infer: "Undo" })),
+            React.createElement(Button, { size: "small", disabled: !(history === null || history === void 0 ? void 0 : history.allowRedo), onClick: function () {
+                    history.redo();
+                } },
+                React.createElement(IconWidget, { infer: "Redo" }))));
+    };
+    var renderCursorController = function () {
+        if (workbench.type !== 'DESIGNABLE')
+            return null;
+        if (!props.use.includes('CURSOR'))
+            return null;
+        return (React.createElement(Button.Group, { size: "small", style: { marginRight: 20 } },
+            React.createElement(Button, { size: "small", disabled: cursor.type === CursorType.Normal, onClick: function () {
+                    cursor.setType(CursorType.Normal);
+                } },
+                React.createElement(IconWidget, { infer: "Move" })),
+            React.createElement(Button, { size: "small", disabled: cursor.type === CursorType.Selection, onClick: function () {
+                    cursor.setType(CursorType.Selection);
+                } },
+                React.createElement(IconWidget, { infer: "Selection" }))));
+    };
+    var renderResponsiveController = function () {
+        if (!props.use.includes('SCREEN_TYPE'))
+            return null;
+        if (screen.type !== ScreenType.Responsive)
+            return null;
+        return (React.createElement(Fragment, null,
+            React.createElement(InputNumber, { size: "small", value: screen.width, style: { width: 70, textAlign: 'center' }, onChange: function (value) {
+                    sizeRef.current.width = value;
+                }, onPressEnter: function () {
+                    screen.setSize(sizeRef.current.width, screen.height);
+                } }),
+            React.createElement(IconWidget, { size: 10, infer: "Close", style: { padding: '0 3px', color: '#999' } }),
+            React.createElement(InputNumber, { value: screen.height, size: "small", style: {
+                    width: 70,
+                    textAlign: 'center',
+                    marginRight: 10,
+                }, onChange: function (value) {
+                    sizeRef.current.height = value;
+                }, onPressEnter: function () {
+                    screen.setSize(screen.width, sizeRef.current.height);
+                } }),
+            (screen.width !== '100%' || screen.height !== '100%') && (React.createElement(Button, { size: "small", style: { marginRight: 20 }, onClick: function () {
+                    screen.resetSize();
+                } },
+                React.createElement(IconWidget, { infer: "Recover" })))));
+    };
+    var renderScreenTypeController = function () {
+        if (!props.use.includes('SCREEN_TYPE'))
+            return null;
+        return (React.createElement(Button.Group, { size: "small", style: { marginRight: 20 } },
+            React.createElement(Button, { size: "small", disabled: screen.type === ScreenType.PC, onClick: function () {
+                    screen.setType(ScreenType.PC);
+                } },
+                React.createElement(IconWidget, { infer: "PC" })),
+            React.createElement(Button, { size: "small", disabled: screen.type === ScreenType.Mobile, onClick: function () {
+                    screen.setType(ScreenType.Mobile);
+                } },
+                React.createElement(IconWidget, { infer: "Mobile" })),
+            React.createElement(Button, { size: "small", disabled: screen.type === ScreenType.Responsive, onClick: function () {
+                    screen.setType(ScreenType.Responsive);
+                } },
+                React.createElement(IconWidget, { infer: "Responsive" }))));
+    };
+    var renderMobileController = function () {
+        if (!props.use.includes('SCREEN_TYPE'))
+            return null;
+        if (screen.type !== ScreenType.Mobile)
+            return;
+        return (React.createElement(Button, { size: "small", style: { marginRight: 20 }, onClick: function () {
+                screen.setFlip(!screen.flip);
+            } },
+            React.createElement(IconWidget, { infer: "Flip", style: {
+                    transition: 'all .15s ease-in',
+                    transform: screen.flip ? 'rotate(-90deg)' : '',
+                } })));
+    };
+    return (React.createElement("div", { style: props.style, className: cls(prefix, props.className) },
+        renderHistoryController(),
+        renderCursorController(),
+        renderScreenTypeController(),
+        renderMobileController(),
+        renderResponsiveController()));
+});
+DesignerToolsWidget.defaultProps = {
+    use: ['HISTORY', 'CURSOR', 'SCREEN_TYPE'],
+};

package/esm/widgets/DesignerToolsWidget/styles.less

@@ -0,0 +1,29 @@
+@import '../../variables.less';
+
+.@{prefix-cls}-designer-tools {
+  display: flex;
+  align-items: center;
+
+  .ant-input-number {
+    font-size: 12px !important;
+    background: var(--dn-toolbar-input-bg-color) !important;
+    border-color: var(--dn-toolbar-input-border-color) !important;
+    color: var(--dn-toolbar-input-color) !important;
+
+    .ant-input-number-handler-wrap,
+    .ant-input-number-handler {
+      background: var(--dn-toolbar-input-handler-bg-color) !important;
+      border-color: var(--dn-toolbar-input-border-color) !important;
+      color: var(--dn-toolbar-input-color) !important;
+    }
+
+    .ant-input-number-handler-down-inner,
+    .ant-input-number-handler-up-inner {
+      color: var(--dn-toolbar-input-color) !important;
+    }
+
+    &:hover {
+      border-color: var(--dn-toolbar-input-hover-border-color) !important;
+    }
+  }
+}

package/esm/widgets/DroppableWidget/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { TreeNode } from '@mdesignable/core';
+import { INodeActionsWidgetActionProps } from '../NodeActionsWidget';
+import './styles.less';
+export interface IDroppableWidgetProps {
+    node?: TreeNode;
+    actions?: INodeActionsWidgetActionProps[];
+    placeholder?: boolean;
+    height?: number;
+    width?: number;
+    style?: React.CSSProperties;
+    className?: string;
+    hasChildren?: boolean;
+}
+export declare const DroppableWidget: React.FC<IDroppableWidgetProps>;