修复 按住鼠标中键拖动画布，

修改，图片超出显示调整框

package.json

@@ -13,6 +13,7 @@
     "@icon-park/vue-next": "^1.4.2",
     "@types/ali-oss": "^6.16.11",
     "@types/psd": "^3.4.3",
+    "ali-oss": "^6.18.1",
     "animate.css": "^4.1.1",
     "axios": "^1.6.2",
     "chartist": "^1.3.0",

src/store/font.ts

@@ -52,6 +52,7 @@ export const useFontStore = defineStore('fonts',{
                 lock:true,
                 text:'正在加载字体文件'
             })
+           
             let fonts = Array.from(new Set(items))
             for (let i = 0; i < fonts.length; i++) {
                 fonts[i] = fonts[i].split(',')[0]

src/views/Editor/Canvas/index.vue

@@ -19,6 +19,7 @@
     />
     <div 
       class="viewport-wrapper"
+      @mousedown="$event => dragWrapperHandler($event)"
       :style="{
         width: viewportStyles.width * canvasScale + 'px',
         height: viewportStyles.height * canvasScale + 'px',
@@ -57,30 +58,31 @@
         />
         <ViewportBackground />
       </div>
-
-      <div 
-        class="viewport" 
-        ref="viewportRef"
-        :style="{ transform: `scale(${canvasScale})` }"
-      >
-        <MouseSelection 
-          v-if="mouseSelectionVisible"
-          :top="mouseSelection.top" 
-          :left="mouseSelection.left" 
-          :width="mouseSelection.width" 
-          :height="mouseSelection.height" 
-          :quadrant="mouseSelectionQuadrant"
-        />      
-        <EditableElement 
-          v-for="(element, index) in elementList" 
-          :key="element.id"
-          :elementInfo="element"
-          :elementIndex="index + 1"
-          :isMultiSelect="activeElementIdList.length > 1"
-          :selectElement="selectElement"
-          :openLinkDialog="openLinkDialog"
-          v-show="!hiddenElementIdList.includes(element.id)"
-        />
+      <div style="width: 100%;height: 100%;overflow: hidden;">
+        <div 
+          class="viewport" 
+          ref="viewportRef"
+          :style="{ transform: `scale(${canvasScale})` }"
+        >
+          <MouseSelection 
+            v-if="mouseSelectionVisible"
+            :top="mouseSelection.top" 
+            :left="mouseSelection.left" 
+            :width="mouseSelection.width" 
+            :height="mouseSelection.height" 
+            :quadrant="mouseSelectionQuadrant"
+          />      
+          <EditableElement 
+            v-for="(element, index) in elementList" 
+            :key="element.id"
+            :elementInfo="element"
+            :elementIndex="index + 1"
+            :isMultiSelect="activeElementIdList.length > 1"
+            :selectElement="selectElement"
+            :openLinkDialog="openLinkDialog"
+            v-show="!hiddenElementIdList.includes(element.id)"
+          />
+        </div>
       </div>
     </div>
 
@@ -218,7 +220,7 @@ onMounted(() => {
 
 // 点击画布的空白区域：清空焦点元素、设置画布焦点、清除文字选区、清空格式刷状态
 const handleClickBlankArea = (e: MouseEvent) => {
-  
+  console.log(e)
   if (activeElementIdList.value.length) mainStore.setActiveElementIdList([])
   if (!spaceKeyState.value && e.button==0) updateMouseSelection(e)
   else if(e.button==1) dragViewport(e)
@@ -228,6 +230,11 @@ const handleClickBlankArea = (e: MouseEvent) => {
   removeAllRanges()
 }
 
+const dragWrapperHandler = (e: MouseEvent) => {
+  if(e.button==1) dragViewport(e)
+  e.stopPropagation()
+}
+
 // 双击空白处插入文本
 const handleDblClick = (e: MouseEvent) => {
   if (activeElementIdList.value.length || creatingElement.value || creatingCustomShape.value) return
@@ -371,7 +378,6 @@ provide(injectKeySlideScale, canvasScale)
 .viewport-wrapper {
   position: absolute;
   box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
-  overflow: hidden;
 }
 .viewport {
   position: absolute;

src/views/components/element/ImageElement/index.vue

@@ -109,7 +109,7 @@ const filters = computed(() => props.elementInfo.filters)
 const { filter } = useFilter(filters)
 
 const handleSelectElement = (e: MouseEvent | TouchEvent) => {
- 
+  if(e.button && e.button== 1) return
   if (props.elementInfo.lock) {
     if(props.elementInfo.layerName && props.elementInfo.layerName.indexOf('_before')!=-1){
       let targetLayer = props.elementInfo.layerName.split('_before')[0]

src/views/components/element/TextElement/index.vue

@@ -90,6 +90,7 @@ const shadow = computed(() => props.elementInfo.shadow)
 const { shadowStyle } = useElementShadow(shadow)
 
 const handleSelectElement = (e: MouseEvent | TouchEvent, canMove = true) => {
+  if(e.button && e.button== 1) return
   if (props.elementInfo.lock) return
   e.stopPropagation()
 
@@ -205,11 +206,10 @@ watch(isHandleElement, () => {
   }
 }
 .drag-handler {
-  height: 10px;
+  height: 20px;
   position: absolute;
   left: 0;
   right: 0;
-
   &.top {
     top: 0;
   }

yarn.lock

@@ -1551,6 +1551,11 @@
   resolved "https://registry.npmmirror.com/@tsconfig/node16/-/node16-1.0.4.tgz"
   integrity sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==
 
+"@types/ali-oss@^6.16.11":
+  version "6.16.11"
+  resolved "https://registry.yarnpkg.com/@types/ali-oss/-/ali-oss-6.16.11.tgz#a70fc1ef54abb54809405c8b5d77dac06011557c"
+  integrity sha512-/AyemPZy93ZXGzEokMsoPFgjH37snpzH4X/fwans/n63HLaCleriCG3PyrkHCPkgHEc9vj9Uo6paqsBN3vJ3OA==
+
 "@types/body-parser@*":
   version "1.19.5"
   resolved "https://registry.npmmirror.com/@types/body-parser/-/body-parser-1.19.5.tgz"
@@ -1741,6 +1746,22 @@
   resolved "https://registry.npmmirror.com/@types/parse-json/-/parse-json-4.0.2.tgz"
   integrity sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==
 
+"@types/pngjs@*":
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/@types/pngjs/-/pngjs-6.0.4.tgz#9a457aebabd944efde1a773a0fa1d74933e8021b"
+  integrity sha512-atAK9xLKOnxiuArxcHovmnOUUGBZOQ3f0vCf43FnoKs6XnqiambT1kkJWmdo71IR+BoXSh+CueeFR0GfH3dTlQ==
+  dependencies:
+    "@types/node" "*"
+
+"@types/psd@^3.4.3":
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/@types/psd/-/psd-3.4.3.tgz#d2ca425270810bf41c876d88d9abdff0ec00ccb8"
+  integrity sha512-N5UGYfK52V1NSQGRcRiJjPswqXGmN8qNCkLAq/uCXflPOYuz0voGKQNMF1qtZNV7V5/SKcTvyHnIezFpz6JXSQ==
+  dependencies:
+    "@types/node" "*"
+    "@types/pngjs" "*"
+    "@types/rsvp" "*"
+
 "@types/qs@*":
   version "6.9.10"
   resolved "https://registry.npmmirror.com/@types/qs/-/qs-6.9.10.tgz"
@@ -1768,6 +1789,11 @@
   resolved "https://registry.npmmirror.com/@types/retry/-/retry-0.12.0.tgz"
   integrity sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==
 
+"@types/rsvp@*":
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/@types/rsvp/-/rsvp-4.0.8.tgz#79fb4525d7e4c22322bbbee2648fcbf2d6bbb2f8"
+  integrity sha512-OraQXMlBrD3nll0VuEKENY3IoR4N3eDIqElVWo5dSheMveYYMDSIUMbtcI7wOGWyUilLwfaOx9VF8U8LdrHXkg==
+
 "@types/semver@^7.3.12":
   version "7.5.5"
   resolved "https://registry.npmmirror.com/@types/semver/-/semver-7.5.5.tgz"
@@ -6455,6 +6481,11 @@ pkg-types@^1.0.3:
     mlly "^1.2.0"
     pathe "^1.1.0"
 
+pngjs@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.4.0.tgz#99ca7d725965fb655814eaf65f38f12bbdbf555f"
+  integrity sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==
+
 portfinder@^1.0.26:
   version "1.0.32"
   resolved "https://registry.npmmirror.com/portfinder/-/portfinder-1.0.32.tgz"
@@ -6924,6 +6955,13 @@ proxy-from-env@^1.1.0:
   resolved "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
   integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
 
+psd.js@^3.9.0:
+  version "3.9.0"
+  resolved "https://registry.yarnpkg.com/psd.js/-/psd.js-3.9.0.tgz#c95466c33cae16a463d2d843f54d7be0b59106ff"
+  integrity sha512-gTNUszC/hjS+F3O0JkdWOdN7dVZzOaYfyF7X1VD0UOue5iWOaFzfxFbfZgYnXtYS1pze9V10Hd/K0pWY3My54g==
+  dependencies:
+    pngjs "^3.4.0"
+
 pseudomap@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmmirror.com/pseudomap/-/pseudomap-1.0.2.tgz"