@chamn/engine 0.0.10 → 0.0.12

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

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

package/src/plugins/PropertyPanel/utils.ts

@@ -1,13 +0,0 @@
-import { SetterObjType, SetterType } from '@chamn/model';
-
-export const getSetterList = (setters: SetterType[] = []): SetterObjType[] => {
-  return setters.map((setter) => {
-    if (typeof setter === 'string') {
-      return {
-        componentName: setter as any,
-      };
-    } else {
-      return setter;
-    }
-  });
-};

package/src/plugins/RightPanel/index.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { CPlugin } from '../../core/pluginManager';
-import { CRightPanelItem, RightPanel } from './view';
-
-const PLUGIN_NAME = 'RightPanel';
-export const RightPanelPlugin: CPlugin = (ctx) => {
-  const uiHandle = React.createRef<RightPanel>();
-  return {
-    name: PLUGIN_NAME,
-    async init(ctx) {
-      const workbench = ctx.getWorkbench();
-      workbench.replaceRightView(<RightPanel ref={uiHandle} pluginCtx={ctx} />);
-    },
-    async destroy(ctx) {
-      console.log('destroy', ctx);
-    },
-    exports: (ctx) => {
-      return {
-        addPanel: (panel: CRightPanelItem) => {
-          uiHandle?.current?.addPanel(panel);
-        },
-      };
-    },
-    meta: {
-      engine: {
-        version: '1.0.0',
-      },
-    },
-  };
-};

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

@@ -1,16 +0,0 @@
-.rightPanelContainer {
-  height: 100%;
-  width: 100%;
-  :global {
-    .ant-tabs .ant-tabs-tab + .ant-tabs-tab {
-      margin-left: 0;
-    }
-    .ant-tabs-content.ant-tabs-content-top {
-      height: 100%;
-      overflow: auto;
-    }
-    .ant-tabs .ant-tabs-tabpane {
-      height: 100%;
-    }
-  }
-}

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

@@ -1,10 +0,0 @@
-import globalClassNames from '../../style.d';
-declare const classNames: typeof globalClassNames & {
-  readonly rightPanelContainer: 'rightPanelContainer';
-  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-tabpane': 'ant-tabs-tabpane';
-};
-export = classNames;

package/src/plugins/RightPanel/view.tsx

