@chamn/engine 0.0.10 → 0.0.11

package/src/plugins/Designer/style.module.scss.d.ts

@@ -1,5 +0,0 @@
-import globalClassNames from '../../style.d';
-declare const classNames: typeof globalClassNames & {
-  readonly hoverTips: 'hoverTips';
-};
-export = classNames;

package/src/plugins/Designer/util.ts

@@ -1,18 +0,0 @@
-import { CNode, CPage, CProp, CRootNode, CSlot, isNodeModel } from '@chamn/model';
-
-export const getClosestNodeList = (node: CNode | CRootNode, level = 5) => {
-  const res = [];
-  let count = 0;
-  let currentNode: CNode | CRootNode | CSlot | CProp | CPage | null = node;
-
-  while (count < level && currentNode) {
-    if (isNodeModel(currentNode)) {
-      res.push(currentNode);
-      count++;
-    }
-
-    currentNode = currentNode.parent || null;
-  }
-
-  return res;
-};

package/src/plugins/Designer/view.tsx

@@ -1,225 +0,0 @@
-import React from 'react';
-import { Layout, LayoutDragAndDropExtraDataType } from '@chamn/layout';
-import { CNode, CPage, CRootNode, InsertNodePosType } from '@chamn/model';
-import { CPluginCtx } from '../../core/pluginManager';
-import localize from './localize';
-import { PLUGIN_NAME } from './config';
-import { DefaultSelectToolBar } from './components/DefaultSelectToolBar';
-import { getClosestNodeList } from './util';
-import { GhostView } from './components/GhostView';
-
-import styles from './style.module.scss';
-import '@chamn/layout/dist/style.css';
-import { AssetPackage } from '@chamn/model';
-
-export type DesignerPropsType = {
-  pluginCtx: CPluginCtx;
-};
-
-type DesignerStateType = {
-  pageModel: CPage;
-  hoverToolBar: React.ReactNode;
-  selectToolBar: React.ReactNode;
-  ghostView: React.ReactNode;
-  assets: AssetPackage[];
-};
-
-export class Designer extends React.Component<DesignerPropsType, DesignerStateType> {
-  layoutRef: React.RefObject<Layout>;
-  constructor(props: DesignerPropsType) {
-    super(props);
-
-    this.state = {
-      pageModel: props.pluginCtx.pageModel,
-      hoverToolBar: null,
-      selectToolBar: null,
-      ghostView: null,
-      assets: props.pluginCtx.assets || ([] as AssetPackage[]),
-    };
-    this.layoutRef = React.createRef<Layout>();
-  }
-
-  componentDidMount(): void {
-    const { i18n } = this.props.pluginCtx;
-    Object.keys(localize).forEach((lng) => {
-      i18n.addResourceBundle(lng, `plugin:${PLUGIN_NAME}`, localize[lng], true, true);
-    });
-    this.init();
-  }
-
-  updateAssets(assets: AssetPackage[]) {
-    this.setState({
-      assets: assets,
-    });
-  }
-
-  reloadRender({ assets }: { assets?: AssetPackage[] }) {
-    this.layoutRef.current?.reload({ assets });
-  }
-
-  async init() {
-    const { layoutRef } = this;
-    const { pluginCtx } = this.props;
-    if (!layoutRef.current) {
-      console.warn('layout not ready ok');
-      return;
-    }
-
-    await layoutRef.current.ready();
-    const layoutInstance = layoutRef.current;
-    layoutInstance.dnd?.emitter.on('drop', (eventObj) => {
-      const pageModel = this.props.pluginCtx.pageModel;
-      const extraData = eventObj.extraData as LayoutDragAndDropExtraDataType;
-      const dropPosInfo = extraData.dropPosInfo;
-      const posFlag = {
-        before: 'BEFORE',
-        after: 'AFTER',
-        current: 'CHILD_START',
-      }[dropPosInfo?.pos || 'after'] as InsertNodePosType;
-
-      if (!extraData.dropNode) {
-        console.warn('cancel drop, because drop node is null');
-        return;
-      }
-      if (extraData.type === 'NEW_ADD') {
-        if (extraData.dropNode?.nodeType !== 'NODE') {
-          pageModel?.addNode(extraData.startNode as CNode, extraData.dropNode!, 'CHILD_START');
-        } else {
-          pageModel?.addNode(extraData.startNode as CNode, extraData.dropNode!, posFlag);
-        }
-      } else {
-        if (extraData.dropNode?.id === extraData.startNode?.id) {
-          console.warn(' id is the same');
-          return;
-        }
-        const res = pageModel.moveNodeById(extraData.startNode?.id || '', extraData?.dropNode?.id || '', posFlag);
-        if (!res) {
-          console.warn('drop failed');
-        }
-      }
-      layoutRef.current?.selectNode(extraData.startNode?.id || '');
-      this.props.pluginCtx.emitter.emit('onDrop', eventObj);
-    });
-
-    pluginCtx.emitter.emit('ready', {
-      UIInstance: this,
-    });
-
-    layoutInstance.dnd.emitter.on('click', ({ event }) => {
-      const workbench = pluginCtx.getWorkbench();
-      workbench.onGlobalClick(event);
-    });
-
-    this.props.pluginCtx.pageModel.emitter.on('onPageChange', ({ node }) => {
-      layoutRef.current?.designRenderRef?.current?.rerender(node);
-    });
-
-    this.props.pluginCtx.pageModel.emitter.on('onReloadPage', ({ node }) => {
-      layoutRef.current?.designRenderRef?.current?.rerender(node);
-    });
-
-    pluginCtx.pluginReadyOk();
-  }
-
-  onSelectNode = (node: CNode | CRootNode | null) => {
-    if (!node) {
-      return;
-    }
-    const { pluginCtx } = this.props;
-    pluginCtx.engine.updateCurrentSelectNode(node);
-    const pageModel = this.props.pluginCtx.pageModel;
-    const list = getClosestNodeList(node, 5);
-    const { layoutRef } = this;
-    this.setState({
-      selectToolBar: (
-        <DefaultSelectToolBar
-          nodeList={list}
-          toSelectNode={(id) => {
-            layoutRef.current?.selectNode(id);
-            this.onSelectNode(pageModel.getNode(id));
-          }}
-          toCopy={(id) => {
-            const newNode = this.props.pluginCtx.pageModel.copyNodeById(id);
-            if (newNode) {
-              layoutRef.current?.selectNode(newNode.id);
-              this.onSelectNode(newNode);
-            } else {
-              layoutRef.current?.selectNode('');
-              this.onSelectNode(null);
-            }
-          }}
-          toDelete={(id) => {
-            this.props.pluginCtx.pageModel.deleteNodeById(id);
-            layoutRef.current?.selectNode('');
-            this.onSelectNode(null);
-          }}
-          toHidden={(id) => {
-            const targetNodeModel = this.props.pluginCtx.pageModel.getNode(id) as CNode;
-            if (!targetNodeModel) {
-              return;
-            }
-            const devState = targetNodeModel.value.configure.devState ?? {};
-            devState.condition = false;
-            targetNodeModel.value.configure.devState = devState;
-            targetNodeModel.updateValue();
-          }}
-        />
-      ),
-    });
-  };
-
-  onDragStart = (startNode: CNode | CRootNode | null) => {
-    if (!startNode) {
-      return;
-    }
-    this.setState({
-      ghostView: <GhostView node={startNode} />,
-    });
-  };
-
-  onHoverNode = (node: CNode | CRootNode | null, startNode: CNode | CRootNode) => {
-    this.props.pluginCtx.emitter.emit('onHover', node);
-    const material = node?.material;
-    if (!material) {
-      console.warn('material not found', node);
-    }
-    if (!startNode) {
-      this.setState({
-        hoverToolBar: <div className={styles.hoverTips}>{material?.value.title || material?.componentName}</div>,
-        ghostView: null,
-      });
-      return;
-    }
-
-    this.setState({
-      hoverToolBar: <div className={styles.hoverTips}>{material?.value.title || material?.componentName}</div>,
-      ghostView: <GhostView node={startNode} />,
-    });
-  };
-
-  render() {
-    const { layoutRef, props, onSelectNode, onDragStart, onHoverNode } = this;
-    const { pageModel, hoverToolBar, selectToolBar, ghostView, assets } = this.state;
-    const { pluginCtx } = props;
-    const renderJSUrl = pluginCtx.engine.props.renderJSUrl || './render.umd.js';
-    return (
-      <Layout
-        beforeInitRender={props.pluginCtx.config.beforeInitRender}
-        customRender={props.pluginCtx.config.customRender}
-        ref={layoutRef}
-        pageModel={pageModel}
-        renderJSUrl={renderJSUrl}
-        {...props}
-        hoverToolBar={hoverToolBar}
-        selectToolBar={selectToolBar}
-        selectBoxStyle={{}}
-        hoverBoxStyle={{}}
-        onSelectNode={onSelectNode}
-        onDragStart={onDragStart}
-        onHoverNode={onHoverNode}
-        ghostView={ghostView}
-        assets={assets}
-      />
-    );
-  }
-}

