Skip to content

Commit

Permalink
Merge pull request #213 from idrawjs/dev-v0.4
Browse files Browse the repository at this point in the history 
refactor: refactor selector middleware
  • Loading branch information
@chenshenhai
chenshenhai authored Sep 16, 2023
2 parents 46ba3b5 + 4035419 commit 340a3c0
Show file tree
Hide file tree
Showing 19 changed files with 859 additions and 218 deletions.
3 changes: 3 additions & 0 deletions jest.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,9 @@ module.exports = {
'(/packages/renderer/__tests__/.*)\\.test.ts$',
'(/packages/types/__tests__/.*)\\.test.ts$'
],
moduleNameMapper: {
'@idraw/util': '<rootDir>/packages/util/src/index.ts'
},
// "testRegex": "(/packages/idraw/__tests__/.*)\\.test.ts$",
setupFiles: ['jest-canvas-mock']
};
6 changes: 0 additions & 6 deletions packages/board/src/lib/sharer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@ const defaultActiveStorage: ActiveStore = {
width: 0,
height: 0,
devicePixelRatio: 1,
contextX: 0,
contextY: 0,
contextWidth: 0,
contextHeight: 0,
data: null,
Expand Down Expand Up @@ -84,8 +82,6 @@ export class Sharer implements StoreSharer<Record<string | number | symbol, any>
this._activeStore.set('width', size.width);
this._activeStore.set('height', size.height);
this._activeStore.set('devicePixelRatio', size.devicePixelRatio);
this._activeStore.set('contextX', size.contextX);
this._activeStore.set('contextY', size.contextY);
this._activeStore.set('contextWidth', size.contextWidth);
this._activeStore.set('contextHeight', size.contextHeight);
}
Expand All @@ -95,8 +91,6 @@ export class Sharer implements StoreSharer<Record<string | number | symbol, any>
width: this._activeStore.get('width'),
height: this._activeStore.get('height'),
devicePixelRatio: this._activeStore.get('devicePixelRatio'),
contextX: this._activeStore.get('contextX'),
contextY: this._activeStore.get('contextY'),
contextWidth: this._activeStore.get('contextWidth'),
contextHeight: this._activeStore.get('contextHeight')
};
Expand Down
5 changes: 1 addition & 4 deletions packages/board/src/lib/viewer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,7 @@ export class Viewer extends EventEmitter<BoardViewerEventMap> implements BoardVi
const { renderer, viewContent, beforeDrawFrame, afterDrawFrame } = this._opts;

