@chamn/engine 0.0.10 → 0.0.11

package/src/component/CustomSchemaForm/index.tsx

@@ -1,93 +0,0 @@
-import React, { Ref } from 'react';
-import { CMaterialPropsType, getMTitleTip } from '@chamn/model';
-import { CForm } from './components/Form';
-import { isSpecialMaterialPropType } from '@chamn/model';
-import { getMTitle } from '@chamn/model/src/types/material';
-import { SetterSwitcher } from './components/SetterSwitcher';
-import { getSetterList } from './utils';
-import styles from './style.module.scss';
-import { ConfigProvider } from 'antd';
-import { CCustomSchemaFormContext } from './context';
-import { CPluginCtx } from '../../core/pluginManager';
-
-export type CustomSchemaFormInstance = CForm;
-
-export type CustomSchemaFormProps = {
-  pluginCtx?: CPluginCtx;
-  initialValue: Record<string, any>;
-  properties: CMaterialPropsType<any>;
-  onValueChange?: (val: any) => void;
-  onSetterChange: (keyPaths: string[], setterName: string) => void;
-  defaultSetterConfig: Record<string, { name: string; setter: string }>;
-};
-
-const CustomSchemaFormCore = (props: CustomSchemaFormProps, ref: Ref<CustomSchemaFormInstance | CForm>) => {
-  const {
-    properties: originProperties,
-    initialValue,
-    onValueChange,
-    onSetterChange,
-    defaultSetterConfig,
-    pluginCtx,
-  } = props;
-  const properties: CMaterialPropsType = originProperties;
-  return (
-    <CCustomSchemaFormContext.Provider
-      value={{
-        defaultSetterConfig,
-        onSetterChange,
-        formRef: ref,
-        pluginCtx: pluginCtx,
-      }}
-    >
-      <ConfigProvider
-        theme={{
-          token: {
-            borderRadius: 4,
-          },
-        }}
-      >
-        <div
-          className={styles.CFromRenderBox}
-          style={{
-            overflow: 'auto',
-            height: '100%',
-          }}
-        >
-          <CForm
-            ref={ref as any}
-            name="root-form"
-            initialValue={initialValue}
-            onValueChange={(val) => {
-              onValueChange?.(val);
-            }}
-          >
-            {properties.map((property) => {
-              if (isSpecialMaterialPropType(property)) {
-                property.content;
-              } else {
-                const title = getMTitle(property.title);
-                const tip = getMTitleTip(property.title);
-                const setterList = getSetterList(property.setters);
-                const keyPaths = [property.name];
-                return (
-                  <SetterSwitcher
-                    key={property.name}
-                    condition={property.condition}
-                    keyPaths={keyPaths}
-                    setters={setterList}
-                    label={title}
-                    name={property.name || ''}
-                    tips={tip}
-                  />
-                );
-              }
-            })}
-          </CForm>
-        </div>
-      </ConfigProvider>
-    </CCustomSchemaFormContext.Provider>
-  );
-};
-
-export const CustomSchemaForm = React.forwardRef(CustomSchemaFormCore);

package/src/component/CustomSchemaForm/style.module.scss

@@ -1,15 +0,0 @@
-.CFromRenderBox {
-  :global {
-    .ant-collapse .ant-collapse-content > .ant-collapse-content-box {
-      padding-right: 5px;
-    }
-
-    .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;
-      }
-    }
-  }
-}

package/src/component/CustomSchemaForm/style.module.scss.d.ts

@@ -1,11 +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';
-  readonly 'ant-collapse-expand-icon': 'ant-collapse-expand-icon';
-};
-export = classNames;

package/src/component/CustomSchemaForm/utils.ts

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

package/src/component/MonacoEditor/index.tsx

