@tmagic/editor 1.0.0-beta.1

package/src/services/events.ts

@@ -0,0 +1,82 @@
+/*
+ * 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 { reactive } from 'vue';
+import { cloneDeep } from 'lodash-es';
+
+import { DEFAULT_EVENTS, DEFAULT_METHODS, EventOption } from '@tmagic/core';
+import { toLine } from '@tmagic/utils';
+
+import type { ComponentGroup } from '@editor/type';
+
+import BaseService from './BaseService';
+
+const eventMap: Record<string, EventOption[]> = reactive({});
+const methodMap: Record<string, EventOption[]> = reactive({});
+
+class Events extends BaseService {
+  constructor() {
+    super([]);
+  }
+
+  public init(componentGroupList: ComponentGroup[]) {
+    componentGroupList.forEach((group) => {
+      group.items.forEach((element) => {
+        const type = toLine(element.type);
+        if (!this.getEvent(type)) {
+          this.setEvent(type, DEFAULT_EVENTS);
+        }
+        if (!this.getMethod(type)) {
+          this.setMethod(type, DEFAULT_METHODS);
+        }
+      });
+    });
+  }
+
+  public setEvents(events: Record<string, EventOption[]>) {
+    Object.keys(events).forEach((type: string) => {
+      this.setEvent(toLine(type), events[type] || []);
+    });
+  }
+
+  public setEvent(type: string, events: EventOption[]) {
+    eventMap[type] = [...DEFAULT_EVENTS, ...events];
+  }
+
+  public getEvent(type: string): EventOption[] {
+    return cloneDeep(eventMap[type] || DEFAULT_EVENTS);
+  }
+
+  public setMethods(methods: Record<string, EventOption[]>) {
+    Object.keys(methods).forEach((type: string) => {
+      this.setMethod(toLine(type), methods[type] || []);
+    });
+  }
+
+  public setMethod(type: string, method: EventOption[]) {
+    methodMap[type] = [...DEFAULT_METHODS, ...method];
+  }
+
+  public getMethod(type: string) {
+    return cloneDeep(methodMap[type] || DEFAULT_METHODS);
+  }
+}
+
+export type EventsService = Events;
+
+export default new Events();

package/src/services/history.ts

@@ -0,0 +1,124 @@
+/*
+ * 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 { reactive } from 'vue';
+
+import { Id, MPage } from '@tmagic/schema';
+
+import { UndoRedo } from '@editor/utils/undo-redo';
+
+import BaseService from './BaseService';
+
+export interface StepValue {
+  data: MPage;
+  modifiedNodeIds: Map<Id, Id>;
+  nodeId: Id;
+}
+
+export interface HistoryState {
+  pageId?: Id;
+  pageSteps: Record<Id, UndoRedo<StepValue>>;
+  canRedo: boolean;
+  canUndo: boolean;
+}
+
+class History extends BaseService {
+  public state = reactive<HistoryState>({
+    pageSteps: {},
+    pageId: undefined,
+    canRedo: false,
+    canUndo: false,
+  });
+
+  constructor() {
+    super([]);
+
+    this.on('change', this.setCanUndoRedo);
+  }
+
+  public changePage(page: MPage): void {
+    if (!page) return;
+
+    this.state.pageId = page.id;
+
+    if (!this.state.pageSteps[this.state.pageId]) {
+      const undoRedo = new UndoRedo<StepValue>();
+
+      undoRedo.pushElement({
+        data: page,
+        modifiedNodeIds: new Map(),
+        nodeId: page.id,
+      });
+
+      this.state.pageSteps[this.state.pageId] = undoRedo;
+    }
+
+    this.setCanUndoRedo();
+  }
+
+  public empty(): void {
+    this.state.pageId = undefined;
+    this.state.pageSteps = {};
+    this.state.canRedo = false;
+    this.state.canUndo = false;
+  }
+
+  public push(state: StepValue): StepValue | null {
+    const undoRedo = this.getUndoRedo();
+    if (!undoRedo) return null;
+    undoRedo.pushElement(state);
+    this.emit('change', state);
+    return state;
+  }
+
+  public undo(): StepValue | null {
+    const undoRedo = this.getUndoRedo();
+    if (!undoRedo) return null;
+    const state = undoRedo.undo();
+    this.emit('change', state);
+    return state;
+  }
+
+  public redo(): StepValue | null {
+    const undoRedo = this.getUndoRedo();
+    if (!undoRedo) return null;
+    const state = undoRedo.redo();
+    this.emit('change', state);
+    return state;
+  }
+
+  public destroy(): void {
+    this.empty();
+    this.removeAllListeners();
+  }
+
+  private getUndoRedo() {
+    if (!this.state.pageId) return null;
+    return this.state.pageSteps[this.state.pageId];
+  }
+
+  private setCanUndoRedo(): void {
+    const undoRedo = this.getUndoRedo();
+    this.state.canRedo = undoRedo?.canRedo() || false;
+    this.state.canUndo = undoRedo?.canUndo() || false;
+  }
+}
+
+export type HistoryService = History;
+
+export default new History();

package/src/services/props.ts

@@ -0,0 +1,110 @@
+/*
+ * 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 { reactive } from 'vue';
+import { cloneDeep } from 'lodash-es';
+
+import type { FormConfig } from '@tmagic/form';
+import type { MComponent, MNode } from '@tmagic/schema';
+import { toLine } from '@tmagic/utils';
+
+import type { PropsState } from '@editor/type';
+import { DEFAULT_CONFIG, fillConfig, getDefaultPropsValue } from '@editor/utils/props';
+
+import BaseService from './BaseService';
+
+class Props extends BaseService {
+  private state = reactive<PropsState>({
+    propsConfigMap: {},
+    propsValueMap: {},
+  });
+
+  constructor() {
+    super(['setPropsConfig', 'getPropsConfig', 'setPropsValue', 'getPropsValue']);
+  }
+
+  public setPropsConfigs(configs: Record<string, FormConfig>) {
+    Object.keys(configs).forEach((type: string) => {
+      this.setPropsConfig(toLine(type), configs[type]);
+    });
+    this.emit('props-configs-change');
+  }
+
+  /**
+   * 为指定类型组件设置组件属性表单配置
+   * @param type 组件类型
+   * @param config 组件属性表单配置
+   */
+  public setPropsConfig(type: string, config: FormConfig) {
+    this.state.propsConfigMap[type] = fillConfig(Array.isArray(config) ? config : [config]);
+  }
+
+  /**
+   * 获取指点类型的组件属性表单配置
+   * @param type 组件类型
+   * @returns 组件属性表单配置
+   */
+  public async getPropsConfig(type: string): Promise<FormConfig> {
+    if (type === 'area') {
+      return await this.getPropsConfig('button');
+    }
+
+    return cloneDeep(this.state.propsConfigMap[type] || DEFAULT_CONFIG);
+  }
+
+  public setPropsValues(values: Record<string, MNode>) {
+    Object.keys(values).forEach((type: string) => {
+      this.setPropsValue(toLine(type), values[type]);
+    });
+  }
+
+  /**
+   * 为指点类型组件设置组件初始值
+   * @param type 组件类型
+   * @param value 组件初始值
+   */
+  public setPropsValue(type: string, value: MNode) {
+    this.state.propsValueMap[type] = value;
+  }
+
+  /**
+   * 获取指定类型的组件初始值
+   * @param type 组件类型
+   * @returns 组件初始值
+   */
+  public async getPropsValue(type: string) {
+    if (type === 'area') {
+      const value = (await this.getPropsValue('button')) as MComponent;
+      value.className = 'action-area';
+      value.text = '';
+      if (value.style) {
+        value.style.backgroundColor = 'rgba(255, 255, 255, 0)';
+      }
+      return value;
+    }
+
+    return cloneDeep({
+      ...getDefaultPropsValue(type),
+      ...(this.state.propsValueMap[type] || {}),
+    });
+  }
+}
+
+export type PropsService = Props;
+
+export default new Props();

