@mdesignable/react 1.0.0-beta.64

package/esm/widgets/DroppableWidget/index.js

@@ -0,0 +1,43 @@
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { observer } from '@formily/reactive-react';
+import { useTreeNode, useNodeIdProps } from '../../hooks';
+import { NodeTitleWidget } from '../NodeTitleWidget';
+import { NodeActionsWidget, } from '../NodeActionsWidget';
+import './styles.less';
+export var DroppableWidget = observer(function (_a) {
+    var _b;
+    var node = _a.node, actions = _a.actions, height = _a.height, width = _a.width, placeholder = _a.placeholder, style = _a.style, className = _a.className, hasChildrenProp = _a.hasChildren, props = __rest(_a, ["node", "actions", "height", "width", "placeholder", "style", "className", "hasChildren"]);
+    var currentNode = useTreeNode();
+    var nodeId = useNodeIdProps(node);
+    var target = node !== null && node !== void 0 ? node : currentNode;
+    var hasChildren = hasChildrenProp !== null && hasChildrenProp !== void 0 ? hasChildrenProp : ((_b = target.children) === null || _b === void 0 ? void 0 : _b.length) > 0;
+    return (React.createElement("div", __assign({}, nodeId, props, { className: className, style: style }),
+        hasChildren ? (props.children) : placeholder ? (React.createElement("div", { style: { height: height, width: width }, className: "dn-droppable-placeholder" },
+            React.createElement(NodeTitleWidget, { node: target }))) : (props.children),
+        (actions === null || actions === void 0 ? void 0 : actions.length) ? (React.createElement(NodeActionsWidget, null, actions.map(function (action, key) { return (React.createElement(NodeActionsWidget.Action, __assign({}, action, { key: key }))); }))) : null));
+});
+DroppableWidget.defaultProps = {
+    placeholder: true,
+};

package/esm/widgets/DroppableWidget/styles.less

@@ -0,0 +1,11 @@
+.dn-droppable-placeholder {
+  height: 60px;
+  background-color: var(--dn-droppable-bg-color);
+  border: 1px dashed var(--dn-droppable-border-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--dn-droppable-color);
+  font-weight: lighter;
+  font-size: 13px;
+}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import './styles.less';
+export interface IEmptyWidgetProps {
+    dragTipsDirection?: 'left' | 'right';
+}
+export declare const EmptyWidget: React.FC<IEmptyWidgetProps>;

package/esm/widgets/EmptyWidget/index.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { useTree, usePrefix } from '../../hooks';
+import { observer } from '@formily/reactive-react';
+import { IconWidget } from '../IconWidget';
+import './styles.less';
+export var EmptyWidget = observer(function (props) {
+    var _a;
+    var tree = useTree();
+    var prefix = usePrefix('empty');
+    var renderEmpty = function () {
+        return (React.createElement("div", { style: { display: 'flex', flexDirection: 'column' } },
+            React.createElement("div", { className: "animations" },
+                React.createElement(IconWidget, { infer: props.dragTipsDirection === 'left'
+                        ? 'DragLeftSourceAnimation'
+                        : 'DragRightSourceAnimation', size: 240 }),
+                React.createElement(IconWidget, { infer: "BatchDragAnimation", size: 240 })),
+            React.createElement("div", { className: "hotkeys-list" },
+                React.createElement("div", null,
+                    "Selection ",
+                    React.createElement(IconWidget, { infer: "Command" }),
+                    " + Click /",
+                    ' ',
+                    React.createElement(IconWidget, { infer: "Shift" }),
+                    " + Click /",
+                    ' ',
+                    React.createElement(IconWidget, { infer: "Command" }),
+                    " + A"),
+                React.createElement("div", null,
+                    "Copy ",
+                    React.createElement(IconWidget, { infer: "Command" }),
+                    " + C / Paste",
+                    ' ',
+                    React.createElement(IconWidget, { infer: "Command" }),
+                    " + V"),
+                React.createElement("div", null,
+                    "Delete ",
+                    React.createElement(IconWidget, { infer: "Delete" })))));
+    };
+    if (!((_a = tree === null || tree === void 0 ? void 0 : tree.children) === null || _a === void 0 ? void 0 : _a.length)) {
+        return (React.createElement("div", { className: prefix }, props.children ? props.children : renderEmpty()));
+    }
+    return null;
+});
+EmptyWidget.defaultProps = {
+    dragTipsDirection: 'left',
+};

