@chamn/engine 0.0.10 → 0.0.12

package/src/plugins/OutlineTree/components/TreeView/treeNode.tsx

@@ -1,271 +0,0 @@
-import { useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { CopyOutlined, DeleteOutlined, EyeInvisibleOutlined, EyeOutlined, RightOutlined } from '@ant-design/icons';
-import clsx from 'clsx';
-import { CTreeContext, DragState } from './context';
-import { TreeNodeData } from './dataStruct';
-import styles from './style.module.scss';
-import { LOGGER } from '../../../../utils/logger';
-import { CNode } from '@chamn/model';
-import { Input, InputRef } from 'antd';
-
-export const DRAG_ITEM_KEY = 'data-drag-key';
-
-export type TreeNodeProps = {
-  item: TreeNodeData;
-  level?: number;
-  paths?: (string | number)[];
-};
-export const TreeNode = (props: TreeNodeProps) => {
-  const allStateRef = useRef<{ titleEditable: boolean }>({
-    titleEditable: false,
-  });
-  const { level = 0, item, paths = ['0'] } = props;
-  const [nodeVisible, setNodeVisible] = useState(true);
-  const {
-    state: ctxState,
-    updateState,
-    onSelectNode,
-    onDeleteNode,
-    getDesignerHandler,
-    onCopyNode,
-  } = useContext(CTreeContext);
-
-  const [titleEditable, setTitleEditable] = useState(allStateRef.current?.titleEditable);
-  const [editInputValue, setEditInputValue] = useState('');
-  allStateRef.current.titleEditable = titleEditable;
-  const expanded = ctxState.expandKeys.find((el) => el === item.key);
-  const toggleExpandNode = () => {
-    let newExpandKeys = ctxState.expandKeys;
-    if (expanded) {
-      newExpandKeys = newExpandKeys.filter((el) => el !== item.key);
-    } else {
-      newExpandKeys.push(item.key || '');
-    }
-    updateState({
-      expandKeys: newExpandKeys,
-    });
-  };
-  const selected = ctxState.currentSelectNodeKeys.find((el) => el === item.key);
-  const titleEditInputRef = useRef<InputRef>(null);
-  const toggleSelectNode = () => {
-    if (titleEditable) {
-      titleEditInputRef?.current?.focus();
-      return;
-    }
-    if (item.canBeSelected !== undefined && item.canBeSelected === false) {
-      return;
-    }
-    let newKeys = ctxState.currentSelectNodeKeys;
-    if (!ctxState.multiSelect) {
-      if (item.key) {
-        onSelectNode?.({ keys: [item.key], node: item });
-      } else {
-        onSelectNode?.({ keys: [], node: item });
-      }
-
-      updateState({
-        currentSelectNodeKeys: [String(item.key)],
-      });
-      return;
-    }
-    if (selected) {
-      newKeys = newKeys.filter((el) => el !== item.key);
-    } else {
-      newKeys.push(String(item.key));
-    }
-    onSelectNode?.({ keys: newKeys, node: item });
-    updateState({
-      currentSelectNodeKeys: newKeys,
-    });
-  };
-  const singPadding = 20;
-  const indent = singPadding * level;
-  const canBeSelected = item.canBeSelected ?? true;
-
-  const dragKeyProps = {
-    [DRAG_ITEM_KEY]: item.key,
-  };
-  const updateExpandKeyRef = useRef<(key: string) => void>();
-  const ctxStateRef = useRef<typeof ctxState>();
-  ctxStateRef.current = ctxState;
-  updateExpandKeyRef.current = (key) => {
-    const oldExpandKeys = ctxState.expandKeys;
-    const newExpandKeys = Array.from(new Set([...oldExpandKeys, key]));
-    updateState({
-      expandKeys: newExpandKeys,
-    });
-  };
-  const domRef = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    // auto expand on dragging
-    let timerHandler = 0;
-    domRef.current?.addEventListener('mouseenter', () => {
-      timerHandler = window.setTimeout(() => {
-        if (ctxStateRef.current?.dragState === DragState.DRAGGING) {
-          updateExpandKeyRef.current?.(item.key || '');
-        }
-      }, 0.8 * 1000);
-    });
-    domRef.current?.addEventListener('mouseleave', () => {
-      clearTimeout(timerHandler);
-    });
-
-    const clickHandle = (e: MouseEvent) => {
-      if (allStateRef.current.titleEditable) {
-        if (e.target === titleEditInputRef.current?.input) {
-          return;
-        }
-        setTitleEditable(false);
-        targetNodeModel.updateValue();
-      }
-    };
-
-    document.addEventListener('click', clickHandle);
-
-    return () => {
-      if (timerHandler) {
-        clearTimeout(timerHandler);
-      }
-      document.removeEventListener('click', clickHandle);
-    };
-  }, []);
-
-  const targetNodeModel = ctxState.pageModel?.getNode(item.key || '') as CNode;
-
-  const toggleNodeVisible = () => {
-    const newVisible = !nodeVisible;
-
-    if (!targetNodeModel) {
-      return;
-    }
-    const devState = targetNodeModel.value.configure.devState ?? {};
-    devState.condition = newVisible;
-    targetNodeModel.value.configure.devState = devState;
-    targetNodeModel.updateValue();
-    setNodeVisible(newVisible);
-  };
-
-  let titleView = item.title;
-  if (item.titleViewRender) {
-    titleView = item.titleViewRender({
-      item,
-      titleView: item.title,
-    });
-  }
-  const titleText = targetNodeModel?.value.title || targetNodeModel?.value.componentName;
-
-  const bodyView = (
-    <div className={styles.nodeBox}>
-      <div
-        className={clsx([styles.nodeContent, selected && canBeSelected && styles.selected])}
-        style={{ marginLeft: `${-indent}px`, paddingLeft: `${indent + 8}px` }}
-        onMouseMove={async () => {
-          if (!item.key) {
-            return;
-          }
-          const designerHandler = await getDesignerHandler?.();
-          const compInstances = designerHandler?.getDynamicComponentInstances(item.key);
-          if (typeof compInstances?._CONDITION !== 'undefined') {
-            setNodeVisible(compInstances?._CONDITION);
-          }
-        }}
-      >
-        {item.children?.length ? (
-          <span style={{ paddingRight: '5px' }} className={styles.arrowSpan} onClickCapture={toggleExpandNode}>
-            <RightOutlined className={clsx([styles.nodeArrow, expanded && styles.expanded])} />
-          </span>
-        ) : null}
-        <div
-          className={styles.nodeRenderView}
-          {...dragKeyProps}
-          ref={domRef}
-          onClick={toggleSelectNode}
-          onDoubleClick={() => {
-            // slot 节点，属性节点不能编辑 title
-            if (!targetNodeModel) {
-              return;
-            }
-            const node = targetNodeModel;
-            const nodeMeta = node.materialsModel.findByComponentName(node.value.componentName)?.value.title;
-            const inputValue = node.value.title || nodeMeta || node.value.componentName || '';
-            setEditInputValue(inputValue);
-            setTitleEditable(true);
-            setTimeout(() => {
-              titleEditInputRef.current?.focus();
-            }, 100);
-          }}
-        >
-          {!titleEditable && titleView}
-          {titleEditable && (
-            <div
-              style={{
-                paddingRight: '10px',
-              }}
-            >
-              <Input
-                size="small"
-                maxLength={20}
-                ref={titleEditInputRef}
-                value={editInputValue}
-                onPressEnter={() => {
-                  setTitleEditable(false);
-                  targetNodeModel.updateValue();
-                }}
-                onChange={(e) => {
-                  targetNodeModel.value.title = e.target.value;
-                  setEditInputValue(e.target.value);
-                }}
-              />
-            </div>
-          )}
-        </div>
-
-        {!titleEditable && !item.rootNode && (
-          <div className={styles.toolbarBox}>
-            <div className={styles.iconItem}>
-              {!nodeVisible && <EyeOutlined onClick={toggleNodeVisible} />}
-              {nodeVisible && <EyeInvisibleOutlined onClick={toggleNodeVisible} />}
-            </div>
-            <div
-              className={styles.iconItem}
-              onClick={() => {
-                onCopyNode(item.key || '');
-              }}
-            >
-              <CopyOutlined />
-            </div>
-            <div
-              className={styles.iconItem}
-              onClick={() => {
-                onDeleteNode(item.key || '');
-              }}
-            >
-              <DeleteOutlined />
-            </div>
-          </div>
-        )}
-      </div>
-      <div
-        className={clsx([styles.nodeChildren, selected && styles.selected])}
-        style={{
-          paddingLeft: `${singPadding}px`,
-          height: expanded ? 'auto' : '0',
-        }}
-      >
-        {expanded &&
-          item.children?.map((el, index) => {
-            const key = `${el.key}-${index}`;
-            return <TreeNode key={key} item={el} paths={[...paths, index]} level={level + 1} />;
-          })}
-      </div>
-    </div>
-  );
-  if (item.containerRender) {
-    const containerView = item.containerRender({
-      item: item,
-      treeNodeView: bodyView,
-    });
-    return containerView;
-  }
-  return bodyView;
-};

