[feature] Add grids (#344)

* [feature] grids

* Shows relative grids at different zoom levels

* Update colors

* Restores vec and intersect to monorepo, changes vec.round to vec.toFixed, adds vec.snap

* Snapping in translate and transforms, fix shortcut

* fix bugs in build

* use grid size for nudge too

* update scripts

* Update grid.tsx

* Update grid.tsx

* Fixed!

* Update grid.tsx

* Fix package imports

* Update Editor.tsx

* Improve tsconfigs, imports

* Fix tiny arrow bugs, snap starting points to grid

* Update tsconfig.base.json

* Update shape-styles.ts

* Fix example tsconfig

* Fix translate type error

* Fix types, paths

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
This commit is contained in:
Christian Petersen 2021-11-26 15:14:10 +00:00 committed by GitHub
parent 3de6ef334a
commit e2814943e9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
105 changed files with 4795 additions and 300 deletions

View file

@ -86,6 +86,14 @@ export interface RendererProps<T extends TLShape, M = any> extends Partial<TLCal
* hovered objects,
*/
hideIndicators?: boolean
/**
* (optional) When true, the renderer will not show the grid.
*/
hideGrid?: boolean
/**
* (optional) The size of the grid step.
*/
grid?: number
/**
* (optional) A callback that receives the renderer's inputs manager.
*/
@ -114,6 +122,7 @@ export function Renderer<T extends TLShape, M extends Record<string, unknown>>({
theme,
meta,
snapLines,
grid,
containerRef,
hideHandles = false,
hideIndicators = false,
@ -122,6 +131,7 @@ export function Renderer<T extends TLShape, M extends Record<string, unknown>>({
hideResizeHandles = false,
hideRotateHandles = false,
hideBounds = false,
hideGrid = true,
...rest
}: RendererProps<T, M>): JSX.Element {
useTLTheme(theme, '#' + id)
@ -164,6 +174,7 @@ export function Renderer<T extends TLShape, M extends Record<string, unknown>>({
page={page}
pageState={pageState}
snapLines={snapLines}
grid={grid}
users={users}
userId={userId}
externalContainerRef={containerRef}
@ -174,6 +185,7 @@ export function Renderer<T extends TLShape, M extends Record<string, unknown>>({
hideBindingHandles={hideBindingHandles}
hideRotateHandle={hideRotateHandles}
hideResizeHandles={hideResizeHandles}
hideGrid={hideGrid}
onBoundsChange={onBoundsChange}
meta={meta}
/>