package/src/plugins/DisplaySourceSchema/index.tsx

@@ -1,76 +0,0 @@
-import React, { useRef, useState } from 'react';
-import { Modal } from 'antd';
-import { MonacoEditor, MonacoEditorInstance } from '../../component/MonacoEditor';
-import { CPage } from '@chamn/model';
-import { waitReactUpdate } from '../../utils';
-import { EnginContext } from '../../index';
-import { DesignerExports } from '../Designer';
-
-export type DisplaySourceSchemaProps = {
-  pageModel: CPage;
-  engineCtx: EnginContext;
-  children: React.ReactNode;
-};
-
-export const DisplaySourceSchema = (props: DisplaySourceSchemaProps) => {
-  const initialValue = props.pageModel.export();
-  const { engineCtx } = props;
-  const [open, setOpen] = useState(false);
-  const editorRef = useRef<MonacoEditorInstance | null>(null);
-  return (
-    <>
-      <div
-        onClick={() => {
-          setOpen(true);
-        }}
-      >
-        {props.children}
-      </div>
-      <Modal
-        open={open}
-        title="Source Schema"
-        width={'100%'}
-        onCancel={() => setOpen(false)}
-        onOk={async () => {
-          setOpen(false);
-          const newPage = editorRef.current?.getValue();
-          if (!newPage) {
-            return;
-          }
-          const newPageJSON = JSON.parse(newPage);
-          props.pageModel.updatePage(newPageJSON);
-          await waitReactUpdate();
-          const currentSelectNode = engineCtx.engine.getActiveNode();
-          const designerPluginInstance = await engineCtx.pluginManager.get('Designer');
-          const nodeId = currentSelectNode?.id || '';
-          designerPluginInstance?.ctx.emitter.on('ready', () => {
-            const designerExports: DesignerExports = designerPluginInstance.exports;
-            designerExports.selectNode(nodeId);
-          });
-          if (designerPluginInstance) {
-            const designerExports: DesignerExports = designerPluginInstance.exports;
-            designerExports.selectNode(nodeId);
-          }
-        }}
-        style={{
-          height: 'calc(100vh - 50px)',
-          top: '25px',
-        }}
-        destroyOnClose
-      >
-        <div style={{ width: '100%', height: 'calc(100vh - 200px)' }}>
-          <MonacoEditor
-            initialValue={JSON.stringify(initialValue, null, 2)}
-            language={'json'}
-            options={{
-              automaticLayout: true,
-            }}
-            onDidMount={(editor) => {
-              editorRef.current = editor;
-            }}
-          />
-        </div>
-      </Modal>
-    </>
-  );
-};

