@cicctencent/formily 0.0.0-stage → 0.0.1

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

@@ -0,0 +1,698 @@
+import {
+  computed,
+  ref,
+  watch,
+  onMounted,
+  nextTick,
+  getCurrentInstance,
+  reactive,
+} from 'vue';
+import { EditHotArea } from './type';
+import { cloneDeep } from '@cicctencent/ark-util';
+import Konva from 'konva';
+import { ElMessage, ElMessageBox } from '@cicctencent/jtui';
+import { createForm, onFormInit, onFormValuesChange } from '@formily/core';
+import { useParentForm } from '@formily/vue';
+import { transformSchema } from '../../../transform';
+import { FormilyValidate } from '../../../validate/index';
+export default function (props, emit) {
+  const editHotArea = ref<EditHotArea>({});
+  // 热区列表
+  const list = ref<Array<any>>([]);
+  const imgUrl = ref<string>(null);
+  const dialogVisible = ref<boolean>(false);
+  const ctx = getCurrentInstance();
+  /** refs */
+  const imgRef = ref();
+  const stageRef = ref();
+  const layersRef = ref();
+  const hotAreaShapesRef = ref();
+
+  /** use */
+  const formRef: any = useParentForm();
+
+  /** computed */
+  const shapeValidator = computed(() => {
+    return editHotArea.value.hotArea
+      ? !editHotArea.value.hotArea.shape
+      : false;
+  });
+
+  const hexValidator = computed(() => {
+    return editHotArea.value.hotArea
+      ? !editHotArea.value.hotArea.style.hex
+      : false;
+  });
+
+  const event = computed(() => JSON.parse(props.event));
+  const schemaConfig = computed(() => {
+    return transformSchema({ schema: event.value?.properties?.list?.items ?? {}, ctx, layout: "horizontal" });
+  });
+  const layerShape = computed(() => {
+    return editHotArea.value?.hotArea?.shape;
+  });
+  // 编辑状态: 是否已编辑
+  const editorState = computed(() => {
+    return props?.value?.length
+  })
+
+  const curSelect = computed(() => {
+    // @ts-ignore
+    if (editHotArea.value?.hotArea?.usemap) {
+      // @ts-ignore
+      return editHotArea.value?.hotArea?.usemap;
+    }
+    return null;
+  });
+
+  const imageList = computed(() => {
+    return list.value.filter(v => v.element?.options?.imageUrl);
+  });
+  /**  util */
+  // 获取上传的图片地址
+  const getUploadImageUrl = (file, done) => {
+      const reader = new FileReader();
+      // 表单中显示图片
+      const image = new Image();
+      reader.addEventListener("load", function () {
+          // @ts-ignore
+          image.src = reader.result;
+      }, false);
+      reader.readAsDataURL(file.raw);
+      image.onload = () => {
+        done(image.src);
+        renderImage(image.src);
+      };
+  }
+
+  // 渲染图片
+  const renderImage = (imageUrl) => {
+    const index = editHotArea.value.index;
+    if (index === undefined) return;
+    const { top, left, width, height } = editHotArea.value.hotArea.style;
+    if (editHotArea.value.hotArea.shape === 'rect') {
+      list.value[index].element = {
+        options: { ...list.value[index].element?.options || {}, imageUrl },
+        style: {
+          top: top + 'px',
+          left: left + 'px',
+          width: width + 'px',
+          height: height + 'px',
+        }
+      }
+    } else {
+      list.value[index].element = {
+        options: { ...list.value[index].element?.options || {}, imageUrl },
+        style: {
+          top: top - width + 'px',
+          left: left - width + 'px',
+          width: width * 2 + 'px',
+          height: width * 2 + 'px',
+          borderRadius: '50%',
+        }
+      }
+    }
+  }
+
+  const getImgUrl = () => {
+    // 从父级遍历查找图片,这种方式解决了层次嵌套的问题
+    const parent = formRef.value?.value ?? formRef.value?.values ?? {};
+
+    if('imgUrl' in parent && parent['imgUrl']){
+      imgUrl.value = parent['imgUrl'];
+    }
+
+    return imgUrl.value;
+  };
+
+  /** watch */
+  // watch(
+  //   () => props.value,
+  //   () => {
+  //     // init();
+  //   }
+  // );
+  // watch(
+  //   () => dialogVisible.value,
+  //   val => {
+  //     if (val) {
+  //       // 对话框显示的时候,重新初始化
+  //       // init();
+  //     }
+  //   }
+  // );
+
+  /** 生命周期 */
+  onMounted(() => {
+    // init();
+  });
+  /** method */
+  function init() {
+    const data = cloneDeep(props.value);
+    // 数据回显
+    list.value = data
+      .filter(
+        (v: any) => v.style && v.style.width > 0 && v.style.height > 0
+      )
+      .map((v: any, i) => {
+        v.style = initStyle(v.style,v?.benchmark);
+        const element: any = { style: {} };
+        if (v.event.list[0].type === 'mounted') {
+          element.options = v.event.list[0].handler.options;
+          element.style = {
+            top: v.style.top + 'px',
+            left: v.style.left + 'px',
+            width: v.style.width + 'px',
+            height: v.style.height + 'px',
+          }
+        }
+        return {
+          ...v,
+          config: getSchemaConfig(v.event.list[0].handler.name),
+          lastName: v.event.list[0].handler.name,
+          form:createForm({
+            effects() {
+              onFormValuesChange(form => {
+                console.log('onFormValuesChange1',form.values)
+
+
+                editHotArea.value.index = i;
+                editHotArea.value.hotArea = v;
+              // 判断事件名是否修改 (第一次是初始化,不执行)
+
+                changeEventNameEffect(form,i);
+
+              });
+              onFormInit(form=>{
+                  form.setValues(v.event.list[0]);
+              })
+            },
+            readOnly: props.readOnly,
+          }),
+          element,
+        };
+      });
+  }
+  /**
+   *  修改事件名Effect
+   * @param form
+   * @param index
+   */
+  function changeEventNameEffect(form, index){
+
+    if(list.value.length && list.value[index]?.lastName !== form.values?.handler?.name){
+      // 记录事件名
+      list.value[index].lastName = form.values?.handler?.name
+      // 重新设置Schema
+      list.value[index].config = getSchemaConfig(form.values?.handler?.name);
+      //回收字段模型
+      form.clearFormGraph("handler.options.*")
+    }
+
+    if (list.value.length) {
+      const imageUrl = form.values.handler?.options?.imageUrl;
+      imageUrl !==undefined && renderImage(imageUrl);
+    }
+  }
+
+  // 初始化style,对旧数据进行兼容
+  function initStyle(data,benchmark){
+
+    const stage =stageRef.value?.getNode() ?? null;
+    // 热区编辑的宽度
+    let curWidth =stage && stage.getWidth();
+
+
+
+    // 基准尺寸, 用于还原热区渲染
+    const { width:bWidth , height:bHeight } = benchmark
+
+     // 做兼容,防止出现0有问题
+     if(!curWidth || !bWidth){
+      return data;
+    }
+     // 如果不相等,说明是旧版的热区信息
+    if(curWidth !== bWidth){
+      // 变动的比例
+      let scale = 0;
+      if(bWidth - curWidth > 0){
+         // 旧数据的热区宽度比目前的热区宽度大
+        // 拿到大的比例
+        scale = (bWidth - curWidth) / bWidth;
+      }else{
+         // 旧数据的热区宽度比目前的热区宽度小
+         // 拿到小的比例
+        scale = (bWidth - curWidth)/curWidth;
+      }
+      // 生成新的style
+      let newStyle:any = {};
+      if(scale > 0){
+         // 比例是正的,说明以前的配置比现在的配置大,需要对热区进行缩小
+        newStyle.height = data?.height - data?.height * scale;
+        newStyle.left = data?.left - data?.left * scale;
+        newStyle.top = data?.top - data?.top * scale;
+        newStyle.width =data?.width - data?.width * scale;
+      }else{
+        // 比例是负的,说明以前的配置比现在的配置小,需要对热区进行放大
+        newStyle.height = data?.height + data?.height * scale;
+        newStyle.left = data?.left + data?.left * scale;
+        newStyle.top = data?.top + data?.top * scale;
+        newStyle.width =data?.width + data?.width * scale;
+      }
+
+      return Object.assign({},data,newStyle);
+    }
+    // 相等不需要做处理
+    return data;
+  }
+
+  function onEventChange(evt: any) {
+    editHotArea.value.hotArea.event = cloneDeep(evt.newValue);
+  }
+
+  function openDialog() {
+    if (getImgUrl()) {
+      dialogVisible.value = true;
+      init();
+    } else {
+      ElMessage.error({message: '请先上传图片', zIndex: 9999});
+    }
+  }
+
+  async function onDialogOpened() {
+    // 绘制区域的宽高必须与图片一致
+    let rect: any = {};
+
+    if (!imgRef.value.complete) {
+      await new Promise((resolve, reject) => {
+        imgRef.value.onload = () => {
+          rect = imgRef.value.getBoundingClientRect();
+          resolve(true);
+        };
+      });
+      await nextTick(function () { });
+    } else {
+      rect = imgRef.value.getBoundingClientRect();
+    }
+
+    const stage = stageRef.value.getNode();
+    stage.setWidth(rect.width);
+    stage.setHeight(rect.height);
+    init();
+    stage.on('click tap', e => {
+      // 如果点击的空白区域, 则去掉所有 transformers
+      if (e.target === stage) {
+        editHotArea.value.hotArea = undefined;
+        editHotArea.value.index = undefined;
+        editHotArea.value.shape = undefined;
+
+        const trs = stage.find('.transformer');
+        if (trs.length) {
+          trs.forEach(v => v.destroy());
+        }
+        const layer = layersRef.value.getNode();
+        layer.draw();
+        return;
+      }
+      // 如果点击的不是热区区域, 则不处理
+      if (!e.target.name().startsWith('hotarea')) {
+        return;
+      }
+      // 去掉所有 transformers, 重新绘制 transformers
+      // 也可以判断下当前选择状态是否有 transformers
+      const trs = stage.find('.transformer');
+      if (trs.length) {
+        trs.forEach(v => v.destroy());
+      }
+
+      // create new transformer
+      var tr = new Konva.Transformer({
+        name: 'transformer',
+        rotateEnabled: false,
+      });
+      e.target.parent.add(tr);
+      tr.nodes([e.target]);
+      e.target.parent.draw();
+    });
+  }
+  function onTransformendEnd(e) {
+    editHotArea.value.tr = null;
+    const { element = { style: {} }, style, shape } = editHotArea.value.hotArea;
+    style.top = e.target.y();
+    style.left = e.target.x();
+    if (shape === 'rect') {
+      style.width = e.target.width() * e.target.scaleX();
+      style.height = e.target.height() * e.target.scaleY();
+      element.style.top = style.top + 'px';
+      element.style.left = style.left + 'px';
+      element.style.width = style.width + 'px';
+      element.style.height = style.height + 'px';
+    } else {
+      style.width = e.target.width() * e.target.scaleX() / 2;
+      element.style.top = style.top - style.width + 'px';
+      element.style.left = style.left - style.width + 'px';
+      element.style.width = style.width * 2 + 'px';
+      element.style.height = style.width * 2 + 'px';
+      element.style.borderRadius = '50%';
+    }
+    e.target.scaleX(1);
+    e.target.scaleY(1);
+    // this.$forceUpdate();
+  }
+  function onDialogClose() {
+    const stage = stageRef.value.getNode();
+    // stage.off('click tap');
+    // stage.destroy();
+  }
+  function onDialogClosed() {
+    editHotArea.value = {};
+    if (props.value && props.value.length) {
+      list.value = cloneDeep(props.value);
+    } else {
+      list.value = [];
+    }
+  }
+
+  function onShapeClick(i) {
+    editHotArea.value.hotArea = list.value[i];
+    editHotArea.value.index = i;
+    // this.$forceUpdate()
+  }
+
+  function onShapeChange(e, i) {
+
+    if(layerShape.value === e){
+      // 重复点击
+      return;
+    }
+
+    const shape = hotAreaShapesRef.value[i];
+    const shapeNode = shape.getNode();
+    const shapeNodeAttrs = shapeNode.attrs;
+    const item = list.value[i];
+    item.element = { ...item.element, style: {} };
+    const scaleX = shapeNodeAttrs.scaleX || 1;
+    const scaleY = shapeNodeAttrs.scaleY || 1;
+    if (e === 'rect') {
+      // 圆形 => 方形
+      item.style.top = shapeNodeAttrs.y - shapeNodeAttrs.radius * scaleY;
+      item.style.left = shapeNodeAttrs.x - shapeNodeAttrs.radius * scaleX;
+      item.style.width = shapeNodeAttrs.radius * scaleX * 2;
+      item.style.height = shapeNodeAttrs.radius * scaleY * 2;
+      item.shape = 'rect';
+      item.element.style.top = item.style.top + 'px';
+      item.element.style.left = item.style.left + 'px';
+      item.element.style.width = item.style.width + 'px';
+      item.element.style.height = item.style.height + 'px';
+    } else if (e === 'circle') {
+      // 方形 => 圆形
+      item.style.top =
+        shapeNodeAttrs.y + (shapeNodeAttrs.height * scaleY) / 2;
+      item.style.left =
+        shapeNodeAttrs.x + (shapeNodeAttrs.width * scaleX) / 2;
+      item.style.width = (shapeNodeAttrs.width * scaleX) / 2;
+      item.shape = 'circle';
+      item.element.style.top = item.style.top - item.style.width + 'px';
+      item.element.style.left = shapeNodeAttrs.x + 'px';
+      item.element.style.width = shapeNodeAttrs.width * scaleX + 'px';
+      item.element.style.height = shapeNodeAttrs.width * scaleX + 'px';
+      item.element.style.borderRadius = '50%';
+    }
+    const trs = shapeNode.parent.find('.transformer');
+    if (trs && trs[0]) {
+      nextTick(function () {
+        const shapeUpdated = hotAreaShapesRef.value[i];
+        const shapeUpdatedNode = shapeUpdated.getNode();
+        trs[0].nodes([shapeUpdatedNode]);
+        trs[0].update();
+      });
+    }
+    shapeNode.parent.draw();
+  }
+  function onStageMouseDown(e) {
+    if (!e?.evt) {
+      return;
+    }
+    // 拖动变化大小时, 不需要后续逻辑
+    if (
+      e.target &&
+      e.target.parent &&
+      e.target.parent.hasName('transformer')
+    ) {
+      editHotArea.value.tr = e.target.parent;
+      return;
+    }
+    // 操作已有热区
+    if (e.target && e.target.name().startsWith('hotarea')) {
+      editHotArea.value.shape = e.target;
+      return;
+    }
+    // 按下删除按钮
+    if(e.target && e.target.name().startsWith('delete-hotarea')){
+       onHotAreaDelete(curSelect.value);
+       return;
+    }
+
+    // 非操作已有热区, 则记录原点, 并生成热区配置
+    const origin = { x: e.evt.layerX, y: e.evt.layerY };
+    editHotArea.value.shape = null;
+    editHotArea.value.origin = origin;
+    list.value.push({
+      style: {
+        left: origin.x,
+        top: origin.y,
+        width: 0,
+        height: 0,
+        hex: '#e9bc8280',
+      },
+      link: undefined,
+      shape: 'rect',
+      usemap: '#' + Date.now().toString(),
+      event: {},
+    });
+    // 加index 形成闭包， 解决之前使用list.value.length - 1, 导致我操作第一个热区，结果倒数第一热区发生了改变
+    let index = list.value.length - 1;
+    list.value[list.value.length -1].config = cloneDeep(getSchemaConfig(null));
+    list.value[index].form = createForm({
+      effects() {
+        onFormValuesChange(form => {
+          console.log('onFormValuesChange1',form.values)
+          changeEventNameEffect(form,index)
+          editHotArea.value.index = list.value.length - 1;
+          editHotArea.value.hotArea = list.value[list.value.length - 1];
+        });
+      },
+    })
+  }
+
+
+  function getSchemaConfig(name){
+    // 动态Schema
+    try {
+      const DYNAMIC_INJECT_SCHEMA = cloneDeep(event.value.properties.list.items.properties.handler.properties.options)
+      let config;
+      if(!DYNAMIC_INJECT_SCHEMA[name]){
+        config = cloneDeep(event.value.properties.list.items)
+        config.properties.handler.properties.options.properties =  {}
+      }else{
+        // 存在动态schema
+        config = cloneDeep(event.value.properties.list.items)
+        config.properties.handler.properties.options = DYNAMIC_INJECT_SCHEMA[name]
+      }
+      return transformSchema({ schema: cloneDeep(config) ?? {}, ctx, layout: "horizontal" });
+    } catch (error) {
+        console.error('err getSchemaConfig', error)
+    }
+
+  }
+
+  function onStageMouseMove(e) {
+    if (!e?.evt) {
+      return;
+    }
+    // 如果是拖动编辑热区大小, 无需后续响应
+    // 如果是编辑已有热区, 则是移动位置, 这里不用响应
+    if (editHotArea.value.tr || editHotArea.value.shape) {
+      return;
+    }
+    // 如果没有原点记录 origin, 也不需要响应
+    if (!editHotArea.value.origin) {
+      return;
+    }
+    // 最后一个热区就是当前编辑热区
+    const hotArea = list.value[list.value.length - 1];
+    if (!hotArea) {
+      return;
+    }
+    const end = { x: e.evt.layerX, y: e.evt.layerY };
+    const origin = editHotArea.value.origin;
+    hotArea.style.left = Math.min(end.x, origin.x);
+    hotArea.style.top = Math.min(end.y, origin.y);
+    hotArea.style.width = Math.abs(end.x - origin.x);
+    hotArea.style.height = Math.abs(origin.y - end.y);
+  }
+  function onStageMouseUp(e) {
+    if (!e?.evt) {
+      return;
+    }
+    // 编辑已有热区, 这里不用响应
+    if (editHotArea.value.tr || editHotArea.value.shape) {
+      return;
+    }
+    const end = { x: e.evt.layerX, y: e.evt.layerY };
+    const origin = editHotArea.value.origin;
+    const offsetX = Math.abs(end.x - origin.x);
+    const offsetY = Math.abs(end.y - origin.y);
+    if (offsetX < 20 || offsetY < 20) {
+      // ElMessage.error('热区区域面积过小, 不利于操作, 请重新设置');
+      list.value.splice(list.value.length - 1, 1);
+    }
+    editHotArea.value.origin = null;
+  }
+  function onShapeDragEnd(e, i) {
+    if (editHotArea.value.shape) {
+      editHotArea.value.shape = undefined;
+    }
+    if (e?.target?.attrs) {
+      const item = list.value[i];
+      const attrs = e?.target?.attrs;
+      item.style.left = attrs.x;
+      item.style.top = attrs.y;
+      if (!item.element) item.element = { style: {} };
+      if (attrs.type === 'rect') {
+        item.style.width = attrs.width;
+        item.style.height = attrs.height;
+        item.element.style.left = attrs.x +'px';
+        item.element.style.top = attrs.y +'px';
+        item.element.style.width = attrs.width +'px';
+        item.element.style.height = attrs.height +'px';
+      } else {
+        item.style.width = attrs.radius;
+        item.element.style.left = attrs.x - attrs.radius + 'px';
+        item.element.style.top = attrs.y - attrs.radius + 'px';
+        item.element.style.width = attrs.radius * 2 + 'px';
+        item.element.style.height = attrs.radius * 2 + 'px';
+        item.element.style.borderRadius = '50%';
+      }
+    }
+  }
+  async function onCancel() {
+    // ElMessageBox.confirm('此操作将不会保存所做变更,确认取消?', '提示', {
+    //     confirmButtonText: '确定',
+    //     cancelButtonText: '取消',
+    //     type: 'warning',
+    // }).then(val => {
+    //     //todo 取消操作
+    //     dialogVisible.value = false;
+    // });
+    dialogVisible.value = false;
+  }
+  function onConfirm() {
+    if (shapeValidator.value || hexValidator.value) return;
+    const hotAreas = list.value.map((v, i) => {
+      const shape = hotAreaShapesRef.value[i];
+      const shapeNode = shape.getNode();
+      const shapeAttrs = shapeNode.attrs;
+      const hotArea = { ...v };
+
+      hotArea.shape = shapeNode.name().replace('hotarea-', '');
+      hotArea.style.top = shapeAttrs.y;
+      hotArea.style.left = shapeAttrs.x;
+
+      // TODO: 不好改 schema, 先再每一个热区中增加基准尺寸, 用于还原热区渲染, 后面改 schema, 把基准挪出去
+      const stage = stageRef.value.getNode();
+      hotArea.benchmark = {
+        width: stage.attrs.width,
+        height: stage.attrs.height,
+      };
+
+      if (hotArea.shape === 'rect') {
+        hotArea.style.width = shapeAttrs.width;
+        hotArea.style.height = shapeAttrs.height;
+      } else if (hotArea.shape === 'circle') {
+        hotArea.style.width = shapeAttrs.radius;
+      }
+      return hotArea;
+    });
+    list.value = hotAreas;
+
+    let forms = list.value.map(m => m.form);
+    forms.forEach(form => form.validate())
+    let valideFlag = true;
+    for(let i = 0; i<list.value.length;i++){
+      const res = new FormilyValidate({ schema: list.value[i].config, data: list.value[i].form.values }).validate();
+      if(res.length || !list.value[i].form.values?.handler?.name){
+        valideFlag = false;
+        break;
+      }
+    }
+
+    if (valideFlag) {
+      ElMessage.success('设置成功');
+      const datas = list.value.map(m => {
+         const data = {...m.form.values }
+         data.handler = Object.assign(data.handler || {}, { _validateKey: data?.handler?.name})
+        return {
+          style: m?.style ?? {},
+          shape: m?.shape,
+          usemap: m?.usemap,
+          event: {
+            list: [{ ...data }],
+          },
+          benchmark: m?.benchmark ?? {},
+        };
+      });
+      emit('change', datas);
+      dialogVisible.value = false;
+    }else{
+      ElMessage.error({message: "请完善信息再提交", zIndex: 9999});
+    }
+  }
+  function onHotAreaDelete(usemap) {
+    const layer = layersRef.value;
+    const layerNode = layer.getNode();
+    const trs = layerNode.find('.transformer');
+    if (trs.length) {
+      trs.forEach(v => v.destroy());
+    }
+
+    const index = list.value.findIndex(m => m.usemap === usemap);
+
+    list.value.splice(index, 1);
+    editHotArea.value.hotArea = undefined;
+    editHotArea.value.index = undefined;
+    editHotArea.value.shape = null;
+  }
+  return {
+    hexValidator,
+    shapeValidator,
+    stageRef,
+    imgRef,
+    imgUrl,
+    layersRef,
+    hotAreaShapesRef,
+    dialogVisible,
+    list,
+    layerShape,
+    editHotArea,
+    curSelect,
+    editorState,
+    onHotAreaDelete,
+    onConfirm,
+    onCancel,
+    onShapeDragEnd,
+    onStageMouseUp,
+    onStageMouseMove,
+    onStageMouseDown,
+    onShapeChange,
+    onShapeClick,
+    onDialogClosed,
+    onDialogClose,
+    onTransformendEnd,
+    onDialogOpened,
+    openDialog,
+    onEventChange,
+    getUploadImageUrl,
+    imageList,
+  };
+}