From ef9e4c8ea42e3ae4f93870bb38c898b056631fc5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Tue, 3 May 2022 16:24:31 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E6=96=B0=E5=A2=9E=E6=97=8B?=
 =?UTF-8?q?=E8=BD=AC=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ChartItemSetting/PositionSetting.vue      |  2 +-
 .../Pages/ChartItemSetting/StylesSetting.vue  | 62 ++++++++++++++++++-
 src/packages/index.d.ts                       | 36 ++++++++---
 src/packages/public/publicConfig.ts           | 10 +++
 .../components/CanvasPage/index.vue           |  2 +-
 .../components/PreviewRenderList/index.vue    | 11 +++-
 src/views/preview/index.vue                   |  4 +-
 src/views/preview/utils/style.ts              | 12 +++-
 8 files changed, 120 insertions(+), 19 deletions(-)

diff --git a/src/components/Pages/ChartItemSetting/PositionSetting.vue b/src/components/Pages/ChartItemSetting/PositionSetting.vue
index 8e28b70b..173910f5 100644
--- a/src/components/Pages/ChartItemSetting/PositionSetting.vue
+++ b/src/components/Pages/ChartItemSetting/PositionSetting.vue
@@ -20,7 +20,7 @@
       placeholder="px"
     >
       <template #prefix>
-        <n-text depth="3">上边</n-text>
+        <n-text depth="3">上</n-text>
       </template>
     </n-input-number>
     <n-input-number
diff --git a/src/components/Pages/ChartItemSetting/StylesSetting.vue b/src/components/Pages/ChartItemSetting/StylesSetting.vue
index b6dac324..f4e875ec 100644
--- a/src/components/Pages/ChartItemSetting/StylesSetting.vue
+++ b/src/components/Pages/ChartItemSetting/StylesSetting.vue
@@ -1,5 +1,5 @@
 <template>
-  <collapse-item name="滤镜">
+  <collapse-item :name="isCanvas ? '滤镜' : '滤镜 / 变换'">
     <setting-item-box name="色相" :alone="true">
       <setting-item :name="`值：${chartStyles.hueRotate}deg`">
         <!-- 透明度 -->
@@ -68,6 +68,62 @@
         ></n-slider>
       </setting-item>
     </setting-item-box>
+    
+    <!-- 变换 -->
+    <setting-item-box v-if="!isCanvas" name="旋转°">
+      <setting-item name="Z轴(平面) - 旋转">
+        <!-- 透明度 -->
+        <n-input-number
+          v-model:value="chartStyles.rotateZ"
+          :min="0"
+          :max="360"
+          size="small"
+          placeholder="角度"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="X轴 - 旋转">
+        <!-- 透明度 -->
+        <n-input-number
+          v-model:value="chartStyles.rotateX"
+          :min="0"
+          :max="360"
+          size="small"
+          placeholder="角度"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="Y轴 - 旋转">
+        <!-- 透明度 -->
+        <n-input-number
+          v-model:value="chartStyles.rotateY"
+          :min="0"
+          :max="360"
+          size="small"
+          placeholder="角度"
+        ></n-input-number>
+      </setting-item>
+    </setting-item-box>
+
+    <!-- 倾斜 -->
+    <setting-item-box v-if="!isCanvas" name="倾斜°">
+      <setting-item name="X轴 - 倾斜">
+        <n-input-number
+          v-model:value="chartStyles.skewX"
+          :min="0"
+          :max="360"
+          size="small"
+          placeholder="角度"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="Y轴 - 倾斜">
+        <n-input-number
+          v-model:value="chartStyles.skewY"
+          :min="0"
+          :max="360"
+          size="small"
+          placeholder="角度"
+        ></n-input-number>
+      </setting-item>
+    </setting-item-box>
   </collapse-item>
 </template>
 
