Elgato_dark/idraw
1
0
Fork 0
mirror of https://github.com/idrawjs/idraw synced 2026-05-24 10:08:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: improve scroller and selector middleware

Browse source
This commit is contained in:
chenshenhai 2023-06-04 20:15:10 +08:00
parent 99f6ee8f41
commit 3b63dce68b
3 changed files with 17 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
packages/core/src/middleware/scroller/util.ts
View file

@ -2,6 +2,7 @@ import type { Point, BoardViewerFrameSnapshot, ViewScaleInfo, ViewSizeInfo, View
import { getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from '@idraw/util';
const minScrollerWidth = 12;
const scrollerLineWidth = 16;
const scrollerAlpha = 0.12;
const scrollerThumbAlpha = 0.36;
@ -50,8 +51,8 @@ export function isPointInScrollbar(helperContext: ViewContext2D, p: Point, sizeI
export function calcScrollerInfo(scaleInfo: ViewScaleInfo, sizeInfo: ViewSizeInfo) {
const { width, height } = sizeInfo;
const { offsetTop, offsetBottom, offsetLeft, offsetRight } = scaleInfo;
const sliderMinSize = 10 * 2.5;
const lineSize = 10;
const sliderMinSize = scrollerLineWidth * 2.5;
const lineSize = scrollerLineWidth;
let xSize = 0;
let ySize = 0;
if (offsetLeft <= 0 && offsetRight <= 0) {
@ -100,10 +101,10 @@ function drawScrollerThumb(
let { x, y, h, w } = opts;
const { color, axis } = opts;
if (axis === 'X') {
y = y + h / 4 + 1;
y = y + h / 4 + 0;
h = h / 2;
} else if (axis === 'Y') {
x = x + w / 4 + 1;
x = x + w / 4 + 0;
w = w / 2;
}

2
packages/core/src/middleware/selector/index.ts
View file

@ -254,7 +254,7 @@ export const MiddlewareSelector: BoardMiddleware = (opts) => {
return;
}
if (data && Array.isArray(data?.elements) && ['drag', 'drag-list'].includes(actionType)) {
const viewInfo = calcElementsViewInfo(data.elements, viewSize, scaleInfo);
const viewInfo = calcElementsViewInfo(data.elements, viewSize, { extend: true });
sharer.setActiveStorage('contextX', viewInfo.contextSize.contextX);
sharer.setActiveStorage('contextY', viewInfo.contextSize.contextY);
sharer.setActiveStorage('contextHeight', viewInfo.contextSize.contextHeight);

13
packages/util/src/lib/element.ts
View file

@ -1,4 +1,4 @@
import type { Data, Element, ElementType, ElementSize, ViewContextSize, ViewScaleInfo, ViewSizeInfo } from '@idraw/types';
import type { Data, Element, ElementType, ElementSize, ViewContextSize, ViewSizeInfo } from '@idraw/types';
import { rotateElementVertexes } from './rotate';
function getGroupIndexes(elem: Element<'group'>, uuids: string[], parentIndex: string): string[] {
@ -188,7 +188,9 @@ export function calcElementsContextSize(elements: Array<Element<ElementType>>, o
export function calcElementsViewInfo(
elements: Array<Element<ElementType>>,
prevViewSize: ViewSizeInfo,
scaleInfo: ViewScaleInfo
options?: {
extend: boolean;
}
): {
contextSize: ViewContextSize;
changeContextLeft: number;
@ -198,6 +200,13 @@ export function calcElementsViewInfo(
} {
const contextSize = calcElementsContextSize(elements, { viewWidth: prevViewSize.width, viewHeight: prevViewSize.height });
if (options?.extend === true) {
contextSize.contextX = Math.min(contextSize.contextX, prevViewSize.contextX);
contextSize.contextY = Math.min(contextSize.contextY, prevViewSize.contextY);
contextSize.contextWidth = Math.max(contextSize.contextWidth, prevViewSize.contextWidth);
contextSize.contextHeight = Math.max(contextSize.contextHeight, prevViewSize.contextHeight);
}
let changeContextLeft = 0;
let changeContextRight = 0;
let changeContextTop = 0;