if (snapshot) {
const { scale, offsetTop, offsetBottom, offsetLeft, offsetRight, width, height, contextX, contextY, contextHeight, contextWidth, devicePixelRatio } =
snapshot.activeStore;
const { scale, offsetTop, offsetBottom, offsetLeft, offsetRight, width, height, contextHeight, contextWidth, devicePixelRatio } = snapshot.activeStore;
const { viewContext, helperContext, boardContext } = viewContent;

if (snapshot?.activeStore.data) {
Expand All @@ -59,8 +58,6 @@ export class Viewer extends EventEmitter<BoardViewerEventMap> implements BoardVi
viewSizeInfo: {
width,
height,
contextX,
contextY,
contextHeight,
contextWidth,
devicePixelRatio
Expand Down
2 changes: 0 additions & 2 deletions packages/core/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,6 @@ export class Core {
width,
height,
devicePixelRatio,
contextX: 0,
contextY: 0,
contextWidth: width,
contextHeight: height
});
Expand Down
16 changes: 6 additions & 10 deletions packages/core/src/middleware/scroller/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,17 +99,13 @@ export const MiddlewareScroller: BoardMiddleware = (opts) => {
}
},
pointEnd: (e: PointWatcherEvent) => {
// const { point } = e;
// if (activeThumbType === 'X' || activeThumbType === 'Y') {
// if (activeThumbType === 'X') {
// scrollX(point);
// } else if (activeThumbType === 'Y') {
// scrollY(point);
// }
// activeThumbType = null;
// return false;
// }
const activeThumbType = sharer.getSharedStorage(keyActiveThumbType);
clear();
if (activeThumbType === 'X' || activeThumbType === 'Y') {
viewer.scroll({ moveX: 0, moveY: 0 });
viewer.drawFrame();
return false;
}
},
beforeDrawFrame({ snapshot }) {
const { xThumbRect, yThumbRect } = drawScroller(helperContext, { snapshot });
Expand Down
4 changes: 2 additions & 2 deletions packages/core/src/middleware/scroller/util.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ function calcScrollerInfo(viewScaleInfo: ViewScaleInfo, viewSizeInfo: ViewSizeIn
}
ySize = Math.max(sliderMinSize, height - (Math.abs(offsetTop) + Math.abs(offsetBottom)));
if (ySize >= height) {
ySize = width;
ySize = height;
}

const xStart = lineSize / 2;
Expand All @@ -95,7 +95,7 @@ function calcScrollerInfo(viewScaleInfo: ViewScaleInfo, viewSizeInfo: ViewSizeIn
}

const yStart = lineSize / 2;
const yEnd = width - xSize - lineSize;
const yEnd = height - ySize - lineSize;
let translateY = yStart;
if (offsetTop > 0) {
translateY = yStart;
Expand Down
6 changes: 5 additions & 1 deletion packages/core/src/middleware/selector/draw-wrapper.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export function drawSelectedElementControllersVertexes(
if (!controller) {
return;
}
const { elementWrapper, left, right, top, bottom } = controller;
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' };
Expand All @@ -65,6 +65,10 @@ export function drawSelectedElementControllersVertexes(
drawVertexes(ctx, calcViewVertexes(right.vertexes, opts), ctrlOpts);
drawVertexes(ctx, calcViewVertexes(top.vertexes, opts), ctrlOpts);
drawVertexes(ctx, calcViewVertexes(bottom.vertexes, opts), ctrlOpts);
drawVertexes(ctx, calcViewVertexes(topLeft.vertexes, opts), ctrlOpts);
drawVertexes(ctx, calcViewVertexes(topRight.vertexes, opts), ctrlOpts);
drawVertexes(ctx, calcViewVertexes(bottomLeft.vertexes, opts), ctrlOpts);
drawVertexes(ctx, calcViewVertexes(bottomRight.vertexes, opts), ctrlOpts);
}

export function drawElementListShadows(ctx: ViewContext2D, elements: Element<ElementType>[], opts?: Omit<RendererDrawElementOptions, 'loader'>) {
Expand Down
43 changes: 36 additions & 7 deletions packages/core/src/middleware/selector/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -321,8 +321,7 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage> = (o
resizeStart = rotatePointInGroup(start, pointGroupQueue);
resizeEnd = rotatePointInGroup(end, pointGroupQueue);
}
const resizedElemSize = resizeElement(elems[0], { scale, start: resizeStart, end: resizeEnd, resizeType });
// const resizedElemSize = resizeElement(elems[0], { scale, start, end, resizeType });
const resizedElemSize = resizeElement(elems[0], { scale, start: resizeStart, end: resizeEnd, resizeType, sharer });
elems[0].x = resizedElemSize.x;
elems[0].y = resizedElemSize.y;
elems[0].w = resizedElemSize.w;
Expand Down Expand Up @@ -396,8 +395,6 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage> = (o
}
if (data && Array.isArray(data?.elements) && (['drag', 'drag-list'] as ActionType[]).includes(actionType)) {
const viewInfo = calcElementsViewInfo(data.elements, viewSizeInfo, { extend: true });
sharer.setActiveStorage('contextX', viewInfo.contextSize.contextX);
sharer.setActiveStorage('contextY', viewInfo.contextSize.contextY);
sharer.setActiveStorage('contextHeight', viewInfo.contextSize.contextHeight);
sharer.setActiveStorage('contextWidth', viewInfo.contextSize.contextWidth);
// TODO
Expand Down Expand Up @@ -432,11 +429,10 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage> = (o

beforeDrawFrame({ snapshot }) {
const { activeStore, sharedStore } = snapshot;
const { scale, offsetLeft, offsetTop, offsetRight, offsetBottom, width, height, contextX, contextY, contextHeight, contextWidth, devicePixelRatio } =
activeStore;
const { scale, offsetLeft, offsetTop, offsetRight, offsetBottom, width, height, contextHeight, contextWidth, devicePixelRatio } = activeStore;

const viewScaleInfo = { scale, offsetLeft, offsetTop, offsetRight, offsetBottom };
const viewSizeInfo = { width, height, contextX, contextY, contextHeight, contextWidth, devicePixelRatio };
const viewSizeInfo = { width, height, contextHeight, contextWidth, devicePixelRatio };
const selectedElements = sharedStore[keySelectedElementList];
const elem = selectedElements[0];
const hoverElement: ElementSize = sharedStore[keyHoverElement] as ElementSize;
Expand Down Expand Up @@ -478,6 +474,39 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage> = (o
}
}
}

// // 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');
// if (elemCenter && end0) {
// helperContext.beginPath();
// helperContext.moveTo(elemCenter.x, elemCenter.y);
// helperContext.lineTo(end0.x, end0.y);
// helperContext.closePath();
// helperContext.strokeStyle = 'black';
// helperContext.stroke();
// }
// if (elemCenter && endVertical) {
// helperContext.beginPath();
// helperContext.moveTo(elemCenter.x, elemCenter.y);
// helperContext.lineTo(endVertical.x, endVertical.y);
// helperContext.closePath();
// helperContext.strokeStyle = 'red';
// helperContext.stroke();
// }
// if (elemCenter && endHorizontal) {
// helperContext.beginPath();
// helperContext.moveTo(elemCenter.x, elemCenter.y);
// helperContext.lineTo(endHorizontal.x, endHorizontal.y);
// helperContext.closePath();
// helperContext.strokeStyle = 'blue';
// helperContext.stroke();
// }
}
};
};
10 changes: 9 additions & 1 deletion packages/core/src/middleware/selector/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,15 @@ export type ControllerStyle = ElementSize & {

export type SelectedElementSizeController = Record<string, ControllerStyle>;

export type ResizeType = 'resize-left' | 'resize-right' | 'resize-top' | 'resize-bottom';
export type ResizeType =
| 'resize-left'
| 'resize-right'
| 'resize-top'
| 'resize-bottom'
| 'resize-top-left'
| 'resize-top-right'
| 'resize-bottom-left'
| 'resize-bottom-right';

export type PointTargetType = null | ResizeType | 'list-area' | 'over-element';

Expand Down
Loading

0 comments on commit 340a3c0

Please sign in to comment.