@@ -1,177 +0,0 @@
-import { CNode, CRootNode } from '@chamn/model';
-import { Empty, Tabs } from 'antd';
-import React from 'react';
-import { CPluginCtx } from '../../core/pluginManager';
-import { PropertyPanelConfig } from '../PropertyPanel';
-import { ComponentStatePanelConfig } from '../ComponentStatePanel';
-import { AdvancePanelConfig } from '../AdvancePanel';
-import styles from './style.module.scss';
-import { VisualPanelPlusConfig } from '../VisualPanelPlus';
-
-export type RightPanelOptions = { node: CNode | CRootNode; pluginCtx: CPluginCtx };
-
-export type CRightPanelItem = {
-  key: string;
-  name: string | ((props: RightPanelOptions) => React.ReactNode);
-  view: (props: RightPanelOptions) => React.ReactNode;
-  show?: (options: RightPanelOptions) => boolean;
-};
-
-interface RightPanelProps {
-  pluginCtx: CPluginCtx;
-}
-
-interface RightPanelState {
-  node: CNode | CRootNode | null;
-  activeKey: string;
-  panels: CRightPanelItem[];
-  displayPanels: CRightPanelItem[];
-}
-
-export class RightPanel extends React.Component<RightPanelProps, RightPanelState> {
-  constructor(props: RightPanelProps) {
-    super(props);
-    this.state = {
-      node: props.pluginCtx.engine.getActiveNode(),
-      activeKey: 'Visual',
-      panels: [
-        // AdvancePanelConfig,
-        PropertyPanelConfig,
-        // VisualPanelConfig,
-        VisualPanelPlusConfig,
-        ComponentStatePanelConfig,
-        // {
-        //   key: 'Actions',
-        //   name: 'Actions',
-        //   view: () => <>Actions</>,
-        // },
-        AdvancePanelConfig,
-      ],
-      displayPanels: [],
-    };
-  }
-
-  addPanel = (panel: CRightPanelItem) => {
-    const newPanels = [...this.state.panels, panel];
-    this.setState({
-      panels: newPanels,
-    });
-    this.updatePanels();
-  };
-
-  updatePanels = () => {
-    const { pluginCtx } = this.props;
-    const { node, panels } = this.state;
-    const newPanels = panels;
-    let val: {
-      panels: CRightPanelItem[];
-      displayPanels: CRightPanelItem[];
-    } = { panels: [], displayPanels: [] };
-    if (node) {
-      const panelParams = { node: node, pluginCtx };
-      const displayPanels = newPanels.filter((panel) => {
-        if (panel.show === undefined) {
-          return true;
-        } else {
-          return panel.show(panelParams);
-        }
-      });
-      val = {
-        panels: newPanels,
-        displayPanels,
-      };
-    } else {
-      val = {
-        panels: newPanels,
-        displayPanels: [],
-      };
-    }
-    this.setState(val);
-    return val;
-  };
-
-  onNodeChange = ({ node }: any) => {
-    const { pluginCtx } = this.props;
-    const { panels, activeKey } = this.state;
-    const panelParams = { node: node, pluginCtx };
-    const displayPanels = panels.filter((panel) => {
-      if (panel.show === undefined) {
-        return true;
-      } else {
-        return panel.show(panelParams);
-      }
-    });
-    const firstPanelKey = displayPanels.find((_, index) => index === 0)?.key || '';
-    const isExitsCurrent = displayPanels.find((el) => el.key === activeKey);
-    if (!isExitsCurrent) {
-      this.setState({
-        activeKey: firstPanelKey,
-        node,
-        displayPanels,
-      });
-    } else {
-      this.setState({
-        node,
-        displayPanels,
-      });
-    }
-  };
-
-  componentDidMount(): void {
-    const { pluginCtx } = this.props;
-    pluginCtx.globalEmitter.on('onSelectNodeChange', this.onNodeChange);
-    pluginCtx.pageModel.emitter.on('*', () => {
-      const currentSelectNode = pluginCtx.engine.getActiveNode();
-      this.onNodeChange({ node: currentSelectNode });
-    });
-    const { displayPanels } = this.updatePanels();
-    const firstPanelKey = displayPanels.find((_, index) => index === 0)?.key || '';
-    const isExitsCurrent = displayPanels.find((el) => el.key === this.state.activeKey);
-
-    if (!isExitsCurrent) {
-      this.setState({
-        activeKey: firstPanelKey,
-      });
-    }
-  }
-
-  render() {
-    const { displayPanels, node, activeKey } = this.state;
-    const { pluginCtx } = this.props;
-    if (!node) {
-      return (
-        <div style={{ overflow: 'hidden' }}>
-          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={'Please select a node from left view'} />
-        </div>
-      );
-    }
-    const panelParams = { node: node, pluginCtx };
-
-    return (
-      <div className={styles.rightPanelContainer}>
-        <Tabs
-          activeKey={activeKey}
-          tabPosition="top"
-          style={{
-            flex: 1,
-            height: '100%',
-          }}
-          onChange={(activeKey) => {
-            this.setState({
-              activeKey,
-            });
-          }}
-          items={displayPanels.map((p) => {
-            return {
-              label: (
-                <div style={{ padding: '0 10px' }}>{typeof p.name === 'string' ? p.name : p.name?.(panelParams)}</div>
-              ),
-              key: p.key,
-              children: p.view(panelParams),
-            };
-          })}
-        />
-      </div>
-    );
-  }
-}

package/src/plugins/VisualPanel/index.tsx

