@tmagic/editor 1.5.2 → 1.5.4

package/src/theme/style-setter/background.scss

@@ -0,0 +1,113 @@
+.background-position-container {
+  display: flex;
+  width: 100%;
+  .presets-value-list {
+    display: flex;
+    flex-wrap: wrap;
+    width: 80px;
+    height: auto;
+    .el-button {
+      & + .el-button {
+        margin-left: 2px;
+      }
+      &:nth-child(3n + 1) {
+        margin-left: 0 !important;
+      }
+    }
+
+    .position-icon {
+      position: relative;
+      width: 14px;
+      height: 14px;
+      border: 1px solid #1d1f24;
+      &.active {
+        background-color: var(--el-color-primary);
+        &::after {
+          border: 1px solid #fff;
+        }
+      }
+      &::after {
+        position: absolute;
+        content: "";
+        border: 1px solid #1d1f24;
+        box-sizing: border-box;
+      }
+      &.left-top {
+        &::after {
+          top: 1px;
+          left: 1px;
+          width: 6px;
+          height: 6px;
+        }
+      }
+      &.center-top {
+        &::after {
+          top: 1px;
+          left: 1px;
+          width: 12px;
+          height: 6px;
+        }
+      }
+      &.right-top {
+        &::after {
+          top: 1px;
+          right: 1px;
+          width: 6px;
+          height: 6px;
+        }
+      }
+      &.left-center {
+        &::after {
+          top: 1px;
+          left: 1px;
+          width: 6px;
+          height: 12px;
+        }
+      }
+      &.center-center {
+        &::after {
+          top: 1px;
+          left: 1px;
+          width: 12px;
+          height: 12px;
+        }
+      }
+      &.right-center {
+        &::after {
+          top: 1px;
+          right: 1px;
+          width: 6px;
+          height: 12px;
+        }
+      }
+      &.left-bottom {
+        &::after {
+          bottom: 1px;
+          left: 1px;
+          width: 6px;
+          height: 6px;
+        }
+      }
+      &.center-bottom {
+        &::after {
+          bottom: 1px;
+          left: 1px;
+          width: 12px;
+          height: 6px;
+        }
+      }
+      &.right-bottom {
+        &::after {
+          bottom: 1px;
+          right: 1px;
+          width: 6px;
+          height: 6px;
+        }
+      }
+    }
+  }
+  .custom-value {
+    position: relative;
+    flex: 1;
+  }
+}

package/src/theme/style-setter/border.scss

@@ -0,0 +1,53 @@
+.border-box-container {
+  display: flex;
+  .border-icon-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 88px;
+    &-row {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      & + .border-icon-container-row {
+        margin-top: 8px;
+      }
+    }
+    .border-icon {
+      box-sizing: border-box;
+      width: 16px;
+      height: 16px;
+      border-width: 1px;
+      border-color: #111;
+      border-style: solid;
+      cursor: pointer;
+      & + .border-icon {
+        margin-left: 8px;
+      }
+      &.active {
+        border-width: 1px;
+        border-color: var(--el-color-primary);
+      }
+      &.border-icon-top {
+        border-top-width: 2px;
+        border-style: solid dashed dashed dashed;
+      }
+      &.border-icon-right {
+        border-right-width: 2px;
+        border-style: dashed solid dashed dashed;
+      }
+      &.border-icon-bottom {
+        border-bottom-width: 2px;
+        border-style: dashed dashed solid dashed;
+      }
+      &.border-icon-left {
+        border-left-width: 2px;
+        border-style: dashed dashed dashed solid;
+      }
+    }
+  }
+  .border-value-container {
+    margin-left: 16px;
+    flex: 1;
+  }
+}

package/src/theme/style-setter/index.scss