package/esm/widgets/EmptyWidget/styles.less

@@ -0,0 +1,27 @@
+@import '../../variables.less';
+
+.@{prefix-cls}-empty {
+  transform: perspective(1px) translate3d(0, 0, 0);
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 100%;
+  width: 100%;
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--dn-empty-bg-color);
+  .animations {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+  .hotkeys-list {
+    text-align: center;
+    line-height: 30px;
+    color: #888;
+  }
+}

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import './styles.less';
+export declare const GhostWidget: React.MemoExoticComponent<import("@formily/reactive-react").ReactFC<unknown>>;

package/esm/widgets/GhostWidget/index.js

@@ -0,0 +1,35 @@
+import React, { useRef, useEffect } from 'react';
+import { useCursor, usePrefix, useDesigner } from '../../hooks';
+import { CursorStatus } from '@mdesignable/core';
+import { autorun } from '@formily/reactive';
+import { observer } from '@formily/reactive-react';
+import { NodeTitleWidget } from '../NodeTitleWidget';
+import './styles.less';
+export var GhostWidget = observer(function () {
+    var designer = useDesigner();
+    var cursor = useCursor();
+    var ref = useRef();
+    var prefix = usePrefix('ghost');
+    var movingNodes = designer.findMovingNodes();
+    var firstNode = movingNodes[0];
+    useEffect(function () {
+        return autorun(function () {
+            var _a, _b;
+            var transform = "perspective(1px) translate3d(".concat(((_a = cursor.position) === null || _a === void 0 ? void 0 : _a.topClientX) - 18, "px,").concat(((_b = cursor.position) === null || _b === void 0 ? void 0 : _b.topClientY) - 12, "px,0) scale(0.8)");
+            if (!ref.current)
+                return;
+            ref.current.style.transform = transform;
+        });
+    }, [designer, cursor]);
+    var renderNodes = function () {
+        return (React.createElement("span", { style: {
+                whiteSpace: 'nowrap',
+            } },
+            React.createElement(NodeTitleWidget, { node: firstNode }),
+            movingNodes.length > 1 ? '...' : ''));
+    };
+    if (!firstNode)
+        return null;
+    return cursor.status === CursorStatus.Dragging ? (React.createElement("div", { ref: ref, className: prefix }, renderNodes())) : null;
+});
+GhostWidget.displayName = 'GhostWidget';

package/esm/widgets/GhostWidget/styles.less

@@ -0,0 +1,20 @@
+@import '../../variables.less';
+
+.@{prefix-cls}-ghost {
+  padding-left: 25px;
+  padding-right: 15px;
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  color: var(--dn-ghost-color);
+  font-size: 12px;
+  z-index: 9999;
+  border-radius: 50px;
+  background-color: var(--dn-ghost-bg-color);
+  pointer-events: none;
+  left: 0;
+  top: 0;
+  transform: translate3d(0, 0, 0);
+}

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import './styles.less';
+export declare const HistoryWidget: React.FC;

package/esm/widgets/HistoryWidget/index.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import format from 'dateformat';
+import { observer } from '@formily/reactive-react';
+import { usePrefix, useWorkbench } from '../../hooks';
+import { TextWidget } from '../TextWidget';
+import cls from 'classnames';
+import './styles.less';
+export var HistoryWidget = observer(function () {
+    var workbench = useWorkbench();
+    var currentWorkspace = (workbench === null || workbench === void 0 ? void 0 : workbench.activeWorkspace) || (workbench === null || workbench === void 0 ? void 0 : workbench.currentWorkspace);
+    var prefix = usePrefix('history');
+    if (!currentWorkspace)
+        return null;
+    return (React.createElement("div", { className: prefix }, currentWorkspace.history.list().map(function (item, index) {
+        var type = item.type || 'default_state';
+        var token = type.replace(/\:/g, '_');
+        return (React.createElement("div", { className: cls(prefix + '-item', {
+                active: currentWorkspace.history.current === index,
+            }), key: item.timestamp, onClick: function () {
+                currentWorkspace.history.goTo(index);
+            } },
+            React.createElement("span", { className: prefix + '-item-title' },
+                React.createElement(TextWidget, { token: "operations.".concat(token) })),
+            React.createElement("span", { className: prefix + '-item-timestamp' },
+                ' ',
+                format(item.timestamp, 'yy/mm/dd HH:MM:ss'))));
+    })));
+});