@@ -81,6 +137,10 @@ import {
 } from '@/components/Pages/ChartItemSetting'
 
 const props = defineProps({
+  isCanvas: {
+    type: Boolean,
+    default: false
+  },
   chartStyles: {
     type: Object as PropType<Omit<PickCreateComponentType<'styles'>, 'animations'>>,
     required: true,
diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts
index a38bb3e1..1c5c2ef7 100644
--- a/src/packages/index.d.ts
+++ b/src/packages/index.d.ts
@@ -26,13 +26,27 @@ interface EchartsDataType {
   source: any[]
 }
 
-// 滤镜枚举
+// 滤镜/变换枚举
 export enum FilterEnum {
-  HUE_ROTATE = 'hueRotate',
-  SATURATE = 'saturate',
-  BRIGHTNESS = 'brightness',
-  CONTRAST = 'contrast',
+  // 透明度
   OPACITY = 'opacity',
+  // 饱和度
+  SATURATE = 'saturate',
+  // 对比度
+  CONTRAST = 'contrast',
+  // 色相
+  HUE_ROTATE = 'hueRotate',
+  // 亮度
+  BRIGHTNESS = 'brightness',
+
+  // 旋转
+  ROTATE_Z = 'rotateZ',
+  ROTATE_X = 'rotateX',
+  ROTATE_Y = 'rotateY',
+
+  // 倾斜
+  SKEW_X = 'skewX',
+  SKEW_Y = 'skewY',
 }
 
 // 组件实例类
@@ -41,16 +55,18 @@ export interface PublicConfigType extends requestConfig {
   rename?: string
   attr: { x: number; y: number; w: number; h: number; zIndex: number }
   styles: {
-    // 透明度
     [FilterEnum.OPACITY]: number;
-    // 饱和度
     [FilterEnum.SATURATE]: number;
-    // 对比度
     [FilterEnum.CONTRAST]: number;
-    // 色相
     [FilterEnum.HUE_ROTATE]: number;
-    // 亮度
     [FilterEnum.BRIGHTNESS]: number;
+
+    [FilterEnum.ROTATE_Z]: number;
+    [FilterEnum.ROTATE_X]: number;
+    [FilterEnum.ROTATE_Y]: number;
+
+    [FilterEnum.SKEW_X]: number;
+    [FilterEnum.SKEW_Y]: number;
     // 动画
     animations: string[]
   }
diff --git a/src/packages/public/publicConfig.ts b/src/packages/public/publicConfig.ts
index 5b50f746..285f4560 100644
--- a/src/packages/public/publicConfig.ts
+++ b/src/packages/public/publicConfig.ts
@@ -27,6 +27,16 @@ export class publicConfig implements PublicConfigType {
     brightness: 1,
     // 透明
     opacity: 1,
+
+    // 旋转
+    rotateZ: 0,
+    rotateX: 0,
+    rotateY: 0,
+
+    // 倾斜
+    skewX: 0,
+    skewY: 0,
+    
     // 动画
     animations: []
   }
diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue
index 3d67971b..a6d0f2d0 100644
--- a/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue
+++ b/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue
@@ -73,7 +73,7 @@
     </n-space>
 
     <!-- 滤镜 -->
-    <styles-setting :chartStyles="canvasConfig"></styles-setting>
+    <styles-setting :is-canvas="true" :chartStyles="canvasConfig"></styles-setting>
     <n-divider style="margin: 10px 0;"></n-divider>
 
     <!-- 主题选择和全局配置 -->
diff --git a/src/views/preview/components/PreviewRenderList/index.vue b/src/views/preview/components/PreviewRenderList/index.vue
index 7a00e179..88714162 100644
--- a/src/views/preview/components/PreviewRenderList/index.vue
+++ b/src/views/preview/components/PreviewRenderList/index.vue
@@ -4,7 +4,11 @@
     :class="animationsClass(item.styles.animations)"
     v-for="(item, index) in localStorageInfo.componentList"
     :key="item.id"
-    :style="{ ...getComponentAttrStyle(item.attr, index), ...getStyle(item.styles)}"
+    :style="{ 
+      ...getComponentAttrStyle(item.attr, index),
+      ...getFilterStyle(item.styles),
+      ...getTranstormStyle(item.styles)
+    }"
   >
     <component
       :is="item.chartConfig.chartKey"
@@ -20,7 +24,8 @@
 import { PropType, computed } from 'vue'
 import { ChartEditStorageType } from '../../index.d'
 import { chartColors } from '@/settings/chartThemes/index'
-import { getSizeStyle, getStyle, getComponentAttrStyle, animationsClass } from '../../utils'
+import { getSizeStyle, getFilterStyle, getTranstormStyle, getComponentAttrStyle, animationsClass } from '../../utils'
+
 
 const props = defineProps({
   localStorageInfo: {
@@ -29,6 +34,8 @@ const props = defineProps({
   }
 })
 
+console.log(getTranstormStyle(props.localStorageInfo.componentList[0].styles))
+
 // 主题色
 const themeSetting = computed(() => {
   const chartThemeSetting = props.localStorageInfo.editCanvasConfig.chartThemeSetting
diff --git a/src/views/preview/index.vue b/src/views/preview/index.vue
index d50bc5b5..951bd415 100644
--- a/src/views/preview/index.vue
+++ b/src/views/preview/index.vue
@@ -16,7 +16,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { PreviewRenderList } from './components/PreviewRenderList'
-import { getEditCanvasConfigStyle, getStyle, getSessionStorageInfo } from './utils'
+import { getEditCanvasConfigStyle, getFilterStyle, getSessionStorageInfo } from './utils'
 import { useComInstall } from './hooks/useComInstall.hook'
 import { useScale } from './hooks/useScale.hook'
 import { useStore } from './hooks/useStore.hook'
@@ -25,7 +25,7 @@ import type { ChartEditStorageType } from './index.d'
 const localStorageInfo: ChartEditStorageType = getSessionStorageInfo() as ChartEditStorageType
 
 const previewRefStyle = computed(() => {
-  return { ...getEditCanvasConfigStyle(localStorageInfo.editCanvasConfig), ...getStyle(localStorageInfo.editCanvasConfig) }
+  return { ...getEditCanvasConfigStyle(localStorageInfo.editCanvasConfig), ...getFilterStyle(localStorageInfo.editCanvasConfig) }
 })
 
 useStore(localStorageInfo)
diff --git a/src/views/preview/utils/style.ts b/src/views/preview/utils/style.ts
index 88923dd1..f9d17000 100644
--- a/src/views/preview/utils/style.ts
+++ b/src/views/preview/utils/style.ts
@@ -47,11 +47,19 @@ export const animationsClass = (animations: string[]) => {
 }
 
 // 滤镜
-export const getStyle = (styles: StylesType | EditCanvasConfigType) => {
+export const getFilterStyle = (styles: StylesType | EditCanvasConfigType) => {
   const { opacity, saturate, contrast, hueRotate, brightness } = styles
   return {
     // 透明度
     opacity: opacity,
-    filter: `saturate(${saturate}) contrast(${contrast}) hue-rotate(${hueRotate}deg) brightness(${brightness})`
+    filter: `saturate(${saturate}) contrast(${contrast}) hue-rotate(${hueRotate}deg) brightness(${brightness})`,
+  }
+}
+
+// 变换
+export const getTranstormStyle = (styles: StylesType) => {
+  const { rotateZ, rotateX, rotateY, skewX, skewY } = styles
+  return {
+    transform: `rotateZ(${rotateZ || 0}deg) rotateX(${rotateX || 0}deg) rotateY(${rotateY || 0}deg) skewX(${skewX || 0}deg) skewY(${skewY || 0}deg)`,
   }
 }