Pre Merge pull request !243 from kakajun/dev

package.json

@@ -46,7 +46,7 @@
     "vue-i18n": "9.2.2",
     "vue-router": "4.0.12",
     "vue3-lazyload": "^0.2.5-beta",
-    "vue3-sketch-ruler": "^1.3.3",
+    "vue3-sketch-ruler": "^2.0.1",
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {

src/plugins/customComponents.ts

@@ -1,7 +1,7 @@
 import type { App } from 'vue'
 import { GoSkeleton } from '@/components/GoSkeleton'
 import { GoLoading } from '@/components/GoLoading'
-import { SketchRule } from 'vue3-sketch-ruler'
+import SketchRule from 'vue3-sketch-ruler'
 
 /**
  * 全局注册自定义组件

src/store/modules/chartEditStore/chartEditStore.d.ts

@@ -14,7 +14,6 @@ import type { ChartColorsNameType, CustomColorsType, GlobalThemeJsonType } from
 
 // 编辑画布属性
 export enum EditCanvasTypeEnum {
-  EDIT_LAYOUT_DOM = 'editLayoutDom',
   EDIT_CONTENT_DOM = 'editContentDom',
   OFFSET = 'offset',
   SCALE = 'scale',
@@ -23,7 +22,7 @@ export enum EditCanvasTypeEnum {
   IS_CREATE = 'isCreate',
   IS_DRAG = 'isDrag',
   IS_SELECT = 'isSelect',
-  IS_CODE_EDIT="isCodeEdit"
+  IS_CODE_EDIT = 'isCodeEdit'
 }
 
 // 编辑区域
@@ -162,8 +161,8 @@ type RequestPublicConfigType = {
 
 // 数据池项类型
 export type RequestDataPondItemType = {
-  dataPondId: string,
+  dataPondId: string
-  dataPondName: string,
+  dataPondName: string
   dataPondRequestConfig: RequestConfigType
 }
 

src/store/modules/chartEditStore/chartEditStore.ts

@@ -39,7 +39,6 @@ export const useChartEditStore = defineStore({
     // 画布属性
     editCanvas: {
       // 编辑区域 Dom
-      editLayoutDom: null,
       editContentDom: null,
       // 偏移量
       offset: 20,
@@ -138,6 +137,9 @@ export const useChartEditStore = defineStore({
     componentList: []
   }),
   getters: {
+    gettCanvasScale(): number {
+      return this.editCanvas.scale
+    },
     getMousePosition(): MousePositionType {
       return this.mousePosition
     },
@@ -372,13 +374,6 @@ export const useChartEditStore = defineStore({
       if (index < 1 && index > this.getComponentList.length) return
       this.componentList[index] = newData
     },
-    // * 设置页面样式属性
-    setPageStyle<T extends keyof CSSStyleDeclaration>(key: T, value: any): void {
-      const dom = this.getEditCanvas.editContentDom
-      if (dom) {
-        dom.style[key] = value
-      }
-    },
     // * 移动组件列表层级位置到两端
     setBothEnds(isEnd = false, isHistory = true): void {
       try {
@@ -527,7 +522,7 @@ export const useChartEditStore = defineStore({
           e.id = getUUID()
           // 分组列表生成新 id
           if (e.isGroup) {
-            (e as CreateComponentGroupType).groupList.forEach((item: CreateComponentType) => {
+            ;(e as CreateComponentGroupType).groupList.forEach((item: CreateComponentType) => {
               item.id = getUUID()
             })
           }
@@ -933,53 +928,7 @@ export const useChartEditStore = defineStore({
     setShow(isHistory: boolean = true) {
       this.setHide(false, isHistory)
     },
-    // ----------------
-    // * 设置页面大小
-    setPageSize(scale: number): void {
-      this.setPageStyle('height', `${this.editCanvasConfig.height * scale}px`)
-      this.setPageStyle('width', `${this.editCanvasConfig.width * scale}px`)
-    },
-    // * 计算缩放
-    computedScale() {
-      if (this.getEditCanvas.editLayoutDom) {
-        // 现有展示区域
-        const width = this.getEditCanvas.editLayoutDom.clientWidth - this.getEditCanvas.offset * 2 - 5
-        const height = this.getEditCanvas.editLayoutDom.clientHeight - this.getEditCanvas.offset * 4
 
-        // 用户设定大小
-        const editCanvasWidth = this.editCanvasConfig.width
-        const editCanvasHeight = this.editCanvasConfig.height
-
-        // 需保持的比例
-        const baseProportion = parseFloat((editCanvasWidth / editCanvasHeight).toFixed(5))
-        const currentRate = parseFloat((width / height).toFixed(5))
-
-        if (currentRate > baseProportion) {
-          // 表示更宽
-          const scaleWidth = parseFloat(((height * baseProportion) / editCanvasWidth).toFixed(5))
-          this.setScale(scaleWidth > 1 ? 1 : scaleWidth)
-        } else {
-          // 表示更高
-          const scaleHeight = parseFloat((width / baseProportion / editCanvasHeight).toFixed(5))
-          this.setScale(scaleHeight > 1 ? 1 : scaleHeight)
-        }
-      } else {
-        window['$message'].warning('请先创建画布，再进行缩放')
-      }
-    },
-    // * 监听缩放
-    listenerScale(): Function {
-      const resize = debounce(this.computedScale, 200)
-      // 默认执行一次
-      resize()
-      // 开始监听
-      window.addEventListener('resize', resize)
-      // 销毁函数
-      const remove = () => {
-        window.removeEventListener('resize', resize)
-      }
-      return remove
-    },
     /**
      * * 设置缩放
      * @param scale 0~1 number 缩放比例;
@@ -987,9 +936,9 @@ export const useChartEditStore = defineStore({
      */
     setScale(scale: number, force = false): void {
       if (!this.getEditCanvas.lockScale || force) {
-        this.setPageSize(scale)
         this.getEditCanvas.userScale = scale
         this.getEditCanvas.scale = scale
+        console.log(scale, '5555555555')
       }
     }
   }