package/esm/widgets/HistoryWidget/styles.less

@@ -0,0 +1,23 @@
+@import '../../variables.less';
+
+.@{prefix-cls}-history {
+  &-item {
+    display: flex;
+    justify-content: space-between;
+    min-height: 32px;
+    padding: 0 10px;
+    align-items: center;
+    cursor: pointer;
+    color: var(--dn-outline-tree-node-header-color);
+    &-timestamp {
+      font-size: 10px;
+    }
+    &:hover {
+      background-color: var(--dn-panel-active-bg-color);
+    }
+
+    &.active {
+      background-color: var(--dn-panel-active-bg-color);
+    }
+  }
+}

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { TooltipProps } from 'antd';
+import './styles.less';
+export interface IconProviderProps {
+    tooltip?: boolean;
+}
+export interface IShadowSVGProps {
+    content?: string;
+    width?: number | string;
+    height?: number | string;
+}
+export interface IIconWidgetProps extends React.HTMLAttributes<HTMLElement> {
+    tooltip?: React.ReactNode | TooltipProps;
+    infer: React.ReactNode | {
+        shadow: string;
+    };
+    size?: number | string;
+}
+export declare const IconWidget: React.FC<IIconWidgetProps> & {
+    Provider?: React.FC<IconProviderProps>;
+    ShadowSVG?: React.FC<IShadowSVGProps>;
+};

package/esm/widgets/IconWidget/index.js

@@ -0,0 +1,108 @@
+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, { createContext, useContext, useEffect, useRef } from 'react';
+import { isStr, isFn, isObj, isPlainObj } from '@mdesignable/shared';
+import { observer } from '@formily/reactive-react';
+import { Tooltip } from 'antd';
+import { usePrefix, useRegistry, useTheme } from '../../hooks';
+import cls from 'classnames';
+import './styles.less';
+var IconContext = createContext(null);
+var isNumSize = function (val) { return /^[\d.]+$/.test(val); };
+export var IconWidget = observer(function (props) {
+    var _a, _b, _c;
+    var theme = useTheme();
+    var context = useContext(IconContext);
+    var registry = useRegistry();
+    var prefix = usePrefix('icon');
+    var size = props.size || '1em';
+    var height = ((_a = props.style) === null || _a === void 0 ? void 0 : _a.height) || size;
+    var width = ((_b = props.style) === null || _b === void 0 ? void 0 : _b.width) || size;
+    var takeIcon = function (infer) {
+        if (isStr(infer)) {
+            var finded = registry.getDesignerIcon(infer);
+            if (finded) {
+                return takeIcon(finded);
+            }
+            return React.createElement("img", { src: infer, height: height, width: width });
+        }
+        else if (isFn(infer)) {
+            return React.createElement(infer, {
+                height: height,
+                width: width,
+                fill: 'currentColor',
+            });
+        }
+        else if (React.isValidElement(infer)) {
+            if (infer.type === 'svg') {
+                return React.cloneElement(infer, {
+                    height: height,
+                    width: width,
+                    fill: 'currentColor',
+                    viewBox: infer.props.viewBox || '0 0 1024 1024',
+                    focusable: 'false',
+                    'aria-hidden': 'true',
+                });
+            }
+            else if (infer.type === 'path' || infer.type === 'g') {
+                return (React.createElement("svg", { viewBox: "0 0 1024 1024", height: height, width: width, fill: "currentColor", focusable: "false", "aria-hidden": "true" }, infer));
+            }
+            return infer;
+        }
+        else if (isPlainObj(infer)) {
+            if (infer[theme]) {
+                return takeIcon(infer[theme]);
+            }
+            else if (infer['shadow']) {
+                return (React.createElement(IconWidget.ShadowSVG, { width: width, height: height, content: infer['shadow'] }));
+            }
+            return null;
+        }
+    };
+    var renderTooltips = function (children) {
+        if (!isStr(props.infer) && (context === null || context === void 0 ? void 0 : context.tooltip))
+            return children;
+        var tooltip = props.tooltip || registry.getDesignerMessage("icons.".concat(props.infer));
+        if (tooltip) {
+            var title = React.isValidElement(tooltip) || isStr(tooltip)
+                ? tooltip
+                : tooltip.title;
+            var props_1 = React.isValidElement(tooltip) || isStr(tooltip)
+                ? {}
+                : isObj(tooltip)
+                    ? tooltip
+                    : {};
+            return (React.createElement(Tooltip, __assign({}, props_1, { title: title }), children));
+        }
+        return children;
+    };
+    if (!props.infer)
+        return null;
+    return renderTooltips(React.createElement("span", __assign({}, props, { className: cls(prefix, props.className), style: __assign(__assign({}, props.style), { cursor: props.onClick ? 'pointer' : (_c = props.style) === null || _c === void 0 ? void 0 : _c.cursor }) }), takeIcon(props.infer)));
+});
+IconWidget.ShadowSVG = function (props) {
+    var ref = useRef();
+    var width = isNumSize(props.width) ? "".concat(props.width, "px") : props.width;
+    var height = isNumSize(props.height) ? "".concat(props.height, "px") : props.height;
+    useEffect(function () {
+        if (ref.current) {
+            var root = ref.current.attachShadow({
+                mode: 'open',
+            });
+            root.innerHTML = "<svg viewBox=\"0 0 1024 1024\" style=\"width:".concat(width, ";height:").concat(height, "\">").concat(props.content, "</svg>");
+        }
+    }, []);
+    return React.createElement("div", { ref: ref });
+};
+IconWidget.Provider = function (props) {
+    return (React.createElement(IconContext.Provider, { value: props }, props.children));
+};

