@chamn/engine 0.0.10 → 0.0.11

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

@@ -1,25 +0,0 @@
-import globalClassNames from '../../style.d';
-declare const classNames: typeof globalClassNames & {
-  readonly workbenchContainer: 'workbenchContainer';
-  readonly topToolBarBox: 'topToolBarBox';
-  readonly topToolBarView: 'topToolBarView';
-  readonly bodyContent: 'bodyContent';
-  readonly leftBox: 'leftBox';
-  readonly pluginIconBar: 'pluginIconBar';
-  readonly pluginIconItem: 'pluginIconItem';
-  readonly active: 'active';
-  readonly pluginPanelBoxResizeBox: 'pluginPanelBoxResizeBox';
-  readonly pluginHeader: 'pluginHeader';
-  readonly pluginNameText: 'pluginNameText';
-  readonly closeBtn: 'closeBtn';
-  readonly fixedBtn: 'fixedBtn';
-  readonly pluginPanelBox: 'pluginPanelBox';
-  readonly rightResizeBox: 'rightResizeBox';
-  readonly arrowCursor: 'arrowCursor';
-  readonly rightBox: 'rightBox';
-  readonly centerBox: 'centerBox';
-  readonly subTopToolbarBox: 'subTopToolbarBox';
-  readonly canvasBox: 'canvasBox';
-  readonly scrollBox: 'scrollBox';
-};
-export = classNames;

package/src/core/pluginManager.ts

@@ -1,151 +0,0 @@
-import { Engine } from '@/index';
-import { AssetPackage, CPage } from '@chamn/model';
-import { i18n } from 'i18next';
-import mitt, { Emitter } from 'mitt';
-import { Workbench } from '../component/Workbench';
-import { CustomI18n } from '../i18n';
-
-export type PluginObj = {
-  name: string;
-  init: (ctx: CPluginCtx) => Promise<void>;
-  destroy: (ctx: CPluginCtx) => Promise<void>;
-  exports: (ctx: CPluginCtx) => any;
-  meta: {
-    engine: {
-      version: string;
-    };
-  };
-};
-
-export type CPlugin = PluginObj | ((ctx: CPluginCtx) => PluginObj);
-
-type PluginManagerOptions = {
-  getWorkbench: () => Workbench;
-  emitter: Emitter<any>;
-  pageModel: CPage;
-  i18n: CustomI18n;
-  assets: AssetPackage[];
-  engine: Engine;
-};
-
-export type CPluginCtx<C = any> = {
-  globalEmitter: Emitter<any>;
-  config: C;
-  pluginManager: PluginManager;
-  pluginReadyOk: () => void;
-} & PluginManagerOptions;
-
-export type PluginInstance = {
-  ctx: CPluginCtx;
-  exports: any;
-  source: PluginObj;
-  ready: boolean;
-};
-
-export type CustomPluginHook = (pluginInstance: PluginInstance) => PluginInstance;
-
-export class PluginManager {
-  plugins: Map<string, PluginInstance> = new Map();
-  emitter: Emitter<any> = mitt();
-  getWorkbench!: () => Workbench;
-  pageModel!: CPage;
-  i18n: CustomI18n;
-  assets: AssetPackage[];
-  engine: Engine;
-  customPluginHooks: Record<string, CustomPluginHook[]> = {};
-
-  constructor({ getWorkbench, emitter, pageModel, i18n, assets, engine }: PluginManagerOptions) {
-    this.getWorkbench = getWorkbench;
-    this.emitter = emitter;
-    this.pageModel = pageModel;
-    this.i18n = i18n;
-    this.assets = assets;
-    this.engine = engine;
-  }
-
-  customPlugin = (pluginName: string, customPluginHook: CustomPluginHook) => {
-    const customPluginHooks = this.customPluginHooks;
-    const hookList = customPluginHooks[pluginName] || [];
-    hookList.push(customPluginHook);
-    customPluginHooks[pluginName] = hookList;
-    this.customPluginHooks = customPluginHooks;
-  };
-
-  createPluginCtx = () => {
-    const ctx: CPluginCtx = {
-      globalEmitter: this.emitter,
-      emitter: mitt(),
-      config: {},
-      getWorkbench: this.getWorkbench,
-      pluginManager: this,
-      pageModel: this.pageModel,
-      i18n: this.i18n,
-      assets: this.assets,
-      engine: this.engine,
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      pluginReadyOk: () => {},
-    };
-    return ctx;
-  };
-
-  async add(plugin: CPlugin) {
-    const ctx = this.createPluginCtx();
-
-    let innerPlugin: PluginObj;
-    if (typeof plugin === 'function') {
-      innerPlugin = plugin(ctx);
-    } else {
-      innerPlugin = plugin;
-    }
-    let pluginCtx: PluginInstance = {
-      source: innerPlugin,
-      ctx: ctx,
-      exports: innerPlugin.exports?.(ctx) || {},
-      ready: false,
-    };
-    const customHookList = this.customPluginHooks[innerPlugin.name] || [];
-    customHookList.forEach((cb) => {
-      pluginCtx = cb(pluginCtx);
-    });
-    ctx.pluginReadyOk = () => {
-      this.emitter.emit(`${innerPlugin.name}:ready`);
-      pluginCtx.ready = true;
-    };
-    this.plugins.set(innerPlugin.name, pluginCtx);
-    await innerPlugin.init(ctx);
-  }
-
-  async get(pluginName: string) {
-    const pluginInstance = this.plugins.get(pluginName);
-    if (pluginInstance?.ready) {
-      return pluginInstance;
-    } else {
-      await this.onPluginReadyOk(pluginName);
-      return pluginInstance;
-    }
-    return;
-  }
-
-  async remove(name: string) {
-    const p = this.plugins.get(name);
-    await p?.source.destroy(p.ctx);
-    this.plugins.delete(name);
-  }
-
-  onPluginReadyOk(pluginName: string, cb?: (pluginHandle: PluginInstance) => void) {
-    const pluginObj = this.plugins.get(pluginName);
-    if (pluginObj?.ready) {
-      return;
-    }
-
-    return new Promise<PluginInstance>((resolve) => {
-      this.emitter.on(`${pluginName}:ready`, () => {
-        if (pluginObj) {
-          pluginObj.ready = true;
-          cb?.(pluginObj);
-          resolve(pluginObj);
-        }
-      });
-    });
-  }
-}