package/src/plugins/OutlineTree/index.tsx

@@ -1,39 +0,0 @@
-import { ApartmentOutlined } from '@ant-design/icons';
-import { CPlugin } from '../../core/pluginManager';
-import { withTranslation } from 'react-i18next';
-import { TreeView } from './components/TreeView';
-import localize from './localize';
-
-export const PLUGIN_NAME = 'OutlineTree';
-const i18nNamespace = `plugin:${PLUGIN_NAME}`;
-
-export const OutlineTreePlugin: CPlugin = {
-  name: PLUGIN_NAME,
-  async init(ctx) {
-    const { i18n } = ctx;
-    Object.keys(localize).forEach((lng) => {
-      i18n.addResourceBundle(lng, i18nNamespace, localize[lng], true, true);
-    });
-
-    const TreeViewWithLocalize = withTranslation(i18nNamespace)(TreeView);
-    const Title = withTranslation(i18nNamespace)(({ t }) => <>{t('pluginName')}</>);
-    const workbench = ctx.getWorkbench();
-    workbench.addLeftPanel({
-      title: <Title />,
-      name: PLUGIN_NAME,
-      icon: <ApartmentOutlined />,
-      render: <TreeViewWithLocalize pluginCtx={ctx} />,
-    });
-  },
-  async destroy(ctx) {
-    console.log('destroy', ctx);
-  },
-  exports: (ctx) => {
-    return {};
-  },
-  meta: {
-    engine: {
-      version: '1.0.0',
-    },
-  },
-};

