From e2eaa25a97d1464bcd175c84638aa33749b461b5 Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Sat, 6 Jul 2024 21:37:14 +0800 Subject: [PATCH] feat: support custom style for middleware layout selector --- .../src/middleware/layout-selector/config.ts | 12 ++- .../src/middleware/layout-selector/index.ts | 16 ++- .../src/middleware/layout-selector/util.ts | 98 +++++-------------- .../core/src/middleware/selector/index.ts | 1 - packages/figma/src/figma-node/base.ts | 4 +- packages/figma/src/figma-node/node.ts | 6 +- packages/figma/src/figma-object/index.ts | 4 +- packages/idraw/dev/main.ts | 3 + packages/idraw/src/config.ts | 13 ++- packages/idraw/src/index.ts | 3 +- packages/idraw/src/mode.ts | 5 +- packages/types/src/lib/idraw.ts | 3 +- packages/types/src/lib/middleware.ts | 8 +- 13 files changed, 79 insertions(+), 97 deletions(-) diff --git a/packages/core/src/middleware/layout-selector/config.ts b/packages/core/src/middleware/layout-selector/config.ts index b8ef3b36e..493f27d51 100644 --- a/packages/core/src/middleware/layout-selector/config.ts +++ b/packages/core/src/middleware/layout-selector/config.ts @@ -1,3 +1,5 @@ +import type { MiddlewareLayoutSelectorStyle } from '@idraw/types'; + export const key = 'LAYOUT_SELECT'; // export const keyHoverElement = Symbol(`${key}_hoverElementSize`); export const keyLayoutActionType = Symbol(`${key}_layoutActionType`); // 'resize' | null = null; @@ -6,7 +8,11 @@ export const keyLayoutController = Symbol(`${key}_layoutController`); // Element export const keyLayoutIsHover = Symbol(`${key}_layoutIsHover`); // boolean | null export const keyLayoutIsSelected = Symbol(`${key}_layoutIsSelected`); // boolean | null -// export const selectColor = '#1973ba'; -export const selectColor = '#b331c9'; -export const disableColor = '#5b5959b5'; +// const selectColor = '#b331c9'; +// const disabledColor = '#5b5959b5'; + export const controllerSize = 10; + +export const defaultStyle: MiddlewareLayoutSelectorStyle = { + activeColor: '#b331c9' +}; diff --git a/packages/core/src/middleware/layout-selector/index.ts b/packages/core/src/middleware/layout-selector/index.ts index 861edd525..e4d923883 100644 --- a/packages/core/src/middleware/layout-selector/index.ts +++ b/packages/core/src/middleware/layout-selector/index.ts @@ -1,16 +1,22 @@ -import type { BoardMiddleware, ElementSize, Point } from '@idraw/types'; +import type { BoardMiddleware, ElementSize, Point, MiddlewareLayoutSelectorConfig } from '@idraw/types'; import { calcLayoutSizeController, isViewPointInVertexes, getViewScaleInfoFromSnapshot, isViewPointInElementSize, calcViewElementSize } from '@idraw/util'; import type { LayoutSelectorSharedStorage, ControlType } from './types'; -import { keyLayoutActionType, keyLayoutController, keyLayoutControlType, keyLayoutIsHover, keyLayoutIsSelected, controllerSize } from './config'; +import { keyLayoutActionType, keyLayoutController, keyLayoutControlType, keyLayoutIsHover, keyLayoutIsSelected, controllerSize, defaultStyle } from './config'; import { keyActionType as keyElementActionType, keyHoverElement, middlewareEventSelectClear } from '../selector'; import { drawLayoutController, drawLayoutHover } from './util'; import { eventChange } from '../../config'; export { keyLayoutIsSelected }; -export const MiddlewareLayoutSelector: BoardMiddleware = (opts) => { +export const MiddlewareLayoutSelector: BoardMiddleware = (opts, config) => { const { sharer, boardContent, calculator, viewer, eventHub } = opts; const { overlayContext } = boardContent; + const innerConfig = { + ...defaultStyle, + ...config + }; + const { activeColor } = innerConfig; + const style = { activeColor }; let prevPoint: Point | null = null; let prevIsHover: boolean | null = null; @@ -327,11 +333,11 @@ export const MiddlewareLayoutSelector: BoardMiddleware): ElementBaseDet opacity } = node as FigmaNode<'ROUNDED_RECTANGLE'>; const background = figmaPaintsToColor(fillPaints, { - w: node.size.x, - h: node.size.y + w: node?.size?.x || 0, + h: node?.size?.y || 0 }); if (background) { detail.background = background; diff --git a/packages/figma/src/figma-node/node.ts b/packages/figma/src/figma-node/node.ts index 92bf8d90c..02704300f 100644 --- a/packages/figma/src/figma-node/node.ts +++ b/packages/figma/src/figma-node/node.ts @@ -80,16 +80,18 @@ async function nestedNodeToGroupElement(figmaNode as any, opts); const node: FigmaNode = { ...figmaNode, ...overrideData } as FigmaNode; const elemBase = nodeToElementBase(node); + const baseDetail = nodeToBaseDetail(node); + let group: Element<'group'> = { ...elemBase, type: 'group', detail: { + ...baseDetail, children: [], overflow: 'visible' }, operations: nodeToOperations(node) }; - // const baseDetail = nodeToBaseDetail(treeNode.node); if ((node as unknown as FigmaNode<'FRAME'>).type === 'FRAME') { // const background = figmaPaintsToHexColor(node.fillPaints); const background = figmaPaintsToColor(node.fillPaints, { w: elemBase.w, h: elemBase.h }); @@ -117,7 +119,7 @@ async function nestedNodeToGroupElement { const canvasFig: FigmaMap['canvas.fig'] = figmaMap['canvas.fig']; const { root } = canvasFig; - // // TODO - // console.log('root =', root); + // TODO + console.log('root =', root); if (Array.isArray(root.children)) { for (let i = 0; i < root.children.length; i++) { diff --git a/packages/idraw/dev/main.ts b/packages/idraw/dev/main.ts index c741639f1..e7fbdda8c 100644 --- a/packages/idraw/dev/main.ts +++ b/packages/idraw/dev/main.ts @@ -33,6 +33,9 @@ const opts = { hoverThumbBorderColor: '#FF0000EE', activeThumbBackground: '#FF00005E', activeThumbBorderColor: '#FF0000F0' + }, + layoutSelector: { + activeColor: '#00FF00' } } }; diff --git a/packages/idraw/src/config.ts b/packages/idraw/src/config.ts index a21a5393e..21d48b950 100644 --- a/packages/idraw/src/config.ts +++ b/packages/idraw/src/config.ts @@ -21,7 +21,8 @@ export function getDefaultStorage(): IDrawStorage { selector: {}, info: {}, ruler: {}, - scroller: {} + scroller: {}, + layoutSelector: {} } }; return storage; @@ -32,11 +33,12 @@ export function parseStyles(opts: IDrawSettings) { selector: {}, ruler: {}, info: {}, - scroller: {} + scroller: {}, + layoutSelector: {} }; if (opts.styles) { // selector - const { selector, info, ruler, scroller } = opts.styles; + const { selector, info, ruler, scroller, layoutSelector } = opts.styles; if (istype.string(selector?.activeColor)) { styles.selector.activeColor = selector?.activeColor; } @@ -100,6 +102,11 @@ export function parseStyles(opts: IDrawSettings) { if (istype.string(scroller?.activeThumbBorderColor)) { styles.scroller.activeThumbBorderColor = scroller?.activeThumbBorderColor; } + + // layoutSelector + if (istype.string(layoutSelector?.activeColor)) { + styles.layoutSelector.activeColor = layoutSelector?.activeColor; + } } return styles; } diff --git a/packages/idraw/src/index.ts b/packages/idraw/src/index.ts index 59169ce3c..4e3bd51bf 100644 --- a/packages/idraw/src/index.ts +++ b/packages/idraw/src/index.ts @@ -122,7 +122,8 @@ export { calcElementViewRectInfo, calcElementOriginRectInfo, calcElementViewRectInfoMap, - sortElementsViewVisiableInfoMap + sortElementsViewVisiableInfoMap, + flatElementList } from '@idraw/util'; export { iDraw } from './idraw'; export { eventKeys } from './event'; diff --git a/packages/idraw/src/mode.ts b/packages/idraw/src/mode.ts index c105ef0a7..afe11d879 100644 --- a/packages/idraw/src/mode.ts +++ b/packages/idraw/src/mode.ts @@ -27,7 +27,7 @@ export function runMiddlewares(core: Core, store: Store, store: Store let enableTextEdit: boolean = false; let enableDrag: boolean = false; let enableRuler: boolean = false; - const enableInfo: boolean = true; + let enableInfo: boolean = false; let innerMode: IDrawMode = 'select'; store.set('mode', innerMode); @@ -87,6 +87,7 @@ export function changeMode(mode: IDrawMode, core: Core, store: Store enableScale = true; enableScroll = true; enableSelect = true; + enableInfo = true; enableTextEdit = true; enableDrag = false; enableRuler = true; diff --git a/packages/types/src/lib/idraw.ts b/packages/types/src/lib/idraw.ts index 8176e9de2..18206bc52 100644 --- a/packages/types/src/lib/idraw.ts +++ b/packages/types/src/lib/idraw.ts @@ -1,5 +1,5 @@ import type { CoreOptions } from './core'; -import type { MiddlewareSelectorStyle, MiddlewareInfoStyle, MiddlewareRulerStyle, MiddlewareScrollerStyle } from './middleware'; +import type { MiddlewareSelectorStyle, MiddlewareInfoStyle, MiddlewareRulerStyle, MiddlewareScrollerStyle, MiddlewareLayoutSelectorStyle } from './middleware'; export type IDrawMode = 'select' | 'drag' | 'readOnly'; @@ -12,6 +12,7 @@ export interface IDrawSettings { info?: Partial; ruler?: Partial; scroller?: Partial; + layoutSelector?: Partial; }; } diff --git a/packages/types/src/lib/middleware.ts b/packages/types/src/lib/middleware.ts index e8f96ecf9..b43484182 100644 --- a/packages/types/src/lib/middleware.ts +++ b/packages/types/src/lib/middleware.ts @@ -16,7 +16,6 @@ export type MiddlewareInfoStyle = { textBackground: string; textColor: string; }; - export type MiddlewareInfoConfig = MiddlewareInfoStyle & {}; export type MiddlewareRulerStyle = { @@ -28,7 +27,6 @@ export type MiddlewareRulerStyle = { gridPrimaryColor: string; selectedAreaColor: string; }; - export type MiddlewareRulerConfig = MiddlewareRulerStyle & {}; export type MiddlewareScrollerStyle = { @@ -39,5 +37,9 @@ export type MiddlewareScrollerStyle = { activeThumbBackground: string; activeThumbBorderColor: string; }; - export type MiddlewareScrollerConfig = MiddlewareScrollerStyle & {}; + +export type MiddlewareLayoutSelectorStyle = { + activeColor: string; +}; +export type MiddlewareLayoutSelectorConfig = MiddlewareLayoutSelectorStyle & {};