liteflow-editor-process 1.0.0

package/dist/LiteFlowEditor/panels/settingBar/properties/RichParamEditor.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Text, Descendant, BaseEditor } from 'slate';
+import { ReactEditor } from 'slate-react';
+interface VariableElement {
+    type: 'variable';
+    label: string;
+    value: string;
+    children: Text[];
+}
+type CustomElement = VariableElement | {
+    type: 'paragraph';
+    children: Descendant[];
+};
+declare module 'slate' {
+    interface CustomTypes {
+        Editor: BaseEditor & ReactEditor;
+        Element: CustomElement;
+    }
+}
+interface ParamItem {
+    label: string;
+    value?: string;
+    options: ParamItem[];
+    disabled?: boolean;
+}
+interface RichParamEditorProps {
+    value: Descendant[];
+    onChange: (value: Descendant[]) => void;
+    options: ParamItem[];
+    disabled?: boolean;
+}
+declare const RichParamEditor: React.FC<RichParamEditorProps>;
+export default RichParamEditor;

package/dist/LiteFlowEditor/panels/settingBar/properties/RichParamEditor.js

@@ -0,0 +1,195 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+import React, { useMemo, useCallback, useState, useRef } from 'react';
+import { createEditor, Transforms, Text, Editor, Range } from 'slate';
+import { Slate, Editable, withReact, ReactEditor } from 'slate-react';
+import { css } from '@emotion/css';
+import CustomDropdown from "./CustomDropdown";
+import { useTranslation } from 'react-i18next';
+var VariableTag = function VariableTag(_ref) {
+  var attributes = _ref.attributes,
+    children = _ref.children,
+    element = _ref.element;
+  var el = element;
+  return /*#__PURE__*/React.createElement("span", _extends({}, attributes, {
+    contentEditable: false,
+    className: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        display: inline-block;\n        margin: 0 2px;\n        padding: 0 4px;\n        background: #e6f7ff;\n        border: 1px solid #91d5ff;\n        border-radius: 4px;\n        font-size: 12px;\n      "])))
+  }), el.label);
+};
+var Element = function Element(props) {
+  var attributes = props.attributes,
+    children = props.children,
+    element = props.element;
+  switch (element.type) {
+    case 'variable':
+      return /*#__PURE__*/React.createElement(VariableTag, props);
+    default:
+      return /*#__PURE__*/React.createElement("span", attributes, children);
+  }
+};
+var withVariables = function withVariables(editor) {
+  var isInline = editor.isInline;
+  editor.isInline = function (element) {
+    return element.type === 'variable' ? true : isInline(element);
+  };
+  return editor;
+};
+var insertVariable = function insertVariable(editor, variable) {
+  var variableElement = {
+    type: 'variable',
+    label: variable.label,
+    value: variable.value,
+    children: [{
+      text: ''
+    }]
+  };
+  Transforms.delete(editor, {
+    unit: 'character',
+    reverse: true
+  });
+  Transforms.insertNodes(editor, variableElement);
+  setTimeout(function () {
+    var endPoint = Editor.end(editor, []);
+    Transforms.select(editor, endPoint);
+    ReactEditor.focus(editor);
+  }, 0);
+};
+var RichParamEditor = function RichParamEditor(_ref2) {
+  var value = _ref2.value,
+    _onChange = _ref2.onChange,
+    options = _ref2.options,
+    _ref2$disabled = _ref2.disabled,
+    disabled = _ref2$disabled === void 0 ? false : _ref2$disabled;
+  var editor = useMemo(function () {
+    return withVariables(withReact(createEditor()));
+  }, []);
+  var renderElement = useCallback(function (props) {
+    return /*#__PURE__*/React.createElement(Element, props);
+  }, []);
+  var editorContainerRef = useRef(null);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    target = _useState2[0],
+    setTarget = _useState2[1];
+  var _useState3 = useState({
+      top: 0,
+      left: 0,
+      width: 0
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    dropdownPos = _useState4[0],
+    setDropdownPos = _useState4[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var handleKeyDown = function handleKeyDown(event) {
+    // console.log(event.key,'event.key');
+    if (event.key === '/') {
+      var selection = editor.selection;
+      if (selection && Range.isCollapsed(selection)) {
+        setTarget(selection);
+        setTimeout(function () {
+          if (editorContainerRef.current) {
+            var rect = editorContainerRef.current.getBoundingClientRect();
+            // console.log(rect,'rect');
+            setDropdownPos({
+              top: rect.bottom + window.scrollY,
+              left: rect.left + window.scrollX,
+              width: rect.width
+            });
+          }
+        }, 0);
+      }
+    } else {
+      setTarget(null);
+    }
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      Transforms.insertText(editor, '\n');
+    }
+  };
+  var handleSelect = function handleSelect(item) {
+    if (item.disabled) {
+      return;
+    }
+    if (target) {
+      Transforms.select(editor, target);
+      insertVariable(editor, item);
+    }
+    setTarget(null);
+    // setDropdownPos(null);
+  };
+  return /*#__PURE__*/React.createElement(Slate, {
+    editor: editor,
+    value: value.length ? value : [{
+      type: 'paragraph',
+      children: [{
+        text: ''
+      }]
+    }],
+    onChange: function onChange(val) {
+      _onChange(val);
+      var selection = editor.selection;
+      if (selection && Range.isCollapsed(selection)) {
+        var _Editor$node = Editor.node(editor, selection.focus.path),
+          _Editor$node2 = _slicedToArray(_Editor$node, 1),
+          node = _Editor$node2[0];
+        var text = Text.isText(node) ? node.text : '';
+        if (text.endsWith('/')) {
+          setTarget(selection);
+          // 💡 延迟以等待 DOM 更新完成
+          setTimeout(function () {
+            if (editorContainerRef.current) {
+              var rect = editorContainerRef.current.getBoundingClientRect();
+              // console.log(rect,'rect');
+              setDropdownPos({
+                top: rect.bottom + window.scrollY,
+                left: rect.left + window.scrollX,
+                width: rect.width
+              });
+            }
+          }, 0);
+        }
+      }
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: editorContainerRef,
+    className: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          border: 1px solid #d9d9d9;\n          padding: 6px;\n          min-height: 36px;\n          border-radius: 4px;\n          cursor: ", ";\n          background: ", ";\n        "])), disabled ? 'not-allowed' : 'text', disabled ? '#f5f5f5' : 'white')
+  }, /*#__PURE__*/React.createElement(Editable, {
+    renderElement: renderElement,
+    onKeyDown: handleKeyDown,
+    placeholder: t('input_insert_variables'),
+    readOnly: disabled
+  })), /*#__PURE__*/React.createElement(CustomDropdown, {
+    open: !!target,
+    position: dropdownPos,
+    onClose: function onClose() {
+      return setTarget(null);
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["padding: 4px 0;"])))
+  }, options.length > 0 ? options.map(function (optP) {
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: optP.label
+    }, optP.value ? /*#__PURE__*/React.createElement("div", {
+      className: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n                        padding: 8px 12px;\n                        color: #999;\n                        fontWeight: bold;\n                        fontSize: 14px;\n                        cursor: pointer;\n                        &:hover {\n                          background: #f5f5f5;\n                        }\n                      "]))),
+      onClick: function onClick() {
+        return handleSelect(optP);
+      }
+    }, optP.label) : /*#__PURE__*/React.createElement("div", {
+      className: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n                        padding: 8px 12px;\n                        color: #999;\n                        fontWeight: bold;\n                        fontSize: 14px;\n                      "])))
+    }, optP.label), optP.options.map(function (opt) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: opt.value,
+        onClick: function onClick() {
+          return handleSelect(opt);
+        },
+        className: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n                        padding: 6px 6px 6px 18px;\n                        cursor: ", ";\n                        color: ", ";\n                        background: ", ";\n                        &:hover {\n                          background: ", ";\n                        }\n                      "])), opt.disabled ? 'not-allowed' : 'pointer', opt.disabled ? '#999' : 'inherit', opt.disabled ? 'transparent' : 'inherit', opt.disabled ? 'transparent' : '#f5f5f5')
+      }, opt.label);
+    }));
+  }) : /*#__PURE__*/React.createElement("div", {
+    className: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n                padding: 8px 12px;\n                color: #999;\n                text-align: center;\n              "])))
+  }, t('no_available_variables')))));
+};
+export default RichParamEditor;

package/dist/LiteFlowEditor/panels/settingBar/properties/component.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Graph } from '@antv/x6';
+import ELNode from '../../../model/node';
+interface IProps {
+    model: ELNode;
+    paramsList: any[];
+    flowGraph: Graph;
+}
+declare const ComponentPropertiesEditor: React.FC<IProps>;
+export default ComponentPropertiesEditor;