package/src/plugins/OutlineTree/localize/en_US/index.ts

@@ -1,3 +0,0 @@
-export const en_US: Record<string, any> = {
-  pluginName: 'Layout Tree',
-};

package/src/plugins/OutlineTree/localize/index.ts

@@ -1,3 +0,0 @@
-import { zh_CN } from './zh_CN';
-import { en_US } from './en_US';
-export default { zh_CN, en_US } as Record<string, any>;

package/src/plugins/OutlineTree/localize/zh_CN/index.ts

@@ -1,3 +0,0 @@
-export const zh_CN: Record<string, any> = {
-  pluginName: '大纲树',
-};

package/src/plugins/OutlineTree/util.tsx

@@ -1,302 +0,0 @@
-import React from 'react';
-import { DropPosType } from '@chamn/layout/dist/components/DropAnchor/util';
-import {
-  ArraySetterObjType,
-  CNode,
-  CNodeDataType,
-  CPage,
-  CPageDataType,
-  getMTitle,
-  isJSSlotPropNode,
-  isSpecialMaterialPropType,
-  MaterialPropType,
-  MTitle,
-  RenderPropType,
-  SetterObjType,
-  SetterType,
-} from '@chamn/model';
-import { isPlainObject } from 'lodash-es';
-import { TreeNodeData } from './components/TreeView/dataStruct';
-import { ShapeSetterObjType } from '@chamn/model/src/types/material';
-
-export const getTargetMNodeKeyVal = (dom: HTMLElement | null, key: string): null | string => {
-  if (!dom) {
-    return null;
-  }
-  const val = dom.getAttribute(key);
-  if (!val) {
-    return getTargetMNodeKeyVal(dom.parentElement, key);
-  } else {
-    return val;
-  }
-};
-
-export const transformNodeSchemaToTreeData = (
-  nodeSchema: CNodeDataType | CNodeDataType[],
-  parent: TreeNodeData,
-  pageModel: CPage
-): TreeNodeData | TreeNodeData[] => {
-  const tb = (node: CNodeDataType, parent?: TreeNodeData | null): TreeNodeData => {
-    let nodeChild: any[] = node.children || [];
-    if (!Array.isArray(nodeChild)) {
-      // TODO: 暂时不处理字符串的情况
-      nodeChild = [];
-    }
-    // 过滤掉字符串的情况
-    nodeChild = nodeChild.filter((el) => typeof el !== 'string');
-    const nodeMeta = pageModel.materialsModel.findByComponentName(node.componentName)?.value.title;
-    const newCurrentNode: TreeNodeData = {
-      title: node.title || nodeMeta || node.componentName,
-      key: node.id,
-      children: [],
-      parent: parent,
-    };
-    // 还需要处理 props 中的节点
-    const propsNodeList: TreeNodeData[] = [];
-    const slotNode: TreeNodeData = {
-      title: 'SLOT',
-      key: `${node.id}-SLOT`,
-      children: propsNodeList,
-      canBeSelected: false,
-      canDrop: false,
-      parent: null,
-      containerRender: ({ treeNodeView }) => {
-        return (
-          <div
-            style={{
-              border: '1px solid #a97cf8',
-              borderTopWidth: '6px',
-              marginRight: '2px',
-              marginTop: '5px',
-            }}
-          >
-            {treeNodeView}
-          </div>
-        );
-      },
-    };
-    const props = node.props || {};
-
-    const processProps = (val: unknown, key: string, keys: string[]) => {
-      const flag = isJSSlotPropNode(val);
-
-      if (flag) {
-        const tempVal = val as RenderPropType;
-        const pageModeNode = pageModel.getNode(node.id!);
-        let propsTitle = '';
-        if (pageModeNode) {
-          const tempTitle = getPropsLabel(pageModeNode as CNode, [...keys, key]);
-          propsTitle = getMTitle(tempTitle);
-        }
-        let plainTitle = key;
-        if (propsTitle) {
-          plainTitle = getMTitle(propsTitle) || key;
-        }
-        const tempNode: TreeNodeData = {
-          title: plainTitle,
-          key: `${node.id}-${keys.join('_')}`,
-          children: [],
-          canBeSelected: false,
-          canDrag: false,
-          canDrop: ['current'],
-          parent: slotNode,
-        };
-
-        let propValue: CNodeDataType[] = [];
-        if (tempVal.value && !Array.isArray(tempVal.value)) {
-          propValue = [tempVal.value];
-        } else {
-          propValue = tempVal.value;
-        }
-
-        tempNode.children = transformNodeSchemaToTreeData(propValue, tempNode, pageModel) as TreeNodeData[];
-        propsNodeList.push(tempNode);
-        return;
-      }
-      if (isPlainObject(val)) {
-        const tempVal = val as any;
-        Object.keys(tempVal).forEach((newKey) => {
-          processProps(tempVal[newKey], newKey, [...keys, key]);
-        });
-      }
-      if (Array.isArray(val)) {
-        const tempVal = val as any[];
-        tempVal.forEach((item, index) => {
-          processProps(item, String(index), [...keys, key]);
-        });
-      }
-    };
-    const getPropsLabel = (nodeModel: CNode, keyPath: string[]) => {
-      const propsLabelMap = getNodePropsLabelMap(nodeModel);
-      const newKeyPath = keyPath.map((el) => {
-        if (String(parseInt(el, 10)) === el) {
-          return '$NUM';
-        } else {
-          return el;
-        }
-      });
-      return propsLabelMap[newKeyPath.join('.')] || '';
-    };
-
-    Object.keys(props).forEach((key) => {
-      processProps(props[key], key, []);
-    });
-
-    if (propsNodeList.length > 0) {
-      newCurrentNode.children?.push(slotNode);
-      slotNode.parent = newCurrentNode;
-    }
-    const childNodeList = nodeChild.map((el) => tb(el, newCurrentNode)) || [];
-    newCurrentNode.children = [...newCurrentNode.children!, ...childNodeList];
-    return newCurrentNode;
-  };
-
-  if (Array.isArray(nodeSchema)) {
-    return nodeSchema.map((el) => {
-      return tb(el, parent);
-    });
-  } else {
-    return tb(nodeSchema, parent);
-  }
-};
-
-export const transformPageSchemaToTreeData = (pageSchema: CPageDataType, pageModel: CPage): TreeNodeData[] => {
-  const tree = pageSchema.componentsTree;
-  let child = (tree.children || []) as CNodeDataType[];
-  if (!Array.isArray(child)) {
-    child = [];
-  }
-
-  const rootNode: TreeNodeData = {
-    title: 'Page',
-    key: tree.id || 'Page',
-    rootNode: true,
-    children: [],
-  };
-  rootNode.children = transformNodeSchemaToTreeData(child, rootNode, pageModel) as TreeNodeData[];
-  return [rootNode];
-};
-
-export const traverseTree = (tree: TreeNodeData | TreeNodeData[], handler: (node: TreeNodeData) => boolean) => {
-  let tempTree: TreeNodeData[] = [];
-  if (Array.isArray(tree)) {
-    tempTree = tree;
-  } else {
-    tempTree = [tree];
-  }
-
-  let stop = false;
-
-  const traverseCb = (node: TreeNodeData, conditionCb: (node: TreeNodeData) => boolean) => {
-    if (stop) {
-      return;
-    }
-    const res = conditionCb(node);
-    if (res) {
-      stop = true;
-    } else {
-      node.children?.forEach((el) => {
-        traverseCb(el, conditionCb);
-      });
-    }
-  };
-  tempTree.forEach((el) => {
-    traverseCb(el, handler);
-  });
-};
-
-export function calculateDropPosInfo(params: { point: { x: number; y: number }; dom: HTMLElement }): DropPosType {
-  const { point, dom } = params;
-  let pos: DropPosType['pos'];
-
-  const mousePos = point;
-  const targetRect = dom.getBoundingClientRect();
-  const targetDomH = targetRect.height;
-  const xCenter = targetRect.x + 50;
-  const yCenter = targetRect.y + Math.round(targetDomH / 2);
-
-  if (mousePos.y > yCenter) {
-    pos = 'after';
-  } else {
-    pos = 'before';
-  }
-
-  if (mousePos.x > xCenter && pos == 'after') {
-    pos = 'current';
-  }
-
-  return {
-    pos,
-    direction: 'vertical',
-  };
-}
-
-//TODO:  移动到 model 包中去
-export const getNodePropsLabelMap = (node: CNode) => {
-  const resMap: Record<string, MTitle> = {};
-  const props = node.material?.value.props;
-  if (!props) {
-    return resMap;
-  }
-  const singleProcessUnit = (val: SetterType, paths: string[]) => {
-    if (isPlainObject(val)) {
-      const newPaths = [...paths];
-      const objSetter = val as SetterObjType;
-      const componentName = objSetter.componentName;
-      if (componentName === 'ArraySetter') {
-        const setter = objSetter as ArraySetterObjType;
-        const arrItemSetter = setter.props?.item.setters || [];
-        const parentTitle = resMap[paths.join('.')];
-        let currentTitle = '';
-        if (typeof parentTitle === 'string') {
-          currentTitle = parentTitle;
-        } else {
-          currentTitle = parentTitle.label;
-        }
-        newPaths.push('$NUM');
-        arrItemSetter.forEach((el) => {
-          currentTitle = `${currentTitle}`;
-          resMap[newPaths.join('.')] = currentTitle;
-          singleProcessUnit(el, newPaths);
-        });
-      } else if (componentName === 'ShapeSetter') {
-        const setter = objSetter as ShapeSetterObjType;
-        const elements = setter.props?.elements || [];
-        elements.forEach((it) => {
-          const newObjPaths = [...newPaths];
-          newObjPaths.push(it.name);
-          resMap[newObjPaths.join('.')] = it.title;
-          const subSetter = it.setters || [];
-          subSetter.forEach((it2) => {
-            singleProcessUnit(it2, [...newObjPaths]);
-          });
-        });
-      }
-    }
-  };
-
-  props.forEach((item) => {
-    let targetItem: MaterialPropType | MaterialPropType[] | null = null;
-    if (isSpecialMaterialPropType(item)) {
-      targetItem = item.content;
-    } else {
-      targetItem = item;
-    }
-    let itemArr: MaterialPropType[] = [];
-    if (Array.isArray(targetItem)) {
-      itemArr = targetItem;
-    } else {
-      itemArr = [targetItem];
-    }
-
-    itemArr.forEach((it) => {
-      const newPaths: string[] = [it.name];
-      resMap[newPaths.join('.')] = it.title;
-      it.setters?.forEach((it2) => {
-        singleProcessUnit(it2, newPaths);
-      });
-    });
-  });
-
-  return resMap;
-};