package/src/plugins/GlobalStatePanel/index.tsx

@@ -1,96 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { DatabaseOutlined } from '@ant-design/icons';
-import { CPlugin, CPluginCtx } from '../../core/pluginManager';
-import { withTranslation } from 'react-i18next';
-import localize from './localize';
-import { MonacoEditor, MonacoEditorInstance } from '../../component/MonacoEditor';
-import styles from './style.module.scss';
-
-export const PLUGIN_NAME = 'GlobalState';
-const i18nNamespace = `plugin:${PLUGIN_NAME}`;
-
-type GlobalStatePanelProps = {
-  pluginCtx: CPluginCtx;
-};
-
-const GlobalStatePanel = (props: GlobalStatePanelProps) => {
-  const { pluginCtx } = props;
-  const rootState = pluginCtx.pageModel.value.componentsTree.value.state || {};
-  // 表示是不是自己触发的值更新
-  let triggerChangeBySelf = false;
-  const editorRef = useRef<MonacoEditorInstance | null>(null);
-  useEffect(() => {
-    editorRef?.current?.setValue(JSON.stringify(rootState, null, 2));
-    // 正常情况下, 只有 reloadPage  才需要同步数据
-    pluginCtx.pageModel.emitter.on('onReloadPage', (e) => {
-      console.log(e);
-      if (triggerChangeBySelf) {
-        triggerChangeBySelf = false;
-        return;
-      }
-      editorRef.current?.setValue(JSON.stringify(pluginCtx.pageModel.value.componentsTree.value.state, null, 2));
-    });
-  }, []);
-
-  const onValueChange = (newValStr: string) => {
-    try {
-      const newVal = JSON.parse(newValStr);
-      pluginCtx.pageModel.value.componentsTree.value.state = newVal;
-      triggerChangeBySelf = true;
-      pluginCtx.pageModel.value.componentsTree.updateValue();
-    } catch (e) {
-      console.warn(e);
-    }
-  };
-
-  return (
-    <div className={styles.box}>
-      <MonacoEditor
-        language={'json'}
-        options={{
-          automaticLayout: true,
-          tabSize: 2,
-          minimap: { enabled: false },
-          quickSuggestions: false,
-          suggestOnTriggerCharacters: false,
-          folding: false,
-        }}
-        onDidMount={(editor) => {
-          editorRef.current = editor;
-        }}
-        onChange={onValueChange}
-      />
-    </div>
-  );
-};
-
-export const GlobalStatePanelPlugin: CPlugin = {
-  name: PLUGIN_NAME,
-  async init(ctx) {
-    const { i18n } = ctx;
-    Object.keys(localize).forEach((lng) => {
-      i18n.addResourceBundle(lng, i18nNamespace, localize[lng], true, true);
-    });
-
-    const GlobalStatePanelWithLocalize = withTranslation(i18nNamespace)(GlobalStatePanel);
-    const Title = withTranslation(i18nNamespace)(({ t }) => <>{t('pluginName')}</>);
-    const workbench = ctx.getWorkbench();
-    workbench.addLeftPanel({
-      title: <Title />,
-      name: PLUGIN_NAME,
-      icon: <DatabaseOutlined />,
-      render: <GlobalStatePanelWithLocalize pluginCtx={ctx} />,
-    });
-  },
-  async destroy(ctx) {
-    console.log('destroy', ctx);
-  },
-  exports: (ctx) => {
-    return {};
-  },
-  meta: {
-    engine: {
-      version: '1.0.0',
-    },
-  },
-};

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

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

