@chamn/engine 0.0.9 → 0.0.11

package/src/plugins/ComponentLibrary/components/ListView/index.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import { SnippetsType } from '@chamn/model';
-import { Collapse } from 'antd';
-import { DragComponentItem } from '../DragItem';
-import styles from './style.module.scss';
-const { Panel } = Collapse;
-
-export type ListViewProps = {
-  dataSource: {
-    name: string;
-    list: SnippetsType[];
-  }[];
-};
-export const ListView = (props: ListViewProps) => {
-  const { dataSource } = props;
-  const defaultActiveKey = dataSource.map((el) => el.name || '');
-  if (!dataSource.length) {
-    return null;
-  }
-  return (
-    <div className={styles.ListBox}>
-      <Collapse style={{ width: '100%' }} defaultActiveKey={defaultActiveKey}>
-        {dataSource.map((el) => {
-          const category = el.name || '';
-          const contentView = (
-            <div className={styles.collapsePanel}>
-              {el.list.map((it) => {
-                return (
-                  <DragComponentItem
-                    id={it.id!}
-                    key={it.id!}
-                    name={it.title}
-                    icon={it.snapshot || it.snapshotText}
-                    iconText={it.snapshotText}
-                    description={it.description || ''}
-                  />
-                );
-              })}
-            </div>
-          );
-          return (
-            <Panel header={category} key={category}>
-              {contentView}
-            </Panel>
-          );
-        })}
-      </Collapse>
-    </div>
-  );
-};

package/src/plugins/ComponentLibrary/components/ListView/style.module.scss

@@ -1,27 +0,0 @@
-.ListBox {
-  display: flex;
-  flex-wrap: wrap;
-  :global {
-    .ant-collapse .ant-collapse-content > .ant-collapse-content-box {
-      padding: 0;
-    }
-    .ant-collapse {
-      border: none;
-      background-color: white;
-    }
-    .ant-collapse-header {
-      padding: 10px 16px !important;
-    }
-    .ant-collapse-expand-icon {
-      padding-inline-end: 0 !important;
-    }
-    .ant-collapse-item {
-      border-color: $borderColor;
-    }
-  }
-}
-
-.collapsePanel {
-  display: flex;
-  flex-wrap: wrap;
-}

package/src/plugins/ComponentLibrary/components/ListView/style.module.scss.d.ts

@@ -1,12 +0,0 @@
-import globalClassNames from '../../../../style.d';
-declare const classNames: typeof globalClassNames & {
-  readonly ListBox: 'ListBox';
-  readonly 'ant-collapse': 'ant-collapse';
-  readonly 'ant-collapse-content': 'ant-collapse-content';
-  readonly 'ant-collapse-content-box': 'ant-collapse-content-box';
-  readonly 'ant-collapse-header': 'ant-collapse-header';
-  readonly 'ant-collapse-expand-icon': 'ant-collapse-expand-icon';
-  readonly 'ant-collapse-item': 'ant-collapse-item';
-  readonly collapsePanel: 'collapsePanel';
-};
-export = classNames;

package/src/plugins/ComponentLibrary/index.tsx

