From a727d424c7630a420936e85cab9d9061235e5b78 Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Wed, 12 Jun 2024 16:02:15 +0800 Subject: [PATCH] =?UTF-8?q?refactor(=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F):?= =?UTF-8?q?=20=E4=BC=98=E5=8C=96=E8=B7=91=E9=A9=AC=E7=81=AF=E7=9A=84?= =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E9=80=9F=E5=BA=A6=E8=AE=A1=E7=AE=97=E6=96=B9?= =?UTF-8?q?=E5=BC=8F=EF=BC=8C=E4=BB=A5px=E4=B8=BA=E5=8D=95=E4=BD=8D?= =?UTF-8?q?=E5=90=8C=E6=97=B6=E5=85=BC=E9=A1=BE=E7=BC=A9=E6=94=BE=E7=9A=84?= =?UTF-8?q?=E6=95=88=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../data-visualization/canvas/Shape.vue | 4 ++++ .../common/CommonStyleSet.vue | 20 +++++++++--------- .../src/custom-component/component-list.ts | 3 +++ .../scroll-text/Component.vue | 21 ++++++++++++++++--- .../modules/data-visualization/dvMain.ts | 2 ++ 5 files changed, 37 insertions(+), 13 deletions(-) diff --git a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue index b34d2bc013..0cc767b300 100644 --- a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue +++ b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue @@ -508,6 +508,7 @@ const handleMouseDownOnShape = e => { dashboardActive.value && (isFirst || (!tabMoveInActiveId.value && !tabCollisionActiveId.value)) ) { + element.value['dragging'] = true emit('onDragging', e) } @@ -543,6 +544,7 @@ const handleMouseDownOnShape = e => { const up = () => { dashboardActive.value && emit('onMouseUp') + element.value['dragging'] = false hasMove && snapshotStore.recordSnapshotCache('shape-handleMouseDownOnShape-up') // 触发元素停止移动事件，用于隐藏标线 eventBus.emit('unMove') @@ -699,6 +701,7 @@ const handleMouseDownOnPoint = (point, e) => { dvMainStore.setShapeStyle(style, areaData.value.components, 'resize', baseGroupComponentsRadio) // 矩阵逻辑 如果当前是仪表板（矩阵模式）则要进行矩阵重排 dashboardActive.value && emit('onResizing', moveEvent) + element.value['resizing'] = true //如果当前组件是Group分组 则要进行内部组件深度计算 element.value.component === 'Group' && groupSizeStyleAdaptor(element.value) //如果当前画布是Group内部画布 则对应组件定位在resize时要还原到groupStyle中 @@ -712,6 +715,7 @@ const handleMouseDownOnPoint = (point, e) => { const up = () => { dashboardActive.value && emit('onMouseUp') + element.value['resizing'] = false document.removeEventListener('mousemove', move) document.removeEventListener('mouseup', up) needSave && snapshotStore.recordSnapshotCache('shape-handleMouseDownOnPoint-up') diff --git a/core/core-frontend/src/custom-component/common/CommonStyleSet.vue b/core/core-frontend/src/custom-component/common/CommonStyleSet.vue index b54855e0cf..a6fe72ddc5 100644 --- a/core/core-frontend/src/custom-component/common/CommonStyleSet.vue +++ b/core/core-frontend/src/custom-component/common/CommonStyleSet.vue @@ -316,16 +316,16 @@ const fontFamilyList = [ const scrollSpeedList = [ { name: '停止', value: 0 }, - { name: '1', value: 80 }, - { name: '2', value: 60 }, - { name: '3', value: 40 }, - { name: '4', value: 30 }, - { name: '5', value: 20 }, - { name: '6', value: 15 }, - { name: '7', value: 10 }, - { name: '8', value: 8 }, - { name: '9', value: 6 }, - { name: '10', value: 3 } + { name: '10', value: 10 }, + { name: '20', value: 20 }, + { name: '30', value: 30 }, + { name: '40', value: 40 }, + { name: '50', value: 50 }, + { name: '60', value: 60 }, + { name: '70', value: 70 }, + { name: '80', value: 80 }, + { name: '90', value: 90 }, + { name: '100', value: 100 } ] const opacitySizeList = [ diff --git a/core/core-frontend/src/custom-component/component-list.ts b/core/core-frontend/src/custom-component/component-list.ts index 911f774e25..f8a7cb2527 100644 --- a/core/core-frontend/src/custom-component/component-list.ts +++ b/core/core-frontend/src/custom-component/component-list.ts @@ -165,6 +165,9 @@ export const commonAttr = { maintainRadio: false, // 布局时保持宽高比例 aspectRatio: 1, // 锁定时的宽高比例 isShow: true, // 是否显示组件 + // 当前组件动作 + dragging: false, + resizing: false, collapseName: [ 'position', 'background', diff --git a/core/core-frontend/src/custom-component/scroll-text/Component.vue b/core/core-frontend/src/custom-component/scroll-text/Component.vue index c15a17f90c..529f9e3ca9 100644 --- a/core/core-frontend/src/custom-component/scroll-text/Component.vue +++ b/core/core-frontend/src/custom-component/scroll-text/Component.vue @@ -32,7 +32,7 @@ const props = defineProps({ const { element } = toRefs(props) const dvMainStore = dvMainStoreWithOut() -const { editMode, curComponent } = storeToRefs(dvMainStore) +const { editMode, curComponent, canvasStyleData } = storeToRefs(dvMainStore) const onComponentClick = () => { if (curComponent.value.id !== element.value.id) { @@ -94,6 +94,10 @@ const handleBlur = e => { canEdit.value = false } +const marqueeTxt = computed( + () => !canEdit.value && !element.value['resizing'] && !element.value['dragging'] +) + const setEdit = () => { if (element.value['isLock']) return canEdit.value = true @@ -111,7 +115,18 @@ onBeforeUnmount(() => { eventBus.off('componentClick', onComponentClick) }) -const varStyle = computed(() => [{ '--scroll-speed': `${element.value.style.scrollSpeed}s` }]) +// 滚动速度已px为单位 注意 这里的总宽度是还原到缩放前的 这样不同缩放比例下的跑马灯视觉上滚动速度（按照比例）一致 +const varStyle = computed(() => [ + { + '--scroll-speed': `${ + element.value.style.scrollSpeed === 0 || !text.value + ? 0 + : (text.value.clientWidth * 100) / + canvasStyleData.value.scale / + element.value.style.scrollSpeed + }s` + } +]) const textStyle = computed(() => { return { @@ -131,7 +146,7 @@ const textStyle = computed(() => {