chore: 完善画布属性设置

vangleer · Mar 19, 2024 · 40076e3 · 40076e3
1 parent b0fdc73
commit 40076e3
Show file tree

Hide file tree

Showing 5 changed files with 164 additions and 87 deletions.
diff --git a/packages/editor/src/components/editor/index.vue b/packages/editor/src/components/editor/index.vue
@@ -14,7 +14,7 @@
         :grid-y="gridSize"
         :scaleRatio="scaleRatio"
         boundary
-        markline
+        :markline="data.container.markline.show as any"
         snap
         :snap-threshold="data.container.gridSize"
         @drag-start="onDragstart(item)"

diff --git a/packages/editor/src/components/layout/components/Background.vue b/packages/editor/src/components/layout/components/Background.vue
@@ -1,12 +1,12 @@
 <template>
   <el-row :gutter="10">
     <el-col :span="12">
-      <el-select v-model="type">
+      <el-select v-model="type" @change="handleTypeChange">
         <el-option v-for="item in typeList" v-bind="item" />
       </el-select>
     </el-col>
     <el-col :span="12">
-      <ColorPicker v-if="type === 1" v-model="value" />
+      <ColorPicker v-if="type === 1" v-model="value" color-format="rgb" />
       <el-select v-else v-model="gradientType" @change="handleGradientColorChange(gradientRotate, startColor, endColor)">
         <el-option v-for="item in gradientTypeList" v-bind="item" />
       </el-select>
@@ -31,17 +31,26 @@
 <script setup lang='ts'>
 import { computed, ref } from 'vue'
 import ColorPicker from './ColorPicker.vue'
+import color from 'color'
+
 const props = defineProps({
   modelValue: {
     type: String
   }
 })
 const emit = defineEmits(['update:modelValue'])
+const defaultValueMap: any = {
+  startColor: 'rgba(255, 255, 255, 1)',
+  endColor: 'rgba(255, 255, 255, 1)',
+  gradientRotate: 90
+}
 const value = computed({
-  get: () => props.modelValue,
+  get: () => {
+    return (props.modelValue || '').includes('gradient') ? getGradientValue('startColor') : props.modelValue
+  },
   set: (val) => {
     emit('update:modelValue', val)
-  } 
+  }
 })
 const typeList = [
   { label: '纯色背景', value: 1 },
@@ -74,16 +83,31 @@ const gradientRotate = computed({
   }
 })
 
+function handleTypeChange() {
+  if (type.value === 1) {
+    emit('update:modelValue', value.value)
+  } else {
+    handleGradientColorChange(gradientRotate.value, startColor.value, endColor.value)
+  }
+}
+
 function getGradientValue(type: string) {
-  const gradientString = value.value || ''
+  const gradientString = props.modelValue || 'rgba(255, 255, 255, 1)'
+
+  // 判断是否是渐变
+  const isgradient = gradientString.includes('gradient')
+  if (!isgradient) { // 不是渐变
+    return type === 'startColor' ? color(gradientString).rgb().string() : defaultValueMap[type]
+  }
+
   let gradientRegex = /gradient\((\d+deg),\s*(rgba?\([^)]+\)),\s*(rgba?\([^)]+\))\)/
-  const isRadial = gradientType.value === 'radial'
+  const isRadial = gradientString.includes('radial')
   if (isRadial) {
     gradientRegex = /(gradient)\(.*(rgba?\([^)]+\)),\s*(rgba?\([^)]+\))\)/
   }
 
   const match = gradientString.match(gradientRegex)
-  const defaultValue = type === 'gradientRotate' ? 90 : 'rgba(255, 255, 255, 1)'
+  const defaultValue = defaultValueMap[type]
   if (!match) {
     return defaultValue
   }

diff --git a/packages/editor/src/components/layout/info/EditorStyle.vue b/packages/editor/src/components/layout/info/EditorStyle.vue
@@ -5,56 +5,101 @@
     label-position="left"
     style="padding: 0 10px"
   >
