!68 feat: 组件公共属性滤镜中增添混合模式设置

Merge pull request !68 from dodu/dev-commet

src/components/Pages/ChartItemSetting/StylesSetting.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-show="isGroup">
     <n-divider n-divider style="margin: 10px 0"></n-divider>
-    <n-tag type="warning"> 解散分组「  {{ isCanvas ? '滤镜' : '滤镜 / 变换' }} 」也将消失!</n-tag>
+    <n-tag type="warning"> 解散分组「 {{ isCanvas ? '滤镜' : '滤镜 / 变换' }} 」也将消失!</n-tag>
   </div>
 
   <collapse-item :name="isCanvas ? '滤镜' : '滤镜 / 变换'">
@@ -69,6 +69,13 @@
       </setting-item>
     </setting-item-box>
 
+    <!-- 混合模式 -->
+    <setting-item-box v-if="!isCanvas" name="混合模式" :alone="true">
+      <setting-item name="视频组件需要底色透明一般选中滤色">
+        <n-select size="small" v-model:value="chartStyles.blendMode" :options="BlendModeEnumList"></n-select>
+      </setting-item>
+    </setting-item-box>
+
     <!-- 变换 -->
     <setting-item-box v-if="!isCanvas" name="旋转°">
       <setting-item name="Z轴(平面) - 旋转">
@@ -132,7 +139,7 @@
 
 <script setup lang="ts">
 import { PropType } from 'vue'
