sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Code cleanup

Browse Source
This commit is contained in:
hazam 2020-01-04 03:03:08 +05:00
parent 1b93888da5
commit 9d65b1cbc1
1 changed files with 50 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/index.tsx
View File

@ -162,6 +162,40 @@ const SCROLLBAR_WIDTH = 6;
const SCROLLBAR_MARGIN = 4; const SCROLLBAR_MARGIN = 4;
const SCROLLBAR_COLOR = "rgba(0,0,0,0.3)"; const SCROLLBAR_COLOR = "rgba(0,0,0,0.3)";
function getScrollbars(
canvasWidth: number,
canvasHeight: number,
scrollX: number,
scrollY: number
) {
// horizontal scrollbar
const sceneWidth = canvasWidth + Math.abs(scrollX);
const scrollBarWidth = (canvasWidth * canvasWidth) / sceneWidth;
const scrollBarX = scrollX > 0 ? 0 : canvasWidth - scrollBarWidth;
const horizontalScrollBar = {
x: scrollBarX + SCROLLBAR_MARGIN,
y: canvasHeight - SCROLLBAR_WIDTH - SCROLLBAR_MARGIN,
width: scrollBarWidth - SCROLLBAR_MARGIN * 2,
height: SCROLLBAR_WIDTH
};
// vertical scrollbar
const sceneHeight = canvasHeight + Math.abs(scrollY);
const scrollBarHeight = (canvasHeight * canvasHeight) / sceneHeight;
const scrollBarY = scrollY > 0 ? 0 : canvasHeight - scrollBarHeight;
const verticalScrollBar = {
x: canvasWidth - SCROLLBAR_WIDTH - SCROLLBAR_MARGIN,
y: scrollBarY + SCROLLBAR_MARGIN,
width: SCROLLBAR_WIDTH,
height: scrollBarHeight - SCROLLBAR_WIDTH * 2
};
return {
horizontal: horizontalScrollBar,
vertical: verticalScrollBar
};
}
function renderScene( function renderScene(
rc: RoughCanvas, rc: RoughCanvas,
context: CanvasRenderingContext2D, context: CanvasRenderingContext2D,
@ -169,9 +203,6 @@ function renderScene(
) { ) {
if (!context) return; if (!context) return;
const canvasWidth = context.canvas.width;
const canvasHeight = context.canvas.height;
const fillStyle = context.fillStyle; const fillStyle = context.fillStyle;
if (typeof sceneState.viewBackgroundColor === "string") { if (typeof sceneState.viewBackgroundColor === "string") {
context.fillStyle = sceneState.viewBackgroundColor; context.fillStyle = sceneState.viewBackgroundColor;
@ -214,28 +245,25 @@ function renderScene(
maxY = Math.max(maxY, getElementAbsoluteY2(element)); maxY = Math.max(maxY, getElementAbsoluteY2(element));
}); });
// horizontal scrollbar const scrollBars = getScrollbars(
context.fillStyle = SCROLLBAR_COLOR; context.canvas.width,
const sceneWidth = canvasWidth + Math.abs(sceneState.scrollX); context.canvas.height,
const scrollBarWidth = (canvasWidth * canvasWidth) / sceneWidth; sceneState.scrollX,
const scrollBarX = sceneState.scrollX > 0 ? 0 : canvasWidth - scrollBarWidth; sceneState.scrollY
context.fillRect(
scrollBarX + SCROLLBAR_MARGIN,
canvasHeight - SCROLLBAR_WIDTH - SCROLLBAR_MARGIN,
scrollBarWidth - SCROLLBAR_MARGIN * 2,
SCROLLBAR_WIDTH
); );
// vertical scrollbar context.fillStyle = SCROLLBAR_COLOR;
const sceneHeight = canvasHeight + Math.abs(sceneState.scrollY);
const scrollBarHeight = (canvasHeight * canvasHeight) / sceneHeight;
const scrollBarY =
sceneState.scrollY > 0 ? 0 : canvasHeight - scrollBarHeight;
context.fillRect( context.fillRect(
canvasWidth - SCROLLBAR_WIDTH - SCROLLBAR_MARGIN, scrollBars.horizontal.x,
scrollBarY + SCROLLBAR_MARGIN, scrollBars.horizontal.y,
SCROLLBAR_WIDTH, scrollBars.horizontal.width,
scrollBarHeight - SCROLLBAR_WIDTH * 2 scrollBars.horizontal.height
);
context.fillRect(
scrollBars.vertical.x,
scrollBars.vertical.y,
scrollBars.vertical.width,
scrollBars.vertical.height
); );
context.fillStyle = fillStyle; context.fillStyle = fillStyle;
} }