src/store/modules/chartLayoutStore/chartLayoutStore.ts

@@ -58,7 +58,6 @@ export const useChartLayoutStore = defineStore({
     setItem<T extends keyof ChartLayoutType, K extends ChartLayoutType[T]>(
       key: T,
       value: K,
-      computedScale = true
     ): void {
       this.$patch(state => {
         state[key] = value
@@ -67,12 +66,6 @@ export const useChartLayoutStore = defineStore({
       setLocalStorage(GO_CHART_LAYOUT_STORE, this.$state)
       // 这里需要标记重置画布位置
       this.rePositionCanvas = true;
-      // 重新计算拖拽区域缩放比例
-      if (computedScale) {
-        setTimeout(() => {
-          chartEditStore.computedScale()
-        }, 500)
-      }
     },
     setItemUnHandle<T extends keyof ChartLayoutType, K extends ChartLayoutType[T]>(key: T, value: K): void {
       this.$patch(state => {

src/views/chart/ContentConfigurations/components/CanvasPage/index.vue

@@ -8,7 +8,6 @@
           v-model:value="canvasConfig.width"
           :disabled="editCanvas.lockScale"
           :validator="validator"
-          @update:value="changeSizeHandle"
         ></n-input-number>
       </n-form-item>
       <n-form-item label="高度">
@@ -17,7 +16,6 @@
           v-model:value="canvasConfig.height"
           :disabled="editCanvas.lockScale"
           :validator="validator"
-          @update:value="changeSizeHandle"
         ></n-input-number>
       </n-form-item>
     </n-form>
@@ -212,10 +210,7 @@ watch(
 // 画布尺寸规则
 const validator = (x: number) => x > 50
 
-// 修改尺寸
+
-const changeSizeHandle = () => {
-  chartEditStore.computedScale()
-}
 
 // 上传图片前置处理
 //@ts-ignore

src/views/chart/ContentEdit/components/EditBottom/index.vue

@@ -106,7 +106,6 @@ const selectHandle = (v: number) => {
   selectInstRef.value?.blur()
   if (v === 0) {
     chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.RE_POSITION_CANVAS, true)
-    chartEditStore.computedScale()
     return
   }
   chartEditStore.setScale(v / 100)
@@ -125,6 +124,7 @@ const sliderFormatTooltip = (v: string) => `${v}%`
 
 // 拖动处理
 const sliderHandle = (v: number) => {
+  //  chartEditStore.setEditCanvas(EditCanvasTypeEnum.SCALE, value);
   chartEditStore.setScale(v / 100)
 }
 

src/views/chart/ContentEdit/components/EditRange/index.vue

@@ -34,12 +34,8 @@ const size = computed(() => {
 })
 
 const rangeStyle = computed(() => {
-  // 缩放
-  const scale = {
-    transform: `scale(${getEditCanvas.value.scale})`
-  }
   // @ts-ignore
-  return { ...useSizeStyle(size.value), ...scale }
+  return { ...useSizeStyle(size.value) }
 })
 
 // 模态层
@@ -55,7 +51,9 @@ const rangeModelStyle = computed(() => {
   position: relative;
   transform-origin: left top;
   background-size: cover;
+  border-radius: 10px;
   overflow: hidden;
+  @include fetch-theme('box-shadow');
   @include fetch-border-color('hover-border-color');
   @include fetch-bg-color('background-color2');
   @include go(edit-range-model) {

src/views/chart/ContentEdit/components/EditRule/index.vue

@@ -1,296 +1,104 @@
 <template>
   <div class="go-sketch-rule">
-    <sketch-rule
+    <sketch-rule v-if="sketchRuleReDraw" v-model:scale="innerScale" :thick="thick" :width="rectWidth"
-      v-if="sketchRuleReDraw"
+      :height="rectHeight" :canvasWidth="width" :canvasHeight="height" :lines="lines" :palette="paletteStyle">
-      :thick="thick"
-      :scale="scale"
-      :width="canvasBox().width"
-      :height="canvasBox().height"
-      :startX="startX"
-      :startY="startY"
-      :lines="lines"
-      :palette="paletteStyle"
-    >
-    </sketch-rule>
-    <div ref="$app" class="edit-screens" @scroll="handleScroll">
-      <div ref="$container" class="edit-screen-container" :style="{ width: containerWidth }">
-        <div
-          ref="refSketchRuleBox"
-          class="canvas"
-          @mousedown="dragCanvas"
-          :style="{ marginLeft: '-' + (canvasBox().width / 2 - 25) + 'px' }"
-        >
-          <div :style="{ pointerEvents: isPressSpace ? 'none' : 'auto' }">
       <slot></slot>
-          </div>
+    </sketch-rule>
-        </div>
-      </div>
-    </div>
-    <!-- 修复右下角白点用的 -->
-    <!-- <div v-if="designStore.getDarkTheme" class="fix-edit-screens-block"></div> -->
   </div>
 </template>
 <script setup lang="ts">
-import { ref, reactive, onMounted, toRefs, watch, onUnmounted, computed } from 'vue'
+import { ref, reactive, toRefs, watch, computed } from 'vue';
-import { listen } from 'dom-helpers'
+import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d';
-import { useDesignStore } from '@/store/modules/designStore/designStore'
+import { useDesignStore } from '@/store/modules/designStore/designStore';
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
-import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
+import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore';
-import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
+const chartEditStore = useChartEditStore();
-import throttle from 'lodash/throttle'
+const { getLayers, getCharts, getDetails } = toRefs(useChartLayoutStore());
+const designStore = useDesignStore();
 
-const chartEditStore = useChartEditStore()
+const thick = 20;
-const chartLayoutStore = useChartLayoutStore()
+const rectWidth = computed(() => {
-const designStore = useDesignStore()
+  return window.innerWidth - 70 - (getCharts.value ? 265 : 0) - (getLayers.value ? 200 : 0) - (getDetails.value ? 0:350);
+});
+const rectHeight = ref(window.innerHeight - 60);
 
-const thick = 20
+const sketchRuleReDraw = ref(true);
-let prevMoveXValue = [0, 0]
-let prevMoveYValue = [0, 0]
 
-const $app = ref()
+const isPressSpace = ref(false);
-const sketchRuleReDraw = ref(true)
+const cursorStyle = ref('auto');
-const refSketchRuleBox = ref()
+const { width, height } = toRefs(chartEditStore.getEditCanvasConfig);
-const $container = ref()
-const isPressSpace = ref(false)
-const cursorStyle = ref('auto')
-const { width, height } = toRefs(chartEditStore.getEditCanvasConfig)
-const startX = ref(0)
-const startY = ref(0)
-const lines = reactive({ h: [], v: [] })
 
-const scale = computed(() => {
+const lines = reactive({ h: [], v: [] });
-  return chartEditStore.getEditCanvas.scale
-})
 
-// 滚动条拖动的宽度
+const innerScale = computed({
-const containerWidth = computed(() => {
+  get() {
-  return `${window.innerWidth * 2}px`
+    return chartEditStore.gettCanvasScale
-})
+  },
+  set(value) {
+    chartEditStore.setEditCanvas(EditCanvasTypeEnum.SCALE, value);
+  }
+});
 
-// 滚动条拖动的高度
+// 处理主题变化
-const containerHeight = computed(() => {
+watch(
-  return `${height.value * 2}px`
+  () => chartEditStore.gettCanvasScale,
-})
+  () => {
+   console.log('innerScale', chartEditStore.gettCanvasScale);
+    chartEditStore.setEditCanvas(EditCanvasTypeEnum.SCALE, chartEditStore.gettCanvasScale);
+  }
+);
 
 // 主题
 const paletteStyle = computed(() => {
-  const isDarkTheme = designStore.getDarkTheme
+  const isDarkTheme = designStore.getDarkTheme;
   return isDarkTheme
     ? {
-        bgColor: '#18181c',
+      bgColor: 'transparent',
       longfgColor: '#4d4d4d',
       shortfgColor: '#4d4d4d',
       fontColor: '#4d4d4d',
       shadowColor: '#18181c',
       borderColor: '#18181c',
-        cornerActiveColor: '#18181c'
+      cornerActiveColor: '#18181c',
+      lineColor: '#51d6a9',
+      lineType: 'dashed'
     }
-    : {}
+    : {
-})
+      bgColor: 'transparent',
+    };
+});
 
-// 颜色
-const themeColor = computed(() => {
-  return designStore.getAppTheme
-})
-
-// 处理鼠标拖动
-const handleWheel = (e: any) => {
-  if (e.ctrlKey || e.metaKey) {
-    e.preventDefault()
-    let resScale = scale.value
-    // 放大(200%)
-    if (e.wheelDelta >= 0 && scale.value < 2) {
-      resScale = scale.value + 0.05
-      chartEditStore.setScale(resScale)
-      return
-    }
-    // 缩小(10%)
-    if (e.wheelDelta < 0 && scale.value > 0.1) {
-      resScale = scale.value - 0.05
-      chartEditStore.setScale(resScale)
-    }
-  }
-}
-
-// 滚动条处理
-const handleScroll = () => {
-  if (!$app.value) return
-  const screensRect = $app.value.getBoundingClientRect()
-  const canvasRect = refSketchRuleBox.value.getBoundingClientRect()
-  // 标尺开始的刻度
-  startX.value = (screensRect.left + thick - canvasRect.left) / scale.value
-  startY.value = (screensRect.top + thick - canvasRect.top) / scale.value
-}
-
-// 拖拽处理
-const dragCanvas = (e: any) => {
-  e.preventDefault()
-  e.stopPropagation()
-
-  if (e.which == 2) isPressSpace.value = true
-  else if (!window.$KeyboardActive?.space) return
-  // @ts-ignore
-  document.activeElement?.blur()
-
-  const startX = e.pageX
-  const startY = e.pageY
-
-  const listenMousemove = listen(window, 'mousemove', (e: any) => {
-    const nx = e.pageX - startX
-    const ny = e.pageY - startY
-
-    const [prevMoveX1, prevMoveX2] = prevMoveXValue
-    const [prevMoveY1, prevMoveY2] = prevMoveYValue
-
-    prevMoveXValue = [prevMoveX2, nx]
-    prevMoveYValue = [prevMoveY2, ny]
-
-    $app.value.scrollLeft -=
-      prevMoveX2 > prevMoveX1 ? Math.abs(prevMoveX2 - prevMoveX1) : -Math.abs(prevMoveX2 - prevMoveX1)
-    $app.value.scrollTop -=
-      prevMoveY2 > prevMoveY1 ? Math.abs(prevMoveY2 - prevMoveY1) : -Math.abs(prevMoveY2 - prevMoveY1)
-  })
-
-  const listenMouseup = listen(window, 'mouseup', () => {
-    listenMousemove()
-    listenMouseup()
-    prevMoveXValue = [0, 0]
-    prevMoveYValue = [0, 0]
-    isPressSpace.value = false
-  })
-}
-
-// 计算画布大小
-const canvasBox = () => {
-  const layoutDom = document.getElementById('go-chart-edit-layout')
-  if (layoutDom) {
-    // 此处减去滚动条的宽度和高度 
-    const scrollW = 20
-    return {
-      height: layoutDom.clientHeight - scrollW,
-      width: layoutDom.clientWidth - scrollW
-    }
-  }
-  return {
-    width: width.value,
-    height: height.value
-  }
-}
 
 // 重绘标尺
-const reDraw = throttle(() => {
+const reDraw = () => {
-  sketchRuleReDraw.value = false
+  sketchRuleReDraw.value = false;
   setTimeout(() => {
-    sketchRuleReDraw.value = true
+    sketchRuleReDraw.value = true;
-  }, 10)
+  }, 10);
-},20)
+};
-
-// 滚动居中
-const canvasPosCenter = () => {
-  const { width: containerWidth, height: containerHeight } = $container.value.getBoundingClientRect()
-  const { width, height } = canvasBox()
-
-  $app.value.scrollLeft = containerWidth / 2 - width / 2
-  $app.value.scrollTop = containerHeight / 2 - height / 2
-}
 
 // 处理主题变化
 watch(
   () => designStore.getDarkTheme,
   () => {
-    reDraw()
+    reDraw();
   }
-)
+);
 
-// // 处理标尺重制大小
-watch(
-  () => scale.value,
-  (newValue, oldValue) => {
-    if (oldValue !== newValue && chartLayoutStore.getRePositionCanvas) {
-      chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.RE_POSITION_CANVAS, false)
-    }
-    handleScroll()
-    setTimeout(() => {
-        canvasPosCenter()
-        reDraw()
-    }, 400)
-  }
-)
 
 // 处理鼠标样式
 watch(
   () => isPressSpace.value,
   newValue => {
-    cursorStyle.value = newValue ? 'grab' : 'auto'
+    cursorStyle.value = newValue ? 'grab' : 'auto';
   }
-)
+);
-
-onMounted(() => {
-  if ($app.value) {
-    $app.value.addEventListener('wheel', handleWheel, { passive: false })
-    canvasPosCenter()
-  }
-})
-
-onUnmounted(() => {
-  if ($app.value) {
-    $app.value.removeEventListener('wheel', handleWheel)
-  }
-})
 
 window.onKeySpacePressHold = (isHold: boolean) => {
-  isPressSpace.value = isHold
+  isPressSpace.value = isHold;
-}
+};
 </script>
 
-<style>
-/* 使用 SCSS 会报错，直接使用最基础的 CSS 进行修改，
-此库有计划 Vue3 版本，但是开发的时候还没发布 */
-#mb-ruler {
-  top: 0;
-  left: 0;
-}
-
-/* 横线 */
-#mb-ruler .v-container .lines .line {
-  /* 最大缩放 200% */
-  width: 200vw !important;
-  border-top: 1px dashed v-bind('themeColor') !important;
-}
-
-#mb-ruler .v-container .indicator {
-  border-bottom: 1px dashed v-bind('themeColor') !important;
-}
-
-/* 竖线 */
-#mb-ruler .h-container .lines .line {
-  /* 最大缩放 200% */
-  height: 200vh !important;
-  border-left: 1px dashed v-bind('themeColor') !important;
-}
-
-#mb-ruler .h-container .indicator {
-  border-left: 1px dashed v-bind('themeColor') !important;
-}
-
-/* 坐标数值背景颜色 */
-#mb-ruler .indicator .value {
-  background-color: rgba(0, 0, 0, 0);
-}
-
-/* 删除按钮 */
-#mb-ruler .line .del {
-  padding: 0;
-  color: v-bind('themeColor');
-  font-size: 26px;
-  font-weight: bolder;
-}
-
-#mb-ruler .corner {
-  border-width: 0 !important;
-}
-</style>
-
 <style lang="scss" scoped>
 @include go('sketch-rule') {
   overflow: hidden;
@@ -323,6 +131,7 @@ window.onKeySpacePressHold = (isHold: boolean) => {
       border-radius: 5px;
       background-color: rgba(144, 146, 152, 0.3);
     }
+
     // 修复右下角白点用的
     &::-webkit-scrollbar-corner {
       background-color: transparent;
@@ -337,28 +146,5 @@ window.onKeySpacePressHold = (isHold: boolean) => {
     height: 10px;
     background-color: $--color-dark-bg-1;
   }
-
-  .edit-screen-container {
-    position: absolute;
-    height: v-bind('containerHeight');
-    top: 0;
-    left: 0;
-  }
-
-  .canvas {
-    position: absolute;
-    top:50%;
-    left: 50%;
-    transform-origin: 50% 0;
-    transform: translateY(-50%);
-
-    &:hover {
-      cursor: v-bind('cursorStyle');
-    }
-
-    &:active {
-      cursor: crosshair;
-    }
-  }
 }
 </style>

src/views/chart/ContentEdit/hooks/useLayout.hook.ts

@@ -6,13 +6,8 @@ const chartEditStore = useChartEditStore()
 
 // 布局处理
 export const useLayout = (fn: () => Promise<void>) => {
-  let removeScale: Function = () => { }
   onMounted(async () => {
     // 设置 Dom 值(ref 不生效先用 document)
-    chartEditStore.setEditCanvas(
-      EditCanvasTypeEnum.EDIT_LAYOUT_DOM,
-      document.getElementById('go-chart-edit-layout')
-    )
     chartEditStore.setEditCanvas(
       EditCanvasTypeEnum.EDIT_CONTENT_DOM,
       document.getElementById('go-chart-edit-content')
@@ -20,14 +15,9 @@ export const useLayout = (fn: () => Promise<void>) => {
 
     // 获取数据
     await fn()
-    // 监听初始化
-    removeScale = chartEditStore.listenerScale()
-
   })
 
   onUnmounted(() => {
-    chartEditStore.setEditCanvas(EditCanvasTypeEnum.EDIT_LAYOUT_DOM, null)
     chartEditStore.setEditCanvas(EditCanvasTypeEnum.EDIT_CONTENT_DOM, null)
-    removeScale()
   })
 }

src/views/chart/ContentEdit/hooks/useStyle.hook.ts

@@ -15,8 +15,8 @@ export const useComponentStyle = (attr: AttrType, index: number) => {
 export const useSizeStyle = (attr: AttrType, scale?: number) => {
   if (!attr) return {}
   return {
-    width: `${scale ? scale * attr.w : attr.w}px`,
+    width: `${attr.w}px`,
-    height: `${scale ? scale * attr.h : attr.h}px`
+    height: `${attr.h}px`
   }
 }
 

src/views/chart/ContentEdit/index.vue

@@ -193,10 +193,8 @@ onMounted(() => {
   @include background-image('background-point');
 
   @include goId('chart-edit-content') {
-    overflow: hidden;
+   // overflow: hidden;
     @extend .go-transition;
-    @include fetch-theme('box-shadow');
-
     .edit-content-chart {
       position: absolute;
       overflow: hidden;