Skip to content

Commit

Permalink
Merge pull request #217 from idrawjs/dev-v0.4
Browse files Browse the repository at this point in the history 
refactor: rename bgColor to background
  • Loading branch information
@chenshenhai
chenshenhai authored Oct 14, 2023
2 parents 2b651bb + 4411284 commit fd13ea6
Show file tree
Hide file tree
Showing 21 changed files with 626 additions and 416 deletions.
24 changes: 15 additions & 9 deletions packages/core/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,26 +58,32 @@ export class Core {
this._board.scale(opts);
}

// scroll(num: number) {
// this._board.scroll(num);
// }

resize(newViewSize: Partial<ViewSizeInfo>) {
const { _board: board } = this;
const sharer = board.getSharer();
const viewSizeInfo = sharer.getActiveViewSizeInfo();
// const sharer = this._board.getSharer();
// const viewScaleInfo = sharer.getActiveViewScaleInfo();
board.resize({
...viewSizeInfo,
...newViewSize
});
// this._board.scale(viewScaleInfo.scale);
// this._board.scrollX(viewScaleInfo.offsetLeft);
// this._board.scrollY(viewScaleInfo.offsetTop);
}

clear() {
this._board.clear();
}

on<T extends keyof CoreEvent>(name: T, callback: (e: CoreEvent[T]) => void) {
const eventHub = this._board.getEventHub();
eventHub.on(name, callback);
}

off<T extends keyof CoreEvent>(name: T, callback: (e: CoreEvent[T]) => void) {
const eventHub = this._board.getEventHub();
eventHub.off(name, callback);
}

