JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-04-05 19:41:40 +08:00
Code Issues Projects Releases Wiki Activity

feat(editor): 样式配置面板支持拖动大小

Browse Source
This commit is contained in:
roymondchen 2024-12-30 20:44:27 +08:00
parent 246e6941d5
commit e8bbdf613b
4 changed files with 33 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,7 +22,7 @@
<script lang="ts" setup>
import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watchEffect } from 'vue';
import { OnDrag } from 'gesto';
import type { OnDrag } from 'gesto';
import Resizer from './Resizer.vue';

18
packages/editor/src/layouts/props-panel/PropsPanel.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="m-editor-props-panel" v-show="nodes.length === 1">
<div ref="propsPanel" class="m-editor-props-panel" v-show="nodes.length === 1">
<slot name="props-panel-header"></slot>
<FormPanel
ref="propertyFormPanel"
@ -15,6 +15,8 @@
@mounted="mountedHandler"
></FormPanel>
<Resizer v-if="showStylePanel" @change="widthChange"></Resizer>
<FormPanel
v-if="showStylePanel"
class="m-editor-props-style-panel"
@ -53,12 +55,14 @@
<script lang="ts" setup>
import { computed, inject, onBeforeUnmount, ref, useTemplateRef, watchEffect } from 'vue';
import { Close, Sugar } from '@element-plus/icons-vue';
import type { OnDrag } from 'gesto';
import type { MNode } from '@tmagic/core';
import { TMagicButton } from '@tmagic/design';
import type { ContainerChangeEventData, FormState, FormValue } from '@tmagic/form';
import MIcon from '@editor/components/Icon.vue';
import Resizer from '@editor/components/Resizer.vue';
import type { PropsPanelSlots, Services } from '@editor/type';
import { styleTabConfig } from '@editor/utils';
@ -134,6 +138,18 @@ const mountedHandler = (e: InstanceType<typeof FormPanel>) => {
emit('mounted', e);
};
const propsPanelEl = useTemplateRef('propsPanel');
const widthChange = ({ deltaX }: OnDrag) => {
if (!propsPanelEl.value) {
return;
}
const width = globalThis.parseFloat(
getComputedStyle(propsPanelEl.value).getPropertyValue('--props-style-panel-width'),
);
propsPanelEl.value.style.setProperty('--props-style-panel-width', `${width - deltaX}px`);
};
const { showStylePanel, showStylePanelHandler, closeStylePanelHandler } = useStylePanel(services);
const propertyFormPanelRef = useTemplateRef<InstanceType<typeof FormPanel>>('propertyFormPanel');

13
packages/editor/src/theme/props-panel.scss
View File

@ -72,6 +72,11 @@
align-items: center;
border-bottom: 2px solid $border-color;
}
.tmagic-design-form {
padding-right: 10px;
padding-left: 10px;
}
}
.m-editor-props-panel-src-icon {
@ -95,6 +100,14 @@
z-index: 10;
}
.m-editor-resizer {
position: absolute;
display: block;
top: 0;
right: var(--props-style-panel-width);
z-index: 13;
}
&.small {
.el-form-item__label {
font-size: 12px;

4
packages/editor/src/theme/resizer.scss
View File

@ -1,6 +1,6 @@
.m-editor-resizer {
border-left: 1px solid transparent;
border-right: 1px solid transparent;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
width: 8px;
margin: 0 -5px;
height: 100%;