JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-04-06 03:57:56 +08:00
Code Issues Projects Releases Wiki Activity

fix(editor): 画布区域不允许宽度为0

Browse Source
This commit is contained in:
roymondchen 2023-11-03 16:40:46 +08:00
parent 2d5b7726ef
commit 1c3f8abaf4
2 changed files with 33 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
packages/editor/src/components/SplitView.vue
View File

@ -1,5 +1,5 @@
<template>
<div ref="el" class="m-editor-layout">
<div ref="el" class="m-editor-layout" :style="`min-width: ${props.minCenter + props.minLeft + props.minRight}px`">
<template v-if="hasLeft && $slots.left">
<div class="m-editor-layout-left" :class="leftClass" :style="`width: ${left}px`">
<slot name="left"></slot>
@ -55,14 +55,18 @@ const el = ref<HTMLElement>();
const hasLeft = computed(() => typeof props.left !== 'undefined');
const hasRight = computed(() => typeof props.right !== 'undefined');
const getCenterWidth = (clientWidth: number, left: number, right: number) => {
const getCenterWidth = (clientWidth: number, l = 0, r = 0) => {
let right = r > 0 ? r : 0;
let left = l > 0 ? l : 0;
let center = clientWidth - left - right;
if (center < props.minCenter) {
center = props.minCenter;
if (left < right) {
right = clientWidth - left - props.minCenter;
if (right > center + props.minRight) {
right = clientWidth - left - center;
} else {
left = clientWidth - right - props.minCenter;
right = props.minRight;
left = clientWidth - right - center;
}
}
return {
@ -141,7 +145,7 @@ const changeRight = ({ deltaX }: OnDrag) => {
right = props.right;
}
const columnWidth = getCenterWidth(clientWidth, props.left || 0, right);
const columnWidth = getCenterWidth(clientWidth, props.left, right);
center.value = columnWidth.center;
@ -151,4 +155,16 @@ const changeRight = ({ deltaX }: OnDrag) => {
right: columnWidth.right,
});
};
defineExpose({
updateWidth() {
const columnWidth = getCenterWidth(el.value?.clientWidth || clientWidth, props.left, props.right);
emit('change', {
left: columnWidth.left,
center: center.value,
right: columnWidth.right,
});
},
});
</script>

32
packages/editor/src/layouts/Framework.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="m-editor" ref="content">
<div class="m-editor" ref="content" style="min-width: 180px">
<slot name="header"></slot>
<slot name="nav"></slot>
@ -12,6 +12,7 @@
<SplitView
v-else
ref="splitView"
class="m-editor-content"
left-class="m-editor-framework-left"
center-class="m-editor-framework-center"
@ -20,6 +21,7 @@
v-model:right="columnWidth.right"
:min-left="65"
:min-right="20"
:min-center="100"
@change="columnWidthChange"
>
<template #left>
@ -70,6 +72,7 @@ const codeOptions = inject('codeOptions', {});
const { editorService, uiService } = inject<Services>('services') || {};
const content = ref<HTMLDivElement>();
const splitView = ref<InstanceType<typeof SplitView>>();
const root = computed(() => editorService?.get('root'));
@ -79,8 +82,10 @@ const showSrc = computed(() => uiService?.get('showSrc'));
const LEFT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorLeftColumnWidthData';
const RIGHT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorRightColumnWidthData';
const leftColumnWidthCacheData = Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY));
const RightColumnWidthCacheData = Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY));
const leftColumnWidthCacheData =
Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_LEFT_COLUMN_WIDTH;
const RightColumnWidthCacheData =
Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_RIGHT_COLUMN_WIDTH;
const columnWidth = ref<Partial<GetColumnWidth>>({
left: leftColumnWidthCacheData,
@ -89,24 +94,9 @@ const columnWidth = ref<Partial<GetColumnWidth>>({
});
watch(
pageLength,
(length) => {
const left = columnWidth.value.left || DEFAULT_LEFT_COLUMN_WIDTH;
columnWidth.value.left = left;
const container = content.value || document.body;
if (length <= 0) {
columnWidth.value.right = undefined;
columnWidth.value.center = container.clientWidth - left;
} else {
const right = columnWidth.value.right || RightColumnWidthCacheData || DEFAULT_RIGHT_COLUMN_WIDTH;
columnWidth.value.right = right;
columnWidth.value.center = container.clientWidth - left - right;
}
uiService?.set('columnWidth', columnWidth.value as GetColumnWidth);
[pageLength, splitView],
() => {
splitView.value?.updateWidth();
},
{
immediate: true,