@@ -1,185 +0,0 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { CMaterialPropsType, CNode, CNodePropsTypeEnum, CProp, isExpression } from '@chamn/model';
-import { CPluginCtx } from '../../core/pluginManager';
-import { CRightPanelItem } from '../RightPanel/view';
-
-import styles from './style.module.scss';
-import { CSSPropertiesEditor, CSSPropertiesEditorRef } from '../../component/CSSPropertiesEditor';
-import { Collapse } from 'antd';
-import { CustomSchemaForm, CustomSchemaFormInstance } from '../../component/CustomSchemaForm';
-
-type styleArr = {
-  key: string;
-  value: any;
-}[];
-
-const CSSBindPropsSchema: CMaterialPropsType<'CSSValueSetter'> = [
-  {
-    name: 'css',
-    title: 'CSS Variable Bind',
-    valueType: 'array',
-    setters: [
-      {
-        componentName: 'ArraySetter',
-        props: {
-          item: {
-            setters: [
-              {
-                componentName: 'ShapeSetter',
-                props: {
-                  elements: [
-                    {
-                      name: 'key',
-                      title: '属性',
-                      valueType: 'string',
-                      setters: ['StringSetter'],
-                      description: '',
-                    },
-                    {
-                      name: 'value',
-                      title: '置',
-                      valueType: 'string',
-                      setters: ['ExpressionSetter'],
-                      description: '',
-                    },
-                  ],
-                  collapse: false,
-                },
-                initialValue: {
-                  key: '',
-                  value: {
-                    type: CNodePropsTypeEnum.EXPRESSION,
-                    value: '',
-                  },
-                },
-              },
-            ],
-            initialValue: {
-              key: '',
-              value: {
-                type: CNodePropsTypeEnum.EXPRESSION,
-                value: '',
-              },
-            },
-          },
-        },
-        initialValue: [],
-      },
-    ],
-  },
-];
-
-const formatProperty = (cssVal: Record<string, any>) => {
-  const normalProperty: { key: string; value: string }[] = [];
-  const expressionProperty: { key: string; value: any }[] = [];
-  Object.keys(cssVal).forEach((key) => {
-    const val = cssVal[key];
-    if (isExpression(val)) {
-      expressionProperty.push({
-        key,
-        value: val,
-      });
-    } else {
-      normalProperty.push({
-        key,
-        value: val,
-      });
-    }
-  });
-  const res = {
-    normalProperty,
-    expressionProperty,
-  };
-  return res;
-};
-
-const styleArr2Obj = (val: styleArr) => {
-  const res: Record<string, any> = {};
-  val.forEach((item) => {
-    res[item.key] = item.value;
-  });
-  return res;
-};
-
-export const VisualPanel = (props: { node: CNode; pluginCtx: CPluginCtx }) => {
-  const formRef = useRef<CustomSchemaFormInstance>(null);
-  const { node } = props;
-  const cssEditorRef = useRef<CSSPropertiesEditorRef>(null);
-  const [style, setStyle] = useState<Record<string, string>>({});
-  const formatStyle = useMemo(() => {
-    return formatProperty(style);
-  }, [style]);
-  useEffect(() => {
-    const handel = () => {
-      const newStyle = node.getPlainProps?.()['style'] || {};
-      setStyle(newStyle);
-      const { normalProperty, expressionProperty } = formatProperty(newStyle);
-      cssEditorRef.current?.setValue(normalProperty);
-      formRef.current?.setFields({
-        css: expressionProperty,
-      });
-    };
-    handel();
-    node.emitter.on('onNodeChange', handel);
-    () => {
-      node.emitter.off('onNodeChange', handel);
-    };
-  }, [node]);
-
-  const onUpdateStyle = (styleArr: styleArr) => {
-    // merge style
-    const newStyle = styleArr2Obj([...styleArr]);
-    setStyle(newStyle);
-    if (node.value.props.style) {
-      node.value.props.style.updateValue(newStyle);
-    } else {
-      node.value.props.style = new CProp('style', newStyle, {
-        parent: node,
-        materials: node.materialsModel,
-      });
-      node.updateValue();
-    }
-  };
-
-  return (
-    <div className={styles.visualPanelBox}>
-      <Collapse
-        defaultActiveKey={['origin-css-edit']}
-        bordered={false}
-        style={{
-          marginBottom: '10px',
-        }}
-      >
-        <Collapse.Panel header={<span className={styles.header}>CSS Source</span>} key="origin-css-edit">
-          <CSSPropertiesEditor
-            key={node.id}
-            ref={cssEditorRef}
-            onValueChange={(val) => {
-              onUpdateStyle([...val, ...formatStyle.expressionProperty]);
-            }}
-            initialValue={formatStyle.normalProperty}
-          />
-        </Collapse.Panel>
-      </Collapse>
-      <CustomSchemaForm
-        pluginCtx={props.pluginCtx}
-        key={node.id}
-        defaultSetterConfig={node.value.configure.propsSetter || {}}
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        onSetterChange={() => {}}
-        properties={CSSBindPropsSchema}
-        initialValue={formatStyle.expressionProperty}
-        ref={formRef}
-        onValueChange={(val) => {
-          onUpdateStyle([...formatStyle.normalProperty, ...val.css]);
-        }}
-      />
-    </div>
-  );
-};
-
-export const VisualPanelConfig: CRightPanelItem = {
-  key: 'Visual',
-  name: 'Visual',
-  view: ({ node, pluginCtx }) => <VisualPanel node={node} pluginCtx={pluginCtx} />,
-};

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