package/esm/widgets/IconWidget/styles.less

@@ -0,0 +1,17 @@
+@import '../../variables.less';
+
+.@{prefix-cls}-icon {
+  display: inline-block;
+  color: inherit;
+  font-style: normal;
+  line-height: 0;
+  text-align: center;
+  text-transform: none;
+  vertical-align: -0.125em;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  svg {
+    pointer-events: none;
+  }
+}

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { TypographyProps } from 'antd';
+import './styles.less';
+export interface INodeActionsWidgetProps {
+    className?: string;
+    style?: React.CSSProperties;
+    activeShown?: boolean;
+}
+export interface INodeActionsWidgetActionProps extends Omit<React.ComponentProps<'a'>, 'title' | 'type' | 'ref'>, Partial<TypographyProps['Link']> {
+    className?: string;
+    style?: React.CSSProperties;
+    title: React.ReactNode;
+    icon?: React.ReactNode;
+}
+export declare const NodeActionsWidget: React.FC<INodeActionsWidgetProps> & {
+    Action?: React.FC<INodeActionsWidgetActionProps>;
+};

package/esm/widgets/NodeActionsWidget/index.js

@@ -0,0 +1,48 @@
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { Space, Typography, Divider } from 'antd';
+import { observer } from '@formily/reactive-react';
+import { usePrefix, useTreeNode, useSelected } from '../../hooks';
+import { IconWidget } from '../IconWidget';
+import { TextWidget } from '../TextWidget';
+import cls from 'classnames';
+import './styles.less';
+export var NodeActionsWidget = observer(function (props) {
+    var node = useTreeNode();
+    var prefix = usePrefix('node-actions');
+    var selected = useSelected();
+    if (selected.indexOf(node.id) === -1 && props.activeShown)
+        return null;
+    return (React.createElement("div", { className: cls(prefix, props.className), style: props.style },
+        React.createElement("div", { className: prefix + '-content' },
+            React.createElement(Space, { split: React.createElement(Divider, { type: "vertical" }) }, props.children))));
+});
+NodeActionsWidget.Action = function (_a) {
+    var icon = _a.icon, title = _a.title, props = __rest(_a, ["icon", "title"]);
+    var prefix = usePrefix('node-actions-item');
+    return (React.createElement(Typography.Link, __assign({}, props, { className: cls(props.className, prefix), "data-click-stop-propagation": "true" }),
+        React.createElement("span", { className: prefix + '-text' },
+            React.createElement(IconWidget, { infer: icon }),
+            React.createElement(TextWidget, null, title))));
+};