package/src/i18n/en_US/index.ts

@@ -1,5 +0,0 @@
-export const en_US = {
-  translation: {
-    'Welcome to React': 'Welcome to React and react-i18next',
-  },
-};

package/src/i18n/index.ts

@@ -1,39 +0,0 @@
-import i18n from 'i18next';
-import { initReactI18next } from 'react-i18next';
-import { zh_CN } from './zh_CN';
-import { en_US } from './en_US';
-
-// the translations
-// (tip move them in a JSON file and import them,
-// or even better, manage them separated from your code: https://react.i18next.com/guides/multiple-translation-files)
-const resources = {
-  zh_CN,
-  en_US,
-};
-
-i18n
-  .use(initReactI18next) // passes i18n down to react-i18next
-  .init({
-    resources,
-    lng: 'zh_CN', // language to use, more information here: https://www.i18next.com/overview/configuration-options#languages-namespaces-resources
-    // you can use the i18n.changeLanguage function to change the language manually: https://www.i18next.com/overview/api#changelanguage
-    // if you're using a language detector, do not define the lng option
-    react: {
-      bindI18n: 'added languageChanged',
-      bindI18nStore: 'added',
-    },
-  });
-
-export type CustomI18n = typeof i18n & {
-  update: () => void;
-};
-
-const customI18n: CustomI18n = i18n as any;
-
-customI18n.update = () => {
-  setTimeout(() => {
-    i18n.emit('added');
-  }, 0);
-};
-
-export default customI18n;

package/src/i18n/zh_CN/index.ts

@@ -1,5 +0,0 @@
-export const zh_CN = {
-  translation: {
-    'Welcome to React': '欢迎使用 React',
-  },
-};

package/src/index.tsx

