@cicctencent/formily 0.0.0-stage → 0.0.1

package/src/components/base/HotArea/index.vue

@@ -0,0 +1,565 @@
+<template>
+  <div class="hot-area">
+    <div class="button-wrap">
+      <span class="button-wrap-label" :class="{ 'editor-class': editorState }"
+        >热区</span
+      >
+      <span
+        class="button-wrap-value"
+        :style="{ opacity: editorState ? '.6' : '1' }"
+        @click="openDialog"
+        >编辑</span
+      >
+    </div>
+    <el-dialog
+      v-model="dialogVisible"
+      title="编辑热区"
+      :width="1200"
+      @close="onDialogClose"
+      @closed="onDialogClosed"
+      @opened="onDialogOpened"
+    >
+      <!-- editHotArea {{editHotArea.shape}} -->
+      <div
+        class="left-wrap"
+        :style="{ 'pointer-events': readOnly ? 'none' : 'auto' }"
+      >
+        <div class="hot-area-editor">
+          <div class="hot-area-editor--content">
+            <img :src="imgUrl" ref="imgRef" />
+            <template v-for="v in imageList" :key="v">
+              <img
+                :src="v.element.options.imageUrl"
+                :style="v.element.style"
+                alt=""
+              />
+            </template>
+            <v-stage
+              ref="stageRef"
+              @mousedown="onStageMouseDown"
+              @mousemove="onStageMouseMove"
+              @mouseup="onStageMouseUp"
+            >
+              <v-layer ref="layersRef">
+                <div v-for="(v, i) in list" :key="v.usemap">
+                  <template v-if="v.shape === 'rect'">
+                    <v-rect
+                      ref="hotAreaShapesRef"
+                      @dragend="onShapeDragEnd($event, i)"
+                      @transformend="onTransformendEnd"
+                      @click="onShapeClick(i)"
+                      :config="{
+                        x: v.style.left,
+                        y: v.style.top,
+                        width: v.style.width,
+                        height: v.style.height,
+                        fill: 'rgba(254, 169, 107, .32)',
+                        name: 'hotarea-rect',
+                        draggable: true,
+                        type: 'rect',
+                        hitStrokeWidth: 5,
+                        scaleX: 1,
+                        scaleY: 1,
+                      }"
+                    >
+                    </v-rect>
+                    <v-rect
+                      :config="{
+                        x: v.style.left - 21,
+                        y: v.style.top - 5,
+                        width: 20,
+                        height: 20,
+                        fill: '#704528',
+                        scaleX: 1,
+                        scaleY: 1,
+                        cornerRadius: [10, 10, 0, 10],
+                      }"
+                    >
+                    </v-rect>
+                    <v-text
+                      :config="{
+                        x: v.style.left - 21,
+                        y: v.style.top - 5,
+                        text: i + 1,
+                        fontSize: 14,
+                        fill: '#FFF',
+                        width: 20,
+                        height: 20,
+                        strokeWidth: 1,
+                        scaleX: 1,
+                        scaleY: 1,
+                        align: 'center',
+                        verticalAlign: 'middle',
+                      }"
+                    ></v-text>
+                  </template>
+                  <template v-if="v.shape === 'circle'">
+                    <v-circle
+                      ref="hotAreaShapesRef"
+                      @dragend="onShapeDragEnd($event, i)"
+                      @transformend="onTransformendEnd"
+                      @click="onShapeClick(i)"
+                      :config="{
+                        x: v.style.left,
+                        y: v.style.top,
+                        radius: v.style.width,
+                        fill: 'rgba(254, 169, 107, .32)',
+                        name: 'hotarea-circle',
+                        draggable: true,
+                        type: 'circle',
+                        scaleX: 1,
+                        scaleY: 1,
+                      }"
+                    ></v-circle>
+                    <v-rect
+                      :config="{
+                        x: v.style.left - v.style.width / 2 - 40,
+                        y: v.style.top - v.style.width,
+                        width: 20,
+                        height: 20,
+                        fill: '#704528',
+                        scaleX: 1,
+                        scaleY: 1,
+                        cornerRadius: [10, 10, 0, 10],
+                      }"
+                    >
+                    </v-rect>
+                    <v-text
+                      :config="{
+                        x: v.style.left - v.style.width / 2 - 40,
+                        y: v.style.top - v.style.width,
+                        text: i + 1,
+                        fontSize: 14,
+                        fill: '#FFF',
+                        width: 20,
+                        height: 20,
+                        strokeWidth: 1,
+                        align: 'center',
+                        verticalAlign: 'middle',
+                      }"
+                    ></v-text>
+                  </template>
+                  <!-- delete icon -->
+                  <template v-if="curSelect === v.usemap">
+                    <v-circle
+                      :config="{
+                        x: v.style.left + v.style.width + 14,
+                        y: v.style.top,
+                        radius: 10,
+                        fill: '#A2755B',
+                        name: 'delete-hotarea-circle',
+                        draggable: false,
+                        type: 'circle',
+                        scaleX: 1,
+                        scaleY: 1,
+                      }"
+                    ></v-circle>
+                    <v-text
+                      :config="{
+                        x: v.style.left + v.style.width + 4,
+                        y: v.style.top - 10,
+                        draggable: false,
+                        text: 'x',
+                        fontSize: 14,
+                        fill: '#fff',
+                        name: 'delete-hotarea-text',
+                        width: 20,
+                        height: 20,
+                        strokeWidth: 1,
+                        align: 'center',
+                        verticalAlign: 'middle',
+                        scaleX: 1,
+                        scaleY: 1,
+                      }"
+                    ></v-text>
+                  </template>
+                </div>
+              </v-layer>
+            </v-stage>
+          </div>
+        </div>
+        <div class="switch-wrap">
+          <span>热区形状：</span>
+          <div class="switch-wrap--content">
+            <div
+              @click="onShapeChange('rect', editHotArea.index)"
+              class="rect"
+              :class="{ 'is-active': layerShape === 'rect' }"
+            ></div>
+            <div
+              @click="onShapeChange('circle', editHotArea.index)"
+              class="circle"
+              :class="{ 'is-active': layerShape === 'circle' }"
+            ></div>
+          </div>
+        </div>
+        <span class="tips"
+          >提示：鼠标移入图片并按住鼠标拖动即可绘制热区，选中热区并点击“方形”、“圆形”可切换热区形状</span
+        >
+      </div>
+      <div class="right-wrap">
+        <div class="vue-form-box" v-for="(item, index) in list" :key="index">
+          <div class="title-box">
+            <span class="title">热区{{ index + 1 }}</span>
+            <el-button
+              @click="onHotAreaDelete(item.usemap)"
+              :style="{
+                'pointer-events': readOnly ? 'none' : 'auto',
+              }"
+              size="large"
+              link
+              :icon="Delete"
+            ></el-button>
+          </div>
+          <div class="vue-form-box--content">
+            <FormProvider :form="item.form">
+              <SchemaField
+                :schema="item.config"
+                :scope="{ filterOptions, ...scopes }"
+              ></SchemaField>
+            </FormProvider>
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <el-button @click="onCancel">取消</el-button>
+        <el-button type="primary" @click="onConfirm">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { FormProvider, createSchemaField } from '@formily/vue';
+// @ts-ignore
+import useHotArea from './index';
+import { Delete } from '@cicctencent/icons-vue';
+import * as scopes from '../../../scope';
+const props = defineProps({
+  value: {
+    type: Array,
+    default: () => [],
+  },
+  event: {
+    type: String,
+    default: '{}',
+  },
+  options: {
+    type: Array,
+    default: () => [],
+  },
+  readOnly: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emits = defineEmits(['change']);
+const filterOptions = (eventType: string) => {
+  const options: any[] = eventType
+    ? props.options.filter(
+        (op: any) =>
+          (Array.isArray(op.eventType) && op.eventType.includes(eventType)) ||
+          op.eventType === eventType
+      )
+    : [];
+  return options;
+};
+
+const {
+  imgUrl,
+  onHotAreaDelete,
+  onStageMouseDown,
+  onStageMouseMove,
+  onStageMouseUp,
+  onShapeDragEnd,
+  layerShape,
+  editHotArea,
+  curSelect,
+  onTransformendEnd,
+  onShapeClick,
+  onDialogClose,
+  onDialogClosed,
+  onDialogOpened,
+  onConfirm,
+  onCancel,
+  stageRef,
+  editorState,
+  imgRef,
+  layersRef,
+  list,
+  hotAreaShapesRef,
+  dialogVisible,
+  onShapeChange,
+  openDialog,
+  getUploadImageUrl,
+  imageList,
+} = useHotArea(props, emits);
+
+defineExpose({ getUploadImageUrl });
+</script>
+
+<script lang="ts">
+export default { name: 'HotArea' };
+</script>
+<style lang="scss">
+.hot-area {
+  .editor-class {
+    color: #020202 !important;
+  }
+  .button-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    // border-top: 1px solid rgba(0, 0, 0, 0.1);
+    // border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    // padding: 16px 18px;
+    border: none !important;
+    padding: 0 18px 16px 18px;
+    margin: 0 !important;
+    &-value {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 20px;
+      /* identical to box height */
+      color: #4b515e;
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    &-label {
+      color: rgba(2, 2, 2, 0.4);
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 600;
+      font-style: normal;
+    }
+  }
+
+  .formily-element-plus-array-items-item-inner {
+    margin-left: 120px;
+    .formily-element-plus-form-item-label {
+      width: 180px !important;
+    }
+  }
+  .el-dialog {
+    box-sizing: border-box;
+    padding: 24px 32px;
+    .formily-element-plus-array-base-addition {
+      width: auto;
+      top: -2px;
+      left: 0;
+      position: absolute;
+      transform: translateY(50%);
+      font-size: 12px;
+
+      transform: translateX(120px);
+      .el-icon {
+        display: none;
+      }
+    }
+  }
+  .el-dialog__headerbtn {
+    opacity: 0.8;
+    width: 33px;
+    height: 30px;
+    top: 24px;
+    right: 34px;
+  }
+
+  .el-dialog__header {
+    border-bottom: 1px solid rgba(232, 233, 235, 1);
+    margin-right: 0;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 150%;
+    /* identical to box height, or 30px */
+    display: flex;
+    align-items: center;
+    color: #000000;
+    padding: 0 0 12px 0;
+  }
+  .el-dialog__footer {
+    border-top: 1px solid rgba(232, 233, 235, 1);
+    padding: 16px 0 0 0;
+  }
+  .el-dialog__body {
+    display: flex;
+    .left-wrap {
+      position: relative;
+      width: 378px;
+      box-sizing: border-box;
+      padding: 24px;
+      background-color: rgba(232, 232, 232, 0.6);
+
+      .switch-wrap {
+        margin-top: 10px;
+        display: flex;
+        align-items: center;
+        span:first-of-type {
+          font-weight: 700;
+        }
+        &--content {
+          width: 62px;
+          height: 26px;
+          background-color: rgba(117, 117, 117, 1);
+          border-radius: 4px;
+          display: flex;
+          .rect {
+            width: 30px;
+            height: 100%;
+            position: relative;
+            border-right: 1px solid rgba(0, 0, 0, 0.1);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            &::before {
+              content: '';
+              display: block;
+              width: 15px;
+              height: 15px;
+              border: 1px solid #ffffff;
+              opacity: 0.4;
+            }
+          }
+
+          .circle {
+            width: 30px;
+            height: 100%;
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            &::before {
+              content: '';
+              display: block;
+              width: 15px;
+              height: 15px;
+              border-radius: 10px;
+              border: 1px solid #ffffff;
+              opacity: 0.4;
+            }
+          }
+
+          .is-active {
+            &::before {
+              opacity: 1;
+            }
+          }
+        }
+      }
+
+      .tips {
+        font-size: 14px;
+        line-height: 20px;
+        color: #666;
+        margin-top: 10px;
+        display: block;
+      }
+
+      .hot-area-editor {
+        // background-color: cadetblue;
+        position: relative;
+        width: 330px;
+        height: 400px;
+        &--content {
+          border: 1px dashed #999;
+          position: absolute;
+          left: 0;
+          top: 0;
+          right: 0;
+          overflow: scroll;
+          height: 100%;
+          &::-webkit-scrollbar {
+            display: none;
+          }
+
+          img {
+            position: absolute;
+            width: 100%;
+            -webkit-user-drag: none;
+          }
+        }
+      }
+    }
+    .right-wrap {
+      height: 502px;
+      width: 700px;
+
+      overflow-y: scroll;
+      margin-left: 60px;
+      .formily-row {
+        position: relative !important;
+        .el-button {
+          padding: 0 !important;
+        }
+        .el-button + .el-button {
+          margin-left: 4px;
+        }
+      }
+      .title-box {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        margin-bottom: 10px;
+        .el-button.is-link {
+          font-size: 20px;
+          height: 20px;
+          padding: 0;
+          margin: 0;
+        }
+        .title {
+          color: rgba(112, 69, 40, 1);
+          font-style: normal;
+          font-weight: 600;
+          font-size: 14px;
+          line-height: 20px;
+          display: flex;
+          align-items: center;
+          /* margin-bottom: 16px; */
+          &::before {
+            content: '';
+            width: 2px;
+            height: 13px;
+            background-color: rgba(112, 69, 40, 1);
+            display: block;
+            margin-right: 6px;
+          }
+        }
+      }
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+  }
+
+  .formily-element-plus-form-item {
+    /* display: flex; */
+    position: relative;
+    box-sizing: border-box;
+    margin-bottom: 16px;
+    .formily-element-plus-form-item-label {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 20px;
+      /* identical to box height */
+      color: #000000;
+      width: 120px;
+      margin-top: 10px;
+    }
+
+    .el-input,
+    .el-input-number {
+      height: 40px !important;
+      /* width: 212px !important; */
+      .el-input__inner {
+        width: 100%;
+      }
+    }
+  }
+}
+</style>

package/src/components/base/HotArea/type.ts

@@ -0,0 +1,18 @@
+export interface EditHotArea {
+    hotArea?: {
+        shape: any;
+        style: {
+            hex: string;
+            top: number;
+            left: number;
+            width: number;
+            height: number;
+        };
+        event: any;
+        element: any;
+    };
+    index?: number | any;
+    shape?: any;
+    tr?: any;
+    origin?: any;
+}