@@ -1,184 +0,0 @@
-import React from 'react';
-import { AppstoreAddOutlined } from '@ant-design/icons';
-import { LayoutDragAndDropExtraDataType, Sensor, SensorEventObjType } from '@chamn/layout';
-import { Tabs } from 'antd';
-import { CPlugin, CPluginCtx } from '../../core/pluginManager';
-import { DesignerExports } from '../Designer';
-import localize from './localize';
-import styles from './style.module.scss';
-import { withTranslation, WithTranslation } from 'react-i18next';
-import { ListView } from './components/ListView';
-import { getTargetMNodeKeyVal } from './util';
-import { DRAG_ITEM_KEY } from './components/DragItem';
-import { SnippetsCollection } from '@chamn/model';
-import { capitalize } from 'lodash-es';
-
-interface ComponentLibViewProps extends WithTranslation {
-  pluginCtx: CPluginCtx;
-}
-
-export const PLUGIN_NAME = 'ComponentLib';
-const i18nNamespace = `plugin:${PLUGIN_NAME}`;
-
-const TabTitle = ({ children }: { children: any }) => {
-  return <div className={styles.tabTitle}>{children}</div>;
-};
-
-type ComponentLibViewState = {
-  componentsList: SnippetsCollection;
-};
-class ComponentLibView extends React.Component<ComponentLibViewProps, ComponentLibViewState> {
-  containerRef: React.RefObject<HTMLDivElement>;
-  disposeList: (() => void)[] = [];
-  constructor(props: ComponentLibViewProps) {
-    super(props);
-    this.containerRef = React.createRef<HTMLDivElement>();
-    this.state = {
-      componentsList: [],
-    };
-  }
-
-  leftPanelVisibleCb = async ({ visible, panelName }: { visible: boolean; panelName: string }) => {
-    await this.props.pluginCtx.pluginManager.onPluginReadyOk('Designer');
-    if (panelName === PLUGIN_NAME && visible) {
-      this.registerDragEvent();
-    }
-  };
-
-  async componentDidMount() {
-    const { pluginCtx } = this.props;
-    const { pageModel, i18n } = pluginCtx;
-    const { materialsModel } = pageModel;
-    await this.props.pluginCtx.pluginManager.onPluginReadyOk('Designer');
-    this.registerDragEvent();
-
-    Object.keys(localize).forEach((lng) => {
-      i18n.addResourceBundle(lng, i18nNamespace, localize[lng], true, true);
-    });
-
-    i18n.update();
-    const allSnippets = materialsModel.getAllSnippets();
-    this.setState({
-      componentsList: allSnippets,
-    });
-  }
-
-  componentWillUnmount(): void {
-    this.disposeList.map((el) => el());
-  }
-
-  registerDragEvent = async () => {
-    const { containerRef } = this;
-    const { pluginCtx } = this.props;
-    const designerHandle = await pluginCtx.pluginManager.get('Designer');
-
-    if (!designerHandle) {
-      return;
-    }
-    if (!containerRef.current) {
-      return;
-    }
-    const pageModel = pluginCtx.pageModel;
-    const designerExports: DesignerExports = designerHandle.exports;
-    const dnd = designerExports.getDnd();
-    const boxSensor = new Sensor({
-      name: 'ComponentListBox',
-      container: containerRef.current,
-    });
-
-    boxSensor.setCanDrag((eventObj: SensorEventObjType) => {
-      const targetDom = eventObj.event.target;
-      if (!targetDom) {
-        return;
-      }
-      const targetNodeId = getTargetMNodeKeyVal(targetDom as HTMLElement, DRAG_ITEM_KEY);
-
-      if (!targetNodeId) {
-        return;
-      }
-
-      const meta = pageModel.materialsModel.findSnippetById(targetNodeId);
-      if (!meta) {
-        return;
-      }
-      const newNode = pageModel?.createNode(meta.schema);
-
-      this.props.pluginCtx.pluginManager.get('Designer').then((designerHandle) => {
-        const designerExports: DesignerExports = designerHandle?.exports;
-        designerExports.selectNode('');
-      });
-
-      return {
-        ...eventObj,
-        extraData: {
-          type: 'NEW_ADD',
-          startNode: newNode,
-        } as LayoutDragAndDropExtraDataType,
-      };
-    });
-    dnd.registerSensor(boxSensor);
-
-    const dragStart = () => {
-      const { getWorkbench } = this.props.pluginCtx;
-      const workbench = getWorkbench();
-      if (!workbench.state.leftBoxFixed) {
-        workbench.closeLeftPanel();
-      }
-    };
-
-    this.disposeList.push(() => {
-      dnd.emitter.off('dragStart', dragStart);
-    });
-    dnd.emitter.on('dragStart', dragStart);
-  };
-
-  render(): React.ReactNode {
-    const { componentsList } = this.state;
-    const items = componentsList.map((el) => {
-      return {
-        label: <TabTitle>{capitalize(el.name)}</TabTitle>,
-        key: el.name,
-        children: <ListView dataSource={el.list} />,
-      };
-    });
-    return (
-      <div ref={this.containerRef} className={styles.container}>
-        <Tabs
-          defaultActiveKey="BaseComponent"
-          items={items}
-          style={{
-            flex: 1,
-          }}
-        />
-      </div>
-    );
-  }
-}
-
-export const ComponentLibPlugin: CPlugin = {
-  name: PLUGIN_NAME,
-  async init(ctx) {
-    const ComponentLibViewWithLocalize = withTranslation(i18nNamespace)(ComponentLibView);
-    const Title = withTranslation(i18nNamespace)(({ t }) => {
-      return <>{t('pluginName')}</>;
-    });
-    const workbench = ctx.getWorkbench();
-    workbench.addLeftPanel({
-      title: <Title />,
-      name: 'ComponentLib',
-      icon: <AppstoreAddOutlined />,
-      render: <ComponentLibViewWithLocalize pluginCtx={ctx} />,
-    });
-  },
-  async destroy(ctx) {
-    console.log('destroy', ctx);
-  },
-  exports: (ctx) => {
-    return {};
-  },
-  meta: {
-    engine: {
-      version: '1.0.0',
-    },
-  },
-};

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

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

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