package/src/plugins/GlobalStatePanel/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/GlobalStatePanel/localize/zh_CN/index.ts

@@ -1,3 +0,0 @@
-export const zh_CN: Record<string, any> = {
-  pluginName: '全局状态',
-};

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

@@ -1,8 +0,0 @@
-.box {
-  height: 100%;
-  width: 100%;
-  padding-right: 10px;
-  border-top: 1px solid $borderColor;
-  padding-top: 10px;
-  background-color: white;
-}

package/src/plugins/GlobalStatePanel/style.module.scss.d.ts

@@ -1,5 +0,0 @@
-import globalClassNames from '../../style.d';
-declare const classNames: typeof globalClassNames & {
-  readonly box: 'box';
-};
-export = classNames;

package/src/plugins/History/index.tsx

@@ -1,110 +0,0 @@
-import { waitReactUpdate } from '@/utils';
-import { CPageDataType } from '@chamn/model';
-import { cloneDeep } from 'lodash-es';
-import { CPlugin, CPluginCtx } from '../../core/pluginManager';
-
-const PLUGIN_NAME = 'History';
-
-export const HistoryPlugin: CPlugin = (ctx) => {
-  const CTX: CPluginCtx | null = ctx;
-  const dataStore = {
-    historyRecords: [] as CPageDataType[],
-    currentStepIndex: 0,
-  };
-
-  let originalPageRecord: CPageDataType | null = null;
-  const pageSchema = ctx.pageModel.export();
-  originalPageRecord = pageSchema;
-  dataStore.historyRecords.push(pageSchema);
-
-  const loadPage = async (page: CPageDataType) => {
-    if (!CTX) {
-      return;
-    }
-    CTX.pageModel.reloadPage(page);
-    await waitReactUpdate();
-  };
-
-  const resObj = {
-    addStep: () => {
-      const { currentStepIndex, historyRecords } = dataStore;
-      const newPage = ctx.pageModel.export();
-      if (currentStepIndex !== historyRecords.length - 1) {
-        dataStore.historyRecords = historyRecords.slice(0, currentStepIndex + 1);
-      }
-      dataStore.historyRecords.push(newPage);
-      dataStore.currentStepIndex = historyRecords.length - 1;
-    },
-    reset: async () => {
-      const ctx = CTX;
-      if (!ctx) {
-        console.warn('plugin ctx is null, pls check it');
-        return;
-      }
-      if (!originalPageRecord) {
-        return;
-      }
-      dataStore.historyRecords = [];
-      loadPage(originalPageRecord);
-    },
-    preStep: () => {
-      const { currentStepIndex, historyRecords } = dataStore;
-      if (!resObj.canGoPreStep()) {
-        return;
-      }
-      const newIndex = currentStepIndex - 1;
-      dataStore.currentStepIndex = newIndex;
-      const page = cloneDeep(historyRecords[newIndex]);
-      loadPage(page);
-    },
-    nextStep: () => {
-      if (!resObj.canGoNextStep()) {
-        return;
-      }
-      const { currentStepIndex, historyRecords } = dataStore;
-      const newIndex = currentStepIndex + 1;
-      dataStore.currentStepIndex = newIndex;
-      const page = cloneDeep(historyRecords[newIndex]);
-      return loadPage(page);
-    },
-    canGoPreStep: () => {
-      const { currentStepIndex } = dataStore;
-      if (currentStepIndex <= 0) {
-        return false;
-      }
-      return true;
-    },
-    canGoNextStep: () => {
-      const { currentStepIndex, historyRecords } = dataStore;
-      if (currentStepIndex >= historyRecords.length - 1) {
-        return false;
-      }
-      return true;
-    },
-  };
-
-  return {
-    name: PLUGIN_NAME,
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    async init(ctx) {
-      ctx.pageModel.emitter.on('onNodeChange', () => {
-        resObj.addStep();
-      });
-      ctx.pageModel.emitter.on('onPageChange', () => {
-        resObj.addStep();
-      });
-      ctx.pluginReadyOk();
-    },
-    async destroy(ctx) {
-      console.log('destroy', ctx);
-    },
-    exports: () => {
-      return resObj;
-    },
-    meta: {
-      engine: {
-        version: '1.0.0',
-      },
-    },
-  };
-};