trigger<T extends keyof CoreEvent>(name: T, e: CoreEvent[T]) {
const eventHub = this._board.getEventHub();
eventHub.trigger(name, e);
}
}
7 changes: 7 additions & 0 deletions packages/core/src/middleware/selector/config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,5 +13,12 @@ export const keySelectedElementController = Symbol(`${key}_selectedElementContro
export const keyGroupQueue = Symbol(`${key}_groupQueue`); // Array<Element<'group'>> | []
export const keyGroupQueueVertexesList = Symbol(`${key}_groupQueueVertexesList`); // Array<ViewRectVertexes> | []

export const keyDebugElemCenter = Symbol(`${key}_debug_elemCenter`);
export const keyDebugStartVertical = Symbol(`${key}_debug_startVertical`);
export const keyDebugEndVertical = Symbol(`${key}_debug_endVertical`);
export const keyDebugStartHorizontal = Symbol(`${key}_debug_startHorizontal`);
export const keyDebugEndHorizontal = Symbol(`${key}_debug_endHorizontal`);
export const keyDebugEnd0 = Symbol(`${key}_debug_end0`);

export const resizeControllerBorderWidth = 2;
export const wrapperColor = '#1973ba';
18 changes: 11 additions & 7 deletions packages/core/src/middleware/selector/draw-wrapper.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,16 @@ import type { AreaSize } from './types';

import { resizeControllerBorderWidth, wrapperColor } from './config';

function drawVertexes(ctx: ViewContext2D, vertexes: ViewRectVertexes, opts: { borderColor: string; borderWidth: number; bgColor: string; lineDash: number[] }) {
const { borderColor, borderWidth, bgColor, lineDash } = opts;
function drawVertexes(
ctx: ViewContext2D,
vertexes: ViewRectVertexes,
opts: { borderColor: string; borderWidth: number; background: string; lineDash: number[] }
) {
const { borderColor, borderWidth, background, lineDash } = opts;
ctx.setLineDash([]);
ctx.lineWidth = borderWidth;
ctx.strokeStyle = borderColor;
ctx.fillStyle = bgColor;
ctx.fillStyle = background;
ctx.setLineDash(lineDash);
ctx.beginPath();
ctx.moveTo(vertexes[0].x, vertexes[0].y);
Expand All @@ -43,7 +47,7 @@ export function drawHoverVertexesWrapper(
if (!vertexes) {
return;
}
const wrapperOpts = { borderColor: wrapperColor, borderWidth: 1, bgColor: 'transparent', lineDash: [] };
const wrapperOpts = { borderColor: wrapperColor, borderWidth: 1, background: 'transparent', lineDash: [] };
drawVertexes(ctx, calcViewVertexes(vertexes, opts), wrapperOpts);
}

Expand All @@ -57,8 +61,8 @@ export function drawSelectedElementControllersVertexes(
}
const { elementWrapper, left, right, top, bottom, topLeft, topRight, bottomLeft, bottomRight } = controller;
// const wrapperColor = 'red'; // TODO
const wrapperOpts = { borderColor: wrapperColor, borderWidth: 1, bgColor: 'transparent', lineDash: [] };
const ctrlOpts = { ...wrapperOpts, borderWidth: resizeControllerBorderWidth, bgColor: '#FFFFFF' };
const wrapperOpts = { borderColor: wrapperColor, borderWidth: 1, background: 'transparent', lineDash: [] };
const ctrlOpts = { ...wrapperOpts, borderWidth: resizeControllerBorderWidth, background: '#FFFFFF' };

drawVertexes(ctx, calcViewVertexes(elementWrapper, opts), wrapperOpts);
drawVertexes(ctx, calcViewVertexes(left.vertexes, opts), ctrlOpts);
Expand Down Expand Up @@ -145,7 +149,7 @@ export function drawGroupQueueVertexesWrappers(
) {
for (let i = 0; i < vertexesList.length; i++) {
const vertexes = vertexesList[i];
const wrapperOpts = { borderColor: wrapperColor, borderWidth: 2, bgColor: 'transparent', lineDash: [4, 4] };
const wrapperOpts = { borderColor: wrapperColor, borderWidth: 2, background: 'transparent', lineDash: [4, 4] };
drawVertexes(ctx, calcViewVertexes(vertexes, opts), wrapperOpts);
}
}
83 changes: 65 additions & 18 deletions packages/core/src/middleware/selector/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@ import {
calcElementVertexesInGroup,
calcElementQueueVertexesQueueInGroup,
calcElementSizeController,
rotatePointInGroup
rotatePointInGroup,
getGroupQueueFromList,
findElementsFromList
} from '@idraw/util';
import type { ViewRectVertexes, CoreEvent } from '@idraw/types';
import type {
Expand Down Expand Up @@ -42,6 +44,12 @@ import {
keySelectedElementList,
keySelectedElementListVertexes,
keySelectedElementController
// keyDebugElemCenter,
// keyDebugEnd0,
// keyDebugEndHorizontal,
// keyDebugEndVertical,
// keyDebugStartHorizontal,
// keyDebugStartVertical
} from './config';

export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, CoreEvent> = (opts) => {
Expand All @@ -50,6 +58,28 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core
let prevPoint: Point | null = null;
let inBusyMode: 'resize' | 'drag' | 'drag-list' | 'area' | null = null;

eventHub.on('select', ({ uuids }) => {
const actionType = sharer.getSharedStorage(keyActionType);
const data = sharer.getActiveStorage('data');
const elements = findElementsFromList(uuids, data?.elements || []);
let needRefresh = false;
if (!actionType && elements.length === 1) {
// TODO
sharer.setSharedStorage(keyActionType, 'select');
needRefresh = true;
} else if (actionType === 'select' && elements.length === 1) {
// TODO
needRefresh = true;
}
if (needRefresh) {
const elem = elements[0];
const groupQueue = getGroupQueueFromList(elem.uuid, data?.elements || []);
sharer.setSharedStorage(keyGroupQueue, groupQueue);
updateSelectedElementList(elements);
viewer.drawFrame();
}
});

sharer.setSharedStorage(keyActionType, null);

const getActiveElements = () => {
Expand Down Expand Up @@ -87,7 +117,7 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core
sharer.setSharedStorage(keyHoverElementVertexes, vertexes);
};

const updateSelectedElementList = (list: Element<ElementType>[]) => {
const updateSelectedElementList = (list: Element<ElementType>[], opts?: { triggerEvent?: boolean }) => {
sharer.setSharedStorage(keySelectedElementList, list);
if (list.length === 1) {
const controller = calcElementSizeController(list[0], {
Expand All @@ -99,6 +129,10 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core
} else {
sharer.setSharedStorage(keySelectedElementController, null);
}

if (opts?.triggerEvent === true) {
eventHub.trigger('select', { uuids: list.map((elem) => elem.uuid) });
}
};

const pointTargetBaseOptions = () => {
Expand Down Expand Up @@ -236,13 +270,13 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core
const target = getPointTarget(e.point, pointTargetBaseOptions());
updateHoverElement(null);
if (target.type === 'over-element' && target?.elements?.length === 1) {
updateSelectedElementList([target.elements[0]]);
updateSelectedElementList([target.elements[0]], { triggerEvent: true });
sharer.setSharedStorage(keyActionType, 'drag');
} else if (target.type?.startsWith('resize-')) {
sharer.setSharedStorage(keyResizeType, target.type as ResizeType);
sharer.setSharedStorage(keyActionType, 'resize');
} else {
updateSelectedElementList([]);
updateSelectedElementList([], { triggerEvent: true });
}
} else {
// TODO
Expand All @@ -267,7 +301,7 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core
if (target.type === 'list-area') {
sharer.setSharedStorage(keyActionType, 'drag-list');
} else if (target.type === 'over-element' && target?.elements?.length === 1) {
updateSelectedElementList([target.elements[0]]);
updateSelectedElementList([target.elements[0]], { triggerEvent: true });
sharer.setSharedStorage(keyActionType, 'drag');
} else if (target.type?.startsWith('resize-')) {
sharer.setSharedStorage(keyResizeType, target.type as ResizeType);
Expand All @@ -276,7 +310,7 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core
clear();
sharer.setSharedStorage(keyActionType, 'area');
sharer.setSharedStorage(keyAreaStart, e.point);
updateSelectedElementList([]);
updateSelectedElementList([], { triggerEvent: true });
}
// if (target.type) {
// prevPoint = e.point;
Expand Down Expand Up @@ -354,6 +388,10 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core
viewer.drawFrame();
}
prevPoint = e.point;

// if (data && (['drag', 'drag-list', 'drag-list-end', 'resize'] as ActionType[]).includes(actionType)) {
// eventHub.trigger('change', { data });
// }
},

pointEnd(e: PointWatcherEvent) {
Expand All @@ -368,6 +406,7 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core
prevPoint = null;
if (actionType === 'resize' && resizeType) {
sharer.setSharedStorage(keyResizeType, null);
needDrawFrame = true;
} else if (actionType === 'area') {
sharer.setSharedStorage(keyActionType, null);
if (data) {
Expand All @@ -384,7 +423,7 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core

if (elements.length > 0) {
sharer.setSharedStorage(keyActionType, 'drag-list');
updateSelectedElementList(elements);
updateSelectedElementList(elements, { triggerEvent: true });
needDrawFrame = true;
}
}
Expand Down Expand Up @@ -418,9 +457,10 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core
const viewInfo = calcElementsViewInfo(data.elements, viewSizeInfo, { extend: true });
sharer.setActiveStorage('contextHeight', viewInfo.contextSize.contextHeight);
sharer.setActiveStorage('contextWidth', viewInfo.contextSize.contextWidth);
// TODO
// viewer.scrollX(offsetLeft + viewInfo.changeContextLeft);
// viewer.scrollY(offsetTop + viewInfo.changeContextTop);
}

if (data && (['drag', 'drag-list', 'drag-list-end', 'resize'] as ActionType[]).includes(actionType)) {
eventHub.trigger('change', { data });
}
viewer.drawFrame();
};
Expand Down Expand Up @@ -452,6 +492,7 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core
const { activeStore, sharedStore } = snapshot;
const { scale, offsetLeft, offsetTop, offsetRight, offsetBottom, width, height, contextHeight, contextWidth, devicePixelRatio } = activeStore;

const sharer = opts.sharer;
const viewScaleInfo = { scale, offsetLeft, offsetTop, offsetRight, offsetBottom };
const viewSizeInfo = { width, height, contextHeight, contextWidth, devicePixelRatio };
const selectedElements = sharedStore[keySelectedElementList];
Expand All @@ -464,8 +505,15 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core
const groupQueue: Element<'group'>[] = sharedStore[keyGroupQueue];
const groupQueueVertexesList: ViewRectVertexes[] = sharedStore[keyGroupQueueVertexesList];
const drawBaseOpts = { calculator, viewScaleInfo, viewSizeInfo };
const selectedElementController = sharedStore[keySelectedElementController];
// const selectedElementController = sharedStore[keySelectedElementController];
// const resizeType: ResizeType | null = sharedStore[keyResizeType];
const selectedElementController = elem
? calcElementSizeController(elem, {
groupQueue,
controllerSize: 10,
viewScaleInfo
})
: null;

if (groupQueue?.length > 0) {
// in group
Expand Down Expand Up @@ -498,13 +546,12 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core
}

// // TODO mock data
// const sharer = opts.sharer;
// const elemCenter: any = sharer.getSharedStorage('TODO_elemCenter');
// const startVertical = sharer.getSharedStorage('TODO_startVertical');
// const endVertical: any = sharer.getSharedStorage('TODO_endVertical');
// const startHorizontal = sharer.getSharedStorage('TODO_startHorizontal');
// const endHorizontal: any = sharer.getSharedStorage('TODO_endHorizontal');
// const end0: any = sharer.getSharedStorage('TODO_end0');
// const elemCenter: any = sharer.getSharedStorage(keyDebugElemCenter);
// const startVertical = sharer.getSharedStorage(keyDebugStartVertical);
// const endVertical: any = sharer.getSharedStorage(keyDebugEndVertical);
// const startHorizontal = sharer.getSharedStorage(keyDebugStartHorizontal);
// const endHorizontal: any = sharer.getSharedStorage(keyDebugEndHorizontal);
// const end0: any = sharer.getSharedStorage(keyDebugEnd0);
// if (elemCenter && end0) {
// helperContext.beginPath();
// helperContext.moveTo(elemCenter.x, elemCenter.y);
Expand Down
17 changes: 15 additions & 2 deletions packages/core/src/middleware/selector/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,13 @@ import {
keyHoverElementVertexes,
keySelectedElementList,
keySelectedElementListVertexes,
keySelectedElementController
keySelectedElementController,
keyDebugElemCenter,
keyDebugEnd0,
keyDebugEndHorizontal,
keyDebugEndVertical,
keyDebugStartHorizontal,
keyDebugStartVertical
} from './config';

import {
Expand Down Expand Up @@ -47,7 +53,7 @@ export {
export type ControllerStyle = ElementSize & {
borderWidth: number;
borderColor: string;
bgColor: string;
background: string;
};

export type SelectedElementSizeController = Record<string, ControllerStyle>;
Expand Down Expand Up @@ -88,4 +94,11 @@ export type DeepSelectorSharedStorage = {
[keySelectedElementList]: Array<Element<ElementType>>;
[keySelectedElementListVertexes]: ViewRectVertexes | null;
[keySelectedElementController]: ElementSizeController | null;

[keyDebugElemCenter]: PointSize | null;
[keyDebugEnd0]: PointSize | null;
[keyDebugEndHorizontal]: PointSize | null;
[keyDebugEndVertical]: PointSize | null;
[keyDebugStartHorizontal]: PointSize | null;
[keyDebugStartVertical]: PointSize | null;
};
Loading

0 comments on commit fd13ea6

Please sign in to comment.