@@ -1,3 +0,0 @@
-export const zh_CN: Record<string, any> = {
-  pluginName: '组件库',
-};

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

@@ -1,31 +0,0 @@
-.container {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  background-color: white;
-  display: flex;
-
-  :global {
-    .ant-tabs .ant-tabs-tab + .ant-tabs-tab {
-      margin-left: 12px;
-    }
-
-    .ant-tabs-content.ant-tabs-content-top {
-      height: 100%;
-      overflow: auto;
-    }
-    .ant-tabs-tab {
-      padding: 6px 0;
-    }
-    .ant-tabs-nav {
-      margin-bottom: 0;
-    }
-  }
-}
-
-.tabTitle {
-  padding: 0 10px;
-  font-size: 12px;
-  font-weight: 400;
-  text-rendering: optimizeLegibility;
-}

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

@@ -1,11 +0,0 @@
-import globalClassNames from '../../style.d';
-declare const classNames: typeof globalClassNames & {
-  readonly container: 'container';
-  readonly 'ant-tabs': 'ant-tabs';
-  readonly 'ant-tabs-tab': 'ant-tabs-tab';
-  readonly 'ant-tabs-content': 'ant-tabs-content';
-  readonly 'ant-tabs-content-top': 'ant-tabs-content-top';
-  readonly 'ant-tabs-nav': 'ant-tabs-nav';
-  readonly tabTitle: 'tabTitle';
-};
-export = classNames;

package/src/plugins/ComponentLibrary/util.ts

@@ -1,14 +0,0 @@
-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;
-  }
-};

package/src/plugins/ComponentStatePanel/index.tsx

@@ -1,59 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { CNode, CRootNode } from '@chamn/model';
-import { CPluginCtx } from '../../core/pluginManager';
-import { CRightPanelItem } from '../RightPanel/view';
-import { MonacoEditor, MonacoEditorInstance } from '../../component/MonacoEditor';
-
-export type ComponentStatePanelProps = {
-  node: CNode | CRootNode;
-  pluginCtx: CPluginCtx;
-};
-
-export const ComponentStatePanel = (props: ComponentStatePanelProps) => {
-  const { node } = props;
-  const nodeState = node.value.state || {};
-  const editorRef = useRef<MonacoEditorInstance | null>(null);
-  useEffect(() => {
-    const currentState = node.value.state || {};
-    editorRef?.current?.setValue(JSON.stringify(currentState, null, 2));
-  }, [node]);
-
-  const onValueChange = (newValStr: string) => {
-    try {
-      const newVal = JSON.parse(newValStr);
-      node.value.state = newVal;
-      node.updateValue();
-    } catch (e) {
-      console.warn(e);
-    }
-  };
-
-  return (
-    <>
-      <MonacoEditor
-        initialValue={JSON.stringify(nodeState, null, 2)}
-        language={'json'}
-        options={{
-          automaticLayout: true,
-          // lineDecorationsWidth: 0,
-          tabSize: 2,
-          minimap: { enabled: false },
-          quickSuggestions: false,
-          // lineNumbers: 'off',
-          suggestOnTriggerCharacters: false,
-          folding: false,
-        }}
-        onDidMount={(editor) => {
-          editorRef.current = editor;
-        }}
-        onChange={onValueChange}
-      />
-    </>
-  );
-};
-
-export const ComponentStatePanelConfig: CRightPanelItem = {
-  key: 'State',
-  name: 'State',
-  view: ({ node, pluginCtx }) => <ComponentStatePanel node={node} pluginCtx={pluginCtx} />,
-};