package/esm/widgets/NodeActionsWidget/styles.less

@@ -0,0 +1,53 @@
+.dn-node-actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  overflow: hidden;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  &-content {
+    position: relative;
+    padding: 0 20px;
+    display: flex;
+    align-items: center;
+    line-height: 1;
+    &::before {
+      position: absolute;
+      content: '';
+      display: block;
+      height: 0;
+      width: 300%;
+      top: 50%;
+      border-bottom: 1px dashed var(--border-color-split);
+      right: 100%;
+    }
+    &::after {
+      position: absolute;
+      content: '';
+      display: block;
+      height: 0;
+      width: 300%;
+      top: 50%;
+      border-bottom: 1px dashed var(--border-color-split);
+      left: 100%;
+    }
+    a {
+      color: var(--text-color-secondary);
+      &:hover {
+        color: var(--primary-color);
+      }
+    }
+  }
+  &-item {
+    &-text {
+      font-size: 10px;
+      display: flex;
+      align-items: center;
+      line-height: 1;
+      .dn-icon {
+        margin-right: 6px;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import './styles.less';
+export interface INodePathWidgetProps {
+    workspaceId?: string;
+    maxItems?: number;
+}
+export declare const NodePathWidget: React.FC<INodePathWidgetProps>;

package/esm/widgets/NodePathWidget/index.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Breadcrumb } from 'antd';
+import { useSelectedNode, useSelection, usePrefix, useHover } from '../../hooks';
+import { IconWidget } from '../IconWidget';
+import { NodeTitleWidget } from '../NodeTitleWidget';
+import { observer } from '@formily/reactive-react';
+import './styles.less';
+export var NodePathWidget = observer(function (props) {
+    var _a;
+    var selected = useSelectedNode(props.workspaceId);
+    var selection = useSelection(props.workspaceId);
+    var hover = useHover(props.workspaceId);
+    var prefix = usePrefix('node-path');
+    if (!selected)
+        return React.createElement(React.Fragment, null);
+    var maxItems = (_a = props.maxItems) !== null && _a !== void 0 ? _a : 3;
+    var nodes = selected
+        .getParents()
+        .slice(0, maxItems - 1)
+        .reverse()
+        .concat(selected);
+    return (React.createElement(Breadcrumb, { className: prefix }, nodes.map(function (node, key) {
+        return (React.createElement(Breadcrumb.Item, { key: key },
+            key === 0 && (React.createElement(IconWidget, { infer: "Position", style: { marginRight: 3 } })),
+            React.createElement("a", { href: "", onMouseEnter: function () {
+                    hover.setHover(node);
+                }, onClick: function (e) {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    selection.select(node);
+                } },
+                React.createElement(NodeTitleWidget, { node: node }))));
+    })));
+});

package/esm/widgets/NodePathWidget/styles.less

@@ -0,0 +1,16 @@
+.dn-node-path {
+  padding: 4px 10px !important;
+  border-bottom: 1px solid var(--dn-panel-border-color);
+
+  .dn-icon {
+    font-size: 11px;
+  }
+
+  .ant-breadcrumb-separator {
+    margin: 0 4px !important;
+  }
+
+  a {
+    font-size: 12px;
+  }
+}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { TreeNode } from '@mdesignable/core';
+export interface INodeTitleWidgetProps {
+    node: TreeNode;
+}
+export declare const NodeTitleWidget: React.FC<INodeTitleWidgetProps>;

package/esm/widgets/NodeTitleWidget/index.js

@@ -0,0 +1,13 @@
+import React, { Fragment } from 'react';
+import { observer } from '@formily/reactive-react';
+export var NodeTitleWidget = observer(function (props) {
+    var takeNode = function () {
+        var node = props.node;
+        if (node.componentName === '$$ResourceNode$$') {
+            return node.children[0];
+        }
+        return node;
+    };
+    var node = takeNode();
+    return React.createElement(Fragment, null, node.getMessage('title') || node.componentName);
+});

package/esm/widgets/OutlineWidget/Insertion.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface IInsertionProps {
+    workspaceId?: string;
+}
+export declare const Insertion: React.FC<IInsertionProps>;