mirror of
https://github.com/idrawjs/idraw
synced 2026-05-23 17:48:23 +00:00
Merge pull request #332 from idrawjs/dev-v0.4
feat: support custom style of middlewares
This commit is contained in:
Deepsea
GitHub
commit
a3857e2cb6
32 changed files with 556 additions and 259 deletions
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"private": false,
|
||||
"version": "0.4.0-beta.30",
|
||||
"version": "0.4.0-beta.31",
|
||||
"workspaces": [
|
||||
"packages/*"
|
||||
],
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@ import { Viewer } from './lib/viewer';
|
|||
interface BoardMiddlewareMapItem {
|
||||
status: 'enable' | 'disable';
|
||||
middlewareObject: BoardMiddlewareObject;
|
||||
config: any;
|
||||
}
|
||||
|
||||
export class Board<T extends BoardExtendEventMap = BoardExtendEventMap> {
|
||||
|
|
@ -333,7 +334,7 @@ export class Board<T extends BoardExtendEventMap = BoardExtendEventMap> {
|
|||
return data;
|
||||
}
|
||||
|
||||
use(middleware: BoardMiddleware<any, any>) {
|
||||
use<C extends any = any>(middleware: BoardMiddleware<any, any, any>, config?: Partial<C>) {
|
||||
if (this.#middlewareMap.has(middleware)) {
|
||||
const item = this.#middlewareMap.get(middleware);
|
||||
if (item) {
|
||||
|
|
@ -350,14 +351,15 @@ export class Board<T extends BoardExtendEventMap = BoardExtendEventMap> {
|
|||
const calculator = this.#calculator;
|
||||
const eventHub = this.#eventHub;
|
||||
|
||||
const obj = middleware({ boardContent, sharer, viewer, calculator, eventHub: eventHub as UtilEventEmitter<any>, container });
|
||||
const obj = middleware({ boardContent, sharer, viewer, calculator, eventHub: eventHub as UtilEventEmitter<any>, 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();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -68,11 +68,11 @@ export class Core<E extends CoreEventMap = CoreEventMap> {
|
|||
container.style.position = 'relative';
|
||||
}
|
||||
|
||||
use(middleware: BoardMiddleware<any, any>) {
|
||||
this.#board.use(middleware);
|
||||
use<C extends any = any>(middleware: BoardMiddleware<any, any, any>, config?: C) {
|
||||
this.#board.use<C>(middleware, config);
|
||||
}
|
||||
|
||||
disuse(middleware: BoardMiddleware<any, any>) {
|
||||
disuse(middleware: BoardMiddleware<any, any, any>) {
|
||||
this.#board.disuse(middleware);
|
||||
}
|
||||
|
||||
|
|
|
|||
12
packages/core/src/middleware/info/config.ts
Normal file
12
packages/core/src/middleware/info/config.ts
Normal file
|
|
@ -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
|
||||
};
|
||||
|
|
@ -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);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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<DeepInfoSharedStorage> = (opts) => {
|
||||
export const MiddlewareInfo: BoardMiddleware<DeepInfoSharedStorage, any, MiddlewareInfoConfig> = (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<DeepInfoSharedStorage> = (opts) =>
|
|||
text: whText,
|
||||
fontSize: infoFontSize,
|
||||
lineHeight: infoLineHeight,
|
||||
color: infoTextColor,
|
||||
background: infoBackground
|
||||
style
|
||||
});
|
||||
|
||||
drawPositionInfoText(overlayContext, {
|
||||
|
|
@ -115,8 +122,7 @@ export const MiddlewareInfo: BoardMiddleware<DeepInfoSharedStorage> = (opts) =>
|
|||
text: xyText,
|
||||
fontSize: infoFontSize,
|
||||
lineHeight: infoLineHeight,
|
||||
color: infoTextColor,
|
||||
background: infoBackground
|
||||
style
|
||||
});
|
||||
|
||||
drawAngleInfoText(overlayContext, {
|
||||
|
|
@ -129,8 +135,7 @@ export const MiddlewareInfo: BoardMiddleware<DeepInfoSharedStorage> = (opts) =>
|
|||
text: angleText,
|
||||
fontSize: infoFontSize,
|
||||
lineHeight: infoLineHeight,
|
||||
color: infoTextColor,
|
||||
background: infoBackground
|
||||
style
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
25
packages/core/src/middleware/ruler/config.ts
Normal file
25
packages/core/src/middleware/ruler/config.ts
Normal file
|
|
@ -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
|
||||
};
|
||||
|
|
@ -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<DeepRulerSharedStorage, CoreEventMap> = (opts) => {
|
||||
export const MiddlewareRuler: BoardMiddleware<DeepRulerSharedStorage, CoreEventMap, MiddlewareRulerConfig> = (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<DeepRulerSharedStorage, CoreEventM
|
|||
const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
|
||||
const viewSizeInfo = getViewSizeInfoFromSnapshot(snapshot);
|
||||
|
||||
drawScrollerSelectedArea(overlayContext, { snapshot, calculator });
|
||||
drawScrollerSelectedArea(overlayContext, { snapshot, calculator, style });
|
||||
|
||||
drawRulerBackground(overlayContext, { viewScaleInfo, viewSizeInfo });
|
||||
drawRulerBackground(overlayContext, { viewScaleInfo, viewSizeInfo, style });
|
||||
|
||||
const { list: xList, rulerUnit } = calcXRulerScaleList({ viewScaleInfo, viewSizeInfo });
|
||||
drawXRuler(overlayContext, { scaleList: xList });
|
||||
drawXRuler(overlayContext, { scaleList: xList, style });
|
||||
|
||||
const { list: yList } = calcYRulerScaleList({ viewScaleInfo, viewSizeInfo });
|
||||
drawYRuler(overlayContext, { scaleList: yList });
|
||||
drawYRuler(overlayContext, { scaleList: yList, style });
|
||||
|
||||
if (showGrid === true) {
|
||||
const ctx = rulerUnit === 1 ? overlayContext : underlayContext;
|
||||
|
|
@ -53,7 +69,8 @@ export const MiddlewareRuler: BoardMiddleware<DeepRulerSharedStorage, CoreEventM
|
|||
xList,
|
||||
yList,
|
||||
viewScaleInfo,
|
||||
viewSizeInfo
|
||||
viewSizeInfo,
|
||||
style
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,8 @@
|
|||
import type { Element, ViewScaleInfo, ViewSizeInfo, ViewContext2D, BoardViewerFrameSnapshot, ViewRectInfo, ViewCalculator } from '@idraw/types';
|
||||
import { formatNumber, rotateByCenter, getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from '@idraw/util';
|
||||
import type { DeepRulerSharedStorage } from './types';
|
||||
import type { DeepRulerSharedStorage, MiddlewareRulerStyle } from './types';
|
||||
import { keySelectedElementList, keyActionType } from '../selector';
|
||||
|
||||
const rulerSize = 16;
|
||||
const background = '#FFFFFFA8';
|
||||
const borderColor = '#00000080';
|
||||
const scaleColor = '#000000';
|
||||
const textColor = '#00000080';
|
||||
const fontFamily = 'monospace';
|
||||
const fontSize = 10;
|
||||
const fontWeight = 100;
|
||||
const gridColor = '#AAAAAA20';
|
||||
const gridKeyColor = '#AAAAAA40';
|
||||
const lineSize = 1;
|
||||
const selectedAreaColor = '#196097';
|
||||
import { rulerSize, fontSize, fontWeight, lineSize, fontFamily } from './config';
|
||||
|
||||
// const rulerUnit = 10;
|
||||
// const rulerKeyUnit = 100;
|
||||
|
|
@ -118,9 +106,11 @@ export function drawXRuler(
|
|||
ctx: ViewContext2D,
|
||||
opts: {
|
||||
scaleList: RulerScale[];
|
||||
style: MiddlewareRulerStyle;
|
||||
}
|
||||
) {
|
||||
const { scaleList } = opts;
|
||||
const { scaleList, style } = opts;
|
||||
const { scaleColor, textColor } = style;
|
||||
const scaleDrawStart = rulerSize;
|
||||
const scaleDrawEnd = (rulerSize * 4) / 5;
|
||||
const subKeyScaleDrawEnd = (rulerSize * 2) / 5;
|
||||
|
|
@ -156,9 +146,11 @@ export function drawYRuler(
|
|||
ctx: ViewContext2D,
|
||||
opts: {
|
||||
scaleList: RulerScale[];
|
||||
style: MiddlewareRulerStyle;
|
||||
}
|
||||
) {
|
||||
const { scaleList } = opts;
|
||||
const { scaleList, style } = opts;
|
||||
const { scaleColor, textColor } = style;
|
||||
const scaleDrawStart = rulerSize;
|
||||
const scaleDrawEnd = (rulerSize * 4) / 5;
|
||||
const subKeyScaleDrawEnd = (rulerSize * 2) / 5;
|
||||
|
|
@ -200,11 +192,14 @@ export function drawRulerBackground(
|
|||
opts: {
|
||||
viewScaleInfo: ViewScaleInfo;
|
||||
viewSizeInfo: ViewSizeInfo;
|
||||
style: MiddlewareRulerStyle;
|
||||
}
|
||||
) {
|
||||
const { viewSizeInfo } = opts;
|
||||
const { viewSizeInfo, style } = opts;
|
||||
const { width, height } = viewSizeInfo;
|
||||
|
||||
const { background, borderColor } = style;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, 0);
|
||||
ctx.lineTo(width + 1, 0);
|
||||
|
|
@ -229,17 +224,19 @@ export function drawGrid(
|
|||
yList: RulerScale[];
|
||||
viewScaleInfo: ViewScaleInfo;
|
||||
viewSizeInfo: ViewSizeInfo;
|
||||
style: MiddlewareRulerStyle;
|
||||
}
|
||||
) {
|
||||
const { xList, yList, viewSizeInfo } = opts;
|
||||
const { xList, yList, viewSizeInfo, style } = opts;
|
||||
const { width, height } = viewSizeInfo;
|
||||
const { gridColor, gridPrimaryColor } = style;
|
||||
for (let i = 0; i < xList.length; i++) {
|
||||
const item = xList[i];
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(item.position, 0);
|
||||
ctx.lineTo(item.position, height);
|
||||
if (item.isKeyNum === true || item.isSubKeyNum === true) {
|
||||
ctx.strokeStyle = gridKeyColor;
|
||||
ctx.strokeStyle = gridPrimaryColor;
|
||||
} else {
|
||||
ctx.strokeStyle = gridColor;
|
||||
}
|
||||
|
|
@ -255,7 +252,7 @@ export function drawGrid(
|
|||
ctx.moveTo(0, item.position);
|
||||
ctx.lineTo(width, item.position);
|
||||
if (item.isKeyNum === true || item.isSubKeyNum === true) {
|
||||
ctx.strokeStyle = gridKeyColor;
|
||||
ctx.strokeStyle = gridPrimaryColor;
|
||||
} else {
|
||||
ctx.strokeStyle = gridColor;
|
||||
}
|
||||
|
|
@ -266,9 +263,13 @@ export function drawGrid(
|
|||
// TODO
|
||||
}
|
||||
|
||||
export function drawScrollerSelectedArea(ctx: ViewContext2D, opts: { snapshot: BoardViewerFrameSnapshot<DeepRulerSharedStorage>; calculator: ViewCalculator }) {
|
||||
const { snapshot, calculator } = opts;
|
||||
export function drawScrollerSelectedArea(
|
||||
ctx: ViewContext2D,
|
||||
opts: { snapshot: BoardViewerFrameSnapshot<DeepRulerSharedStorage>; calculator: ViewCalculator; style: MiddlewareRulerStyle }
|
||||
) {
|
||||
const { snapshot, calculator, style } = opts;
|
||||
const { sharedStore } = snapshot;
|
||||
const { selectedAreaColor } = style;
|
||||
const selectedElementList = sharedStore[keySelectedElementList];
|
||||
const actionType = sharedStore[keyActionType];
|
||||
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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<DeepScrollerSharedStorage> = (opts) => {
|
||||
export const MiddlewareScroller: BoardMiddleware<DeepScrollerSharedStorage, any, MiddlewareScrollerConfig> = (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<DeepScrollerSharedStorage> = (o
|
|||
}
|
||||
},
|
||||
beforeDrawFrame({ snapshot }) {
|
||||
const { xThumbRect, yThumbRect } = drawScroller(overlayContext, { snapshot });
|
||||
const { xThumbRect, yThumbRect } = drawScroller(overlayContext, { snapshot, style });
|
||||
sharer.setSharedStorage(keyXThumbRect, xThumbRect);
|
||||
sharer.setSharedStorage(keyYThumbRect, yThumbRect);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 };
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -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<PointSize[]>;
|
||||
yLines?: Array<PointSize[]>;
|
||||
style: MiddlewareSelectorStyle;
|
||||
}
|
||||
) {
|
||||
const { xLines, yLines } = opts;
|
||||
const { xLines, yLines, style } = opts;
|
||||
const { referenceColor } = style;
|
||||
const lineOpts = {
|
||||
borderColor: referenceColor,
|
||||
borderWidth: 1,
|
||||
|
|
|
|||
|
|
@ -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<Ele
|
|||
});
|
||||
}
|
||||
|
||||
export function drawArea(ctx: ViewContext2D, opts: { start: PointSize; end: PointSize }) {
|
||||
const { start, end } = opts;
|
||||
export function drawArea(ctx: ViewContext2D, opts: { start: PointSize; end: PointSize; style: MiddlewareSelectorStyle }) {
|
||||
const { start, end, style } = opts;
|
||||
const { activeColor, activeAreaColor } = style;
|
||||
ctx.setLineDash([]);
|
||||
ctx.lineWidth = areaBorderWidth;
|
||||
ctx.strokeStyle = wrapperColor;
|
||||
ctx.fillStyle = '#1976d24f';
|
||||
ctx.strokeStyle = activeColor;
|
||||
ctx.fillStyle = activeAreaColor;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(start.x, start.y);
|
||||
ctx.lineTo(end.x, start.y);
|
||||
|
|
@ -153,13 +165,14 @@ export function drawArea(ctx: ViewContext2D, opts: { start: PointSize; end: Poin
|
|||
ctx.fill();
|
||||
}
|
||||
|
||||
export function drawListArea(ctx: ViewContext2D, opts: { areaSize: AreaSize }) {
|
||||
const { areaSize } = opts;
|
||||
export function drawListArea(ctx: ViewContext2D, opts: { areaSize: AreaSize; style: MiddlewareSelectorStyle }) {
|
||||
const { areaSize, style } = opts;
|
||||
const { activeColor, activeAreaColor } = style;
|
||||
const { x, y, w, h } = areaSize;
|
||||
ctx.setLineDash([]);
|
||||
ctx.lineWidth = areaBorderWidth;
|
||||
ctx.strokeStyle = wrapperColor;
|
||||
ctx.fillStyle = '#1976d21c';
|
||||
ctx.strokeStyle = activeColor;
|
||||
ctx.fillStyle = activeAreaColor;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x, y);
|
||||
ctx.lineTo(x + w, y);
|
||||
|
|
@ -176,11 +189,14 @@ export function drawGroupQueueVertexesWrappers(
|
|||
opts: {
|
||||
viewScaleInfo: ViewScaleInfo;
|
||||
viewSizeInfo: ViewSizeInfo;
|
||||
style: MiddlewareSelectorStyle;
|
||||
}
|
||||
) {
|
||||
const { style } = opts;
|
||||
const { activeColor } = style;
|
||||
for (let i = 0; i < vertexesList.length; i++) {
|
||||
const vertexes = vertexesList[i];
|
||||
const wrapperOpts = { borderColor: wrapperColor, borderWidth: selectWrapperBorderWidth, background: 'transparent', lineDash: [4, 4] };
|
||||
const wrapperOpts = { borderColor: activeColor, borderWidth: selectWrapperBorderWidth, background: 'transparent', lineDash: [4, 4] };
|
||||
drawVertexes(ctx, calcViewVertexes(vertexes, opts), wrapperOpts);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,16 @@ import {
|
|||
getElementPositionFromList,
|
||||
deepResizeGroupElement
|
||||
} from '@idraw/util';
|
||||
import type { Data, ViewRectVertexes, CoreEventMap, ElementPosition, ViewScaleInfo, ViewSizeInfo, ElementSizeController } from '@idraw/types';
|
||||
import type {
|
||||
Data,
|
||||
ViewRectVertexes,
|
||||
CoreEventMap,
|
||||
ElementPosition,
|
||||
ViewScaleInfo,
|
||||
ViewSizeInfo,
|
||||
ElementSizeController,
|
||||
MiddlewareSelectorConfig
|
||||
} from '@idraw/types';
|
||||
import type {
|
||||
Point,
|
||||
PointSize,
|
||||
|
|
@ -64,7 +73,8 @@ import {
|
|||
keyIsMoving,
|
||||
keyEnableSelectInGroup,
|
||||
keyEnableSnapToGrid,
|
||||
controllerSize
|
||||
controllerSize,
|
||||
defaultStyle
|
||||
// keyDebugElemCenter,
|
||||
// keyDebugEnd0,
|
||||
// keyDebugEndHorizontal,
|
||||
|
|
@ -82,7 +92,13 @@ export type { DeepSelectorSharedStorage, ActionType };
|
|||
|
||||
export { middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup, middlewareEventSnapToGrid };
|
||||
|
||||
export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, CoreEventMap> = (opts) => {
|
||||
export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, CoreEventMap, MiddlewareSelectorConfig> = (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<DeepSelectorSharedStorage, Core
|
|||
const isMoving = sharedStore[keyIsMoving];
|
||||
const enableSnapToGrid = sharedStore[keyEnableSnapToGrid];
|
||||
|
||||
const drawBaseOpts = { calculator, viewScaleInfo, viewSizeInfo };
|
||||
const drawBaseOpts = { calculator, viewScaleInfo, viewSizeInfo, style };
|
||||
// const selectedElementController = sharedStore[keySelectedElementController];
|
||||
// const resizeType: ResizeType | null = sharedStore[keyResizeType];
|
||||
|
||||
|
|
@ -767,7 +783,8 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core
|
|||
groupQueue,
|
||||
controllerSize: 10,
|
||||
viewScaleInfo
|
||||
})
|
||||
}),
|
||||
style
|
||||
});
|
||||
} else {
|
||||
drawHoverVertexesWrapper(overlayContext, hoverElementVertexes, drawBaseOpts);
|
||||
|
|
@ -778,7 +795,8 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core
|
|||
...drawBaseOpts,
|
||||
element: elem,
|
||||
calculator,
|
||||
hideControllers: !!isMoving && actionType === 'drag'
|
||||
hideControllers: !!isMoving && actionType === 'drag',
|
||||
style
|
||||
});
|
||||
if (actionType === 'drag') {
|
||||
if (enableSnapToGrid === true) {
|
||||
|
|
@ -794,7 +812,8 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core
|
|||
if (offsetX === 0 || offsetY === 0) {
|
||||
drawReferenceLines(overlayContext, {
|
||||
xLines,
|
||||
yLines
|
||||
yLines,
|
||||
style
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -811,7 +830,8 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core
|
|||
groupQueue,
|
||||
controllerSize: 10,
|
||||
viewScaleInfo
|
||||
})
|
||||
}),
|
||||
style
|
||||
});
|
||||
} else {
|
||||
drawHoverVertexesWrapper(overlayContext, hoverElementVertexes, drawBaseOpts);
|
||||
|
|
@ -822,7 +842,8 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core
|
|||
...drawBaseOpts,
|
||||
element: elem,
|
||||
calculator,
|
||||
hideControllers: !!isMoving && actionType === 'drag'
|
||||
hideControllers: !!isMoving && actionType === 'drag',
|
||||
style
|
||||
});
|
||||
if (actionType === 'drag') {
|
||||
if (enableSnapToGrid === true) {
|
||||
|
|
@ -838,14 +859,15 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core
|
|||
if (offsetX === 0 || offsetY === 0) {
|
||||
drawReferenceLines(overlayContext, {
|
||||
xLines,
|
||||
yLines
|
||||
yLines,
|
||||
style
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (actionType === 'area' && areaStart && areaEnd) {
|
||||
drawArea(overlayContext, { start: areaStart, end: areaEnd });
|
||||
drawArea(overlayContext, { start: areaStart, end: areaEnd, style });
|
||||
} else if ((['drag-list', 'drag-list-end'] as ActionType[]).includes(actionType)) {
|
||||
const listAreaSize = calcSelectedElementsArea(getActiveElements(), {
|
||||
viewScaleInfo: sharer.getActiveViewScaleInfo(),
|
||||
|
|
@ -853,7 +875,7 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core
|
|||
calculator
|
||||
});
|
||||
if (listAreaSize) {
|
||||
drawListArea(overlayContext, { areaSize: listAreaSize });
|
||||
drawListArea(overlayContext, { areaSize: listAreaSize, style });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@idraw/figma",
|
||||
"version": "0.4.0-beta.30",
|
||||
"version": "0.4.0-beta.31",
|
||||
"description": "",
|
||||
"main": "dist/esm/index.js",
|
||||
"module": "dist/esm/index.js",
|
||||
|
|
@ -11,8 +11,8 @@
|
|||
"dist/**/*.js"
|
||||
],
|
||||
"dependencies": {
|
||||
"@idraw/types": "workspace:^0.4.0-beta.30",
|
||||
"@idraw/util": "workspace:^0.4.0-beta.30",
|
||||
"@idraw/types": "workspace:^0.4.0-beta.31",
|
||||
"@idraw/util": "workspace:^0.4.0-beta.31",
|
||||
"kiwi-schema": "^0.5.0",
|
||||
"matrix-inverse": "^2.0.0",
|
||||
"pako": "^2.1.0",
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@types/pako": "^2.0.3",
|
||||
"@idraw/types": "workspace:^0.4.0-beta.30"
|
||||
"@idraw/types": "workspace:^0.4.0-beta.31"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
|
|
|||
|
|
@ -5,18 +5,41 @@ import { getData } from './data';
|
|||
const opts = {
|
||||
width: 800,
|
||||
height: 500,
|
||||
devicePixelRatio: 2
|
||||
devicePixelRatio: 2,
|
||||
styles: {
|
||||
selector: {
|
||||
activeColor: 'red',
|
||||
activeAreaColor: '#FF00001C',
|
||||
lockedColor: 'black',
|
||||
referenceColor: 'green'
|
||||
},
|
||||
info: {
|
||||
textBackground: 'yellow',
|
||||
textColor: 'red'
|
||||
},
|
||||
ruler: {
|
||||
background: '#0000FF1A',
|
||||
borderColor: '#0000FF',
|
||||
scaleColor: '#FF0000',
|
||||
textColor: '#000000',
|
||||
gridColor: '#0000FF1C',
|
||||
gridPrimaryColor: '#0000FFAC',
|
||||
selectedAreaColor: '#FF0000CC'
|
||||
},
|
||||
scroller: {
|
||||
thumbBackground: '#FF00003A',
|
||||
thumbBorderColor: '#FF00008A',
|
||||
hoverThumbBackground: '#FF00006E',
|
||||
hoverThumbBorderColor: '#FF0000EE',
|
||||
activeThumbBackground: '#FF00005E',
|
||||
activeThumbBorderColor: '#FF0000F0'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const mount = document.querySelector('#mount') as HTMLDivElement;
|
||||
const data = getData();
|
||||
const idraw = new iDraw(
|
||||
mount,
|
||||
Object.assign({}, opts, {
|
||||
// contextWidth: 500,
|
||||
// contextHeight: 400
|
||||
})
|
||||
);
|
||||
const idraw = new iDraw(mount, opts);
|
||||
idraw.setData(data);
|
||||
idraw.centerContent();
|
||||
// idraw.scale(0.5);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "idraw",
|
||||
"version": "0.4.0-beta.30",
|
||||
"version": "0.4.0-beta.31",
|
||||
"description": "",
|
||||
"main": "dist/esm/index.js",
|
||||
"module": "dist/esm/index.js",
|
||||
|
|
@ -22,11 +22,11 @@
|
|||
"license": "MIT",
|
||||
"devDependencies": {},
|
||||
"dependencies": {
|
||||
"@idraw/board": "workspace:^0.4.0-beta.30",
|
||||
"@idraw/core": "workspace:^0.4.0-beta.30",
|
||||
"@idraw/renderer": "workspace:^0.4.0-beta.30",
|
||||
"@idraw/types": "workspace:^0.4.0-beta.30",
|
||||
"@idraw/util": "workspace:^0.4.0-beta.30"
|
||||
"@idraw/board": "workspace:^0.4.0-beta.31",
|
||||
"@idraw/core": "workspace:^0.4.0-beta.31",
|
||||
"@idraw/renderer": "workspace:^0.4.0-beta.31",
|
||||
"@idraw/types": "workspace:^0.4.0-beta.31",
|
||||
"@idraw/util": "workspace:^0.4.0-beta.31"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public",
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
import type { IDrawSettings, IDrawStorage, IDrawMode } from '@idraw/types';
|
||||
import { istype } from '@idraw/util';
|
||||
|
||||
export const defaultMode: IDrawMode = 'select';
|
||||
|
||||
export const defaultSettings: Required<IDrawSettings> = {
|
||||
export const defaultSettings: Required<Pick<IDrawSettings, 'mode'>> = {
|
||||
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<IDrawSettings['styles']> = {
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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<IDrawEvent>(mount, { width, height, devicePixelRatio, createCustomContext2D });
|
||||
this.#core = core;
|
||||
|
|
|
|||
|
|
@ -19,15 +19,16 @@ function isValidMode(mode: string | IDrawMode) {
|
|||
|
||||
export function runMiddlewares(core: Core<IDrawEvent>, store: Store<IDrawStorage>) {
|
||||
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<IDrawEvent>, store: Store<IDrawStorage
|
|||
}
|
||||
|
||||
if (enableRuler === true) {
|
||||
core.use(MiddlewareRuler);
|
||||
core.use(MiddlewareRuler, styles?.ruler);
|
||||
} else if (enableRuler === false) {
|
||||
core.disuse(MiddlewareRuler);
|
||||
}
|
||||
|
|
@ -58,7 +59,7 @@ export function runMiddlewares(core: Core<IDrawEvent>, store: Store<IDrawStorage
|
|||
}
|
||||
|
||||
if (enableInfo === true) {
|
||||
core.use(MiddlewareInfo);
|
||||
core.use(MiddlewareInfo, styles?.info);
|
||||
} else if (enableInfo === false) {
|
||||
core.disuse(MiddlewareInfo);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@idraw/renderer",
|
||||
"version": "0.4.0-beta.30",
|
||||
"version": "0.4.0-beta.31",
|
||||
"description": "",
|
||||
"main": "dist/esm/index.js",
|
||||
"module": "dist/esm/index.js",
|
||||
|
|
@ -21,11 +21,11 @@
|
|||
"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/util": "workspace:^0.4.0-beta.31"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@idraw/types",
|
||||
"version": "0.4.0-beta.30",
|
||||
"version": "0.4.0-beta.31",
|
||||
"description": "",
|
||||
"main": "src/index.ts",
|
||||
"types": "src/index.ts",
|
||||
|
|
|
|||
|
|
@ -97,8 +97,9 @@ export interface BoardMiddlewareOptions<S extends Record<any | symbol, any> = Re
|
|||
canvas?: HTMLCanvasElement;
|
||||
}
|
||||
|
||||
export type BoardMiddleware<S extends Record<any | symbol, any> = any, E extends BoardExtendEventMap = BoardExtendEventMap> = (
|
||||
opts: BoardMiddlewareOptions<S, E>
|
||||
export type BoardMiddleware<S extends Record<any | symbol, any> = any, E extends BoardExtendEventMap = BoardExtendEventMap, C extends any = undefined> = (
|
||||
opts: BoardMiddlewareOptions<S, E>,
|
||||
config?: C
|
||||
) => BoardMiddlewareObject<S>;
|
||||
|
||||
export interface BoardOptions {
|
||||
|
|
|
|||
|
|
@ -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<MiddlewareSelectorStyle>;
|
||||
info?: Partial<MiddlewareInfoStyle>;
|
||||
ruler?: Partial<MiddlewareRulerStyle>;
|
||||
scroller?: Partial<MiddlewareScrollerStyle>;
|
||||
};
|
||||
}
|
||||
|
||||
export type IDrawOptions = CoreOptions & IDrawSettings;
|
||||
|
|
@ -19,4 +26,5 @@ export interface IDrawStorage {
|
|||
enableTextEdit: boolean;
|
||||
enableDrag: boolean;
|
||||
enableInfo: boolean;
|
||||
middlewareStyles: Required<IDrawSettings['styles']>;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 & {};
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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: {}
|
||||
|
|
|
|||
Loading…
Reference in a new issue