@@ -1,81 +0,0 @@
-import { useEffect } from 'react';
-import * as monaco from 'monaco-editor';
-
-import { useRef } from 'react';
-import * as monacoEditor from 'monaco-editor/esm/vs/editor/editor.api';
-
-export type MonacoEditorInstance = monacoEditor.editor.IStandaloneCodeEditor;
-
-export type MonacoEditorProps = {
-  beforeMount?: (monaco: typeof monacoEditor) => void;
-  onDidMount?: (editor: MonacoEditorInstance) => void;
-  options?: monaco.editor.IStandaloneEditorConstructionOptions;
-  override?: monaco.editor.IEditorOverrideServices;
-  onChange?: (val: string, e: monaco.editor.IModelContentChangedEvent) => void;
-  onDidChangeMarkers?: (markers: monaco.editor.IMarker[]) => void;
-  initialValue?: string;
-  language?: 'json' | 'javascript' | 'typescript';
-};
-
-export const MonacoEditor = (props: MonacoEditorProps) => {
-  const editorDomRef = useRef<HTMLDivElement>(null);
-  const onChangeRef = useRef<MonacoEditorProps['onChange'] | undefined>();
-  onChangeRef.current = props.onChange;
-  const onDidChangeMarkersRef = useRef<MonacoEditorProps['onDidChangeMarkers'] | undefined>();
-  onDidChangeMarkersRef.current = props.onDidChangeMarkers;
-  const editorInstance = useRef<MonacoEditorInstance | null>(null);
-
-  useEffect(() => {
-    if (!editorDomRef.current) {
-      return;
-    }
-    props.beforeMount?.(monaco);
-    const editor = monaco.editor.create(
-      editorDomRef.current,
-      {
-        ...(props.options || {}),
-        value: props.initialValue || props.options?.value,
-        language: props.language || props.options?.language,
-      },
-      { ...(props.override || {}) }
-    );
-
-    editorInstance.current = editor;
-    props.onDidMount?.(editor);
-    const subscription = editor?.onDidChangeModelContent((event) => {
-      if (!event.isFlush) {
-        onChangeRef.current?.(editor.getValue(), event);
-      }
-    });
-
-    monaco.editor.onDidChangeMarkers((uris) => {
-      const editorModel = editor.getModel();
-      if (!editorModel) {
-        return;
-      }
-      const editorUri = editorModel.uri;
-      const changeUri = uris.find((el) => el.path === editorUri.path);
-      if (changeUri) {
-        const res = monaco.editor.getModelMarkers({
-          resource: editorUri,
-        });
-        onDidChangeMarkersRef.current?.(res);
-      }
-    });
-
-    () => {
-      editor.dispose();
-      subscription?.dispose();
-    };
-  }, []);
-
-  return (
-    <div
-      style={{
-        width: '100%',
-        height: '100%',
-      }}
-      ref={editorDomRef}
-    ></div>
-  );
-};

package/src/component/Workbench/index.tsx

