@chamn/engine 0.0.10 → 0.0.12

package/src/material/innerMaterial.ts

@@ -1,343 +0,0 @@
-import { CMaterialPropsType, CMaterialType, HTMl_TAGS } from '@chamn/model';
-import { capitalize } from 'lodash-es';
-
-const customAttributesMeta: CMaterialPropsType[number] = {
-  name: '$$attributes',
-  title: '属性',
-  valueType: 'object',
-  setters: [
-    {
-      componentName: 'ArraySetter',
-      props: {
-        item: {
-          setters: [
-            {
-              componentName: 'ShapeSetter',
-              props: {
-                elements: [
-                  {
-                    name: 'key',
-                    title: '属性名',
-                    valueType: 'string',
-                    setters: ['StringSetter'],
-                  },
-                  {
-                    name: 'value',
-                    title: '值',
-                    valueType: 'string',
-                    setters: ['StringSetter', 'NumberSetter', 'JSONSetter', 'FunctionSetter', 'ExpressionSetter'],
-                  },
-                ],
-                collapse: false,
-              },
-              initialValue: {},
-            },
-          ],
-          initialValue: {},
-        },
-      },
-      initialValue: [],
-    },
-  ],
-};
-
-const widthPropsMeta: CMaterialPropsType[number] = {
-  name: 'width',
-  title: '宽度',
-  valueType: 'string',
-  setters: ['StringSetter', 'ExpressionSetter'],
-};
-
-const heightPropsMeta: CMaterialPropsType[number] = {
-  name: 'height',
-  title: '高度',
-  valueType: 'string',
-  setters: ['StringSetter', 'ExpressionSetter'],
-};
-
-const htmlNativeComponentMeta = HTMl_TAGS.map((tag) => {
-  const DivMeta: CMaterialType = {
-    title: capitalize(tag),
-    componentName: tag,
-    props: [customAttributesMeta],
-    snippets: [],
-  };
-
-  return DivMeta;
-});
-
-const BaseComponentMeta: CMaterialType[] = [
-  {
-    title: '块',
-    componentName: 'CBlock',
-    isSupportStyle: true,
-    props: [
-      widthPropsMeta,
-      heightPropsMeta,
-      {
-        name: 'children',
-        title: '文本',
-        valueType: 'string',
-        setters: ['StringSetter', 'ExpressionSetter'],
-      },
-      customAttributesMeta,
-    ],
-    groupName: '原子组件',
-    snippets: [
-      {
-        title: '块',
-        snapshotText: 'Block',
-        category: '基础组件',
-        schema: {
-          props: {
-            width: '100%',
-            height: '100px',
-          },
-        },
-      },
-    ],
-  },
-  {
-    title: '容器',
-    componentName: 'CContainer',
-    isSupportStyle: true,
-    isContainer: true,
-    props: [
-      widthPropsMeta,
-      heightPropsMeta,
-      {
-        name: 'afterMount',
-        title: '渲染之后',
-        valueType: 'function',
-        setters: ['FunctionSetter', 'ExpressionSetter'],
-      },
-      {
-        name: 'beforeDestroy',
-        title: '销毁之前',
-        valueType: 'function',
-        setters: ['FunctionSetter', 'ExpressionSetter'],
-      },
-      customAttributesMeta,
-    ],
-    groupName: '原子组件',
-    snippets: [
-      {
-        title: '容器',
-        snapshotText: 'Con',
-        category: '基础组件',
-        schema: {
-          props: {
-            width: '100%',
-            height: '100px',
-          },
-        },
-      },
-    ],
-  },
-  {
-    title: '图片',
-    componentName: 'CImage',
-    isSupportStyle: true,
-    props: [
-      {
-        name: 'src',
-        title: '地址',
-        valueType: 'string',
-        setters: ['StringSetter', 'ExpressionSetter'],
-      },
-      widthPropsMeta,
-      heightPropsMeta,
-      customAttributesMeta,
-    ],
-    groupName: '原子组件',
-    snippets: [
-      {
-        title: '图片',
-        snapshotText: 'Img',
-        category: '基础组件',
-        schema: {
-          props: {
-            width: '300px',
-            height: '150px',
-          },
-        },
-      },
-    ],
-  },
-  {
-    title: '视频',
-    componentName: 'CVideo',
-    isSupportStyle: true,
-    props: [
-      {
-        name: 'src',
-        title: '地址',
-        valueType: 'string',
-        setters: ['StringSetter', 'ExpressionSetter'],
-      },
-      {
-        name: 'autoPlay',
-        title: '自动播放',
-        valueType: 'string',
-        setters: ['BooleanSetter', 'ExpressionSetter'],
-      },
-      {
-        name: 'controls',
-        title: '控制面板',
-        valueType: 'string',
-        setters: ['BooleanSetter', 'ExpressionSetter'],
-      },
-      widthPropsMeta,
-      heightPropsMeta,
-      customAttributesMeta,
-    ],
-    fixedProps: {
-      autoPlay: false,
-    },
-    groupName: '原子组件',
-    snippets: [
-      {
-        title: '视频',
-        snapshotText: 'Video',
-        category: '基础组件',
-        schema: {
-          props: {
-            width: '300px',
-            height: '150px',
-            src: 'https://vjs.zencdn.net/v/oceans.mp4',
-          },
-        },
-      },
-    ],
-  },
-  {
-    title: '音频',
-    groupName: '原子组件',
-    componentName: 'CAudio',
-    isSupportStyle: true,
-    props: [
-      {
-        name: 'src',
-        title: '地址',
-        valueType: 'string',
-        setters: ['StringSetter', 'ExpressionSetter'],
-      },
-      {
-        name: 'autoPlay',
-        title: '自动播放',
-        valueType: 'string',
-        setters: ['BooleanSetter', 'ExpressionSetter'],
-      },
-      {
-        name: 'controls',
-        title: '控制面板',
-        valueType: 'string',
-        setters: ['BooleanSetter', 'ExpressionSetter'],
-      },
-      widthPropsMeta,
-      heightPropsMeta,
-      customAttributesMeta,
-    ],
-    snippets: [
-      {
-        title: '音频',
-        snapshotText: 'Audio',
-        category: '基础组件',
-        schema: {
-          props: {
-            src: 'https://vjs.zencdn.net/v/oceans.mp4',
-          },
-        },
-      },
-    ],
-  },
-  {
-    title: '文本',
-    componentName: 'CText',
-    groupName: '原子组件',
-    isSupportStyle: true,
-    props: [
-      {
-        name: 'content',
-        title: '内容',
-        valueType: 'string',
-        setters: ['TextAreaSetter', 'ExpressionSetter'],
-      },
-      customAttributesMeta,
-    ],
-    snippets: [
-      {
-        title: '文本',
-        snapshotText: 'Text',
-        category: '基础组件',
-        schema: {
-          props: {
-            content: 'text',
-          },
-        },
-      },
-    ],
-  },
-  {
-    title: 'Canvas',
-    componentName: 'CCanvas',
-    isSupportStyle: true,
-    props: [widthPropsMeta, heightPropsMeta, customAttributesMeta],
-    groupName: '原子组件',
-    snippets: [
-      {
-        title: '画布',
-        snapshotText: 'Cavs',
-        category: '基础组件',
-        schema: {
-          props: {
-            width: '300px',
-            height: '150px',
-          },
-        },
-      },
-    ],
-  },
-  {
-    title: 'HTML 标签',
-    componentName: 'CNativeTag',
-    isSupportStyle: true,
-    props: [
-      {
-        name: 'htmlTag',
-        title: '标签名',
-        valueType: 'string',
-        setters: [
-          {
-            componentName: 'SelectSetter',
-            props: {
-              options: HTMl_TAGS.map((tag) => {
-                return {
-                  name: tag,
-                  value: tag,
-                };
-              }),
-            },
-          },
-        ],
-      },
-      customAttributesMeta,
-    ],
-    groupName: '原子组件',
-    snippets: [
-      {
-        title: 'HTML',
-        snapshotText: 'HTML',
-        category: '基础组件',
-        schema: {
-          props: {
-            htmlTag: 'div',
-            children: 'html tag',
-          },
-        },
-      },
-    ],
-  },
-];
-
-export const InnerComponentMeta = [...BaseComponentMeta, ...htmlNativeComponentMeta];