package/src/services/ui.ts

@@ -0,0 +1,101 @@
+/*
+ * 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 { reactive, toRaw } from 'vue';
+
+import type StageCore from '@tmagic/stage';
+
+import editorService from '@editor/services/editor';
+import { GetColumnWidth, SetColumnWidth, UiState } from '@editor/type';
+
+import BaseService from './BaseService';
+
+const state = reactive<UiState>({
+  uiSelectMode: false,
+  showSrc: false,
+  zoom: 1,
+  stageStyle: {},
+  columnWidth: {
+    left: 310,
+    center: globalThis.document.body.clientWidth - 310 - 400,
+    right: 400,
+  },
+  showGuides: true,
+  showRule: true,
+});
+
+class Ui extends BaseService {
+  constructor() {
+    super([]);
+    globalThis.addEventListener('resize', () => {
+      this.setColumnWidth({
+        center: 'auto',
+      });
+    });
+  }
+
+  public set<T = any>(name: keyof UiState, value: T) {
+    const mask = editorService.get<StageCore>('stage')?.mask;
+
+    if (name === 'columnWidth') {
+      this.setColumnWidth(value as unknown as SetColumnWidth);
+      return;
+    }
+
+    if (name === 'showGuides') {
+      mask?.showGuides(value as unknown as boolean);
+    }
+
+    if (name === 'showRule') {
+      mask?.showRule(value as unknown as boolean);
+    }
+
+    (state as any)[name] = value;
+  }
+
+  public get<T>(name: keyof typeof state): T {
+    return (state as any)[name];
+  }
+
+  private setColumnWidth({ left, center, right }: SetColumnWidth) {
+    const columnWidth = {
+      ...toRaw(this.get<GetColumnWidth>('columnWidth')),
+    };
+
+    if (left) {
+      columnWidth.left = left;
+    }
+
+    if (right) {
+      columnWidth.right = right;
+    }
+
+    if (!center || center === 'auto') {
+      const bodyWidth = globalThis.document.body.clientWidth;
+      columnWidth.center = bodyWidth - (columnWidth?.left || 0) - (columnWidth?.right || 0);
+    } else {
+      columnWidth.center = center;
+    }
+
+    state.columnWidth = columnWidth;
+  }
+}
+
+export type UiService = Ui;
+
+export default new Ui();

package/src/shims-vue.d.ts

@@ -0,0 +1,6 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue';
+
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

package/src/theme/code-editor.scss

@@ -0,0 +1,7 @@
+.magic-code-editor {
+  width: 100%;
+
+  .margin {
+    margin: 0;
+  }
+}

package/src/theme/common/var.scss

@@ -0,0 +1,13 @@
+$--theme-color: #2882e0;
+
+$--font-color: #070303;
+$--border-color: #d9dbdd;
+
+$--nav-height: 35px;
+$--nav-color: #070303;
+$--nav--background-color: #f8fbff;
+
+$--sidebar-heder-background-color: $--theme-color;
+$--sidebar-content-background-color: #f8fbff;
+
+$--page-bar-height: 32px;

package/src/theme/component-list-panel.scss

@@ -0,0 +1,102 @@
+.ui-component-panel {
+  height: 100%;
+  border-top: 0 !important;
+  margin-top: 50px;
+  background-color: $--sidebar-content-background-color;
+
+  .search-input {
+    background: #f8fbff;
+    color: #bbbbbb;
+    padding: 10px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    box-sizing: border-box;
+
+    .el-input__prefix {
+      padding: 10px;
+    }
+
+    .el-input__suffix {
+      padding: 10px 5px;
+    }
+  }
+
+  .el-collapse-item {
+    > div:first-of-type {
+      border-bottom: 1px solid $--border-color;
+      margin-bottom: 10px;
+    }
+  }
+
+  .el-collapse-item__header {
+    background: $--sidebar-content-background-color;
+    color: $--font-color;
+    height: 25px;
+    line-height: 25px;
+    padding-left: 10px;
+    font-size: 12px;
+
+    i {
+      margin-right: 5px;
+      font-size: 14px;
+    }
+  }
+
+  .el-collapse-item__wrap {
+    background: $--sidebar-content-background-color;
+    border-bottom: 0;
+
+    .el-collapse-item__content {
+      padding: 10px;
+      display: flex;
+      flex-wrap: wrap;
+    }
+
+    .component-item {
+      display: flex;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin: 5px 10px;
+      box-sizing: border-box;
+      color: $--font-color;
+      flex-direction: column;
+      width: 42px;
+
+      i {
+        font-size: 20px;
+        background: #fff;
+        height: 40px;
+        width: 40px;
+        line-height: 40px;
+        border-radius: 5px;
+        color: #909090;
+        border: 1px solid $--border-color;
+        display: flex;
+        justify-content: space-evenly;
+        align-items: center;
+        margin-bottom: 5px;
+
+        &:hover {
+          background: #2882e0;
+          color: #fff;
+          border-color: #4e8be1;
+        }
+      }
+
+      span {
+        font-size: 12px;
+        text-align: center;
+      }
+
+      .el-tooltip {
+        width: 50px;
+        height: 30px;
+        line-height: 15px;
+        display: block;
+        white-space: normal;
+        margin: 0;
+      }
+    }
+  }
+}

package/src/theme/content-menu.scss

@@ -0,0 +1,39 @@
+.magic-editor-content-menu {
+  position: fixed;
+  font-size: 12px;
+  background: #fff;
+  color: #333;
+  box-shadow: 0 2px 8px 2px rgba(68, 73, 77, 0.16);
+  z-index: 9999;
+  transform-origin: 0% 0%;
+  font-weight: 600;
+  padding: 4px 0px;
+
+  .separation {
+    width: 100%;
+    height: 0;
+    border-color: rgba(155, 155, 155, 0.1);
+  }
+
+  .subMenu {
+    position: absolute;
+    right: 0;
+    transform: translate(100%, 0);
+    background-color: #fff;
+    color: #333;
+    box-shadow: 0 2px 8px 2px rgba(68, 73, 77, 0.16);
+    top: 0;
+    height: 223px;
+  }
+}
+
+.magic-editor-content-menu-item {
+  display: flex;
+  -webkit-box-align: center;
+  align-items: center;
+  cursor: pointer;
+  min-width: 140px;
+  transition: all 0.2s ease 0s;
+  padding: 10px 14px;
+  border-left: 2px solid transparent;
+}

package/src/theme/framework.scss

@@ -0,0 +1,72 @@
+.m-editor {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  &-content {
+    width: 100%;
+    height: calc(100% - #{$--nav-height});
+    display: flex;
+    justify-self: space-between;
+  }
+
+  &-framework-center {
+    position: relative;
+    transform: translateZ(0);
+    flex: 1;
+  }
+
+  &-framework-left {
+    background-color: $--sidebar-content-background-color;
+  }
+
+  &-framework-center .el-scrollbar__view {
+    height: 100%;
+    min-height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &-empty {
+    &-panel {
+      display: flex;
+      flex: 1;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      height: calc(100% - $--page-bar-height);
+    }
+
+    &-content {
+      display: flex;
+      justify-content: space-evenly;
+      flex-direction: row;
+      width: 100%;
+    }
+
+    &-button {
+      border: 3px solid rgba(0, 0, 0, 0.2);
+      padding: 10px 40px;
+      color: rgba(0, 0, 0, 0.6);
+      cursor: pointer;
+
+      i {
+        height: 180px;
+        line-height: 180px;
+        font-size: 100px;
+      }
+
+      p {
+        text-align: center;
+        font-size: 20px;
+        margin-top: 5px;
+      }
+
+      &:hover {
+        border-color: $--theme-color;
+        color: $--theme-color;
+      }
+    }
+  }
+}

package/src/theme/index.scss

@@ -0,0 +1,13 @@
+@import "./common/var.scss";
+@import "./nav-menu.scss";
+@import "./framework.scss";
+@import "./sidebar.scss";
+@import "./layer-panel.scss";
+@import "./component-list-panel.scss";
+@import "./resizer.scss";
+@import "./workspace.scss";
+@import "./page-bar.scss";
+@import "./props-panel.scss";
+@import "./content-menu.scss";
+@import "./stage.scss";
+@import "./code-editor.scss";