@@ -1,17 +0,0 @@
-.visualPanelBox {
-  padding: 0 15px;
-  :global {
-    .ant-collapse > .ant-collapse-item:last-child > .ant-collapse-header {
-      padding: 5px 5px 5px 10px;
-      align-items: center;
-      .ant-collapse-expand-icon {
-        padding-inline-end: 4px;
-      }
-    }
-  }
-  .header {
-    color: $fontColor;
-    display: flex;
-    font-size: 12px;
-  }
-}

package/src/plugins/VisualPanelPlus/index.tsx

@@ -1,103 +0,0 @@
-import { useEffect, useMemo, useRef, useState } 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 { CSSPropertiesEditor, CSSPropertiesEditorRef } from '../../component/CSSPropertiesEditor';
-import {
-  CSSPropertiesVariableBindEditor,
-  CSSPropertiesVariableBindEditorRef,
-} from '../../component/CSSPropertiesVariableBindEditor';
-import { Collapse } from 'antd';
-import { ClassNameEditor } from '@/component/ClassNameEditor';
-import { CSSEditor, CSSEditorRef, CSSVal } from '@/component/CSSEditor';
-import { formatCSSProperty, formatCssToNodeVal, formatNodeValToEditor, StyleArr, styleArr2Obj } from '@/utils/css';
-
-export const VisualPanelPlus = (props: { node: CNode | CRootNode; pluginCtx: CPluginCtx }) => {
-  const formRef = useRef<CSSPropertiesVariableBindEditorRef>(null);
-  const node = props.pluginCtx.pageModel.getNode(props.node.id)!;
-  const cssPropertyEditorRef = useRef<CSSPropertiesEditorRef>(null);
-  const cssEditorRef = useRef<CSSEditorRef>(null);
-  const [style, setStyle] = useState<Record<string, any>>({});
-  const formatStyle = useMemo(() => {
-    return formatCSSProperty(style);
-  }, [style]);
-
-  const lastNode = useRef<CNode | CRootNode>();
-  useEffect(() => {
-    const handel = () => {
-      lastNode.current = node;
-      const newStyle = node.value.style || {};
-      setStyle(newStyle);
-      const { normalProperty, expressionProperty } = formatCSSProperty(newStyle);
-      cssPropertyEditorRef.current?.setValue(normalProperty);
-      formRef.current?.setValue(expressionProperty);
-      const fCss = formatNodeValToEditor(node.value.css);
-      cssEditorRef.current?.setValue(fCss);
-    };
-    handel();
-    node.emitter.on('onNodeChange', handel);
-    node.emitter.on('onReloadPage', handel);
-    () => {
-      node.emitter.off('onNodeChange', handel);
-      node.emitter.off('onReloadPage', handel);
-    };
-  }, [node]);
-
-  const onUpdateStyle = (styleArr: StyleArr) => {
-    // merge style
-    const newStyle = styleArr2Obj([...styleArr]);
-    setStyle(newStyle);
-    node.value.style = newStyle;
-    node.updateValue();
-  };
-
-  const onUpdateCss = (val: CSSVal) => {
-    // class name 不能以数字开头，这里使用c_前缀
-    node.value.css = formatCssToNodeVal(`c_${node.id}`, val);
-    console.log(' node.value.css', node.value.css);
-    node.updateValue();
-  };
-
-  return (
-    <div className={styles.visualPanelBox}>
-      <div
-        style={{
-          marginBottom: '10px',
-        }}
-      >
-        <ClassNameEditor
-          onValueChange={(newVal) => {
-            node.value.classNames = newVal;
-            node.updateValue();
-          }}
-        />
-      </div>
-      <Collapse
-        defaultActiveKey={['origin-css-edit']}
-        bordered={false}
-        style={{
-          marginBottom: '10px',
-        }}
-      >
-        <Collapse.Panel header={<span className={styles.header}>Style Variable Bind</span>} key="origin-css-edit">
-          <CSSPropertiesVariableBindEditor
-            ref={formRef}
-            initialValue={formatStyle.expressionProperty}
-            onValueChange={(val) => {
-              onUpdateStyle([...formatStyle.normalProperty, ...val]);
-            }}
-          />
-        </Collapse.Panel>
-      </Collapse>
-      <CSSEditor handler={cssEditorRef} onValueChange={onUpdateCss} />
-    </div>
-  );
-};
-
-export const VisualPanelPlusConfig: CRightPanelItem = {
-  key: 'VisualPanelPlus',
-  name: 'VisualPanel',
-  view: ({ node, pluginCtx }) => <VisualPanelPlus node={node} pluginCtx={pluginCtx} />,
-};

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

