blackteay/go-view
1
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2025-04-06 03:58:04 +08:00
Code Issues Projects Releases Wiki Activity

feat: 新增滤镜同步变化功能

Browse Source
This commit is contained in:
奔跑的面条 2022-05-03 16:43:23 +08:00
parent ab93fa0adf
commit 4b2370f229
2 changed files with 40 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/utils/style.ts
View File

@ -18,7 +18,6 @@ export const animationsClass = (animations: string[]) => {
export const getFilterStyle = (styles: StylesType | EditCanvasConfigType) => { export const getFilterStyle = (styles: StylesType | EditCanvasConfigType) => {
const { opacity, saturate, contrast, hueRotate, brightness } = styles const { opacity, saturate, contrast, hueRotate, brightness } = styles
return { return {
// 透明度
opacity: opacity, opacity: opacity,
filter: `saturate(${saturate}) contrast(${contrast}) hue-rotate(${hueRotate}deg) brightness(${brightness})`, filter: `saturate(${saturate}) contrast(${contrast}) hue-rotate(${hueRotate}deg) brightness(${brightness})`,
} }

70
src/views/chart/ContentEdit/index.vue
View File

@ -14,28 +14,36 @@
<div id="go-chart-edit-content" @contextmenu="handleContextMenu"> <div id="go-chart-edit-content" @contextmenu="handleContextMenu">
<!-- 展示 --> <!-- 展示 -->
<edit-range> <edit-range>
<!-- 图表 --> <!-- 滤镜预览 -->
<edit-shape-box <div :style="getFilterStyle(chartEditStore.getEditCanvasConfig)">
v-for="(item, index) in chartEditStore.getComponentList" <!-- 图表 -->
:key="item.id" <edit-shape-box
:data-id="item.id" v-for="(item, index) in chartEditStore.getComponentList"
:index="index" :key="item.id"
:style="useComponentStyle(item.attr, index)" :data-id="item.id"
:item="item" :index="index"
@mousedown="mousedownHandle($event, item)" :style="useComponentStyle(item.attr, index)"
@mouseenter="mouseenterHandle($event, item)" :item="item"
@mouseleave="mouseleaveHandle($event, item)" @mousedown="mousedownHandle($event, item)"
@contextmenu="handleContextMenu($event, item)" @mouseenter="mouseenterHandle($event, item)"
> @mouseleave="mouseleaveHandle($event, item)"
<component @contextmenu="handleContextMenu($event, item)"
class="edit-content-chart" >
:is="item.chartConfig.chartKey" <component
:chartConfig="item" class="edit-content-chart"
:themeSetting="themeSetting" :class="animationsClass(item.styles.animations)"
:themeColor="themeColor" :is="item.chartConfig.chartKey"
:style="useSizeStyle(item.attr)" :chartConfig="item"
></component> :themeSetting="themeSetting"
</edit-shape-box> :themeColor="themeColor"
:style="{
...useSizeStyle(item.attr),
...getFilterStyle(item.styles),
...getTranstormStyle(item.styles),
}"
></component>
</edit-shape-box>
</div>
</edit-range> </edit-range>
</div> </div>
@ -53,20 +61,22 @@
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, computed } from 'vue' import { onMounted, computed } from 'vue'
import { chartColors } from '@/settings/chartThemes/index'
import { animationsClass, getFilterStyle, getTranstormStyle } from '@/utils'
import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useLayout } from './hooks/useLayout.hook'
import { useAddKeyboard } from '../hooks/useKeyboard.hook'
import { dragHandle, dragoverHandle, useMouseHandle } from './hooks/useDrag.hook'
import { useComponentStyle, useSizeStyle } from './hooks/useStyle.hook'
import { ContentBox } from '../contentBox/index' import { ContentBox } from '../contentBox/index'
import { EditRange } from './components/EditRange' import { EditRange } from './components/EditRange'
import { EditBottom } from './components/EditBottom' import { EditBottom } from './components/EditBottom'
import { EditShapeBox } from './components/EditShapeBox' import { EditShapeBox } from './components/EditShapeBox'
import { EditTools } from './components/EditTools' import { EditTools } from './components/EditTools'
import { useLayout } from './hooks/useLayout.hook'
import { useAddKeyboard } from '../hooks/useKeyboard.hook'
import { dragHandle, dragoverHandle, useMouseHandle } from './hooks/useDrag.hook'
import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useComponentStyle, useSizeStyle } from './hooks/useStyle.hook'
import { chartColors } from '@/settings/chartThemes/index'
const chartEditStore = useChartEditStore() const chartEditStore = useChartEditStore()
const { handleContextMenu } = useContextMenu() const { handleContextMenu } = useContextMenu()