package/src/plugins/AdvancePanel/index.tsx

@@ -1,191 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { CMaterialPropsType, CNode, CRootNode } from '@chamn/model';
-import { CustomSchemaForm, CustomSchemaFormInstance, CustomSchemaFormProps } from '../../component/CustomSchemaForm';
-import { CPluginCtx } from '../../core/pluginManager';
-import { CRightPanelItem } from '../RightPanel/view';
-import styles from './style.module.scss';
-
-export type AdvancePanelProps = {
-  node: CNode | CRootNode;
-  pluginCtx: CPluginCtx;
-};
-
-const properties: CMaterialPropsType = [
-  {
-    name: 'condition',
-    title: {
-      label: 'Render',
-      tip: 'controller component render',
-    },
-    valueType: 'boolean',
-    setters: ['BooleanSetter', 'ExpressionSetter'],
-  },
-  {
-    name: 'loop',
-    title: 'loop render',
-    valueType: 'object',
-    setters: [
-      {
-        componentName: 'ShapeSetter',
-        props: {
-          elements: [
-            {
-              name: 'open',
-              title: 'open',
-              valueType: 'boolean',
-              setters: ['BooleanSetter', 'ExpressionSetter'],
-            },
-            {
-              name: 'data',
-              title: 'data',
-              valueType: 'array',
-              setters: [
-                {
-                  componentName: 'ArraySetter',
-                  initialValue: [],
-                  props: {
-                    item: {
-                      setters: ['JSONSetter', 'ExpressionSetter'],
-                      initialValue: {},
-                    },
-                  },
-                },
-                'JSONSetter',
-                'ExpressionSetter',
-              ],
-            },
-            {
-              name: 'forName',
-              title: {
-                label: 'name',
-                tip: 'loop element name',
-              },
-              valueType: 'string',
-              setters: ['StringSetter'],
-            },
-            {
-              name: 'forIndex',
-              title: {
-                label: 'index',
-                tip: 'loop element index',
-              },
-              valueType: 'string',
-              setters: ['StringSetter'],
-            },
-            {
-              name: 'key',
-              title: {
-                label: 'key',
-                tip: 'loop element key',
-              },
-              valueType: 'expression',
-              setters: ['ExpressionSetter'],
-            },
-            {
-              name: 'name',
-              title: {
-                label: 'variable \n name',
-                tip: 'loop variable name',
-              },
-              valueType: 'string',
-              setters: [
-                {
-                  componentName: 'StringSetter',
-                  props: {
-                    prefix: 'loopData',
-                  },
-                },
-              ],
-            },
-          ],
-        },
-        initialValue: {
-          open: false,
-          data: [],
-        },
-      },
-    ],
-  },
-  {
-    name: 'refId',
-    title: {
-      label: 'refId',
-      tip: 'unique node flag',
-    },
-    valueType: 'string',
-    setters: ['StringSetter'],
-  },
-  {
-    name: 'stateName',
-    title: {
-      label: (
-        <>
-          state <br></br> name
-        </>
-      ) as any,
-      tip: 'alias for state',
-    },
-    valueType: 'string',
-    setters: ['StringSetter'],
-  },
-];
-
-export const AdvancePanel = (props: AdvancePanelProps) => {
-  const { node } = props;
-  const onSetterChange: CustomSchemaFormProps['onSetterChange'] = (keyPaths, setterName) => {
-    node.value.configure = node.value.configure || {};
-    node.value.configure.advanceSetter = node.value.configure.advanceSetter || {};
-    node.value.configure.advanceSetter[keyPaths.join('.')] = {
-      name: keyPaths.join('.'),
-      setter: setterName,
-    };
-  };
-
-  const loopObj = node.value.loop;
-  const formRef = useRef<CustomSchemaFormInstance>(null);
-
-  useEffect(() => {
-    const newValue = {
-      condition: node.value.condition || true,
-      loop: {
-        open: loopObj?.open || false,
-        data: loopObj?.data || [],
-        forName: loopObj?.forName || 'item',
-        forIndex: loopObj?.forIndex || 'index',
-        key: loopObj?.key || '',
-        name: loopObj?.name || '',
-      },
-      refId: node.value.refId,
-      stateName: node.value.stateName,
-    };
-    formRef.current?.setFields(newValue);
-  }, [node]);
-
-  const onValueChange = (newVal: { refId: string; loop: any; condition: any; stateName: any }) => {
-    node.value.loop = newVal.loop;
-    node.value.condition = newVal.condition;
-    node.value.refId = newVal.refId;
-    node.value.stateName = newVal.stateName;
-
-    node.updateValue();
-  };
-  return (
-    <div className={styles.advanceBox}>
-      <CustomSchemaForm
-        key={node.id}
-        defaultSetterConfig={node.value.configure?.advanceSetter || {}}
-        onSetterChange={onSetterChange}
-        properties={properties}
-        initialValue={{}}
-        ref={formRef}
-        onValueChange={onValueChange}
-      />
-    </div>
-  );
-};
-
-export const AdvancePanelConfig: CRightPanelItem = {
-  key: 'Advance',
-  name: 'Advance',
-  view: ({ node, pluginCtx }) => <AdvancePanel node={node} pluginCtx={pluginCtx} />,
-};

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