package/src/plugins/Designer/components/DefaultSelectToolBar/index.tsx

@@ -1,94 +0,0 @@
-import React, { useState } from 'react';
-import { CopyOutlined, DeleteOutlined, EyeInvisibleOutlined } from '@ant-design/icons';
-import styles from './style.module.scss';
-import { CNode } from '@chamn/model';
-import clsx from 'clsx';
-
-export type DefaultSelectToolBarProps = {
-  nodeList: CNode[];
-  toSelectNode: (id: string) => void;
-  toDelete: (id: string) => void;
-  toCopy: (idd: string) => void;
-  toHidden: (idd: string) => void;
-};
-
-const LayoutSelect = ({
-  dataSource,
-  children,
-  onSelect,
-}: {
-  dataSource: { key: string; label: string }[];
-  children: React.ReactNode;
-  onSelect: (key: string) => void;
-}) => {
-  const [hover, setHover] = useState(false);
-  return (
-    <div className={styles.layoutSelectBox}>
-      <div className={clsx([styles.hoverBox, hover && styles.hoverBoxActive])}>
-        {dataSource.map((el) => {
-          return (
-            <div className={styles.hoverItem} key={el.key} onClick={() => onSelect(el.key)}>
-              {el.label}
-            </div>
-          );
-        })}
-      </div>
-      <div className={styles.placeholder} onMouseOver={() => setHover(true)} onMouseOut={() => setHover(false)}>
-        {children}
-      </div>
-    </div>
-  );
-};
-
-export const DefaultSelectToolBar = ({
-  nodeList,
-  toSelectNode,
-  toDelete,
-  toCopy,
-  toHidden,
-}: DefaultSelectToolBarProps) => {
-  const tempList = [...nodeList];
-  const currentNode = tempList.shift();
-  const parentNodeItems = tempList.map((el) => {
-    const node = el;
-    const nodeMeta = node.materialsModel.findByComponentName(node.value.componentName)?.value.title;
-    const label = node.value.title || nodeMeta || node.value.componentName || '';
-    return {
-      key: el.id,
-      label: label || 'Empty',
-    };
-  });
-
-  const copyItem = (
-    <div className={styles.item} onClick={() => toCopy(currentNode?.id || '')}>
-      <CopyOutlined />
-    </div>
-  );
-
-  const deleteItem = (
-    <div className={styles.item} onClick={() => toDelete(currentNode?.id || '')}>
-      <DeleteOutlined />
-    </div>
-  );
-
-  const visibleItem = (
-    <div className={styles.item} onClick={() => toHidden(currentNode?.id || '')}>
-      <EyeInvisibleOutlined />
-    </div>
-  );
-
-  const nodeLayout = (
-    <LayoutSelect dataSource={parentNodeItems.reverse()} onSelect={toSelectNode}>
-      <div>{currentNode?.value.title || currentNode?.material?.value.title || 'Empty'}</div>
-    </LayoutSelect>
-  );
-
-  return (
-    <div className={styles.toolBarBox}>
-      {nodeLayout}
-      {visibleItem}
-      {copyItem}
-      {deleteItem}
-    </div>
-  );
-};

package/src/plugins/Designer/components/DefaultSelectToolBar/style.module.scss

@@ -1,59 +0,0 @@
-.toolBarBox {
-  display: flex;
-  margin-bottom: 3px;
-  margin-right: -2px;
-  pointer-events: all;
-  float: right;
-}
-
-.item {
-  background-color: $baseColor;
-  color: white;
-  padding: 2px 3px;
-  font-size: 12px;
-  overflow: hidden;
-  margin-left: 1px;
-  cursor: pointer;
-}
-
-.layoutSelectBox {
-  position: relative;
-  margin-right: 1px;
-  height: 21px;
-
-  .hoverBox {
-    transition: all 0.3s;
-    position: absolute;
-    left: 0;
-    top: 0;
-    white-space: nowrap;
-    opacity: 0;
-    transform: translateY(-100%);
-    pointer-events: none;
-
-    &:hover,
-    &.hoverBoxActive {
-      opacity: 1;
-      pointer-events: all;
-    }
-
-    .hoverItem {
-      background-color: $baseColor;
-      padding: 2px 3px;
-      color: white;
-      font-size: 12px;
-      margin-bottom: 1px;
-      cursor: pointer;
-    }
-  }
-  .placeholder {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    background-color: $baseColor;
-    color: white;
-    padding: 2px 5px;
-    font-size: 12px;
-    max-width: 100px;
-  }
-}

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