-    <el-form-item label="画布尺寸">
-      <el-select v-model="editorSize">
-        <el-option-group
-          v-for="group in screenSize"
-          :key="group.label"
-          :label="group.label"
-        >
-          <el-option
-            v-for="item in group.options"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-option-group>
-      </el-select>
-    </el-form-item>
-
-    <el-form-item label="缩放比例(%)">
-      <el-input v-model.number="scaleRatio" @change="handleScaleRatioChange" />
-    </el-form-item>
-
-    <el-form-item label="画布宽度">
-      <el-input-number v-model="store.data.container.style.width" />
-    </el-form-item>
-    <el-form-item label="画布高度">
-      <el-input-number v-model="store.data.container.style.height" />
-    </el-form-item>
-
-    <el-form-item label="网格">
-      <el-switch v-model="store.data.container.snapToGrid" />
-    </el-form-item>
-    <el-form-item label="网格大小">
-      <el-input-number v-model="store.data.container.gridSize" />
-    </el-form-item>
-    <el-form-item label="网格颜色">
-      <el-color-picker v-model="store.data.container.gridColor" />
-    </el-form-item>
-
-    <el-form-item label="背景颜色">
-      <el-color-picker v-model="store.data.container.style.backgroundColor" />
-    </el-form-item>
-
-    <el-form-item label="参考线">
-      <el-checkbox v-model="store.data.container.markline.show" />
-    </el-form-item>
+    <el-row :gutter="10">
+      <el-col :span="10">画布尺寸:</el-col>
+      <el-col :span="14">
+        <el-select v-model="editorSize">
+          <el-option-group
+            v-for="group in screenSize"
+            :key="group.label"
+            :label="group.label"
+          >
+            <el-option
+              v-for="item in group.options"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-option-group>
+        </el-select>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="10">
+      <el-col :span="10">缩放比例:</el-col>
+      <el-col :span="14">
+        <el-input v-model.number="scaleRatio" @change="handleScaleRatioChange">
+          <template #suffix>%</template>
+        </el-input>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="10">
+      <el-col :span="10">画布宽度:</el-col>
+      <el-col :span="14">
+        <InputNumber v-model="store.data.container.style.width" />
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="10">
+      <el-col :span="10">画布高度:</el-col>
+      <el-col :span="14">
+        <InputNumber v-model="store.data.container.style.height" />
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="10">
+      <el-col :span="10">画布高度:</el-col>
+      <el-col :span="14">
+        <InputNumber v-model="store.data.container.style.height" />
+      </el-col>
+    </el-row>
+
+    <el-divider />
+
+    <Background v-model="elementBg" />
+    <el-divider />
+
+    <el-row :gutter="10">
+      <el-col :span="10">画布网格:</el-col>
+      <el-col :span="14">
+        <div style="display: flex; justify-content: flex-end;"><el-switch v-model="store.data.container.snapToGrid" /></div>
+      </el-col>
+    </el-row>
+
+    <template v-if="store.data.container.snapToGrid">
+      <el-row :gutter="10">
+        <el-col :span="10">网格大小:</el-col>
+        <el-col :span="14">
+          <InputNumber v-model="store.data.container.gridSize" />
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="10">
+        <el-col :span="10">网格颜色:</el-col>
+        <el-col :span="14">
+          <ColorPicker v-model="store.data.container.gridColor" />
+        </el-col>
+      </el-row>
+    </template>
+
+    <el-divider />
+
+    <el-row :gutter="10">
+      <el-col :span="10">参考线:</el-col>
+      <el-col :span="14">
+        <div style="display: flex; justify-content: flex-end;"><el-switch v-model="store.data.container.markline.show" /></div>
+      </el-col>
+    </el-row>
+
   </el-form>
 </template>
 
 <script setup lang="ts">
-import { useEditorStore } from '@es-drager/editor/src/store'
 import { ref, computed } from 'vue'
+import InputNumber from '../components/InputNumber.vue'
+import Background from '../components/Background.vue'
+import ColorPicker from '../components/ColorPicker.vue'
+import { useEditorStore } from '@es-drager/editor/src/store'
 const store = useEditorStore()
 
 const scaleRatio = ref(100)
@@ -89,6 +134,13 @@ const screenSize = [
   }
 ]
 
+const elementBg = computed<any>({
+  get: () => store.data.container.style.background || store.data.container.style.backgroundColor,
+  set: (val) => {
+    store.data.container.style.background = val
+  }
+})
+
 const handleScaleRatioChange = (val: number) => {
   store.data.container.scaleRatio = val / 100
 }

diff --git a/packages/editor/src/components/layout/info/ElementStyle.vue b/packages/editor/src/components/layout/info/ElementStyle.vue
@@ -113,38 +113,4 @@ function onChange(key: string, value: any) {
     margin-right: 4px;
   }
 }
-:deep(.el-row) {
-  margin-bottom: 10px;
-  .el-button-group, .el-checkbox-group {
-    display: inline-flex;
-    width: 100%;
-  }
-  .el-checkbox-group, .el-checkbox-button__inner {
-    width: 100%;
-  }
-  .el-color-picker.el-tooltip__trigger {
-    width: 100%;
-  }
-  .el-color-picker__trigger {
-    justify-content: flex-start;
-    width: 100%;
-    &:after {
-      content: '';
-      display: inline-block;
-      width: 20px;
-      height: 20px;
-      background: url('../../../assets/images/color.svg') no-repeat;
-      background-size: contain;
-      margin-left: 4px;
-    }
-    .el-color-picker__color {
-      width: calc(100% - 10px);
-    }
-  }
-
-  .el-slider {
-    padding-right: 10px;
-    --el-slider-button-size: 13px;
-  }
-}
 </style>
diff --git a/packages/editor/src/components/layout/info/Info.vue b/packages/editor/src/components/layout/info/Info.vue
@@ -59,6 +59,40 @@ watch(() => store.current.selected, () => {
   padding: 10px;
   height: calc(100% - 40px);
   overflow-y: auto;
+  .el-row {
+    margin-bottom: 10px;
+    .el-button-group, .el-checkbox-group {
+      display: inline-flex;
+      width: 100%;
+    }
+    .el-checkbox-group, .el-checkbox-button__inner {
+      width: 100%;
+    }
+    .el-color-picker.el-tooltip__trigger {
+      width: 100%;
+    }
+    .el-color-picker__trigger {
+      justify-content: flex-start;
+      width: 100%;
+      &:after {
+        content: '';
+        display: inline-block;
+        width: 20px;
+        height: 20px;
+        background: url('../../../assets/images/color.svg') no-repeat;
+        background-size: contain;
+        margin-left: 4px;
+      }
+      .el-color-picker__color {
+        width: calc(100% - 10px);
+      }
+    }
+
+    .el-slider {
+      padding-right: 10px;
+      --el-slider-button-size: 13px;
+    }
+  }
 }
 .es-info-tabs {
   display: flex;
@@ -76,4 +110,5 @@ watch(() => store.current.selected, () => {
     }
   }
 }
+
 </style>