@tmagic/editor 1.0.0-beta.1

package/src/theme/layer-panel.scss

@@ -0,0 +1,68 @@
+.magic-editor-layer-panel {
+  background: $--sidebar-content-background-color;
+
+  .search-input {
+    background: $--sidebar-content-background-color;
+    color: #bbbbbb;
+    padding: 10px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+
+    .el-input__suffix {
+      padding: 10px 5px;
+    }
+  }
+  .node-content {
+    flex: 1;
+    display: flex;
+    width: 100%;
+    > div {
+      width: 8px;
+    }
+    > span {
+      width: calc(100% - 68px);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    > i {
+      margin-right: 10px;
+      font-size: 20px;
+      &.lock {
+        color: #bbb;
+      }
+    }
+  }
+}
+.magic-editor-layer-panel,
+.magic-editor-layer-panel .el-tree {
+  background-color: $--sidebar-content-background-color;
+  color: #313a40;
+}
+
+.magic-editor-layer-panel
+  .el-tree--highlight-current
+  .el-tree-node.is-current
+  > .el-tree-node__content {
+  background-color: $--sidebar-heder-background-color;
+  color: #fff;
+}
+
+.magic-editor-layer-panel .el-tree-node:focus > .el-tree-node__content {
+  background-color: $--sidebar-heder-background-color;
+  color: #fff;
+}
+.ui-tree-tip {
+  width: 100%;
+  height: 25px;
+  margin-left: 10px;
+  background: $--sidebar-content-background-color;
+  font-style: italic;
+  color: #555554;
+  position: absolute;
+  top: 40px;
+  left: 0;
+  z-index: 1;
+}

package/src/theme/nav-menu.scss

@@ -0,0 +1,69 @@
+.m-editor-nav-menu {
+  display: flex;
+  z-index: 5;
+  -webkit-box-pack: justify;
+  justify-content: space-between;
+  -webkit-box-align: center;
+  align-items: center;
+  background-color: $--nav--background-color;
+  font-size: 19.2px;
+  color: $--nav-color;
+  font-weight: 400;
+  box-sizing: border-box;
+  margin: 0px;
+  flex: 0 0 $--nav-height;
+  border-bottom: 1px solid #d8dee8;
+
+  > div {
+    display: flex;
+    height: 100%;
+    z-index: 1;
+    align-items: center;
+  }
+
+  .menu-left {
+    padding-left: 16px;
+  }
+
+  .menu-right {
+    padding-right: 16px;
+  }
+
+  .menu-item {
+    flex-direction: row;
+    -webkit-box-align: center;
+    align-items: center;
+    vertical-align: middle;
+    font-size: 14px;
+    line-height: 1;
+    height: 100%;
+    color: rgba(255, 255, 255, 0.7);
+    box-sizing: inherit;
+    z-index: 1;
+    display: flex !important;
+    transition: all 0.3s ease 0s;
+    border-bottom: 2px solid transparent;
+    margin: 0 5px;
+
+    .is-disabled {
+      opacity: 0.5;
+    }
+
+    .el-button--text,
+    i {
+      color: $--font-color;
+    }
+
+    .icon {
+      display: flex;
+      -webkit-box-align: center;
+      align-items: center;
+      height: 100%;
+      padding: 0px 8px;
+    }
+
+    .menu-item-text {
+      color: $--nav-color;
+    }
+  }
+}

package/src/theme/page-bar.scss

@@ -0,0 +1,31 @@
+.m-editor-page-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  width: 100%;
+  height: $--page-bar-height;
+  line-height: $--page-bar-height;
+  background-color: #f3f3f3;
+  color: $--font-color;
+  border-top: 1px solid $--border-color;
+  z-index: 2;
+
+  .m-editor-page-bar-item {
+    padding: 0 10px;
+    cursor: pointer;
+    border-right: 1px solid $--border-color;
+    display: flex;
+    justify-items: center;
+    align-items: center;
+
+    &.active {
+      background-color: #fff;
+      cursor: text;
+
+      .m-editor-page-bar-menu-icon {
+        cursor: pointer;
+      }
+    }
+  }
+}

package/src/theme/props-panel.scss

@@ -0,0 +1,17 @@
+.m-editor-props-panel {
+  padding: 0 10px;
+
+  .el-form-item__label {
+    font-size: 12px;
+  }
+
+  .m-fieldset {
+    legend {
+      font-size: 12px;
+    }
+  }
+
+  .el-tabs__item {
+    font-size: 12px;
+  }
+}