@@ -1,11 +0,0 @@
-import globalClassNames from '../../../../style.d';
-declare const classNames: typeof globalClassNames & {
-  readonly toolBarBox: 'toolBarBox';
-  readonly item: 'item';
-  readonly layoutSelectBox: 'layoutSelectBox';
-  readonly hoverBox: 'hoverBox';
-  readonly hoverBoxActive: 'hoverBoxActive';
-  readonly hoverItem: 'hoverItem';
-  readonly placeholder: 'placeholder';
-};
-export = classNames;

package/src/plugins/Designer/components/GhostView/index.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import { CNode, CRootNode } from '@chamn/model';
-
-export const GhostView = ({ node }: { node: CNode | CRootNode }) => {
-  return (
-    <div
-      style={{
-        backgroundColor: 'rgba(100,100,100)',
-        padding: '3px 10px 3px 15px',
-        borderRadius: '2px',
-        opacity: 0.9,
-        color: 'rgba(220,220,220)',
-      }}
-    >
-      {node.value.componentName}
-    </div>
-  );
-};

package/src/plugins/Designer/config.ts

@@ -1 +0,0 @@
-export const PLUGIN_NAME = 'Designer';

package/src/plugins/Designer/index.tsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import { DragAndDrop } from '@chamn/layout';
-import '@chamn/layout/dist/style.css';
-import { CPlugin } from '../../core/pluginManager';
-import { PLUGIN_NAME } from './config';
-import { Designer } from './view';
-import { AssetPackage, CPage, CPageDataType } from '@chamn/model';
-import { RenderInstance } from '@chamn/render';
-
-export const DesignerPlugin: CPlugin = (ctx) => {
-  const designerRef = React.createRef<Designer>();
-  return {
-    name: PLUGIN_NAME,
-    async init(ctx) {
-      const workbench = ctx.getWorkbench();
-      workbench.replaceBodyView(<Designer ref={designerRef} pluginCtx={ctx} />);
-    },
-    async destroy(ctx) {
-      console.log('destroy', ctx);
-    },
-    exports: () => {
-      return {
-        getDnd: () => {
-          return designerRef.current?.layoutRef.current?.dnd;
-        },
-        selectNode: (nodeId) => {
-          designerRef.current?.layoutRef.current?.selectNode(nodeId);
-        },
-        updatePage: (page: CPageDataType | CPage) => {
-          designerRef.current?.layoutRef.current?.designRenderRef?.current?.rerender(page);
-        },
-        reload: ({ assets } = {}) => {
-          designerRef.current?.reloadRender({ assets });
-        },
-        getComponentInstances: (id: string) => {
-          return designerRef.current?.layoutRef.current?.designRenderRef.current?.getInstancesById(id) || [];
-        },
-        getDynamicComponentInstances: (id: string) => {
-          const map =
-            designerRef.current?.layoutRef.current?.designRenderRef.current?.renderRef.current
-              ?.dynamicComponentInstanceMap;
-          return map?.get(id) || [];
-        },
-      } as DesignerExports;
-    },
-    meta: {
-      engine: {
-        version: '1.0.0',
-      },
-    },
-  };
-};
-
-export type DesignerExports = {
-  reload: (params?: { assets?: AssetPackage[] }) => void;
-  getDnd: () => DragAndDrop;
-  selectNode: (nodeId: string) => void;
-  updatePage: (page: CPageDataType) => void;
-  getComponentInstances: (id: string) => RenderInstance[];
-  getDynamicComponentInstances: (id: string) => RenderInstance;
-};

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

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

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

@@ -1,3 +0,0 @@
-export const zh_CN: Record<string, any> = {
-  pluginName: '组件库',
-};

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

@@ -1,10 +0,0 @@
-.hoverTips {
-  display: inline-block;
-  color: $baseColor;
-  opacity: 0.9;
-  font-size: 12px;
-  margin-bottom: 2px;
-  background-color: white;
-  padding: 1px 3px;
-  border-radius: 2px;
-}