package/src/plugins/OutlineTree/components/TreeView/context.ts

@@ -1,43 +0,0 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
-import { Sensor } from '@chamn/layout';
-import { CPage } from '@chamn/model';
-import React from 'react';
-import { DesignerExports } from '../../../Designer';
-import { TreeNodeData } from './dataStruct';
-export enum DragState {
-  DRAGGING = 'DRAGGING',
-  NORMAL = 'NORMAL',
-}
-export type ContextState = {
-  treeData: TreeNodeData[];
-  currentSelectNodeKeys: string[];
-  expandKeys: string[];
-  multiSelect: boolean;
-  dragState: DragState;
-  pageModel: CPage | null;
-};
-
-export type CTreeContextData = {
-  sensor?: Sensor;
-  state: ContextState;
-  updateState: (state: Partial<ContextState>) => void;
-  onSelectNode: (params: { keys: string[]; node: TreeNodeData }) => void;
-  onDeleteNode: (id: string) => void;
-  onCopyNode: (id: string) => void;
-  getDesignerHandler?: () => Promise<DesignerExports>;
-};
-
-export const CTreeContext = React.createContext<CTreeContextData>({
-  state: {
-    treeData: [],
-    currentSelectNodeKeys: [],
-    expandKeys: [],
-    multiSelect: false,
-    dragState: DragState.NORMAL,
-    pageModel: null,
-  },
-  updateState: () => {},
-  onSelectNode: () => {},
-  onDeleteNode: (id: string) => {},
-  onCopyNode: (id: string) => {},
-});

package/src/plugins/OutlineTree/components/TreeView/dataStruct.ts

@@ -1,58 +0,0 @@
-import React from 'react';
-
-export type TreeNodeData = {
-  containerRender?: (params: {
-    item: TreeNodeData;
-    treeNodeView: JSX.Element;
-  }) => React.ReactElement;
-  titleViewRender?: (params: {
-    item: TreeNodeData;
-    titleView: React.ReactNode;
-  }) => React.ReactElement;
-  title: React.ReactNode;
-  icon?: React.ReactNode;
-  key?: string;
-  children?: TreeNodeData[];
-  parent?: TreeNodeData | null;
-  canBeSelected?: boolean;
-  canDrag?: boolean;
-  canDrop?: boolean | ('before' | 'after' | 'current')[];
-  rootNode?: boolean;
-};
-
-const x = 10;
-const y = 3;
-const z = 2;
-
-const generateData = (
-  _level: number,
-  _tns: TreeNodeData[],
-  _preKey?: React.Key
-) => {
-  const preKey = _preKey || '0';
-  const tns = _tns || [];
-
-  const children: React.Key[] = [];
-  for (let i = 0; i < x; i++) {
-    const key = `${preKey}-${i}`;
-    tns.push({ title: key, key });
-    if (i < y) {
-      children.push(key);
-    }
-  }
-  if (_level < 0) {
-    return tns;
-  }
-  const level = _level - 1;
-  children.forEach((key, index) => {
-    tns[index].children = [];
-    return generateData(level, tns[index].children!, key);
-  });
-};
-const tempData: TreeNodeData[] = [];
-generateData(z, tempData);
-
-export const DemoTreeData: TreeNodeData = {
-  title: 'Page',
-  children: tempData,
-};