package/src/theme/resizer.scss

@@ -0,0 +1,51 @@
+.m-editor-resizer {
+  border-left: 1px solid transparent;
+  border-right: 1px solid transparent;
+  width: 8px;
+  margin: 0 -5px;
+  height: 100%;
+  opacity: 0.9;
+  background: padding-box #d8dee8;
+  box-sizing: border-box;
+  cursor: col-resize;
+  z-index: 1;
+
+  &:hover {
+    border-color: #d8dee8;
+  }
+
+  .icon-container {
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 0.4s;
+    width: 20px;
+    height: 120px;
+    line-height: 120px;
+    text-align: center;
+    background: #d8dee8;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    cursor: pointer;
+    &.position-left {
+      transform: translate(calc(-100% - 4px), -50%);
+    }
+    &.position-right {
+      transform: translate(calc(100% + 4px), -50%);
+    }
+  }
+  .icon {
+    color: #fff;
+    font-size: 18px;
+  }
+}
+
+.magic-editor-resizer:hover {
+  .icon-container {
+    visibility: visible;
+    opacity: 1;
+  }
+  // border-left: 5px solid rgba(0,0,0,.5);
+  // border-right: 5px solid rgba(0,0,0,.5);
+}

package/src/theme/ruler.scss

@@ -0,0 +1,38 @@
+#ruler-container {
+  width: calc(100% + 40px);
+  position: absolute;
+  top: -40px;
+  left: -40px;
+  height: 40px;
+  z-index: 100000;
+
+  .moveable-line {
+    display: none;
+  }
+
+  .moveable-control.moveable-origin {
+    display: none;
+  }
+}
+
+#ruler-container::after {
+  content: "";
+  position: absolute;
+  left: 100%;
+  top: 0;
+  width: calc(2000px - 100%);
+  height: 100%;
+  background-color: white;
+}
+
+#horizontal {
+  width: 2000px;
+  max-width: fit-content;
+}
+
+#vertical {
+  position: absolute;
+  height: 1000px;
+  top: 0;
+  left: 0;
+}

package/src/theme/sidebar.scss

@@ -0,0 +1,97 @@
+.m-editor-sidebar {
+  height: 100%;
+
+  &.el-tabs--left .el-tabs__header {
+    background: $--sidebar-heder-background-color;
+    border: 0;
+
+    &.is-left {
+      width: 40px;
+      margin-right: 0;
+    }
+
+    .el-tabs__nav-wrap {
+      margin: 0;
+    }
+
+    .el-tabs__nav {
+      border: 0;
+      border-radius: 0;
+    }
+
+    .tab-label {
+      margin-left: 2px;
+    }
+
+    .el-tabs__item.is-left {
+      line-height: 15px;
+      border: 0;
+      height: auto;
+      padding: 8px;
+      color: rgb(255, 255, 255);
+      box-sizing: border-box;
+
+      &.is-left {
+        &.is-active {
+          background: $--sidebar-content-background-color;
+          border: 0;
+
+          i {
+            color: #353140;
+          }
+
+          .magic-editor-tab-panel-title {
+            color: #353140;
+          }
+        }
+
+        &:first-child {
+          border-right: 0;
+        }
+      }
+    }
+
+    i {
+      font-size: 25px;
+      color: rgba(255, 255, 255, 0.6);
+
+      &:hover {
+        color: rgb(255, 255, 255);
+      }
+    }
+
+    .magic-editor-tab-panel-title {
+      font-size: 12px;
+      white-space: normal;
+    }
+  }
+
+  .el-scrollbar {
+    height: 100%;
+  }
+
+  .el-tree {
+    min-height: 100%;
+  }
+
+  .fold-icon {
+    position: absolute;
+    bottom: 8px;
+    left: 0px;
+    width: 45px;
+    padding-left: 8px;
+    color: #fff;
+    font-size: 32px;
+    opacity: 0.8;
+    cursor: pointer;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.2);
+    }
+  }
+
+  .el-tabs__content,
+  .el-tab-pane {
+    height: 100%;
+  }
+}

package/src/theme/stage.scss

