Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[pull] master from Tencent:master #262

Merged
merged 4 commits into from
Mar 15, 2024
Merged

[pull] master from Tencent:master #262

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
36a1a18
fix(editor): 修复第一次打开编辑器左右边栏宽度可能为0问题
Mar 15, 2024
c83e76e
feat(editor): 优化代码块编辑弹窗
Mar 15, 2024
de1711d
feat(editor): 属性面板支持切换源码
Mar 15, 2024
42f1f28
fix(editor): 拖动浮动窗口会导致窗口变大
Mar 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 22 additions & 36 deletions packages/editor/src/components/CodeBlockEditor.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,15 @@
<template>
<!-- 代码块编辑区 -->
<FloatingBox v-model:visible="boxVisible" title="代码编辑" :position="boxPosition" :before-close="beforeClose">
<FloatingBox
v-model:visible="boxVisible"
v-model:width="width"
v-model:height="codeBlockEditorHeight"
:title="content.name ? `${disabled ? '查看' : '编辑'}${content.name}` : '新增代码'"
:position="boxPosition"
:before-close="beforeClose"
>
<template #body>
<div ref="floatingBoxBody"></div>
<div ref="floatingBoxBody" style="height: 100%"></div>
</template>
</FloatingBox>

Expand All @@ -13,18 +20,17 @@
label-width="80px"
:close-on-press-escape="false"
:title="content.name"
:width="size"
:config="functionConfig"
:values="content"
:disabled="disabled"
:height="floatingBoxBody?.clientHeight"
@change="changeHandler"
@submit="submitForm"
@error="errorHandler"
@open="openHandler"
@closed="closedHandler"
>
<template #left>
<TMagicButton type="primary" link @click="difVisible = true">查看修改</TMagicButton>
<TMagicButton v-if="!disabled" type="primary" link @click="difVisible = true">查看修改</TMagicButton>
</template>
</MFormBox>
</Teleport>
Expand All @@ -42,7 +48,7 @@
language="json"
:initValues="content.content"
:modifiedValues="formBox?.form?.values.content"
:style="`height: ${height - 200}px`"
:style="`height: ${windowRect.height - 150}px`"
></CodeEditor>

<template #footer>
Expand All @@ -55,13 +61,15 @@
</template>

<script lang="ts" setup>
import { computed, inject, nextTick, onBeforeUnmount, ref } from 'vue';
import { computed, inject, nextTick, ref } from 'vue';

import { TMagicButton, TMagicDialog, tMagicMessage, tMagicMessageBox, TMagicTag } from '@tmagic/design';
import { ColumnConfig, FormConfig, FormState, MFormBox } from '@tmagic/form';
import type { CodeBlockContent } from '@tmagic/schema';

import FloatingBox from '@editor/components/FloatingBox.vue';
import { useEditorContentHeight } from '@editor/hooks/use-editor-content-height';
import { useWindowRect } from '@editor/hooks/use-window-rect';
import CodeEditor from '@editor/layouts/CodeEditor.vue';
import type { Services, SlideType } from '@editor/type';
import { getConfig } from '@editor/utils/config';
Expand All @@ -70,6 +78,9 @@ defineOptions({
name: 'MEditorCodeBlockEditor',
});

const width = defineModel<number>('width', { default: 670 });
const boxVisible = defineModel<boolean>('visible', { default: false });