@@ -1,20 +0,0 @@
-.visualPanelBox {
-  padding: 0 15px 300px;
-
-  .header {
-    color: $fontColor;
-    display: flex;
-  }
-}
-
-:global {
-  .ant-collapse .ant-collapse-item .ant-collapse-header {
-    padding: 5px 5px 5px 10px;
-    align-items: center;
-    color: $fontColor;
-    font-size: 12px;
-    .ant-collapse-expand-icon {
-      padding-inline-end: 4px;
-    }
-  }
-}

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

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

package/src/plugins/index.tsx

@@ -1,26 +0,0 @@
-import { CPlugin } from '../core/pluginManager';
-import { ComponentLibPlugin } from './ComponentLibrary';
-import { DesignerPlugin } from './Designer';
-import { OutlineTreePlugin } from './OutlineTree';
-import { RightPanelPlugin } from './RightPanel';
-import { GlobalStatePanelPlugin } from './GlobalStatePanel';
-import { DisplaySourceSchema } from './DisplaySourceSchema';
-import { HistoryPlugin } from './History';
-
-export const DEFAULT_PLUGIN_LIST: CPlugin[] = [
-  DesignerPlugin,
-  OutlineTreePlugin,
-  ComponentLibPlugin,
-  GlobalStatePanelPlugin,
-  RightPanelPlugin,
-  HistoryPlugin,
-];
-
-export {
-  DesignerPlugin,
-  ComponentLibPlugin,
-  RightPanelPlugin,
-  GlobalStatePanelPlugin,
-  HistoryPlugin,
-  DisplaySourceSchema,
-};

package/src/stories/Button.jsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './button.css';
-
-/**
- * Primary UI component for user interaction
- */
-export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
-  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
-  return (
-    <button
-      type="button"
-      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
-      style={backgroundColor && { backgroundColor }}
-      {...props}
-    >
-      {label}
-    </button>
-  );
-};
-
-Button.propTypes = {
-  /**
-   * Is this the principal call to action on the page?
-   */
-  primary: PropTypes.bool,
-  /**
-   * What background color to use
-   */
-  backgroundColor: PropTypes.string,
-  /**
-   * How large should the button be?
-   */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  /**
-   * Button contents
-   */
-  label: PropTypes.string.isRequired,
-  /**
-   * Optional click handler
-   */
-  onClick: PropTypes.func,
-};
-
-Button.defaultProps = {
-  backgroundColor: null,
-  primary: false,
-  size: 'medium',
-  onClick: undefined,
-};