@@ -0,0 +1,28 @@
+@use "./border.scss";
+@use "./layout.scss";
+@use "./background.scss";
+
+.m-fields-style-setter {
+  width: 100%;
+
+  .tmagic-design-collapse-item {
+    > .el-collapse-item__header {
+      background-color: #f2f3f7;
+      height: 36px;
+      padding: 10px;
+    }
+
+    .el-collapse-item__wrap {
+      padding: 0 10px;
+    }
+  }
+}
+
+.text-align-list {
+  display: flex;
+  height: 100%;
+
+  .btn-active {
+    color: var(--el-color-primary) !important;
+  }
+}

package/src/theme/style-setter/layout.scss

@@ -0,0 +1,199 @@
+// 盒子模型
+.layout-box-container {
+  position: relative;
+  width: 100%;
+  height: 150px;
+
+  .help-txt {
+    float: left;
+    margin-left: -10px;
+    transform: scale(0.75);
+  }
+
+  .outer-top-border,
+  .inner-top-border,
+  .outer-right-border,
+  .inner-right-border,
+  .outer-bottom-border,
+  .inner-bottom-border,
+  .outer-left-border,
+  .inner-left-border {
+    position: absolute;
+    transition: all 0.3s ease;
+    .next-input {
+      position: absolute;
+      height: 20px;
+      input {
+        padding: 0;
+        width: 100%;
+        border: none;
+        outline: none;
+        margin: 0;
+        font-weight: 400;
+        vertical-align: top;
+        background-color: transparent;
+        color: #333;
+        text-align: center;
+        line-height: 20px;
+        height: 20px;
+      }
+    }
+  }
+
+  // top
+  .outer-top-border,
+  .inner-top-border {
+    height: 0;
+    border-left: 20px solid transparent;
+    border-right: 20px solid transparent;
+    border-top: 20px solid #d6e4ff;
+    .next-input {
+      left: 0;
+      right: 0;
+      top: -20px;
+    }
+  }
+
+  .outer-top-border {
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+
+  .inner-top-border {
+    top: 25px;
+    left: 25px;
+    right: 25px;
+  }
+
+  .outer-top-border,
+  .inner-top-border {
+    &:hover {
+      border-top: 20px solid #bfd4fb;
+    }
+  }
+
+  // right
+  .outer-right-border,
+  .inner-right-border {
+    width: 0;
+    border-top: 20px solid transparent;
+    border-bottom: 20px solid transparent;
+    border-right: 20px solid #d6e4ff;
+
+    .next-input {
+      top: 0;
+      bottom: 0;
+      right: -20px;
+      width: 20px;
+      margin: auto;
+      input {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        margin: auto;
+        width: 20px;
+      }
+    }
+  }
+
+  .outer-right-border {
+    top: 5px;
+    bottom: 5px;
+    right: 0;
+  }
+
+  .inner-right-border {
+    top: 30px;
+    bottom: 30px;
+    right: 25px;
+  }
+
+  .outer-right-border,
+  .inner-right-border {
+    &:hover {
+      border-right: 20px solid #bfd4fb;
+    }
+  }
+
+  // bottom
+  .outer-bottom-border,
+  .inner-bottom-border {
+    height: 0;
+    border-left: 20px solid transparent;
+    border-right: 20px solid transparent;
+    border-bottom: 20px solid #d6e4ff;
+
+    .next-input {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: -20px;
+    }
+  }
+
+  .outer-bottom-border {
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+
+  .inner-bottom-border {
+    bottom: 25px;
+    left: 25px;
+    right: 25px;
+  }
+
+  .outer-bottom-border,
+  .inner-bottom-border {
+    &:hover {
+      border-bottom: 20px solid #bfd4fb;
+    }
+  }
+
+  // left
+  .outer-left-border,
+  .inner-left-border {
+    width: 0;
+    border-top: 20px solid transparent;
+    border-bottom: 20px solid transparent;
+    border-left: 20px solid #d6e4ff;
+
+    .next-input {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: -20px;
+      width: 20px;
+      margin: auto;
+      input {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        margin: auto;
+        width: 20px;
+      }
+    }
+  }
+
+  .outer-left-border {
+    top: 5px;
+    bottom: 5px;
+    left: 0;
+  }
+
+  .inner-left-border {
+    top: 30px;
+    bottom: 30px;
+    left: 25px;
+  }
+
+  .outer-left-border,
+  .inner-left-border {
+    &:hover {
+      border-left: 20px solid #bfd4fb;
+    }
+  }
+}

package/src/theme/theme.scss

@@ -26,3 +26,4 @@
 @use "./page-fragment-select.scss";
 @use "./data-source-field.scss";
 @use "./data-source-field-select.scss";
+@use "./style-setter/index.scss";

package/src/utils/idle-task.ts

@@ -2,8 +2,14 @@ import { EventEmitter } from 'events';
 
 export interface IdleTaskEvents {
   finish: [];
+  'hight-level-finish': [];
 }
 
+type TaskList<T> = {
+  handler: (data: T) => void;
+  data: T;
+}[];
+
 globalThis.requestIdleCallback =
   globalThis.requestIdleCallback ||
   function (cb) {
@@ -19,10 +25,9 @@ globalThis.requestIdleCallback =
   };
 
 export class IdleTask<T = any> extends EventEmitter {
-  private taskList: {
-    handler: (data: T) => void;
-    data: T;
-  }[] = [];
+  private taskList: TaskList<T> = [];
+
+  private hightLevelTaskList: TaskList<T> = [];
 
   private taskHandle: number | null = null;
 
@@ -31,8 +36,8 @@ export class IdleTask<T = any> extends EventEmitter {
     this.setMaxListeners(1000);
   }
 
-  public enqueueTask(taskHandler: (data: T) => void, taskData: T) {
-    this.taskList.push({
+  public enqueueTask(taskHandler: (data: T) => void, taskData: T, isHightLevel = false) {
+    (isHightLevel ? this.hightLevelTaskList : this.taskList).push({
       handler: taskHandler,
       data: taskData,
     });
@@ -43,6 +48,11 @@ export class IdleTask<T = any> extends EventEmitter {
   }
 
   public clearTasks() {
+    if (this.taskHandle) {
+      globalThis.cancelIdleCallback(this.taskHandle);
+    }
+
+    this.hightLevelTaskList = [];
     this.taskList = [];
   }
 
@@ -65,10 +75,12 @@ export class IdleTask<T = any> extends EventEmitter {
   }
 
   private runTaskQueue(deadline: IdleDeadline) {
+    const { hightLevelTaskList, taskList } = this;
+
     // 动画会占用空闲时间,当任务一直无法执行时，看看是否有动画正在播放
     // 根据空闲时间的多少来决定执行的任务数，保证页面不卡死的情况下尽量多执行任务，不然当任务数巨大时，执行时间会很久
     // 执行不完不会影响配置，但是会影响画布渲染
-    while (deadline.timeRemaining() > 0 && this.taskList.length) {
+    while (deadline.timeRemaining() > 0 && taskList.length) {
       const timeRemaining = deadline.timeRemaining();
       let times = 0;
       if (timeRemaining <= 5) {
@@ -82,18 +94,22 @@ export class IdleTask<T = any> extends EventEmitter {
       }
 
       for (let i = 0; i < times; i++) {
-        const task = this.taskList.shift();
+        const task = hightLevelTaskList.length > 0 ? hightLevelTaskList.shift() : taskList.shift();
         if (task) {
           task.handler(task.data);
         }
 
-        if (this.taskList.length === 0) {
+        if (hightLevelTaskList.length === 0 && taskList.length === 0) {
           break;
         }
       }
     }
 
-    if (this.taskList.length) {
+    if (!hightLevelTaskList.length) {
+      this.emit('hight-level-finish');
+    }
+
+    if (hightLevelTaskList.length || taskList.length) {
       this.taskHandle = globalThis.requestIdleCallback(this.runTaskQueue.bind(this), { timeout: 300 });
     } else {
       this.taskHandle = 0;