JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-05-04 01:01:13 +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> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, inject, ref } from 'vue'; import { computed, inject, ref, watchEffect } from 'vue';
import type { MApp } from '@tmagic/schema'; 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 pageLength = computed(() => editorService?.get<number>('pageLength') || 0);
const showSrc = computed(() => uiService?.get<boolean>('showSrc')); const showSrc = computed(() => uiService?.get<boolean>('showSrc'));
const columnWidth = ref({ const columnWidth = ref<Partial<GetColumnWidth>>({
left: DEFAULT_LEFT_COLUMN_WIDTH, left: DEFAULT_LEFT_COLUMN_WIDTH,
center: globalThis.document.body.clientWidth - DEFAULT_LEFT_COLUMN_WIDTH - DEFAULT_RIGHT_COLUMN_WIDTH, center: 0,
right: DEFAULT_RIGHT_COLUMN_WIDTH, right: 0,
}); });
uiService?.set('columnWidth', columnWidth.value); 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) => { const saveCode = (value: string) => {
try { try {
// eslint-disable-next-line no-eval // 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, width: 375,
height: 817, height: 817,
}, },
columnWidth: {}, columnWidth: {
left: 0,
right: 0,
center: 0,
},
showGuides: true, showGuides: true,
showRule: true, showRule: true,
propsPanelSize: 'small', propsPanelSize: 'small',
@ -47,11 +51,6 @@ const state = reactive<UiState>({
class Ui extends BaseService { class Ui extends BaseService {
constructor() { constructor() {
super(['zoom', 'calcZoom']); super(['zoom', 'calcZoom']);
globalThis.addEventListener('resize', () => {
this.setColumnWidth({
center: 'auto',
});
});
} }
public set<T = any>(name: keyof UiState, value: T) { public set<T = any>(name: keyof UiState, value: T) {