JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-09-14 23:59:49 +08:00
Code Issues Projects Releases Wiki Activity

fix(editor): 画布滚动条出现的不准确

Browse Source
This commit is contained in:
roymondchen 2022-11-04 19:39:47 +08:00
parent e8c53c2bd1
commit 8d8ef55b81
3 changed files with 36 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/editor/src/components/ScrollViewer.vue
View File

@ -37,6 +37,10 @@ const props = withDefaults(
wrapWidth?: number; wrapWidth?: number;
wrapHeight?: number; wrapHeight?: number;
zoom?: number; zoom?: number;
correctionScrollSize?: {
width: number;
height: number;
};
}>(), }>(),
{ {
width: 0, width: 0,
@ -44,6 +48,10 @@ const props = withDefaults(
wrapWidth: 0, wrapWidth: 0,
wrapHeight: 0, wrapHeight: 0,
zoom: 1, zoom: 1,
correctionScrollSize: () => ({
width: 0,
height: 0,
}),
}, },
); );
@ -69,6 +77,7 @@ onMounted(() => {
container: container.value, container: container.value,
target: el.value, target: el.value,
zoom: props.zoom, zoom: props.zoom,
correctionScrollSize: props.correctionScrollSize,
}); });
scrollViewer.on('scroll', (data: ScrollViewerEvent) => { scrollViewer.on('scroll', (data: ScrollViewerEvent) => {

14
packages/editor/src/layouts/workspace/Stage.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<scroll-viewer <ScrollViewer
class="m-editor-stage" class="m-editor-stage"
ref="stageWrap" ref="stageWrap"
:width="stageRect?.width" :width="stageRect?.width"
@ -7,6 +7,10 @@
:wrap-width="stageContainerRect?.width" :wrap-width="stageContainerRect?.width"
:wrap-height="stageContainerRect?.height" :wrap-height="stageContainerRect?.height"
:zoom="zoom" :zoom="zoom"
:correction-scroll-size="{
width: 60,
height: 50,
}"
> >
<div <div
class="m-editor-stage-container" class="m-editor-stage-container"
@ -16,10 +20,10 @@
@drop="dropHandler" @drop="dropHandler"
@dragover="dragoverHandler" @dragover="dragoverHandler"
></div> ></div>
<teleport to="body"> <Teleport to="body">
<viewer-menu ref="menu" :is-multi-select="isMultiSelect" :stage-content-menu="stageContentMenu"></viewer-menu> <ViewerMenu ref="menu" :is-multi-select="isMultiSelect" :stage-content-menu="stageContentMenu"></ViewerMenu>
</teleport> </Teleport>
</scroll-viewer> </ScrollViewer>
</template> </template>
<script lang="ts" setup name="MEditorStage"> <script lang="ts" setup name="MEditorStage">

20
packages/editor/src/utils/scroll-viewer.ts
View File

@ -4,6 +4,10 @@ interface ScrollViewerOptions {
container: HTMLDivElement; container: HTMLDivElement;
target: HTMLDivElement; target: HTMLDivElement;
zoom: number; zoom: number;
correctionScrollSize?: {
width: number;
height: number;
};
} }
export class ScrollViewer extends EventEmitter { export class ScrollViewer extends EventEmitter {
@ -23,6 +27,11 @@ export class ScrollViewer extends EventEmitter {
private translateXCorrectionValue = 0; private translateXCorrectionValue = 0;
private translateYCorrectionValue = 0; private translateYCorrectionValue = 0;
private correctionScrollSize = {
width: 0,
height: 0,
};
private resizeObserver = new ResizeObserver(() => { private resizeObserver = new ResizeObserver(() => {
this.setSize(); this.setSize();
this.setScrollSize(); this.setScrollSize();
@ -35,6 +44,13 @@ export class ScrollViewer extends EventEmitter {
this.target = options.target; this.target = options.target;
this.zoom = options.zoom; this.zoom = options.zoom;
if (this.correctionScrollSize) {
this.correctionScrollSize = {
...this.correctionScrollSize,
...options.correctionScrollSize,
};
}
this.container.addEventListener('wheel', this.wheelHandler, false); this.container.addEventListener('wheel', this.wheelHandler, false);
this.setSize(); this.setSize();
@ -109,9 +125,9 @@ export class ScrollViewer extends EventEmitter {
private setScrollSize = () => { private setScrollSize = () => {
const targetRect = this.target.getBoundingClientRect(); const targetRect = this.target.getBoundingClientRect();
this.scrollWidth = targetRect.width * this.zoom + 100; this.scrollWidth = targetRect.width * this.zoom + this.correctionScrollSize.width;
const targetMarginTop = Number(this.target.style.marginTop) || 0; const targetMarginTop = Number(this.target.style.marginTop) || 0;
this.scrollHeight = (targetRect.height + targetMarginTop) * this.zoom + 100; this.scrollHeight = (targetRect.height + targetMarginTop) * this.zoom + this.correctionScrollSize.height;
let left: number | undefined; let left: number | undefined;
let top: number | undefined; let top: number | undefined;