From 8bf53a76f8a71eaf261ea68b9ee44e5bf19893aa Mon Sep 17 00:00:00 2001 From: BoBoooooo <17746714@qq.com> Date: Mon, 20 May 2024 15:26:07 +0800 Subject: [PATCH 1/3] fix: prototype2code & go back history error (#156) * fix: snippet import bug * fix: history could back logic bug * fix: editor add left border when in dual mode * fix: setting-form title overflow bug --- packages/core/src/helpers/prototype.ts | 16 ++++++++++------ packages/core/src/models/history.ts | 2 +- packages/designer/src/editor.tsx | 12 ++++++++++-- packages/setting-form/src/form-ui.tsx | 2 ++ 4 files changed, 23 insertions(+), 9 deletions(-) diff --git a/packages/core/src/helpers/prototype.ts b/packages/core/src/helpers/prototype.ts index b59a52ce..710f107f 100644 --- a/packages/core/src/helpers/prototype.ts +++ b/packages/core/src/helpers/prototype.ts @@ -20,6 +20,7 @@ export function prototype2importDeclarationData( relativeFilepath?: string, ): { source: string; specifiers: IImportSpecifierData[] } { let source = prototype.package; + const isSnippet = prototype.type === 'snippet'; if (relativeFilepath && isFilepath(source)) { source = getRelativePath(relativeFilepath, source); } @@ -35,12 +36,15 @@ export function prototype2importDeclarationData( type: 'ImportDefaultSpecifier', }); } else { - [prototype.name, ...(prototype.relatedImports || [])].forEach((item) => { - specifiers.push({ - localName: item, - type: 'ImportSpecifier', - }); - }); + // 忽略代码片段 name + [...(isSnippet ? [] : [prototype.name]), ...(prototype.relatedImports || [])].forEach( + (item) => { + specifiers.push({ + localName: item, + type: 'ImportSpecifier', + }); + }, + ); } return { diff --git a/packages/core/src/models/history.ts b/packages/core/src/models/history.ts index e0b16897..1576303d 100644 --- a/packages/core/src/models/history.ts +++ b/packages/core/src/models/history.ts @@ -58,7 +58,7 @@ export class TangoHistory { } get couldBack() { - return this._records.length > 0 && this._index > -1; + return this._records.length > 0 && this._index > 0; } get couldForward() { diff --git a/packages/designer/src/editor.tsx b/packages/designer/src/editor.tsx index b208f54f..084f951d 100644 --- a/packages/designer/src/editor.tsx +++ b/packages/designer/src/editor.tsx @@ -1,7 +1,7 @@ import React, { useRef, useEffect, useCallback } from 'react'; import { Box } from 'coral-system'; import { MultiEditor, MultiEditorProps } from '@music163/tango-ui'; -import { observer, useWorkspace } from '@music163/tango-context'; +import { observer, useDesigner, useWorkspace } from '@music163/tango-context'; import { isValidCode } from '@music163/tango-core'; import { Modal } from 'antd'; @@ -32,6 +32,7 @@ export const CodeEditor = observer( ({ autoRemoveUnusedImports = true, ...rest }: CodeEditorProps) => { const editorRef = useRef(null); const workspace = useWorkspace(); + const designer = useDesigner(); const files = workspace.listFiles(); const activeFile = workspace.activeFile; @@ -101,8 +102,15 @@ export const CodeEditor = observer( [workspace], ); + const borderStyle = + designer.activeView === 'dual' + ? { + borderLeft: 'solid 1px var(--tango-colors-line2)', + } + : {}; + return ( - + {title} From df3021f75e057e229756b429321c14d181223698 Mon Sep 17 00:00:00 2001 From: BoBoooooo <17746714@qq.com> Date: Mon, 20 May 2024 15:26:46 +0800 Subject: [PATCH 2/3] feat: add history forward & back shortcut key (#154) --- packages/designer/src/dnd/use-dnd.ts | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/designer/src/dnd/use-dnd.ts b/packages/designer/src/dnd/use-dnd.ts index d1daa6ad..91135d5b 100644 --- a/packages/designer/src/dnd/use-dnd.ts +++ b/packages/designer/src/dnd/use-dnd.ts @@ -58,6 +58,12 @@ export function useDnd({ 'command+v,ctrl+v': () => { workspace.pasteSelectedNode(); }, + 'command+z,ctrl+z': () => { + workspace.history.back(); + }, + 'command+shift+z,ctrl+shift+z': () => { + workspace.history.forward(); + }, }); }, [workspace]); @@ -84,10 +90,10 @@ export function useDnd({ const onMouseMove = (e: React.MouseEvent) => { const point = sandboxQuery.getRelativePoint({ x: e.clientX, y: e.clientY }); setElementStyle('.SelectionMask', { - width: Math.abs(selectSource.start?.point.x - point.x) + 'px', - height: Math.abs(selectSource.start?.point.y - point.y) + 'px', - left: Math.min(selectSource.start?.point.x, point.x) + 'px', - top: Math.min(selectSource.start?.point.y, point.y) + 'px', + width: `${Math.abs(selectSource.start?.point.x - point.x)}px`, + height: `${Math.abs(selectSource.start?.point.y - point.y)}px`, + left: `${Math.min(selectSource.start?.point.x, point.x)}px`, + top: `${Math.min(selectSource.start?.point.y, point.y)}px`, }); }; From f854f75b8a8c25384d290bd76d6b8bb6fb69f22d Mon Sep 17 00:00:00 2001 From: BoBoooooo <17746714@qq.com> Date: Mon, 20 May 2024 15:27:32 +0800 Subject: [PATCH 3/3] feat: supoort set default active view (#157) --- apps/playground/src/pages/index.tsx | 1 + packages/core/src/factory.ts | 8 +++++++- packages/core/src/models/designer.ts | 15 ++++++++++++++- 3 files changed, 22 insertions(+), 2 deletions(-) diff --git a/apps/playground/src/pages/index.tsx b/apps/playground/src/pages/index.tsx index 0ffff981..fc871c08 100644 --- a/apps/playground/src/pages/index.tsx +++ b/apps/playground/src/pages/index.tsx @@ -41,6 +41,7 @@ const workspace = new Workspace({ // 2. 引擎初始化 const engine = createEngine({ workspace, + defaultActiveView: 'design', // dual code design }); // @ts-ignore diff --git a/packages/core/src/factory.ts b/packages/core/src/factory.ts index c222ea17..4eb8456d 100644 --- a/packages/core/src/factory.ts +++ b/packages/core/src/factory.ts @@ -1,4 +1,4 @@ -import { Designer, Engine, SimulatorNameType } from './models'; +import { Designer, DesignerViewType, Engine, SimulatorNameType } from './models'; import { IWorkspace } from './models/interfaces'; interface ICreateEngineOptions { @@ -14,6 +14,10 @@ interface ICreateEngineOptions { * 默认激活的侧边栏 */ defaultActiveSidebarPanel?: string; + /** + * 默认激活的视图 + */ + defaultActiveView?: DesignerViewType; } /** @@ -23,6 +27,7 @@ interface ICreateEngineOptions { */ export function createEngine({ workspace, + defaultActiveView = 'design', defaultSimulatorMode = 'desktop', defaultActiveSidebarPanel = '', }: ICreateEngineOptions) { @@ -31,6 +36,7 @@ export function createEngine({ designer: new Designer({ workspace, simulator: defaultSimulatorMode, + activeView: defaultActiveView, activeSidebarPanel: defaultActiveSidebarPanel, }), }); diff --git a/packages/core/src/models/designer.ts b/packages/core/src/models/designer.ts index e472891b..7dcc3989 100644 --- a/packages/core/src/models/designer.ts +++ b/packages/core/src/models/designer.ts @@ -20,6 +20,10 @@ interface IDesignerOptions { workspace: IWorkspace; simulator?: SimulatorNameType | ISimulatorType; activeSidebarPanel?: string; + /** + * 默认激活的视图模式 + */ + activeView?: DesignerViewType; } const ISimulatorTypes: Record = { @@ -112,7 +116,11 @@ export class Designer { constructor(options: IDesignerOptions) { this.workspace = options.workspace; - const { simulator, activeSidebarPanel: defaultActiveSidebarPanel } = options; + const { + simulator, + activeSidebarPanel: defaultActiveSidebarPanel, + activeView: defaultActiveView, + } = options; // 默认设计器模式 if (simulator) { @@ -124,6 +132,11 @@ export class Designer { this.setActiveSidebarPanel(defaultActiveSidebarPanel); } + // 默认激活的视图 + if (defaultActiveView) { + this.setActiveView(defaultActiveView); + } + makeObservable(this, { _simulator: observable, _viewport: observable,