@@ -1,329 +0,0 @@
-import React from 'react';
-import { Resizable, ResizeCallback } from 're-resizable';
-import styles from './style.module.scss';
-import { Button } from 'antd';
-import { CloseOutlined, DoubleRightOutlined, PushpinOutlined } from '@ant-design/icons';
-import clsx from 'clsx';
-import mitt, { Emitter } from 'mitt';
-import { waitReactUpdate } from '../../utils';
-
-export interface PluginContext {
-  openPanel: () => void;
-  closePanel: () => void;
-  getPlugin: (pluginName: string) => any;
-  emitter: Emitter<any>;
-}
-
-type PanelItem = {
-  name: string;
-  title: string | React.ReactNode;
-  icon: React.ReactNode;
-  render: React.ReactNode;
-};
-
-type WorkbenchStateType = {
-  leftBoxVisible: boolean;
-  leftBoxSize: {
-    width: number;
-    height: number | string;
-  };
-  leftBoxFixed: boolean;
-  rightBoxSize: {
-    width: number;
-    height: number | string;
-  };
-  rightBoxVisible: boolean;
-  currentActiveLeftPanel: string;
-  leftPanels: PanelItem[];
-  bodyView: React.ReactNode | null;
-  rightView: React.ReactNode | null;
-  topToolBarView: React.ReactNode | null;
-};
-
-export type WorkbenchPropsType = {
-  emitter: Emitter<any>;
-};
-
-export class Workbench extends React.Component<WorkbenchPropsType, WorkbenchStateType> {
-  emitter: Emitter<any>;
-  leftPanelContentRef: React.RefObject<HTMLDivElement>;
-  constructor(props: WorkbenchPropsType) {
-    super(props);
-    this.emitter = props.emitter || mitt();
-    this.leftPanelContentRef = React.createRef<HTMLDivElement>();
-    this.state = {
-      leftBoxVisible: true,
-      leftBoxSize: {
-        width: 300,
-        height: '100%',
-      },
-      leftBoxFixed: true,
-      rightBoxVisible: true,
-      rightBoxSize: {
-        width: 350,
-        height: '100%',
-      },
-      currentActiveLeftPanel: 'OutlineTree',
-      leftPanels: [],
-      bodyView: null,
-      rightView: null,
-      topToolBarView: null,
-    };
-  }
-
-  addLeftPanel = (panel: PanelItem) => {
-    this.state.leftPanels.push(panel);
-    this.setState({
-      leftPanels: [...this.state.leftPanels],
-    });
-  };
-
-  openLeftPanel = async (currentActiveLeftPanel?: string) => {
-    const newActive = currentActiveLeftPanel || this.state.currentActiveLeftPanel;
-    this.setState({
-      leftBoxVisible: true,
-      leftBoxSize: {
-        width: 350,
-        height: '100%',
-      },
-      currentActiveLeftPanel: newActive,
-    });
-
-    await waitReactUpdate();
-    this.emitter.emit('leftPanelVisible', {
-      visible: true,
-      panelName: newActive,
-    });
-  };
-
-  closeLeftPanel = async () => {
-    this.setState({
-      leftBoxVisible: false,
-      leftBoxSize: {
-        width: 0,
-        height: '100%',
-      },
-    });
-    await waitReactUpdate();
-    this.emitter.emit('leftPanelVisible', {
-      visible: false,
-      panelName: this.state.currentActiveLeftPanel,
-    });
-  };
-
-  toggleLeftPanel = () => {
-    const { leftBoxVisible } = this.state;
-    const newVisible = !leftBoxVisible;
-    if (newVisible) {
-      this.openLeftPanel();
-    } else {
-      this.closeLeftPanel();
-    }
-  };
-
-  onPluginIconClick = (panel: PanelItem) => {
-    const { currentActiveLeftPanel } = this.state;
-    if (currentActiveLeftPanel === panel.name && this.state.leftBoxVisible) {
-      this.closeLeftPanel();
-    } else {
-      this.openLeftPanel(panel.name);
-    }
-  };
-
-  openRightPanel = () => {
-    const { rightBoxSize } = this.state;
-    this.setState({
-      rightBoxVisible: true,
-      rightBoxSize: {
-        width: 400,
-        height: rightBoxSize.height,
-      },
-    });
-  };
-
-  closeRightPanel = () => {
-    const { rightBoxSize } = this.state;
-    this.setState({
-      rightBoxVisible: false,
-      rightBoxSize: {
-        width: 0,
-        height: rightBoxSize.height,
-      },
-    });
-  };
-
-  replaceBodyView = (newView: React.ReactNode) => {
-    this.setState({
-      bodyView: newView,
-    });
-  };
-
-  replaceRightView = (newView: React.ReactNode) => {
-    this.setState({
-      rightView: newView,
-    });
-  };
-
-  replaceTopBarView = (newView: React.ReactNode) => {
-    this.setState({
-      topToolBarView: newView,
-    });
-  };
-
-  toggleRightPanel = () => {
-    const { rightBoxVisible, rightBoxSize } = this.state;
-    const newVisible = !rightBoxVisible;
-    this.setState({
-      rightBoxVisible: newVisible,
-      rightBoxSize: {
-        width: newVisible ? 400 : 0,
-        height: rightBoxSize.height,
-      },
-    });
-  };
-
-  onLeftBoxResizeStop: ResizeCallback = (_e, _direction, _ref, d) => {
-    const newW = this.state.leftBoxSize.width + d.width;
-    this.setState({
-      leftBoxSize: {
-        width: newW,
-        height: this.state.leftBoxSize.height,
-      },
-    });
-  };
-
-  onGlobalClick = (e: MouseEvent) => {
-    if (e.target && this.leftPanelContentRef.current?.contains(e.target as any)) {
-      return;
-    }
-
-    if (!this.state.leftBoxFixed && this.state.leftBoxVisible) {
-      this.closeLeftPanel();
-    }
-  };
-
-  componentDidMount() {
-    document.addEventListener('click', this.onGlobalClick);
-  }
-
-  render() {
-    const {
-      leftBoxVisible,
-      leftBoxSize,
-      leftBoxFixed,
-      rightBoxSize,
-      rightBoxVisible,
-      leftPanels,
-      currentActiveLeftPanel,
-      bodyView,
-      rightView,
-      topToolBarView,
-    } = this.state;
-    const leftBoContentStyle: React.CSSProperties = {};
-    if (!leftBoxFixed) {
-      leftBoContentStyle.position = 'absolute';
-      leftBoContentStyle.left = '50px';
-      leftBoContentStyle.top = 0;
-    }
-
-    const currentActivePluginObj = leftPanels.find((el) => el.name === currentActiveLeftPanel);
-
-    const CurrentPluginRenderView = currentActivePluginObj?.render || null;
-    const { onPluginIconClick, toggleRightPanel, toggleLeftPanel, onLeftBoxResizeStop } = this;
-    return (
-      <div className={styles.workbenchContainer}>
-        <div className={styles.topToolBarBox}>
-          <div className={styles.topToolBarView}>{topToolBarView}</div>
-        </div>
-        <div className={styles.bodyContent}>
-          <div className={styles.leftBox} ref={this.leftPanelContentRef}>
-            <div className={styles.pluginIconBar}>
-              {leftPanels.map((pl) => {
-                return (
-                  <div
-                    key={pl.name}
-                    onClick={() => onPluginIconClick(pl)}
-                    className={clsx([styles.pluginIconItem, currentActivePluginObj?.name === pl.name && styles.active])}
-                  >
-                    {pl.icon}
-                  </div>
-                );
-              })}
-            </div>
-            {leftBoxVisible && (
-              <Resizable
-                className={styles.pluginPanelBoxResizeBox}
-                size={leftBoxSize}
-                style={leftBoContentStyle}
-                minWidth={300}
-                maxWidth={600}
-                enable={{
-                  right: leftBoxVisible,
-                }}
-                onResizeStop={onLeftBoxResizeStop}
-              >
-                <div className={styles.pluginHeader}>
-                  <span className={styles.pluginNameText}>
-                    {currentActivePluginObj?.title || currentActivePluginObj?.name}
-                  </span>
-                  <Button
-                    className={clsx([styles.fixedBtn])}
-                    type="text"
-                    size="small"
-                    onClick={() => {
-                      this.setState({
-                        leftBoxFixed: !this.state.leftBoxFixed,
-                      });
-                    }}
-                  >
-                    <PushpinOutlined className={clsx([leftBoxFixed && styles.active])} />
-                  </Button>
-                  <Button className={styles.closeBtn} type="text" size="small" onClick={toggleLeftPanel}>
-                    <CloseOutlined />
-                  </Button>
-                </div>
-                <div className={styles.pluginPanelBox}>{CurrentPluginRenderView}</div>
-              </Resizable>
-            )}
-          </div>
-          <div className={styles.centerBox}>
-            {/* <div className={styles.subTopToolbarBox}></div> */}
-            <div className={styles.canvasBox}>
-              <div className={styles.scrollBox}>{bodyView}</div>
-            </div>
-          </div>
-          <div className={styles.rightResizeBox}>
-            <div className={styles.arrowCursor} onClick={toggleRightPanel}>
-              <DoubleRightOutlined className={clsx([!rightBoxVisible && styles.active])} />
-            </div>
-            <div
-              style={{
-                display: rightBoxVisible ? 'block' : 'none',
-                height: '100%',
-              }}
-            >
-              <Resizable
-                minWidth={400}
-                maxWidth={600}
-                enable={{
-                  left: rightBoxVisible,
-                }}
-                size={rightBoxSize}
-                onResizeStop={(_e, _direction, _ref, d) => {
-                  this.setState({
-                    rightBoxSize: {
-                      width: this.state.rightBoxSize.width + d.width,
-                      height: this.state.rightBoxSize.height,
-                    },
-                  });
-                }}
-              >
-                <div className={styles.rightBox}>{rightView}</div>
-              </Resizable>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}

package/src/component/Workbench/style.module.scss

@@ -1,159 +0,0 @@
-.workbenchContainer {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-
-  .topToolBarBox {
-    height: 64px;
-    width: 100%;
-    border-bottom: 1px solid $borderColor;
-    display: flex;
-
-    .topToolBarView {
-      flex: 1;
-    }
-  }
-
-  .bodyContent {
-    display: flex;
-    width: 100%;
-    flex: 1;
-    overflow: hidden;
-
-    .leftBox {
-      position: relative;
-      display: flex;
-      background-color: #fff;
-      z-index: 100;
-      .pluginIconBar {
-        width: 50px;
-        height: 100%;
-        border-right: 1px solid $borderColor;
-
-        .pluginIconItem {
-          position: relative;
-          cursor: pointer;
-          width: 50px;
-          height: 50px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          transition: all 0.1s;
-
-          &.active ::before,
-          &:hover ::before {
-            transition: all 0.1s;
-            display: block;
-            content: '';
-            width: 2px;
-            height: 100%;
-            position: absolute;
-            left: 0;
-            top: 0;
-          }
-
-          &.active ::before {
-            border-left: 4px solid $baseColor !important;
-          }
-
-          &:hover ::before {
-            border-left: 4px solid $hoverColor;
-          }
-        }
-      }
-
-      .pluginPanelBoxResizeBox {
-        display: flex;
-        flex-direction: column;
-        background-color: #fff;
-        z-index: 100;
-        border-right: 1px solid $borderColor;
-
-        .pluginHeader {
-          display: flex;
-          color: $fontColor;
-          height: 30px;
-          margin: 10px;
-          overflow: hidden;
-          align-items: center;
-          .pluginNameText {
-            font-size: 16px;
-            font-weight: 700;
-            margin-right: auto;
-            flex-wrap: nowrap;
-            word-break: keep-all;
-          }
-          .closeBtn,
-          .fixedBtn {
-            color: $fontColor;
-          }
-
-          .fixedBtn {
-            > * {
-              transition: all 0.1s;
-            }
-            > .active {
-              transform: rotate(-45deg);
-            }
-          }
-        }
-      }
-      .pluginPanelBox {
-        width: 100%;
-        flex: 1;
-        background-color: ghostwhite;
-        overflow: hidden;
-      }
-    }
-
-    .rightResizeBox {
-      position: relative;
-      .arrowCursor {
-        cursor: pointer;
-        position: absolute;
-        left: -18px;
-        top: 50%;
-        transform: translateY(-50%);
-        z-index: 2;
-        background-color: #fff;
-        padding: 10px 3px;
-        border-radius: 4px 0 0 4px;
-        font-size: 12px;
-        > .active {
-          transform: rotate(-180deg);
-        }
-      }
-      .rightBox {
-        position: relative;
-        width: 100%;
-        height: 100%;
-        border-left: 1px $borderColor solid;
-      }
-    }
-
-    .centerBox {
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-      overflow: hidden;
-      .subTopToolbarBox {
-        width: 100%;
-        height: 50px;
-        background-color: #fff;
-      }
-      .canvasBox {
-        width: 100%;
-        flex: 1;
-        overflow: hidden;
-        padding: 20px 30px;
-        background-color: $baseBackgroundColor;
-        .scrollBox {
-          width: 100%;
-          height: 100%;
-          box-shadow: 0 1px 4px 0 rgb(31 50 88 / 13%);
-        }
-      }
-    }
-  }
-}