-import { PickCreateComponentType } from '@/packages/index.d'
+import { PickCreateComponentType, BlendModeEnumList } from '@/packages/index.d'
 import { SettingItemBox, SettingItem, CollapseItem } from '@/components/Pages/ChartItemSetting'
 
 const props = defineProps({

src/packages/index.d.ts

@@ -38,8 +38,8 @@ interface EchartsDataType {
 
 // 组件状态
 export interface StatusType {
-  lock: boolean,
-  hide: boolean,
+  lock: boolean
+  hide: boolean
 }
 
 // 滤镜/变换枚举
@@ -65,14 +65,36 @@ export enum FilterEnum {
 
   // 倾斜
   SKEW_X = 'skewX',
-  SKEW_Y = 'skewY'
+  SKEW_Y = 'skewY',
+
+  // 混合模式
+  BLEND_MODE = 'blendMode'
 }
 
+export const BlendModeEnumList = [
+  { label: '正常', value: 'normal' },
+  { label: '正片叠底', value: 'multiply' },
+  { label: '叠加', value: 'overlay' },
+  { label: '滤色', value: 'screen' },
+  { label: '变暗', value: 'darken' },
+  { label: '变亮', value: 'lighten' },
+  { label: '颜色减淡', value: 'color-dodge' },
+  { label: '颜色加深', value: 'color-burn;' },
+  { label: '强光', value: 'hard-light' },
+  { label: '柔光', value: 'soft-light' },
+  { label: '差值', value: 'difference' },
+  { label: '排除', value: 'exclusion' },
+  { label: '色相', value: 'hue' },
+  { label: '饱和度', value: 'saturation' },
+  { label: '颜色', value: 'color' },
+  { label: '亮度', value: 'luminosity' }
+]
+
 // 组件实例类
 export interface PublicConfigType {
   id: string
   isGroup: boolean
-  attr: { x: number; y: number; w: number; h: number; zIndex: number; offsetX: number; offsetY: number; }
+  attr: { x: number; y: number; w: number; h: number; zIndex: number; offsetX: number; offsetY: number }
   styles: {
     [FilterEnum.FILTERS_SHOW]: boolean
     [FilterEnum.OPACITY]: number
@@ -87,11 +109,12 @@ export interface PublicConfigType {
 
     [FilterEnum.SKEW_X]: number
     [FilterEnum.SKEW_Y]: number
+    [FilterEnum.BLEND_MODE]: string
     // 动画
     animations: string[]
-  },
+  }
   filter?: string
-  status: StatusType,
+  status: StatusType
   setPosition: Function
 }
 

src/packages/public/publicConfig.ts

@@ -66,6 +66,9 @@ export class PublicConfigClass implements PublicConfigType {
     skewX: 0,
     skewY: 0,
 
+    // 混合模式
+    blendMode: 'normal',
+
     // 动画
     animations: []
   }

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

@@ -77,6 +77,7 @@ export interface EditCanvasConfigType {
   [FilterEnum.ROTATE_Y]: number
   [FilterEnum.SKEW_X]: number
   [FilterEnum.SKEW_Y]: number
+  [FilterEnum.BLEND_MODE]: string
   // 大屏宽度
   [EditCanvasConfigEnum.WIDTH]: number
   // 大屏高度

src/store/modules/chartEditStore/chartEditStore.ts

@@ -97,6 +97,8 @@ export const useChartEditStore = defineStore({
       rotateY: 0,
       skewX: 0,
       skewY: 0,
+      // 混合模式
+      blendMode: 'normal',
       // 默认背景色
       background: undefined,
       backgroundImage: undefined,
@@ -878,7 +880,7 @@ export const useChartEditStore = defineStore({
           const targetItem = this.getComponentList[index]
           targetItem.status.hide = status
 
-          // 历史记录 
+          // 历史记录
           if (isHistory) {
             status
               ? chartHistoryStore.createHideHistory([targetItem])

src/utils/style.ts

@@ -16,11 +16,11 @@ export const animationsClass = (animations: string[]) => {
 
 // * 滤镜
 export const getFilterStyle = (styles?: StylesType | EditCanvasConfigType) => {
-  if(!styles || !styles.filterShow) return {}
+  if (!styles || !styles.filterShow) return {}
   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})`
   }
 }
 
@@ -28,17 +28,28 @@ export const getFilterStyle = (styles?: StylesType | EditCanvasConfigType) => {
 export const getTransformStyle = (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)`,
+    transform: `rotateZ(${rotateZ || 0}deg) rotateX(${rotateX || 0}deg) rotateY(${rotateY || 0}deg) skewX(${
+      skewX || 0
+    }deg) skewY(${skewY || 0}deg)`
+  }
+}
+
+// * 混合模式
+export const getBlendModeStyle = (styles: StylesType) => {
+  if (!styles || !styles.filterShow) return {}
+  const { blendMode } = styles
+  return {
+    'mix-blend-mode': blendMode
   }
 }
 
 /**
- * * hsla 转换 
+ * * hsla 转换
  * @param color 颜色
  * @param alpha 默认1
- * @returns 
+ * @returns
  */
-export function alpha(color: string, alpha = 1 ) {
+export function alpha(color: string, alpha = 1) {
   return Color(color).alpha(alpha).toString()
 }
 
@@ -47,7 +58,7 @@ export function alpha(color: string, alpha = 1 ) {
  * rgba(10, 10, 10, 0.8) -> rgba(10, 10, 10, 0.4)
  * @param color 颜色
  * @param concentration 0~1 浓度
- * @returns 
+ * @returns
  */
 export function fade(color: string, fade: number) {
   return Color(color).fade(fade).toString()
@@ -58,7 +69,7 @@ export function fade(color: string, fade: number) {
  * hsl(100, 50%, 10%) -> hsl(100, 50%, 50%)
  * @param color 颜色
  * @param concentration 0~1 浓度
- * @returns 
+ * @returns
  */
 export function lighten(color: string, concentration: number) {
   return Color(color).lighten(concentration).toString()
@@ -69,7 +80,7 @@ export function lighten(color: string, concentration: number) {
  * hsl(100, 50%, 50%) -> hsl(100, 50%, 25%)
  * @param color 颜色
  * @param concentration 0~1 浓度
- * @returns 
+ * @returns
  */
 export function darken(color: string, concentration: number) {
   return Color(color).darken(concentration).toString()
@@ -88,4 +99,4 @@ export const setHtmlTheme = (themeName?: string) => {
   }
   const designStore = useDesignStore()
   e.setAttribute('data-theme', designStore.themeName)
-}
+}

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

@@ -11,7 +11,8 @@
         ...useComponentStyle(groupData.attr, groupIndex),
         ...useSizeStyle(groupData.attr),
         ...getFilterStyle(groupData.styles),
-        ...getTransformStyle(groupData.styles)
+        ...getTransformStyle(groupData.styles),
+        ...getBlendModeStyle(groupData.styles)
       }"
       @click="mouseClickHandle($event, groupData)"
       @mousedown="mousedownHandle($event, groupData)"
@@ -55,7 +56,7 @@ import { MenuEnum } from '@/enums/editPageEnum'
 import { chartColors } from '@/settings/chartThemes/index'
 import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
 import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d'
-import { animationsClass, getFilterStyle, getTransformStyle } from '@/utils'
+import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useContextMenu, divider } from '@/views/chart/hooks/useContextMenu.hook'
 import { useMouseHandle } from '../../hooks/useDrag.hook'

src/views/chart/ContentEdit/index.vue

@@ -37,7 +37,7 @@
               v-else
               :data-id="item.id"
               :index="index"
-              :style="useComponentStyle(item.attr, index)"
+              :style="{ ...useComponentStyle(item.attr, index), ...getBlendModeStyle(item.styles) }"
               :item="item"
               @click="mouseClickHandle($event, item)"
               @mousedown="mousedownHandle($event, item)"
@@ -81,7 +81,7 @@ import { onMounted, computed } from 'vue'
 import { chartColors } from '@/settings/chartThemes/index'
 import { MenuEnum } from '@/enums/editPageEnum'
 import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
-import { animationsClass, getFilterStyle, getTransformStyle } from '@/utils'
+import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'
 import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
 import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'

src/views/preview/components/PreviewRenderGroup/index.vue

@@ -8,8 +8,9 @@
       ...getComponentAttrStyle(item.attr, groupIndex),
       ...getFilterStyle(item.styles),
       ...getTransformStyle(item.styles),
+      ...getBlendModeStyle(item.styles),
       ...getStatusStyle(item.status)
-    }"
+    } as any"
   >
     <component
       :is="item.chartConfig.chartKey"
@@ -24,7 +25,7 @@
 <script setup lang="ts">
 import { PropType } from 'vue'
 import { CreateComponentGroupType } from '@/packages/index.d'
-import { animationsClass, getFilterStyle, getTransformStyle } from '@/utils'
+import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'
 import { getSizeStyle, getComponentAttrStyle, getStatusStyle } from '../../utils'
 
 const props = defineProps({

src/views/preview/components/PreviewRenderList/index.vue

@@ -8,8 +8,9 @@
       ...getComponentAttrStyle(item.attr, index),
       ...getFilterStyle(item.styles),
       ...getTransformStyle(item.styles),
+      ...getBlendModeStyle(item.styles),
       ...getStatusStyle(item.status)
-    }"
+    } as any"
   >
     <!-- 分组 -->
     <preview-render-group
@@ -38,7 +39,7 @@ import { ChartEditStorageType } from '../../index.d'
 import { PreviewRenderGroup } from '../PreviewRenderGroup/index'
 import { CreateComponentGroupType } from '@/packages/index.d'
 import { chartColors } from '@/settings/chartThemes/index'
-import { animationsClass, getFilterStyle, getTransformStyle } from '@/utils'
+import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'
 import { getSizeStyle, getComponentAttrStyle, getStatusStyle } from '../../utils'
 
 const props = defineProps({

src/views/preview/utils/style.ts

@@ -33,7 +33,7 @@ export const getStatusStyle = (attr: StatusType) => {
 export const getEditCanvasConfigStyle = (canvas: EditCanvasConfigType) => {
   // 背景
   const computedBackground = canvas.selectColor
-    ? { background: canvas.background }
+    ? { background: canvas.background || '#000000' }
     : {
         background: `url(${canvas.backgroundImage}) center center / cover no-repeat !important`
       }