@@ -1,8 +0,0 @@
-.advanceBox {
-  padding: 0 20px;
-  :global {
-    .ant-input-affix-wrapper .ant-input-prefix {
-      margin-inline-end: 0;
-    }
-  }
-}

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

@@ -1,7 +0,0 @@
-import globalClassNames from '../../style.d';
-declare const classNames: typeof globalClassNames & {
-  readonly advanceBox: 'advanceBox';
-  readonly 'ant-input-affix-wrapper': 'ant-input-affix-wrapper';
-  readonly 'ant-input-prefix': 'ant-input-prefix';
-};
-export = classNames;

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

@@ -1,65 +0,0 @@
-import { Popover } from 'antd';
-import clsx from 'clsx';
-import React, { useMemo } from 'react';
-import styles from './style.module.scss';
-
-export type DragComponentItemProps = {
-  id: string;
-  name: string;
-  description?: any;
-  icon: React.ReactNode | string;
-  iconText?: string;
-  style?: React.CSSProperties;
-  containerClassName?: string;
-};
-
-export const DragComponentItem = (props: DragComponentItemProps) => {
-  const dragInfo = {
-    [DRAG_ITEM_KEY]: props.id,
-  };
-
-  const icon = useMemo(() => {
-    if (props.iconText) {
-      return (
-        <div className={styles.iconText}>
-          {String(props.iconText).toUpperCase()}
-        </div>
-      );
-    }
-    if (typeof props.icon === 'string') {
-      return <img className={styles.iconImg} src={props.icon} />;
-    } else {
-      return props.icon;
-    }
-  }, [props.icon]);
-
-  const contentView = (
-    <div className={clsx([styles.square, props.containerClassName])}>
-      <div {...dragInfo} className={styles.componentItem} style={props.style}>
-        <div className={styles.iconBox}>{icon}</div>
-        <span>{props.name}</span>
-      </div>
-    </div>
-  );
-
-  if (props.description) {
-    return (
-      <Popover
-        overlayInnerStyle={{
-          maxWidth: '300px',
-          maxHeight: '200px',
-          overflow: 'auto',
-        }}
-        content={props.description || ''}
-        zIndex={1000}
-        placement="right"
-      >
-        {contentView}
-      </Popover>
-    );
-  } else {
-    return contentView;
-  }
-};
-
-export const DRAG_ITEM_KEY = 'data-drag-key';

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