package/src/plugins/PropertyPanel/index.tsx

@@ -1,63 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import { CNode, CRootNode } from '@chamn/model';
-import { CPluginCtx } from '../../core/pluginManager';
-import { CRightPanelItem } from '../RightPanel/view';
-
-import styles from './style.module.scss';
-import { CustomSchemaForm, CustomSchemaFormInstance, CustomSchemaFormProps } from '../../component/CustomSchemaForm';
-
-export const PropertyPanel = (props: { node: CNode | CRootNode; pluginCtx: CPluginCtx }) => {
-  const { node } = props;
-  const properties = node.material?.value.props || [];
-  const formRef = useRef<CustomSchemaFormInstance>(null);
-
-  useEffect(() => {
-    const handel = () => {
-      const newVal = node.getPlainProps?.() || {};
-      formRef.current?.setFields(newVal);
-    };
-    handel();
-    node.emitter.on('onNodeChange', handel);
-    () => {
-      node.emitter.off('onNodeChange', handel);
-    };
-  }, [node]);
-
-  const value = node.getPlainProps?.() || {};
-
-  const onValueChange: CustomSchemaFormProps['onValueChange'] = (val) => {
-    node.updateValue({
-      props: val,
-    });
-  };
-
-  const onSetterChange: CustomSchemaFormProps['onSetterChange'] = (keyPaths, setterName) => {
-    node.value.configure = node.value.configure || {};
-    node.value.configure.propsSetter = node.value.configure.propsSetter || {};
-    node.value.configure.propsSetter[keyPaths.join('.')] = {
-      name: keyPaths.join('.'),
-      setter: setterName,
-    };
-  };
-
-  return (
-    <div className={styles.CFromRenderBox}>
-      <CustomSchemaForm
-        pluginCtx={props.pluginCtx}
-        key={node.id}
-        defaultSetterConfig={node.value.configure.propsSetter || {}}
-        onSetterChange={onSetterChange}
-        properties={properties}
-        initialValue={value}
-        ref={formRef}
-        onValueChange={onValueChange}
-      />
-    </div>
-  );
-};
-
-export const PropertyPanelConfig: CRightPanelItem = {
-  key: 'Property',
-  name: 'Property',
-  view: ({ node, pluginCtx }) => <PropertyPanel node={node} pluginCtx={pluginCtx} />,
-};

package/src/plugins/PropertyPanel/style.module.scss

@@ -1,12 +0,0 @@
-.CFromRenderBox {
-  padding: 0 20px;
-  :global {
-    .ant-collapse .ant-collapse-content > .ant-collapse-content-box {
-      padding-right: 5px;
-    }
-
-    .ant-collapse > .ant-collapse-item:last-child > .ant-collapse-header {
-      padding-right: 5px;
-    }
-  }
-}