kamen
/
graphicek
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Proper h snap constant

This commit is contained in:
Jan Zípek 2022-08-24 09:02:52 +02:00
parent 6879b11b4a
commit 8bff4d083e
Signed by: kamen
GPG Key ID: A17882625B33AC31
4 changed files with 8 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
client/src/pages/dashboard/NewDashboardPage.tsx
View File

@ -9,6 +9,7 @@ import { useEffect, useMemo, useState } from 'preact/hooks'
import { useQuery } from 'react-query' import { useQuery } from 'react-query'
import { DashboardGrid } from './components/DashboardGrid' import { DashboardGrid } from './components/DashboardGrid'
import { DashboardHeader } from './components/DashboardHeader' import { DashboardHeader } from './components/DashboardHeader'
import { GRID_H_SNAP, GRID_WIDTH } from './constants'
import { DashboardContextProvider } from './contexts/DashboardContext' import { DashboardContextProvider } from './contexts/DashboardContext'
import { BoxDefinition } from './types' import { BoxDefinition } from './types'
@ -48,8 +49,8 @@ export const NewDashboardPage = () => {
id: new Date().getTime().toString(), id: new Date().getTime().toString(),
x: 0, x: 0,
y: 0, y: 0,
w: 12, w: GRID_WIDTH,
h: 200, h: GRID_H_SNAP * 20,
} }
const otherBoxes = boxes.map((b) => { const otherBoxes = boxes.map((b) => {

1
client/src/pages/dashboard/constants.ts
View File

@ -1 +1,2 @@
export const GRID_WIDTH = 20 export const GRID_WIDTH = 20
export const GRID_H_SNAP = 10

4
client/src/pages/dashboard/hooks/useDragging.ts
View File

@ -1,7 +1,7 @@
import { useWindowEvent } from '@/utils/hooks/useWindowEvent' import { useWindowEvent } from '@/utils/hooks/useWindowEvent'
import { useState } from 'preact/hooks' import { useState } from 'preact/hooks'
import { BoxDefinition } from '../types' import { BoxDefinition } from '../types'
import { GRID_WIDTH } from '../constants' import { GRID_H_SNAP, GRID_WIDTH } from '../constants'
type Props = { type Props = {
cellWidth: number cellWidth: number
@ -24,7 +24,7 @@ export const useDragging = ({ cellWidth, boxes, box }: Props) => {
Math.min(GRID_WIDTH - box.w, Math.round(state.x / cellWidth)) Math.min(GRID_WIDTH - box.w, Math.round(state.x / cellWidth))
) )
const dragY = Math.round(state.y / 16) * 16 const dragY = Math.round(state.y / GRID_H_SNAP) * GRID_H_SNAP
const gridHeights = Array(GRID_WIDTH) const gridHeights = Array(GRID_WIDTH)
.fill(null) .fill(null)

4
client/src/pages/dashboard/hooks/useResize.ts
View File

@ -1,7 +1,7 @@
import { useWindowEvent } from '@/utils/hooks/useWindowEvent' import { useWindowEvent } from '@/utils/hooks/useWindowEvent'
import { useState } from 'preact/hooks' import { useState } from 'preact/hooks'
import { BoxDefinition } from '../types' import { BoxDefinition } from '../types'
import { GRID_WIDTH } from '../constants' import { GRID_H_SNAP, GRID_WIDTH } from '../constants'
export enum ResizingMode { export enum ResizingMode {
NONE, NONE,
@ -53,7 +53,7 @@ export const useResize = ({ cellWidth, box, boxes }: Props) => {
.fill(null) .fill(null)
.map((_, x) => maxHeights[box.x + x]) .map((_, x) => maxHeights[box.x + x])
.filter((x) => x > 0), .filter((x) => x > 0),
Math.round(state.h / 16) * 16 Math.round(state.h / GRID_H_SNAP) * GRID_H_SNAP
) )
: 0 : 0