diff --git a/package.json b/package.json index 03bb965..bb62a95 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "private": false, - "version": "0.4.0-beta.30", + "version": "0.4.0-beta.31", "workspaces": [ "packages/*" ], diff --git a/packages/board/package.json b/packages/board/package.json index 946b79d..dfaadcb 100644 --- a/packages/board/package.json +++ b/packages/board/package.json @@ -1,6 +1,6 @@ { "name": "@idraw/board", - "version": "0.4.0-beta.30", + "version": "0.4.0-beta.31", "description": "", "main": "dist/esm/index.js", "module": "dist/esm/index.js", @@ -21,12 +21,12 @@ "author": "chenshenhai", "license": "MIT", "devDependencies": { - "@idraw/types": "workspace:^0.4.0-beta.30" + "@idraw/types": "workspace:^0.4.0-beta.31" }, "dependencies": {}, "peerDependencies": { - "@idraw/util": "workspace:^0.4.0-beta.30", - "@idraw/renderer": "workspace:^0.4.0-beta.30" + "@idraw/util": "workspace:^0.4.0-beta.31", + "@idraw/renderer": "workspace:^0.4.0-beta.31" }, "publishConfig": { "access": "public", diff --git a/packages/board/src/index.ts b/packages/board/src/index.ts index ba8a8b8..5dd0ddd 100644 --- a/packages/board/src/index.ts +++ b/packages/board/src/index.ts @@ -26,6 +26,7 @@ import { Viewer } from './lib/viewer'; interface BoardMiddlewareMapItem { status: 'enable' | 'disable'; middlewareObject: BoardMiddlewareObject; + config: any; } export class Board { @@ -333,7 +334,7 @@ export class Board { return data; } - use(middleware: BoardMiddleware) { + use(middleware: BoardMiddleware, config?: Partial) { if (this.#middlewareMap.has(middleware)) { const item = this.#middlewareMap.get(middleware); if (item) { @@ -350,14 +351,15 @@ export class Board { const calculator = this.#calculator; const eventHub = this.#eventHub; - const obj = middleware({ boardContent, sharer, viewer, calculator, eventHub: eventHub as UtilEventEmitter, container }); + const obj = middleware({ boardContent, sharer, viewer, calculator, eventHub: eventHub as UtilEventEmitter, container }, config); obj.use?.(); this.#middlewares.push(middleware); this.#activeMiddlewareObjs.push(obj); this.#middlewareMap.set(middleware, { status: 'enable', - middlewareObject: obj + middlewareObject: obj, + config }); this.#resetActiveMiddlewareObjs(); } diff --git a/packages/core/package.json b/packages/core/package.json index 410b253..d9361a0 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@idraw/core", - "version": "0.4.0-beta.30", + "version": "0.4.0-beta.31", "description": "", "main": "dist/esm/index.js", "module": "dist/esm/index.js", @@ -21,13 +21,13 @@ "author": "chenshenhai", "license": "MIT", "devDependencies": { - "@idraw/types": "workspace:^0.4.0-beta.30" + "@idraw/types": "workspace:^0.4.0-beta.31" }, "dependencies": {}, "peerDependencies": { - "@idraw/board": "workspace:^0.4.0-beta.30", - "@idraw/renderer": "workspace:^0.4.0-beta.30", - "@idraw/util": "workspace:^0.4.0-beta.30" + "@idraw/board": "workspace:^0.4.0-beta.31", + "@idraw/renderer": "workspace:^0.4.0-beta.31", + "@idraw/util": "workspace:^0.4.0-beta.31" }, "publishConfig": { "access": "public", diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 5ceab0e..27677ab 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -68,11 +68,11 @@ export class Core { container.style.position = 'relative'; } - use(middleware: BoardMiddleware) { - this.#board.use(middleware); + use(middleware: BoardMiddleware, config?: C) { + this.#board.use(middleware, config); } - disuse(middleware: BoardMiddleware) { + disuse(middleware: BoardMiddleware) { this.#board.disuse(middleware); } diff --git a/packages/core/src/middleware/info/config.ts b/packages/core/src/middleware/info/config.ts new file mode 100644 index 0000000..5706495 --- /dev/null +++ b/packages/core/src/middleware/info/config.ts @@ -0,0 +1,12 @@ +import type { MiddlewareInfoStyle } from '@idraw/types'; + +const infoBackground = '#1973bac6'; +const infoTextColor = '#ffffff'; + +export const infoFontSize = 10; +export const infoLineHeight = 16; + +export const defaltStyle: MiddlewareInfoStyle = { + textBackground: infoBackground, + textColor: infoTextColor +}; diff --git a/packages/core/src/middleware/info/draw-info.ts b/packages/core/src/middleware/info/draw-info.ts index 6bca131..3455050 100644 --- a/packages/core/src/middleware/info/draw-info.ts +++ b/packages/core/src/middleware/info/draw-info.ts @@ -1,13 +1,15 @@ import type { PointSize, ViewContext2D } from '@idraw/types'; import { rotateByCenter } from '@idraw/util'; +import type { MiddlewareInfoStyle } from './types'; const fontFamily = 'monospace'; export function drawSizeInfoText( ctx: ViewContext2D, - opts: { point: PointSize; rotateCenter: PointSize; angle: number; text: string; fontSize: number; lineHeight: number; color: string; background: string } + opts: { point: PointSize; rotateCenter: PointSize; angle: number; text: string; fontSize: number; lineHeight: number; style: MiddlewareInfoStyle } ) { - const { point, rotateCenter, angle, text, color, background, fontSize, lineHeight } = opts; + const { point, rotateCenter, angle, text, style, fontSize, lineHeight } = opts; + const { textColor, textBackground } = style; rotateByCenter(ctx, angle, rotateCenter, () => { ctx.$setFont({ @@ -30,7 +32,7 @@ export function drawSizeInfoText( y: point.y }; ctx.setLineDash([]); - ctx.fillStyle = background; + ctx.fillStyle = textBackground; ctx.beginPath(); ctx.moveTo(bgStart.x, bgStart.y); ctx.lineTo(bgEnd.x, bgStart.y); @@ -39,7 +41,7 @@ export function drawSizeInfoText( ctx.closePath(); ctx.fill(); - ctx.fillStyle = color; + ctx.fillStyle = textColor; ctx.textBaseline = 'top'; ctx.fillText(text, textStart.x, textStart.y + padding); }); @@ -47,9 +49,10 @@ export function drawSizeInfoText( export function drawPositionInfoText( ctx: ViewContext2D, - opts: { point: PointSize; rotateCenter: PointSize; angle: number; text: string; fontSize: number; lineHeight: number; color: string; background: string } + opts: { point: PointSize; rotateCenter: PointSize; angle: number; text: string; fontSize: number; lineHeight: number; style: MiddlewareInfoStyle } ) { - const { point, rotateCenter, angle, text, color, background, fontSize, lineHeight } = opts; + const { point, rotateCenter, angle, text, style, fontSize, lineHeight } = opts; + const { textBackground, textColor } = style; rotateByCenter(ctx, angle, rotateCenter, () => { ctx.$setFont({ @@ -72,7 +75,7 @@ export function drawPositionInfoText( y: point.y }; ctx.setLineDash([]); - ctx.fillStyle = background; + ctx.fillStyle = textBackground; ctx.beginPath(); ctx.moveTo(bgStart.x, bgStart.y); ctx.lineTo(bgEnd.x, bgStart.y); @@ -81,7 +84,7 @@ export function drawPositionInfoText( ctx.closePath(); ctx.fill(); - ctx.fillStyle = color; + ctx.fillStyle = textColor; ctx.textBaseline = 'top'; ctx.fillText(text, textStart.x, textStart.y + padding); }); @@ -89,9 +92,10 @@ export function drawPositionInfoText( export function drawAngleInfoText( ctx: ViewContext2D, - opts: { point: PointSize; rotateCenter: PointSize; angle: number; text: string; fontSize: number; lineHeight: number; color: string; background: string } + opts: { point: PointSize; rotateCenter: PointSize; angle: number; text: string; fontSize: number; lineHeight: number; style: MiddlewareInfoStyle } ) { - const { point, rotateCenter, angle, text, color, background, fontSize, lineHeight } = opts; + const { point, rotateCenter, angle, text, style, fontSize, lineHeight } = opts; + const { textBackground, textColor } = style; rotateByCenter(ctx, angle, rotateCenter, () => { ctx.$setFont({ @@ -114,7 +118,7 @@ export function drawAngleInfoText( y: point.y }; ctx.setLineDash([]); - ctx.fillStyle = background; + ctx.fillStyle = textBackground; ctx.beginPath(); ctx.moveTo(bgStart.x, bgStart.y); ctx.lineTo(bgEnd.x, bgStart.y); @@ -123,7 +127,7 @@ export function drawAngleInfoText( ctx.closePath(); ctx.fill(); - ctx.fillStyle = color; + ctx.fillStyle = textColor; ctx.textBaseline = 'top'; ctx.fillText(text, textStart.x, textStart.y + padding); }); diff --git a/packages/core/src/middleware/info/index.ts b/packages/core/src/middleware/info/index.ts index 590ddf6..17c58b3 100644 --- a/packages/core/src/middleware/info/index.ts +++ b/packages/core/src/middleware/info/index.ts @@ -1,17 +1,25 @@ -import type { BoardMiddleware, ViewRectInfo, Element } from '@idraw/types'; +import type { BoardMiddleware, ViewRectInfo, Element, MiddlewareInfoConfig } from '@idraw/types'; import { formatNumber, getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot, createUUID, limitAngle, rotatePoint, parseAngleToRadian } from '@idraw/util'; import { keySelectedElementList, keyActionType, keyGroupQueue } from '../selector'; import { drawSizeInfoText, drawPositionInfoText, drawAngleInfoText } from './draw-info'; import type { DeepInfoSharedStorage } from './types'; +import { defaltStyle } from './config'; -const infoBackground = '#1973bac6'; -const infoTextColor = '#ffffff'; const infoFontSize = 10; const infoLineHeight = 16; -export const MiddlewareInfo: BoardMiddleware = (opts) => { +export const MiddlewareInfo: BoardMiddleware = (opts, config) => { const { boardContent, calculator } = opts; const { overlayContext } = boardContent; + const innerConfig = { + ...defaltStyle, + ...config + }; + const { textBackground, textColor } = innerConfig; + const style = { + textBackground, + textColor + }; return { name: '@middleware/info', @@ -101,8 +109,7 @@ export const MiddlewareInfo: BoardMiddleware = (opts) => text: whText, fontSize: infoFontSize, lineHeight: infoLineHeight, - color: infoTextColor, - background: infoBackground + style }); drawPositionInfoText(overlayContext, { @@ -115,8 +122,7 @@ export const MiddlewareInfo: BoardMiddleware = (opts) => text: xyText, fontSize: infoFontSize, lineHeight: infoLineHeight, - color: infoTextColor, - background: infoBackground + style }); drawAngleInfoText(overlayContext, { @@ -129,8 +135,7 @@ export const MiddlewareInfo: BoardMiddleware = (opts) => text: angleText, fontSize: infoFontSize, lineHeight: infoLineHeight, - color: infoTextColor, - background: infoBackground + style }); } } diff --git a/packages/core/src/middleware/ruler/config.ts b/packages/core/src/middleware/ruler/config.ts new file mode 100644 index 0000000..4c9873d --- /dev/null +++ b/packages/core/src/middleware/ruler/config.ts @@ -0,0 +1,25 @@ +import type { MiddlewareRulerStyle } from '@idraw/types'; + +export const rulerSize = 16; +export const fontSize = 10; +export const fontWeight = 100; +export const lineSize = 1; +export const fontFamily = 'monospace'; + +const background = '#FFFFFFA8'; +const borderColor = '#00000080'; +const scaleColor = '#000000'; +const textColor = '#00000080'; +const gridColor = '#AAAAAA20'; +const gridPrimaryColor = '#AAAAAA40'; +const selectedAreaColor = '#196097'; + +export const defaultStyle: MiddlewareRulerStyle = { + background, + borderColor, + scaleColor, + textColor, + gridColor, + gridPrimaryColor, + selectedAreaColor +}; diff --git a/packages/core/src/middleware/ruler/index.ts b/packages/core/src/middleware/ruler/index.ts index a48747b..5179efe 100644 --- a/packages/core/src/middleware/ruler/index.ts +++ b/packages/core/src/middleware/ruler/index.ts @@ -1,13 +1,29 @@ -import type { BoardMiddleware, CoreEventMap } from '@idraw/types'; +import type { BoardMiddleware, CoreEventMap, MiddlewareRulerConfig } from '@idraw/types'; import { getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from '@idraw/util'; import { drawRulerBackground, drawXRuler, drawYRuler, calcXRulerScaleList, calcYRulerScaleList, drawGrid, drawScrollerSelectedArea } from './util'; import type { DeepRulerSharedStorage } from './types'; +import { defaultStyle } from './config'; export const middlewareEventRuler = '@middleware/show-ruler'; -export const MiddlewareRuler: BoardMiddleware = (opts) => { +export const MiddlewareRuler: BoardMiddleware = (opts, config) => { const { boardContent, viewer, eventHub, calculator } = opts; const { overlayContext, underlayContext } = boardContent; + const innerConfig = { + ...defaultStyle, + ...config + }; + const { background, borderColor, scaleColor, textColor, gridColor, gridPrimaryColor, selectedAreaColor } = innerConfig; + const style = { + background, + borderColor, + scaleColor, + textColor, + gridColor, + gridPrimaryColor, + selectedAreaColor + }; + let show: boolean = true; let showGrid: boolean = true; @@ -37,15 +53,15 @@ export const MiddlewareRuler: BoardMiddleware; calculator: ViewCalculator }) { - const { snapshot, calculator } = opts; +export function drawScrollerSelectedArea( + ctx: ViewContext2D, + opts: { snapshot: BoardViewerFrameSnapshot; calculator: ViewCalculator; style: MiddlewareRulerStyle } +) { + const { snapshot, calculator, style } = opts; const { sharedStore } = snapshot; + const { selectedAreaColor } = style; const selectedElementList = sharedStore[keySelectedElementList]; const actionType = sharedStore[keyActionType]; diff --git a/packages/core/src/middleware/scroller/config.ts b/packages/core/src/middleware/scroller/config.ts index d73fc25..20c1af0 100644 --- a/packages/core/src/middleware/scroller/config.ts +++ b/packages/core/src/middleware/scroller/config.ts @@ -1,3 +1,5 @@ +import type { MiddlewareScrollerStyle } from '@idraw/types'; + export const key = 'SCROLL'; export const keyXThumbRect = Symbol(`${key}_xThumbRect`); export const keyYThumbRect = Symbol(`${key}_yThumbRect`); @@ -6,3 +8,12 @@ export const keyHoverYThumbRect = Symbol(`${key}_hoverYThumbRect`); export const keyPrevPoint = Symbol(`${key}_prevPoint`); export const keyActivePoint = Symbol(`${key}_activePoint`); export const keyActiveThumbType = Symbol(`${key}_activeThumbType`); + +export const defaultStyle: MiddlewareScrollerStyle = { + thumbBackground: '#0000003A', + thumbBorderColor: '#0000008A', + hoverThumbBackground: '#0000005F', + hoverThumbBorderColor: '#000000EE', + activeThumbBackground: '#0000005E', + activeThumbBorderColor: '#000000F0' +}; diff --git a/packages/core/src/middleware/scroller/index.ts b/packages/core/src/middleware/scroller/index.ts index 9ebe297..1f92198 100644 --- a/packages/core/src/middleware/scroller/index.ts +++ b/packages/core/src/middleware/scroller/index.ts @@ -1,16 +1,32 @@ -import type { Point, BoardMiddleware, PointWatcherEvent, BoardWatherWheelEvent } from '@idraw/types'; +import type { Point, BoardMiddleware, PointWatcherEvent, BoardWatherWheelEvent, MiddlewareScrollerConfig } from '@idraw/types'; import { drawScroller, isPointInScrollThumb } from './util'; // import type { ScrollbarThumbType } from './util'; -import { keyXThumbRect, keyYThumbRect, keyPrevPoint, keyActivePoint, keyActiveThumbType, keyHoverXThumbRect, keyHoverYThumbRect } from './config'; +import { keyXThumbRect, keyYThumbRect, keyPrevPoint, keyActivePoint, keyActiveThumbType, keyHoverXThumbRect, keyHoverYThumbRect, defaultStyle } from './config'; import type { DeepScrollerSharedStorage } from './types'; -export const MiddlewareScroller: BoardMiddleware = (opts) => { +export const MiddlewareScroller: BoardMiddleware = (opts, config) => { const { viewer, boardContent, sharer, eventHub } = opts; const { overlayContext } = boardContent; sharer.setSharedStorage(keyXThumbRect, null); // null | ElementSize sharer.setSharedStorage(keyYThumbRect, null); // null | ElementSize let isBusy: boolean = false; + const innerConfig = { + ...defaultStyle, + ...config + }; + + const { thumbBackground, thumbBorderColor, hoverThumbBackground, hoverThumbBorderColor, activeThumbBackground, activeThumbBorderColor } = innerConfig; + + const style = { + thumbBackground, + thumbBorderColor, + hoverThumbBackground, + hoverThumbBorderColor, + activeThumbBackground, + activeThumbBorderColor + }; + // viewer.drawFrame(); const clear = () => { sharer.setSharedStorage(keyPrevPoint, null); // null | Point; @@ -125,7 +141,7 @@ export const MiddlewareScroller: BoardMiddleware = (o } }, beforeDrawFrame({ snapshot }) { - const { xThumbRect, yThumbRect } = drawScroller(overlayContext, { snapshot }); + const { xThumbRect, yThumbRect } = drawScroller(overlayContext, { snapshot, style }); sharer.setSharedStorage(keyXThumbRect, xThumbRect); sharer.setSharedStorage(keyYThumbRect, yThumbRect); } diff --git a/packages/core/src/middleware/scroller/util.ts b/packages/core/src/middleware/scroller/util.ts index 03b262f..5e90e55 100644 --- a/packages/core/src/middleware/scroller/util.ts +++ b/packages/core/src/middleware/scroller/util.ts @@ -1,21 +1,12 @@ -import type { Point, BoardViewerFrameSnapshot, ViewScaleInfo, ViewSizeInfo, ViewContext2D, ElementSize } from '@idraw/types'; +import type { Point, BoardViewerFrameSnapshot, ViewScaleInfo, ViewSizeInfo, ViewContext2D, ElementSize, MiddlewareScrollerStyle } from '@idraw/types'; import { getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from '@idraw/util'; import { keyActivePoint, keyActiveThumbType, keyPrevPoint, keyXThumbRect, keyYThumbRect, keyHoverXThumbRect, keyHoverYThumbRect } from './config'; -const minScrollerWidth = 12; const scrollerLineWidth = 16; -const scrollerThumbAlpha = 0.3; +const minThumbLength = scrollerLineWidth * 2.5; export type ScrollbarThumbType = 'X' | 'Y'; -const scrollConfig = { - width: minScrollerWidth, - thumbColor: '#0000008A', - thumbHoverColor: '#000000EE', - scrollBarColor: '#FFFFFF60', - showScrollBar: false -}; - function isPointAtRect(overlayContext: ViewContext2D, p: Point, rect: ElementSize): boolean { const ctx = overlayContext; const { x, y, w, h } = rect; @@ -69,12 +60,19 @@ function getScrollInfoFromSnapshot(snapshot: BoardViewerFrameSnapshot): ScrollIn return info; } -function calcScrollerInfo(opts: { viewScaleInfo: ViewScaleInfo; viewSizeInfo: ViewSizeInfo; hoverXThumb: boolean | null; hoverYThumb: boolean | null }) { - const { viewScaleInfo, viewSizeInfo, hoverXThumb, hoverYThumb } = opts; +function calcScrollerInfo(opts: { + viewScaleInfo: ViewScaleInfo; + viewSizeInfo: ViewSizeInfo; + hoverXThumb: boolean | null; + hoverYThumb: boolean | null; + style: MiddlewareScrollerStyle; +}) { + const { viewScaleInfo, viewSizeInfo, hoverXThumb, hoverYThumb, style } = opts; const { width, height } = viewSizeInfo; const { offsetTop, offsetBottom, offsetLeft, offsetRight } = viewScaleInfo; - const sliderMinSize = scrollerLineWidth * 2.5; + const sliderMinSize = minThumbLength; const lineSize = scrollerLineWidth; + const { thumbBackground, thumbBorderColor, hoverThumbBackground, hoverThumbBorderColor } = style; let xSize = 0; let ySize = 0; @@ -131,9 +129,11 @@ function calcScrollerInfo(opts: { viewScaleInfo: ViewScaleInfo; viewSizeInfo: Vi ySize, translateY, translateX, - xThumbColor: hoverXThumb ? scrollConfig.thumbHoverColor : scrollConfig.thumbColor, - yThumbColor: hoverYThumb ? scrollConfig.thumbHoverColor : scrollConfig.thumbColor, - scrollBarColor: scrollConfig.scrollBarColor, + xThumbBackground: hoverXThumb ? hoverThumbBackground : thumbBackground, + yThumbBackground: hoverYThumb ? hoverThumbBackground : thumbBackground, + xThumbBorderColor: hoverXThumb ? hoverThumbBorderColor : thumbBorderColor, + yThumbBorderColor: hoverYThumb ? hoverThumbBorderColor : thumbBorderColor, + // scrollBarColor: scrollConfig.scrollBarColor, xThumbRect, yThumbRect }; @@ -149,10 +149,11 @@ function drawScrollerThumb( w: number; h: number; r: number; - color: string; + background: string; + borderColor: string; } ): void { - let { x, y, h, w } = opts; + let { x, y, h, w, background, borderColor } = opts; ctx.save(); ctx.shadowColor = '#FFFFFF'; @@ -160,7 +161,7 @@ function drawScrollerThumb( ctx.shadowOffsetY = 0; ctx.shadowBlur = 1; { - const { color, axis } = opts; + const { axis } = opts; if (axis === 'X') { y = y + h / 4 + 0; h = h / 2; @@ -174,7 +175,7 @@ function drawScrollerThumb( if (w < r * 2 || h < r * 2) { r = 0; } - ctx.globalAlpha = scrollerThumbAlpha; + ctx.globalAlpha = 1; ctx.beginPath(); ctx.moveTo(x + r, y); ctx.arcTo(x + w, y, x + w, y + h, r); @@ -182,13 +183,12 @@ function drawScrollerThumb( ctx.arcTo(x, y + h, x, y, r); ctx.arcTo(x, y, x + w, y, r); ctx.closePath(); - ctx.fillStyle = color; + ctx.fillStyle = background; ctx.fill(); - ctx.globalAlpha = 1; ctx.beginPath(); ctx.lineWidth = 1; - ctx.strokeStyle = color; + ctx.strokeStyle = borderColor; ctx.setLineDash([]); ctx.moveTo(x + r, y); ctx.arcTo(x + w, y, x + w, y + h, r); @@ -201,12 +201,15 @@ function drawScrollerThumb( ctx.restore(); } -function drawScrollerInfo(overlayContext: ViewContext2D, opts: { viewScaleInfo: ViewScaleInfo; viewSizeInfo: ViewSizeInfo; scrollInfo: ScrollInfo }) { +function drawScrollerInfo( + overlayContext: ViewContext2D, + opts: { viewScaleInfo: ViewScaleInfo; viewSizeInfo: ViewSizeInfo; scrollInfo: ScrollInfo; style: MiddlewareScrollerStyle } +) { const ctx = overlayContext; - const { viewScaleInfo, viewSizeInfo, scrollInfo } = opts; + const { viewScaleInfo, viewSizeInfo, scrollInfo, style } = opts; const { activeThumbType, prevPoint, activePoint, hoverXThumb, hoverYThumb } = scrollInfo; - const { width, height } = viewSizeInfo; - const wrapper = calcScrollerInfo({ viewScaleInfo, viewSizeInfo, hoverXThumb, hoverYThumb }); + // const { width, height } = viewSizeInfo; + const wrapper = calcScrollerInfo({ viewScaleInfo, viewSizeInfo, hoverXThumb, hoverYThumb, style }); let xThumbRect: ElementSize = { ...wrapper.xThumbRect }; let yThumbRect: ElementSize = { ...wrapper.yThumbRect }; @@ -220,49 +223,49 @@ function drawScrollerInfo(overlayContext: ViewContext2D, opts: { viewScaleInfo: } } - // x-bar - if (scrollConfig.showScrollBar === true) { - ctx.fillStyle = wrapper.scrollBarColor; - // x-line - ctx.fillRect(0, height - wrapper.lineSize, width, wrapper.lineSize); - } + // // x-bar + // if (scrollConfig.showScrollBar === true) { + // ctx.fillStyle = wrapper.scrollBarColor; + // // x-line + // ctx.fillRect(0, height - wrapper.lineSize, width, wrapper.lineSize); + // } // x-thumb drawScrollerThumb(ctx, { axis: 'X', ...xThumbRect, r: wrapper.lineSize / 2, - color: wrapper.xThumbColor + background: wrapper.xThumbBackground, + borderColor: wrapper.xThumbBorderColor }); - // y-bar - if (scrollConfig.showScrollBar === true) { - ctx.fillStyle = wrapper.scrollBarColor; - // y-line - ctx.fillRect(width - wrapper.lineSize, 0, wrapper.lineSize, height); - } + // // y-bar + // if (scrollConfig.showScrollBar === true) { + // ctx.fillStyle = wrapper.scrollBarColor; + // // y-line + // ctx.fillRect(width - wrapper.lineSize, 0, wrapper.lineSize, height); + // } // y-thumb drawScrollerThumb(ctx, { axis: 'Y', ...yThumbRect, r: wrapper.lineSize / 2, - color: wrapper.yThumbColor + background: wrapper.yThumbBackground, + borderColor: wrapper.yThumbBorderColor }); - ctx.globalAlpha = 1; - return { xThumbRect, yThumbRect }; } -export function drawScroller(ctx: ViewContext2D, opts: { snapshot: BoardViewerFrameSnapshot }) { - const { snapshot } = opts; +export function drawScroller(ctx: ViewContext2D, opts: { snapshot: BoardViewerFrameSnapshot; style: MiddlewareScrollerStyle }) { + const { snapshot, style } = opts; const viewSizeInfo = getViewSizeInfoFromSnapshot(snapshot); const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot); const scrollInfo = getScrollInfoFromSnapshot(snapshot); - const { xThumbRect, yThumbRect } = drawScrollerInfo(ctx, { viewSizeInfo, viewScaleInfo, scrollInfo }); + const { xThumbRect, yThumbRect } = drawScrollerInfo(ctx, { viewSizeInfo, viewScaleInfo, scrollInfo, style }); return { xThumbRect, yThumbRect }; } diff --git a/packages/core/src/middleware/selector/config.ts b/packages/core/src/middleware/selector/config.ts index 6ff2498..d19ca10 100644 --- a/packages/core/src/middleware/selector/config.ts +++ b/packages/core/src/middleware/selector/config.ts @@ -1,3 +1,5 @@ +import type { MiddlewareSelectorStyle } from '@idraw/types'; + export const key = 'SELECT'; // export const keyHoverElement = Symbol(`${key}_hoverElementSize`); export const keyActionType = Symbol(`${key}_actionType`); // 'select' | 'drag-list' | 'drag-list-end' | 'drag' | 'hover' | 'resize' | 'area' | null = null; @@ -27,16 +29,19 @@ export const keyDebugEnd0 = Symbol(`${key}_debug_end0`); export const selectWrapperBorderWidth = 2; export const resizeControllerBorderWidth = 4; export const areaBorderWidth = 1; -export const wrapperColor = '#1973ba'; - -export const lockColor = '#5b5959b5'; - export const controllerSize = 10; -// export const wrapperColor = '#1890ff'; -export const auxiliaryColor = '#f7276e'; +const activeColor = '#1973ba'; +const activeAreaColor = '#1976d21c'; +const lockedColor = '#5b5959b5'; +const referenceColor = '#f7276e'; -export const referenceColor = '#f7276e'; +export const defaultStyle: MiddlewareSelectorStyle = { + activeColor, + activeAreaColor, + lockedColor, + referenceColor +}; export const middlewareEventSelect: string = '@middleware/select'; diff --git a/packages/core/src/middleware/selector/draw-auxiliary.ts b/packages/core/src/middleware/selector/draw-auxiliary.ts index 9bd73be..70249cc 100644 --- a/packages/core/src/middleware/selector/draw-auxiliary.ts +++ b/packages/core/src/middleware/selector/draw-auxiliary.ts @@ -1,5 +1,5 @@ import type { ViewContext2D, Element, ViewScaleInfo, ViewSizeInfo, ViewCalculator, ViewRectInfo } from '@idraw/types'; -import { auxiliaryColor } from './config'; +// import { auxiliaryColor } from './config'; import { drawLine, drawCrossByCenter } from './draw-base'; interface ViewBoxInfo { @@ -23,61 +23,61 @@ function getViewBoxInfo(rectInfo: ViewRectInfo): ViewBoxInfo { return boxInfo; } -export function drawAuxiliaryExperimentBox( - ctx: ViewContext2D, - opts: { - calculator: ViewCalculator; - element: Element | null; - viewScaleInfo: ViewScaleInfo; - viewSizeInfo: ViewSizeInfo; - } -) { - const { element, viewScaleInfo, viewSizeInfo, calculator } = opts; - if (!element) { - return; - } - const viewRectInfo = calculator.calcViewRectInfoFromRange(element.uuid, { viewScaleInfo, viewSizeInfo }); - if (!viewRectInfo) { - return; - } - const lineOpts = { - borderColor: auxiliaryColor, - borderWidth: 1, - lineDash: [] - }; - // drawLine(ctx, viewRectInfo.topLeft, viewRectInfo.topRight, lineOpts); - // drawLine(ctx, viewRectInfo.topRight, viewRectInfo.bottomRight, lineOpts); - // drawLine(ctx, viewRectInfo.bottomRight, viewRectInfo.bottomLeft, lineOpts); - // drawLine(ctx, viewRectInfo.bottomLeft, viewRectInfo.topLeft, lineOpts); +// export function drawAuxiliaryExperimentBox( +// ctx: ViewContext2D, +// opts: { +// calculator: ViewCalculator; +// element: Element | null; +// viewScaleInfo: ViewScaleInfo; +// viewSizeInfo: ViewSizeInfo; +// } +// ) { +// const { element, viewScaleInfo, viewSizeInfo, calculator } = opts; +// if (!element) { +// return; +// } +// const viewRectInfo = calculator.calcViewRectInfoFromRange(element.uuid, { viewScaleInfo, viewSizeInfo }); +// if (!viewRectInfo) { +// return; +// } +// const lineOpts = { +// borderColor: auxiliaryColor, +// borderWidth: 1, +// lineDash: [] +// }; +// // drawLine(ctx, viewRectInfo.topLeft, viewRectInfo.topRight, lineOpts); +// // drawLine(ctx, viewRectInfo.topRight, viewRectInfo.bottomRight, lineOpts); +// // drawLine(ctx, viewRectInfo.bottomRight, viewRectInfo.bottomLeft, lineOpts); +// // drawLine(ctx, viewRectInfo.bottomLeft, viewRectInfo.topLeft, lineOpts); - // // vLine - // drawLine(ctx, { x: viewRectInfo.topLeft.x, y: 0 }, { x: viewRectInfo.topLeft.x, y: viewSizeInfo.height }, lineOpts); - // drawLine(ctx, { x: viewRectInfo.center.x, y: 0 }, { x: viewRectInfo.center.x, y: viewSizeInfo.height }, lineOpts); - // drawLine(ctx, { x: viewRectInfo.bottomRight.x, y: 0 }, { x: viewRectInfo.bottomRight.x, y: viewSizeInfo.height }, lineOpts); - // // hLine - // drawLine(ctx, { x: 0, y: viewRectInfo.topLeft.y }, { x: viewSizeInfo.width, y: viewRectInfo.topLeft.y }, lineOpts); - // drawLine(ctx, { x: 0, y: viewRectInfo.center.y }, { x: viewSizeInfo.width, y: viewRectInfo.center.y }, lineOpts); - // drawLine(ctx, { x: 0, y: viewRectInfo.bottomRight.y }, { x: viewSizeInfo.width, y: viewRectInfo.bottomRight.y }, lineOpts); +// // // vLine +// // drawLine(ctx, { x: viewRectInfo.topLeft.x, y: 0 }, { x: viewRectInfo.topLeft.x, y: viewSizeInfo.height }, lineOpts); +// // drawLine(ctx, { x: viewRectInfo.center.x, y: 0 }, { x: viewRectInfo.center.x, y: viewSizeInfo.height }, lineOpts); +// // drawLine(ctx, { x: viewRectInfo.bottomRight.x, y: 0 }, { x: viewRectInfo.bottomRight.x, y: viewSizeInfo.height }, lineOpts); +// // // hLine +// // drawLine(ctx, { x: 0, y: viewRectInfo.topLeft.y }, { x: viewSizeInfo.width, y: viewRectInfo.topLeft.y }, lineOpts); +// // drawLine(ctx, { x: 0, y: viewRectInfo.center.y }, { x: viewSizeInfo.width, y: viewRectInfo.center.y }, lineOpts); +// // drawLine(ctx, { x: 0, y: viewRectInfo.bottomRight.y }, { x: viewSizeInfo.width, y: viewRectInfo.bottomRight.y }, lineOpts); - const boxInfo = getViewBoxInfo(viewRectInfo); - const { width, height } = viewSizeInfo; - // vLine - drawLine(ctx, { x: boxInfo.minX, y: 0 }, { x: boxInfo.minX, y: height }, lineOpts); - drawLine(ctx, { x: boxInfo.midX, y: 0 }, { x: boxInfo.midX, y: height }, lineOpts); - drawLine(ctx, { x: boxInfo.maxX, y: 0 }, { x: boxInfo.maxX, y: height }, lineOpts); - // hLine - drawLine(ctx, { x: 0, y: boxInfo.minY }, { x: width, y: boxInfo.minY }, lineOpts); - drawLine(ctx, { x: 0, y: boxInfo.midY }, { x: width, y: boxInfo.midY }, lineOpts); - drawLine(ctx, { x: 0, y: boxInfo.maxY }, { x: width, y: boxInfo.maxY }, lineOpts); +// const boxInfo = getViewBoxInfo(viewRectInfo); +// const { width, height } = viewSizeInfo; +// // vLine +// drawLine(ctx, { x: boxInfo.minX, y: 0 }, { x: boxInfo.minX, y: height }, lineOpts); +// drawLine(ctx, { x: boxInfo.midX, y: 0 }, { x: boxInfo.midX, y: height }, lineOpts); +// drawLine(ctx, { x: boxInfo.maxX, y: 0 }, { x: boxInfo.maxX, y: height }, lineOpts); +// // hLine +// drawLine(ctx, { x: 0, y: boxInfo.minY }, { x: width, y: boxInfo.minY }, lineOpts); +// drawLine(ctx, { x: 0, y: boxInfo.midY }, { x: width, y: boxInfo.midY }, lineOpts); +// drawLine(ctx, { x: 0, y: boxInfo.maxY }, { x: width, y: boxInfo.maxY }, lineOpts); - const crossOpts = { ...lineOpts, size: 6 }; - drawCrossByCenter(ctx, viewRectInfo.center, crossOpts); - drawCrossByCenter(ctx, viewRectInfo.topLeft, crossOpts); - drawCrossByCenter(ctx, viewRectInfo.topRight, crossOpts); - drawCrossByCenter(ctx, viewRectInfo.bottomLeft, crossOpts); - drawCrossByCenter(ctx, viewRectInfo.bottomRight, crossOpts); - drawCrossByCenter(ctx, viewRectInfo.top, crossOpts); - drawCrossByCenter(ctx, viewRectInfo.right, crossOpts); - drawCrossByCenter(ctx, viewRectInfo.bottom, crossOpts); - drawCrossByCenter(ctx, viewRectInfo.left, crossOpts); -} +// const crossOpts = { ...lineOpts, size: 6 }; +// drawCrossByCenter(ctx, viewRectInfo.center, crossOpts); +// drawCrossByCenter(ctx, viewRectInfo.topLeft, crossOpts); +// drawCrossByCenter(ctx, viewRectInfo.topRight, crossOpts); +// drawCrossByCenter(ctx, viewRectInfo.bottomLeft, crossOpts); +// drawCrossByCenter(ctx, viewRectInfo.bottomRight, crossOpts); +// drawCrossByCenter(ctx, viewRectInfo.top, crossOpts); +// drawCrossByCenter(ctx, viewRectInfo.right, crossOpts); +// drawCrossByCenter(ctx, viewRectInfo.bottom, crossOpts); +// drawCrossByCenter(ctx, viewRectInfo.left, crossOpts); +// } diff --git a/packages/core/src/middleware/selector/draw-reference.ts b/packages/core/src/middleware/selector/draw-reference.ts index 00ef495..79c87b5 100644 --- a/packages/core/src/middleware/selector/draw-reference.ts +++ b/packages/core/src/middleware/selector/draw-reference.ts @@ -1,5 +1,5 @@ import type { ViewContext2D, PointSize } from '@idraw/types'; -import { referenceColor } from './config'; +import { MiddlewareSelectorStyle } from './types'; import { drawLine, drawCrossByCenter } from './draw-base'; export function drawReferenceLines( @@ -7,9 +7,11 @@ export function drawReferenceLines( opts: { xLines?: Array; yLines?: Array; + style: MiddlewareSelectorStyle; } ) { - const { xLines, yLines } = opts; + const { xLines, yLines, style } = opts; + const { referenceColor } = style; const lineOpts = { borderColor: referenceColor, borderWidth: 1, diff --git a/packages/core/src/middleware/selector/draw-wrapper.ts b/packages/core/src/middleware/selector/draw-wrapper.ts index 61af35b..ff6d6f1 100644 --- a/packages/core/src/middleware/selector/draw-wrapper.ts +++ b/packages/core/src/middleware/selector/draw-wrapper.ts @@ -11,8 +11,8 @@ import type { ViewCalculator } from '@idraw/types'; import { rotateElementVertexes, calcViewPointSize, calcViewVertexes, calcViewElementSize } from '@idraw/util'; -import type { AreaSize } from './types'; -import { resizeControllerBorderWidth, areaBorderWidth, wrapperColor, selectWrapperBorderWidth, lockColor, controllerSize } from './config'; +import type { AreaSize, MiddlewareSelectorStyle } from './types'; +import { resizeControllerBorderWidth, areaBorderWidth, selectWrapperBorderWidth, controllerSize } from './config'; import { drawVertexes, drawLine, drawCircleController, drawCrossVertexes } from './draw-base'; // import { drawAuxiliaryExperimentBox } from './draw-auxiliary'; @@ -22,12 +22,15 @@ export function drawHoverVertexesWrapper( opts: { viewScaleInfo: ViewScaleInfo; viewSizeInfo: ViewSizeInfo; + style: MiddlewareSelectorStyle; } ) { if (!vertexes) { return; } - const wrapperOpts = { borderColor: wrapperColor, borderWidth: 1, background: 'transparent', lineDash: [] }; + const { style } = opts; + const { activeColor } = style; + const wrapperOpts = { borderColor: activeColor, borderWidth: 1, background: 'transparent', lineDash: [] }; drawVertexes(ctx, calcViewVertexes(vertexes, opts), wrapperOpts); } @@ -38,18 +41,22 @@ export function drawLockVertexesWrapper( viewScaleInfo: ViewScaleInfo; viewSizeInfo: ViewSizeInfo; controller?: ElementSizeController | null; + style: MiddlewareSelectorStyle; } ) { if (!vertexes) { return; } - const wrapperOpts = { borderColor: lockColor, borderWidth: 1, background: 'transparent', lineDash: [] }; + + const { style } = opts; + const { lockedColor } = style; + const wrapperOpts = { borderColor: lockedColor, borderWidth: 1, background: 'transparent', lineDash: [] }; drawVertexes(ctx, calcViewVertexes(vertexes, opts), wrapperOpts); const { controller } = opts; if (controller) { const { topLeft, topRight, bottomLeft, bottomRight, topMiddle, bottomMiddle, leftMiddle, rightMiddle } = controller; - const ctrlOpts = { ...wrapperOpts, borderWidth: 1, background: lockColor }; + const ctrlOpts = { ...wrapperOpts, borderWidth: 1, background: lockedColor }; drawCrossVertexes(ctx, calcViewVertexes(topMiddle.vertexes, opts), ctrlOpts); drawCrossVertexes(ctx, calcViewVertexes(bottomMiddle.vertexes, opts), ctrlOpts); @@ -72,17 +79,21 @@ export function drawSelectedElementControllersVertexes( viewSizeInfo: ViewSizeInfo; element: Element | null; calculator: ViewCalculator; + style: MiddlewareSelectorStyle; } ) { if (!controller) { return; } const { - hideControllers + hideControllers, + style // calculator, element, viewScaleInfo, viewSizeInfo } = opts; + + const { activeColor } = style; const { elementWrapper, topLeft, topRight, bottomLeft, bottomRight, top, rotate } = controller; - const wrapperOpts = { borderColor: wrapperColor, borderWidth: selectWrapperBorderWidth, background: 'transparent', lineDash: [] }; + const wrapperOpts = { borderColor: activeColor, borderWidth: selectWrapperBorderWidth, background: 'transparent', lineDash: [] }; const ctrlOpts = { ...wrapperOpts, borderWidth: resizeControllerBorderWidth, background: '#FFFFFF' }; drawVertexes(ctx, calcViewVertexes(elementWrapper, opts), wrapperOpts); @@ -137,12 +148,13 @@ export function drawElementListShadows(ctx: ViewContext2D, elements: Element = (opts) => { +export const MiddlewareSelector: BoardMiddleware = (opts, config) => { + const innerConfig = { + ...defaultStyle, + ...config + }; + const { activeColor, activeAreaColor, lockedColor, referenceColor } = innerConfig; + const style = { activeColor, activeAreaColor, lockedColor, referenceColor }; const { viewer, sharer, boardContent, calculator, eventHub } = opts; const { overlayContext } = boardContent; let prevPoint: Point | null = null; @@ -742,7 +758,7 @@ export const MiddlewareSelector: BoardMiddleware = { +export const defaultSettings: Required> = { mode: defaultMode }; @@ -15,7 +16,90 @@ export function getDefaultStorage(): IDrawStorage { enableSelect: false, enableTextEdit: false, enableDrag: false, - enableInfo: false + enableInfo: false, + middlewareStyles: { + selector: {}, + info: {}, + ruler: {}, + scroller: {} + } }; return storage; } + +export function parseStyles(opts: IDrawSettings) { + const styles: Required = { + selector: {}, + ruler: {}, + info: {}, + scroller: {} + }; + if (opts.styles) { + // selector + const { selector, info, ruler, scroller } = opts.styles; + if (istype.string(selector?.activeColor)) { + styles.selector.activeColor = selector?.activeColor; + } + if (istype.string(selector?.activeAreaColor)) { + styles.selector.activeAreaColor = selector?.activeAreaColor; + } + if (istype.string(selector?.lockedColor)) { + styles.selector.lockedColor = selector?.lockedColor; + } + if (istype.string(selector?.referenceColor)) { + styles.selector.referenceColor = selector?.referenceColor; + } + + // info + if (istype.string(info?.textBackground)) { + styles.info.textBackground = info?.textBackground; + } + if (istype.string(info?.textColor)) { + styles.info.textColor = info?.textColor; + } + + // ruler + if (istype.string(ruler?.background)) { + styles.ruler.background = ruler?.background; + } + if (istype.string(ruler?.borderColor)) { + styles.ruler.borderColor = ruler?.borderColor; + } + if (istype.string(ruler?.scaleColor)) { + styles.ruler.scaleColor = ruler?.scaleColor; + } + if (istype.string(ruler?.textColor)) { + styles.ruler.textColor = ruler?.textColor; + } + if (istype.string(ruler?.gridColor)) { + styles.ruler.gridColor = ruler?.gridColor; + } + if (istype.string(ruler?.gridPrimaryColor)) { + styles.ruler.gridPrimaryColor = ruler?.gridPrimaryColor; + } + if (istype.string(ruler?.selectedAreaColor)) { + styles.ruler.selectedAreaColor = ruler?.selectedAreaColor; + } + + // scroller + if (istype.string(scroller?.thumbBackground)) { + styles.scroller.thumbBackground = scroller?.thumbBackground; + } + if (istype.string(scroller?.thumbBorderColor)) { + styles.scroller.thumbBorderColor = scroller?.thumbBorderColor; + } + if (istype.string(scroller?.hoverThumbBackground)) { + styles.scroller.hoverThumbBackground = scroller?.hoverThumbBackground; + } + if (istype.string(scroller?.hoverThumbBorderColor)) { + styles.scroller.hoverThumbBorderColor = scroller?.hoverThumbBorderColor; + } + if (istype.string(scroller?.activeThumbBackground)) { + styles.scroller.activeThumbBackground = scroller?.activeThumbBackground; + } + if (istype.string(scroller?.activeThumbBorderColor)) { + styles.scroller.activeThumbBorderColor = scroller?.activeThumbBorderColor; + } + } + return styles; +} diff --git a/packages/idraw/src/idraw.ts b/packages/idraw/src/idraw.ts index 9df3715..ad15abf 100644 --- a/packages/idraw/src/idraw.ts +++ b/packages/idraw/src/idraw.ts @@ -28,7 +28,7 @@ import { calcViewCenter, Store } from '@idraw/util'; -import { defaultSettings, getDefaultStorage, defaultMode } from './config'; +import { defaultSettings, getDefaultStorage, defaultMode, parseStyles } from './config'; import { exportImageFileBlobURL } from './file'; import type { ExportImageFileBaseOptions, ExportImageFileResult } from './file'; import { eventKeys } from './event'; @@ -43,6 +43,7 @@ export class iDraw { constructor(mount: HTMLDivElement, options: IDrawOptions) { const opts = { ...defaultSettings, ...options }; + this.#store.set('middlewareStyles', parseStyles(opts)); const { width, height, devicePixelRatio, createCustomContext2D } = opts; const core = new Core(mount, { width, height, devicePixelRatio, createCustomContext2D }); this.#core = core; diff --git a/packages/idraw/src/mode.ts b/packages/idraw/src/mode.ts index 1d1b3ca..c105ef0 100644 --- a/packages/idraw/src/mode.ts +++ b/packages/idraw/src/mode.ts @@ -19,15 +19,16 @@ function isValidMode(mode: string | IDrawMode) { export function runMiddlewares(core: Core, store: Store) { const { enableRuler, enableScale, enableScroll, enableSelect, enableTextEdit, enableDrag, enableInfo } = store.getSnapshot(); + const styles = store.get('middlewareStyles'); if (enableScroll === true) { - core.use(MiddlewareScroller); + core.use(MiddlewareScroller, styles?.scroller); } else if (enableScroll === false) { core.disuse(MiddlewareScroller); } if (enableSelect === true) { core.use(MiddlewareLayoutSelector); - core.use(MiddlewareSelector); + core.use(MiddlewareSelector, styles?.selector); } else if (enableSelect === false) { core.disuse(MiddlewareLayoutSelector); core.disuse(MiddlewareSelector); @@ -40,7 +41,7 @@ export function runMiddlewares(core: Core, store: Store, store: Store = Re canvas?: HTMLCanvasElement; } -export type BoardMiddleware = any, E extends BoardExtendEventMap = BoardExtendEventMap> = ( - opts: BoardMiddlewareOptions +export type BoardMiddleware = any, E extends BoardExtendEventMap = BoardExtendEventMap, C extends any = undefined> = ( + opts: BoardMiddlewareOptions, + config?: C ) => BoardMiddlewareObject; export interface BoardOptions { diff --git a/packages/types/src/lib/idraw.ts b/packages/types/src/lib/idraw.ts index b26d0eb..8176e9d 100644 --- a/packages/types/src/lib/idraw.ts +++ b/packages/types/src/lib/idraw.ts @@ -1,4 +1,5 @@ import type { CoreOptions } from './core'; +import type { MiddlewareSelectorStyle, MiddlewareInfoStyle, MiddlewareRulerStyle, MiddlewareScrollerStyle } from './middleware'; export type IDrawMode = 'select' | 'drag' | 'readOnly'; @@ -6,6 +7,12 @@ export type IDrawFeature = 'ruler' | 'scroll' | 'scale' | 'info' | 'selectInGrou export interface IDrawSettings { mode?: IDrawMode; + styles?: { + selector?: Partial; + info?: Partial; + ruler?: Partial; + scroller?: Partial; + }; } export type IDrawOptions = CoreOptions & IDrawSettings; @@ -19,4 +26,5 @@ export interface IDrawStorage { enableTextEdit: boolean; enableDrag: boolean; enableInfo: boolean; + middlewareStyles: Required; } diff --git a/packages/types/src/lib/middleware.ts b/packages/types/src/lib/middleware.ts index d0a5491..e8f96ec 100644 --- a/packages/types/src/lib/middleware.ts +++ b/packages/types/src/lib/middleware.ts @@ -3,3 +3,41 @@ import type { BoardMiddlewareObject, BoardMiddleware } from './board'; export type Middleware = BoardMiddleware; export type MiddlewareObject = BoardMiddlewareObject; + +export type MiddlewareSelectorStyle = { + activeColor: string; + activeAreaColor: string; + lockedColor: string; + referenceColor: string; +}; +export type MiddlewareSelectorConfig = MiddlewareSelectorStyle & {}; + +export type MiddlewareInfoStyle = { + textBackground: string; + textColor: string; +}; + +export type MiddlewareInfoConfig = MiddlewareInfoStyle & {}; + +export type MiddlewareRulerStyle = { + background: string; + borderColor: string; + scaleColor: string; + textColor: string; + gridColor: string; + gridPrimaryColor: string; + selectedAreaColor: string; +}; + +export type MiddlewareRulerConfig = MiddlewareRulerStyle & {}; + +export type MiddlewareScrollerStyle = { + thumbBackground: string; + thumbBorderColor: string; + hoverThumbBackground: string; + hoverThumbBorderColor: string; + activeThumbBackground: string; + activeThumbBorderColor: string; +}; + +export type MiddlewareScrollerConfig = MiddlewareScrollerStyle & {}; diff --git a/packages/util/package.json b/packages/util/package.json index 3f8f650..425f092 100644 --- a/packages/util/package.json +++ b/packages/util/package.json @@ -1,6 +1,6 @@ { "name": "@idraw/util", - "version": "0.4.0-beta.30", + "version": "0.4.0-beta.31", "description": "", "main": "dist/esm/index.js", "module": "dist/esm/index.js", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9d7195c..6757777 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -138,39 +138,39 @@ importers: packages/board: dependencies: '@idraw/renderer': - specifier: workspace:^0.4.0-beta.30 + specifier: workspace:^0.4.0-beta.31 version: link:../renderer '@idraw/util': - specifier: workspace:^0.4.0-beta.30 + specifier: workspace:^0.4.0-beta.31 version: link:../util devDependencies: '@idraw/types': - specifier: workspace:^0.4.0-beta.30 + specifier: workspace:^0.4.0-beta.31 version: link:../types packages/core: dependencies: '@idraw/board': - specifier: workspace:^0.4.0-beta.30 + specifier: workspace:^0.4.0-beta.31 version: link:../board '@idraw/renderer': - specifier: workspace:^0.4.0-beta.30 + specifier: workspace:^0.4.0-beta.31 version: link:../renderer '@idraw/util': - specifier: workspace:^0.4.0-beta.30 + specifier: workspace:^0.4.0-beta.31 version: link:../util devDependencies: '@idraw/types': - specifier: workspace:^0.4.0-beta.30 + specifier: workspace:^0.4.0-beta.31 version: link:../types packages/figma: dependencies: '@idraw/types': - specifier: workspace:^0.4.0-beta.30 + specifier: workspace:^0.4.0-beta.31 version: link:../types '@idraw/util': - specifier: workspace:^0.4.0-beta.30 + specifier: workspace:^0.4.0-beta.31 version: link:../util kiwi-schema: specifier: ^0.5.0 @@ -192,29 +192,29 @@ importers: packages/idraw: dependencies: '@idraw/board': - specifier: workspace:^0.4.0-beta.30 + specifier: workspace:^0.4.0-beta.31 version: link:../board '@idraw/core': - specifier: workspace:^0.4.0-beta.30 + specifier: workspace:^0.4.0-beta.31 version: link:../core '@idraw/renderer': - specifier: workspace:^0.4.0-beta.30 + specifier: workspace:^0.4.0-beta.31 version: link:../renderer '@idraw/types': - specifier: workspace:^0.4.0-beta.30 + specifier: workspace:^0.4.0-beta.31 version: link:../types '@idraw/util': - specifier: workspace:^0.4.0-beta.30 + specifier: workspace:^0.4.0-beta.31 version: link:../util packages/renderer: dependencies: '@idraw/util': - specifier: workspace:^0.4.0-beta.30 + specifier: workspace:^0.4.0-beta.31 version: link:../util devDependencies: '@idraw/types': - specifier: workspace:^0.4.0-beta.30 + specifier: workspace:^0.4.0-beta.31 version: link:../types packages/types: {}