github/tmagic-editor
1
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2026-04-23 18:28:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(editor): 没有参考线时不显示参考线切换按钮

Browse Source 
Made-with: Cursor
This commit is contained in:
roymondchen 2026-04-23 15:42:10 +08:00
parent 6a4a4ed122
commit b46b571214
4 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/editor/src/hooks/use-stage.ts
View File

@ -59,10 +59,12 @@ export const useStage = (stageOptions: StageOptions) => {
}, },
); );
stage.mask?.setGuides([ const hGuidesCache = getGuideLineFromCache(getGuideLineKey(H_GUIDE_LINE_STORAGE_KEY));
getGuideLineFromCache(getGuideLineKey(H_GUIDE_LINE_STORAGE_KEY)), const vGuidesCache = getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY));
getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY)),
]); stage.mask?.setGuides([hGuidesCache, vGuidesCache]);
uiService.set('hasGuides', hGuidesCache.length > 0 || vGuidesCache.length > 0);
stage.on('page-el-update', () => { stage.on('page-el-update', () => {
editorService.set('stageLoading', false); editorService.set('stageLoading', false);
@ -124,6 +126,11 @@ export const useStage = (stageOptions: StageOptions) => {
stage.on('change-guides', (e) => { stage.on('change-guides', (e) => {
uiService.set('showGuides', true); uiService.set('showGuides', true);
uiService.set(
'hasGuides',
(stage.mask?.horizontalGuidelines.length ?? 0) > 0 || (stage.mask?.verticalGuidelines.length ?? 0) > 0,
);
if (!root.value || !page.value) return; if (!root.value || !page.value) return;
const storageKey = getGuideLineKey( const storageKey = getGuideLineKey(

2
packages/editor/src/layouts/NavMenu.vue
View File

@ -37,6 +37,7 @@ const columnWidth = computed(() => uiService.get('columnWidth'));
const keys = Object.values(ColumnLayout); const keys = Object.values(ColumnLayout);
const showGuides = computed((): boolean => uiService.get('showGuides')); const showGuides = computed((): boolean => uiService.get('showGuides'));
const hasGuides = computed((): boolean => uiService.get('hasGuides'));
const showRule = computed((): boolean => uiService.get('showRule')); const showRule = computed((): boolean => uiService.get('showRule'));
const zoom = computed((): number => uiService.get('zoom')); const zoom = computed((): number => uiService.get('zoom'));
@ -143,6 +144,7 @@ const getConfig = (item: MenuItem): (MenuButton | MenuComponent)[] => {
}); });
break; break;
case 'guides': case 'guides':
if (!hasGuides.value) break;
config.push({ config.push({
type: 'button', type: 'button',
className: 'guides', className: 'guides',

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

@ -55,6 +55,7 @@ const state = shallowReactive<UiState>({
DEFAULT_RIGHT_COLUMN_WIDTH, DEFAULT_RIGHT_COLUMN_WIDTH,
}, },
showGuides: true, showGuides: true,
hasGuides: false,
showRule: true, showRule: true,
propsPanelSize: 'small', propsPanelSize: 'small',
showAddPageButton: true, showAddPageButton: true,

2
packages/editor/src/type.ts
View File

@ -253,6 +253,8 @@ export interface UiState {
columnWidth: GetColumnWidth; columnWidth: GetColumnWidth;
/** 是否显示画布参考线，true: 显示，false: 不显示，默认为true */ /** 是否显示画布参考线，true: 显示，false: 不显示，默认为true */
showGuides: boolean; showGuides: boolean;
/** 画布上是否存在参考线 */
hasGuides: boolean;
/** 是否显示标尺，true: 显示，false: 不显示，默认为true */ /** 是否显示标尺，true: 显示，false: 不显示，默认为true */
showRule: boolean; showRule: boolean;
/** 用于控制该属性配置表单内组件的尺寸 */ /** 用于控制该属性配置表单内组件的尺寸 */