@@ -0,0 +1,22 @@
+.m-editor-stage {
+  position: relative;
+  width: 100%;
+  height: calc(100% - $--page-bar-height);
+  overflow: auto;
+}
+
+.m-editor-stage-container {
+  transition: transform 0.3s;
+  transform-origin: center -50%;
+  z-index: 0;
+  top: 50%;
+  margin: 0 auto;
+  position: relative;
+  width: 375px;
+  height: 80%;
+  border: 1px solid $--border-color;
+
+  &::-webkit-scrollbar {
+    width: 0 !important;
+  }
+}

package/src/theme/workspace.scss

@@ -0,0 +1,5 @@
+.m-editor-workspace {
+  height: 100%;
+  width: 100%;
+  user-select: none;
+}

package/src/type.ts

@@ -0,0 +1,236 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component } from 'vue';
+
+import { FormConfig } from '@tmagic/form';
+import { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
+import StageCore from '@tmagic/stage';
+
+import type { ComponentListService } from '@editor/services/componentList';
+import type { EditorService } from '@editor/services/editor';
+import type { EventsService } from '@editor/services/events';
+import type { HistoryService } from '@editor/services/history';
+import type { PropsService } from '@editor/services/props';
+import type { UiService } from '@editor/services/ui';
+
+export type BeforeAdd = (config: MNode, parent: MContainer) => Promise<MNode> | MNode;
+export type GetConfig = (config: FormConfig) => Promise<FormConfig> | FormConfig;
+
+export interface InstallOptions {
+  [key: string]: any;
+}
+
+export interface Services {
+  editorService: EditorService;
+  historyService: HistoryService;
+  eventsService: EventsService;
+  propsService: PropsService;
+  componentListService: ComponentListService;
+  uiService: UiService;
+}
+
+export interface StoreState {
+  root: MApp | null;
+  page: MPage | null;
+  parent: MContainer | null;
+  node: MNode | null;
+  stage: StageCore | null;
+  modifiedNodeIds: Map<Id, Id>;
+}
+
+export interface PropsState {
+  propsConfigMap: Record<string, FormConfig>;
+  propsValueMap: Record<string, MNode>;
+}
+
+export interface ComponentGroupState {
+  list: ComponentGroup[];
+}
+
+export interface SetColumnWidth {
+  left?: number;
+  center?: number | 'auto';
+  right?: number;
+}
+
+export interface GetColumnWidth {
+  left: number;
+  center: number;
+  right: number;
+}
+
+export interface UiState {
+  /** 当前点击画布是否触发选中，true: 不触发，false: 触发，默认为false */
+  uiSelectMode: boolean;
+  /** 是否显示整个配置源码， true: 显示， false: 不显示，默认为false */
+  showSrc: boolean;
+  /** 画布显示放大倍数，默认为 1 */
+  zoom: number;
+  /** 画布顶层div的样式，可用于改变画布的大小 */
+  stageStyle: Record<string, string | number>;
+  /** 编辑器列布局每一列的宽度，分为左中右三列 */
+  columnWidth: GetColumnWidth;
+  /** 是否显示画布参考线，true: 显示，false: 不显示，默认为true */
+  showGuides: boolean;
+  /** 是否显示标尺，true: 显示，false: 不显示，默认为true */
+  showRule: boolean;
+}
+
+export interface EditorNodeInfo {
+  node?: MNode;
+  parent?: MContainer;
+  page?: MPage;
+}
+
+export interface AddMNode {
+  type: string;
+  name?: string;
+  [key: string]: any;
+}
+
+/**
+ * 菜单按钮
+ */
+export interface MenuButton {
+  /**
+   * 按钮类型
+   * button: 只有文字不带边框的按钮
+   * text: 纯文本
+   * dropdown: 下拉菜单
+   * divider: 分隔线
+   * zoom: 放大缩小
+   */
+  type: 'button' | 'dropdown' | 'text' | 'divider' | 'zoom';
+  /** 展示的文案 */
+  text?: string;
+  /** 鼠标悬浮是显示的气泡中的文案 */
+  tooltip?: string;
+  /** element-plus icon class */
+  icon?: string | Component<{}, {}, any>;
+  /** 是否置灰，默认为false */
+  disabled?: boolean | ((data?: Services) => boolean);
+  /** 是否显示，默认为true */
+  display?: boolean | ((data?: Services) => boolean);
+  /** type为button/dropdown时点击运行的方法 */
+  handler?: (data?: Services) => Promise<any> | any;
+  /** type为dropdown时，下拉的菜单列表 */
+  items?: {
+    /** 展示的文案 */
+    text: string;
+    /** 点击运行的方法 */
+    handler(data: Services): any;
+  }[];
+}
+
+export interface MenuComponent {
+  type: 'component';
+  /** Vue3组件 */
+  component: any;
+  /** 传入组件的props对象 */
+  props?: Record<string, any>;
+  /** 组件监听的事件对象，如：{ click: () => { console.log('click'); } } */
+  listeners?: Record<string, Function>;
+  slots?: Record<string, any>;
+  /** 是否显示，默认为true */
+  display?: boolean | ((data?: Services) => Promise<boolean> | boolean);
+}
+
+/**
+ * '/': 分隔符
+ * 'delete': 删除按钮
+ * 'undo': 撤销按钮
+ * 'redo': 恢复按钮
+ * 'zoom-in': 放大按钮
+ * 'zoom-out': 缩小按钮
+ */
+export type MenuItem =
+  | '/'
+  | 'delete'
+  | 'undo'
+  | 'redo'
+  | 'zoom'
+  | 'zoom-in'
+  | 'zoom-out'
+  | 'guides'
+  | 'rule'
+  | MenuButton
+  | MenuComponent;
+
+/** 工具栏 */
+export interface MenuBarData {
+  /** 顶部工具栏左边项 */
+  left?: MenuItem[];
+  /** 顶部工具栏中间项 */
+  center?: MenuItem[];
+  /** 顶部工具栏右边项 */
+  right?: MenuItem[];
+}
+
+export interface SideComponent extends MenuComponent {
+  /** 显示文案 */
+  text: string;
+  /** element-plus icon class */
+  icon: Component<{}, {}, any>;
+}
+
+/**
+ * component-list: 组件列表
+ * layer: 已选组件树
+ */
+export type SideItem = 'component-list' | 'layer' | SideComponent;
+
+/** 工具栏 */
+export interface SideBarData {
+  /** 容器类型 */
+  type: 'tabs';
+  /** 默认激活的内容 */
+  status: string;
+  /** panel列表 */
+  items: SideItem[];
+}
+
+export interface ComponentItem {
+  /** 显示文案 */
+  text: string;
+  /** 组件类型 */
+  type: string;
+  /** element-plus icon class */
+  icon?: string | Component;
+  [key: string]: any;
+}
+
+export interface ComponentGroup {
+  /** 显示文案 */
+  title: string;
+  /** 组内列表 */
+  items: ComponentItem[];
+}
+
+export enum LayerOffset {
+  TOP = 'top',
+  BOTTOM = 'bottom',
+}
+
+/** 容器布局 */
+export enum Layout {
+  FLEX = 'flex',
+  FIXED = 'fixed',
+  RELATIVE = 'relative',
+  ABSOLUTE = 'absolute',
+}

package/src/utils/compose.ts

@@ -0,0 +1,33 @@
+/**
+ * @param {Array} middleware
+ * @return {Function}
+ */
+export const compose = (middleware: Function[]) => {
+  if (!Array.isArray(middleware)) throw new TypeError('Middleware 必须是一个数组!');
+  for (const fn of middleware) {
+    if (typeof fn !== 'function') throw new TypeError('Middleware 必须由函数组成!');
+  }
+
+  /**
+   * @param {Object} args
+   * @return {Promise}
+   * @api public
+   */
+  return (args: any[], next?: Function) => {
+    // last called middleware #
+    let index = -1;
+    return dispatch(0);
+    function dispatch(i: number): Promise<void> {
+      if (i <= index) return Promise.reject(new Error('next() 被多次调用'));
+      index = i;
+      let fn = middleware[i];
+      if (i === middleware.length && next) fn = next;
+      if (!fn) return Promise.resolve();
+      try {
+        return Promise.resolve(fn(...args, dispatch.bind(null, i + 1)));
+      } catch (err) {
+        return Promise.reject(err);
+      }
+    }
+  };
+};

package/src/utils/config.ts

@@ -0,0 +1,29 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { InstallOptions } from '@editor/type';
+
+let $TMAGIC_EDITOR: InstallOptions = {} as any;
+
+const setConfig = (option: InstallOptions): void => {
+  $TMAGIC_EDITOR = option;
+};
+
+const getConfig = (key: keyof InstallOptions): unknown => $TMAGIC_EDITOR[key];
+
+export { getConfig, setConfig };