@@ -1,150 +0,0 @@
-import React from 'react';
-import { Workbench } from './component/Workbench';
-import styles from './Engine.module.scss';
-import i18n from './i18n/index';
-import { CPlugin, PluginManager } from './core/pluginManager';
-import mitt, { Emitter } from 'mitt';
-import { AssetPackage, CMaterialType, CNode, CPage, CPageDataType, CRootNode, EmptyPage } from '@chamn/model';
-import { defaultRender, beforeInitRender } from './utils/defaultEngineConfig';
-
-export type EnginContext = {
-  pluginManager: PluginManager;
-  engine: Engine;
-};
-
-export type EngineProps = {
-  plugins: CPlugin[];
-  schema: CPageDataType;
-  material?: CMaterialType[];
-  assetPackagesList?: AssetPackage[];
-  beforePluginRun?: (options: { pluginManager: PluginManager }) => void;
-  onReady?: (ctx: EnginContext) => void;
-  /** 渲染器 umd 格式 js 地址, 默认 ./render.umd.js */
-  renderJSUrl?: string;
-};
-
-export class Engine extends React.Component<EngineProps> {
-  currentSelectNode: CNode | CRootNode | null;
-
-  pluginManager!: PluginManager;
-  workbenchRef = React.createRef<Workbench>();
-  pageSchema: CPageDataType | undefined;
-  pageModel: CPage;
-  material: CMaterialType[] | undefined;
-  emitter: Emitter<any>;
-
-  constructor(props: EngineProps) {
-    super(props);
-    this.pageSchema = props.schema;
-    this.material = props.material;
-    this.currentSelectNode = null;
-    (window as any).__CHAMELEON_ENG__ = this;
-
-    try {
-      this.pageModel = new CPage(this.pageSchema, {
-        materials: this.material || [],
-        assetPackagesList: props.assetPackagesList || [],
-      });
-    } catch (e) {
-      console.error(e);
-      this.pageModel = new CPage(EmptyPage);
-    }
-    this.emitter = mitt();
-  }
-
-  updateCurrentSelectNode(node: CNode | CRootNode) {
-    this.currentSelectNode = node;
-    this.emitter.emit('onSelectNodeChange', {
-      node,
-    });
-  }
-
-  async componentDidMount() {
-    (window as any).__C_ENGINE__ = this;
-    const plugins = this.props.plugins;
-    const pluginManager = new PluginManager({
-      engine: this,
-      getWorkbench: () => this.workbenchRef.current!,
-      emitter: this.emitter,
-      pageModel: this.pageModel,
-      i18n,
-      assets: this.props.assetPackagesList || [],
-    });
-    this.pluginManager = pluginManager;
-    // 使用默认的渲染策略
-    pluginManager.customPlugin('Designer', (pluginInstance) => {
-      pluginInstance.ctx.config.beforeInitRender = beforeInitRender;
-      pluginInstance.ctx.config.customRender = defaultRender;
-      return pluginInstance;
-    });
-    this.props.beforePluginRun?.({
-      pluginManager: this.pluginManager,
-    });
-
-    const pList = plugins.map((p) => {
-      return this.pluginManager.add(p);
-    });
-
-    await Promise.all(pList);
-
-    this.pageModel.emitter.on('onReloadPage', () => {
-      if (!this.currentSelectNode) {
-        return;
-      }
-      const newSelectNode = this.pageModel.getNode(this.currentSelectNode?.id);
-      if (newSelectNode) {
-        this.updateCurrentSelectNode(newSelectNode);
-      }
-    });
-
-    this.props.onReady?.({
-      pluginManager: this.pluginManager,
-      engine: this,
-    });
-  }
-
-  getActiveNode() {
-    if (!this.currentSelectNode?.id) {
-      return null;
-    }
-    const node = this.pageModel.getNode(this.currentSelectNode.id);
-    this.currentSelectNode = node;
-    return node;
-  }
-
-  updatePage = (page: CPageDataType) => {
-    this.emitter.emit('updatePage');
-    console.log(page);
-  };
-
-  updateDesignerAssets = (assets: AssetPackage[]) => {
-    console.log('updateDesignerAssets', assets);
-  };
-
-  updateMaterial = (material: CMaterialType[]) => {
-    this.emitter.emit('updateMaterial');
-    console.log(material);
-  };
-
-  refresh = () => {
-    this.emitter.emit('refresh');
-    console.log('refresh engine');
-  };
-
-  getWorkbench = () => {
-    return this.workbenchRef.current;
-  };
-
-  render() {
-    return (
-      <div className={styles.engineContainer}>
-        <Workbench ref={this.workbenchRef} emitter={this.emitter} />
-      </div>
-    );
-  }
-}
-
-export * as plugins from './plugins';
-export * from '@chamn/layout';
-
-export * from './material/innerMaterial';