const props = defineProps<{
content: CodeBlockContent;
disabled?: boolean;
Expand All @@ -84,18 +95,10 @@ const emit = defineEmits<{

const services = inject<Services>('services');

const difVisible = ref(false);
const height = ref(globalThis.innerHeight);

const windowResizeHandler = () => {
height.value = globalThis.innerHeight;
};

globalThis.addEventListener('resize', windowResizeHandler);
const { height: codeBlockEditorHeight } = useEditorContentHeight();

onBeforeUnmount(() => {
globalThis.removeEventListener('resize', windowResizeHandler);
});
const difVisible = ref(false);
const { rect: windowRect } = useWindowRect();

const magicVsEditor = ref<InstanceType<typeof CodeEditor>>();

Expand All @@ -109,13 +112,6 @@ const diffChange = () => {
difVisible.value = false;
};

const columnWidth = computed(() => services?.uiService.get('columnWidth'));
const size = computed(() =>
columnWidth.value ? columnWidth.value.center + columnWidth.value.right - (props.isDataSource ? 100 : 0) : 600,
);

const codeEditorHeight = ref('600px');

const defaultParamColConfig: ColumnConfig = {
type: 'row',
label: '参数类型',
Expand Down Expand Up @@ -199,7 +195,7 @@ const functionConfig = computed<FormConfig>(() => [
name: 'content',
type: 'vs-code',
options: inject('codeOptions', {}),
height: codeEditorHeight.value,
height: '500px',
onChange: (formState: FormState | undefined, code: string) => {
try {
// 检测js代码是否存在语法错误
Expand All @@ -226,15 +222,6 @@ const errorHandler = (error: any) => {

const formBox = ref<InstanceType<typeof MFormBox>>();

const openHandler = () => {
setTimeout(() => {
if (formBox.value) {
const height = formBox.value?.bodyHeight - 348 - (props.isDataSource ? 50 : 0);
codeEditorHeight.value = `${height > 100 ? height : 600}px`;
}
});
};

const changedValue = ref<CodeBlockContent>();
const changeHandler = (values: CodeBlockContent) => {
changedValue.value = values;
Expand Down Expand Up @@ -270,7 +257,6 @@ const closedHandler = () => {
changedValue.value = undefined;
};

const boxVisible = ref<boolean>(false);
const editVisible = ref<boolean>(false);
const floatingBoxBody = ref<HTMLDivElement>();

Expand Down
71 changes: 38 additions & 33 deletions packages/editor/src/components/FloatingBox.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
<template>
<Teleport to="body" v-if="visible">
<div ref="target" class="m-editor-float-box" :style="{ ...style, zIndex: curZIndex }" @mousedown="nextZIndex">
<div ref="dragTarget" class="m-editor-float-box-title">
<div ref="titleEl" class="m-editor-float-box-title">
<slot name="title">
<span>{{ title }}</span>
</slot>
<div>
<TMagicButton link size="small" :icon="Close" @click="closeHandler"></TMagicButton>
</div>
</div>
<div class="m-editor-float-box-body">
<div class="m-editor-float-box-body" :style="{ height: `${bodyHeight}px` }">
<slot name="body"></slot>
</div>
</div>
</Teleport>
</template>

<script setup lang="ts">
import { computed, nextTick, onBeforeUnmount, ref, watch, watchEffect } from 'vue';
import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
import { Close } from '@element-plus/icons-vue';
import VanillaMoveable from 'moveable';

Expand All @@ -28,54 +28,46 @@ interface Position {
top: number;
}

interface Rect {
width: number | string;
height: number | string;
}
const width = defineModel<number>('width', { default: 0 });
const height = defineModel<number>('height', { default: 0 });
const visible = defineModel<boolean>('visible', { default: false });

const props = withDefaults(
defineProps<{
visible: boolean;
position?: Position;
rect?: Rect;
title?: string;
beforeClose?: (done: (cancel?: boolean) => void) => void;
}>(),
{
visible: false,
title: '',
position: () => ({ left: 0, top: 0 }),
rect: () => ({ width: 'auto', height: 'auto' }),
},
);

const emit = defineEmits<{
'update:visible': [boolean];
}>();

const target = ref<HTMLDivElement>();
const dragTarget = ref<HTMLDivElement>();
const titleEl = ref<HTMLDivElement>();

const zIndex = useZIndex();
const curZIndex = ref<number>(zIndex.nextZIndex());

const rect = ref({
width: props.rect.width,
height: props.rect.height,
});
const titleHeight = ref(0);
const bodyHeight = computed(() => {
if (height.value) {
return height.value - titleHeight.value;
}

watchEffect(() => {
rect.value = {
width: props.rect.width,
height: props.rect.height,
};
if (target.value) {
return target.value.clientHeight - titleHeight.value;
}

return 'auto';
});

const style = computed(() => ({
left: `${props.position.left}px`,
top: `${props.position.top}px`,
width: typeof rect.value.width === 'string' ? rect.value.width : `${rect.value.width}px`,
height: typeof rect.value.height === 'string' ? rect.value.height : `${rect.value.height}px`,
width: width.value ? `${width.value}px` : 'auto',
height: height.value ? `${height.value}px` : 'auto',
}));

let moveable: VanillaMoveable | null = null;
Expand All @@ -90,7 +82,7 @@ const initMoveable = () => {
keepRatio: false,
origin: false,
snappable: true,
dragTarget: dragTarget.value,
dragTarget: titleEl.value,
dragTargetSelf: false,
linePadding: 10,
controlPadding: 10,
Expand All @@ -102,8 +94,8 @@ const initMoveable = () => {
});

moveable.on('resize', (e) => {
rect.value.width = e.width;
rect.value.height = e.height;
width.value = e.width;
height.value = e.height;
e.target.style.width = `${e.width}px`;
e.target.style.height = `${e.height}px`;
e.target.style.transform = e.drag.transform;
Expand All @@ -116,11 +108,22 @@ const destroyMoveable = () => {
};

watch(
() => props.visible,
visible,
async (visible) => {
if (visible) {
await nextTick();
initMoveable();

const targetRect = target.value?.getBoundingClientRect();
if (targetRect) {
width.value = targetRect.width;
height.value = targetRect.height;
initMoveable();
}

if (titleEl.value) {
const titleRect = titleEl.value.getBoundingClientRect();
titleHeight.value = titleRect.height;
}
} else {
destroyMoveable();
}
Expand All @@ -136,7 +139,7 @@ onBeforeUnmount(() => {

const hide = (cancel?: boolean) => {
if (cancel !== false) {
emit('update:visible', false);
visible.value = false;
}
};

Expand All @@ -153,6 +156,8 @@ const nextZIndex = () => {
};

defineExpose({
bodyHeight,
target,
titleEl,
});
</script>
Loading
Loading