@@ -1,58 +0,0 @@
-.square {
-  user-select: none;
-  position: relative;
-  flex: 33.3% 0;
-  &::before {
-    content: '';
-    padding-top: 100%;
-    float: left;
-  }
-  &::after {
-    content: '';
-    display: block;
-    clear: both;
-  }
-}
-
-.componentItem {
-  user-select: none;
-  overflow: hidden;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  border-right: 1px solid $borderColor;
-  border-bottom: 1px solid $borderColor;
-  transition: all 0.2s;
-
-  &:hover {
-    box-shadow: 0 6px 16px 0 rgb(0 0 0 / 15%);
-    border-color: transparent;
-    cursor: grab;
-  }
-  &:active {
-    cursor: grabbing;
-  }
-}
-
-.iconImg {
-  width: 100%;
-}
-
-.iconBox {
-  width: 60%;
-  height: 60%;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.iconText {
-  font-size: 18px;
-  font-weight: bolder;
-  color: $textColor;
-}

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

@@ -1,9 +0,0 @@
-import globalClassNames from '../../../../style.d';
-declare const classNames: typeof globalClassNames & {
-  readonly square: 'square';
-  readonly componentItem: 'componentItem';
-  readonly iconImg: 'iconImg';
-  readonly iconBox: 'iconBox';
-  readonly iconText: 'iconText';
-};
-export = classNames;