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): layout

Browse Source
This commit is contained in:
roymondchen 2022-09-16 17:57:59 +08:00 committed by jia000
parent d76c753483
commit 30bb39d71a
2 changed files with 20 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -43,7 +43,7 @@
</template>
<script lang="ts" setup>
import { computed, inject, ref } from 'vue';
import { computed, inject, ref, watchEffect } from 'vue';
import type { MApp } from '@tmagic/schema';
@ -70,13 +70,24 @@ const root = computed(() => editorService?.get<MApp>('root'));
const pageLength = computed(() => editorService?.get<number>('pageLength') || 0);
const showSrc = computed(() => uiService?.get<boolean>('showSrc'));
const columnWidth = ref({
const columnWidth = ref<Partial<GetColumnWidth>>({
left: DEFAULT_LEFT_COLUMN_WIDTH,
center: globalThis.document.body.clientWidth - DEFAULT_LEFT_COLUMN_WIDTH - DEFAULT_RIGHT_COLUMN_WIDTH,
right: DEFAULT_RIGHT_COLUMN_WIDTH,
center: 0,
right: 0,
});
uiService?.set('columnWidth', columnWidth.value);
watchEffect(() => {
if (pageLength.value <= 0) {
columnWidth.value.right = undefined;
columnWidth.value.center = globalThis.document.body.clientWidth - DEFAULT_LEFT_COLUMN_WIDTH;
} else {
columnWidth.value.right = columnWidth.value.right || DEFAULT_RIGHT_COLUMN_WIDTH;
columnWidth.value.center =
globalThis.document.body.clientWidth - DEFAULT_LEFT_COLUMN_WIDTH - DEFAULT_RIGHT_COLUMN_WIDTH;
}
});
const saveCode = (value: string) => {
try {
// eslint-disable-next-line no-eval

11
packages/editor/src/services/ui.ts
View File

@ -37,7 +37,11 @@ const state = reactive<UiState>({
width: 375,
height: 817,
},
columnWidth: {},
columnWidth: {
left: 0,
right: 0,
center: 0,
},
showGuides: true,
showRule: true,
propsPanelSize: 'small',
@ -47,11 +51,6 @@ const state = reactive<UiState>({
class Ui extends BaseService {
constructor() {
super(['zoom', 'calcZoom']);
globalThis.addEventListener('resize', () => {
this.setColumnWidth({
center: 'auto',
});
});
}
public set<T = any>(name: keyof UiState, value: T) {