{"bugs":{"url":"https://github.com/tldraw/tldraw/issues"},"dist":{"shasum":"69a5e8e36e575e2b47aca519881a02a2cda8a9b1","tarball":"https://registry.npmjs.org/@tldraw/core/-/core-0.0.74-beta.1.tgz","fileCount":65,"integrity":"sha512-ZrXKcOtVczcyAFEqTd+JIWI8m9+ffDBkZq6UzzAwaRIslR4E+y9vXkSw2ipdq8EYkH9qF7ye34n6KoBCZ33P+w==","signatures":[{"sig":"MEUCIQCNYqolPpXoeK4e8He21fZGwxR98jU8ON8u9fp/ErDg8QIgFf+IYNGPiMiVr+5p2ZDwce6dtSecFmu0KTwvj7c/Dm4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231549,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhNNGxCRA9TVsSAnZWagAAFqkQAKEM8NIWcs5fyFdcZAcQ\nhnhVG3s0aH4g+mzA2FR+scChcF9zYci0zi9HPzMEVngwNdQFMsFXju8j2lkn\n/zaTIhqdBVpu1DSlQbLbXcdj/fNufcTvavol62u6VX9wWZOr72kBL8Ix0GHO\nOgU6boZHdoWOBljN+D+j915EYbKgvJKak1i3bYQUs/W4RxrGj4sIpdeCW6a8\nHeyQctf/TdlsNeox+enNW7FnreKhbOInzZWeTgMB7yC523syDP7ztvprHZUG\nIjeRjT9Ketqvm96B27jbNA1CCxAnCFhEPC0+Qm3HOim/WY7MRGdDXbOKTtv2\nx5LUY97o+wH4hTTprR4cU1vfh4gaqbZggKEGo1atHXT9lyMCZCjjg6prGoqp\ntpzzcwGzaTzV0stl1YICxugamRk816i0EL4GVAd4FYlEgDQiIgmUmOUK3bRC\ntw3PXDdXCY6zx72EwmtrMEqmBUYKXaI4dRofrO4b2SQuCA69b99vB1CzOBz1\nVpZfW1kPb70TuSevxR18igFJvTPNJx0xYlOsdjFONRbBoFNnIinKzWUOxMST\nJ9LAZ21n7VbNZ/PrDBEHXupfXwEt93wnihuUwd2KqJF0J55TaMjGyHQk0f3w\n3fNkMIW78AvFsl8csLtE/vexpyeXoAchM+7qlTAadVhBeolI/eFHrt2fbtQg\nypp/\r\n=duQG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/cjs/index.js","name":"@tldraw/core","types":"./dist/types/index.d.ts","author":{"name":"@steveruizok"},"module":"./dist/esm/index.js","readme":"# @tldraw/core\n\nThis package contains the core of the [tldraw](https://tldraw.com) library. It includes:\n\n- [`Renderer`](#renderer) - a React component\n- [`TLShapeUtility`](#tlshapeutility) - an abstract class for custom shape utilities\n- the library's TypeScript [`types`](#types)\n- several utility classes:\n - [`Utils`](#utils)\n - [`Vec`](#vec)\n - [`Svg`](#svg)\n - [`brushUpdater`](#brushupdater)\n - [`Intersect`](#intersect)\n\n## Installation\n\n```bash\nyarn add @tldraw/core --peer\n```\n\n## Usage\n\nImport the `Renderer` React component and pass it the required props.\n\n- [Example](#example)\n- [Guide: Create a Custom Shape](#create-a-custom-shape)\n\n## Documentation\n\n### `Renderer`\n\n| Prop | Type | Description |\n| ------------ | --------------------------------- | ---------------------------------------------------------------------- |\n| `page` | [`TLPage`](#tlpage) | The current page object. |\n| `pageState` | [`TLPageState`](#tlpagestate) | The current page's state. |\n| `shapeUtils` | [`TLShapeUtils`](#tlshapeutils){} | The shape utilities used to render the shapes. |\n| `theme` | `object` | (optional) an object with overrides for the Renderer's default colors. |\n\nThe theme object accepts valid CSS colors for the following properties:\n\n| Property | Description |\n| -------------- | --------------------------------------------------------------- |\n| `foreground` | (optional) The primary (usually \"text\") color |\n| `background` | (optional) The default page's background color |\n| `brushFill` | (optional) The fill color of the brush selection box |\n| `brushStroke` | (optional) The stroke color of the brush selection box |\n| `selectFill` | (optional) The fill color of the selection bounds |\n| `selectStroke` | (optional) The stroke color of the selection bounds and handles |\n\n> Tip: If providing an object for the `theme` prop, either define the object outside of the parent component or memoize it with `React.useMemo`.\n\nThe renderer also accepts many (optional) event callbacks.\n\n| Prop | Description |\n| --------------------------- | --------------------------------------------------------- |\n| `onPan` | The user panned with the mouse wheel |\n| `onZoom` | The user zoomed with the mouse wheel |\n| `onPinch` | The user moved their pointers during a pinch |\n| `onPinchEnd` | The user stopped a two-pointer pinch |\n| `onPinchStart` | The user began a two-pointer pinch |\n| `onPointerMove` | The user moved their pointer |\n| `onPointerUp` | The user ended a point |\n| `onPointShape` | The user pointed a shape |\n| `onDoubleClickShape` | The user double-pointed a shape |\n| `onRightPointShape` | The user right-pointed a shape |\n| `onMoveOverShape` | The user moved their pointer a shape |\n| `onHoverShape` | The user moved their pointer onto a shape |\n| `onUnhoverShape` | The user moved their pointer off of a shape |\n| `onPointHandle` | The user pointed a shape handle |\n| `onDoubleClickHandle` | The user double-pointed a shape handle |\n| `onRightPointHandle`- | he user right-pointed a shape handle |\n| `onMoveOverHandle` | The user moved their pointer over a shape handle |\n| `onHoverHandle` | The user moved their pointer onto a shape handle |\n| `onUnhoverHandle` | The user moved their pointer off of a shape handle |\n| `onPointCanvas` | The user pointed the canvas |\n| `onDoubleClickCanvas` | The user double-pointed the canvas |\n| `onRightPointCanvas` | The user right-pointed the canvas |\n| `onPointBounds` | The user pointed the selection bounds |\n| `onDoubleClickBounds` | The user double-pointed the selection bounds |\n| `onRightPointBounds` | The user right-pointed the selection bounds |\n| `onPointBoundsHandle` | The user pointed a selection bounds edge or corner |\n| `onDoubleClickBoundsHandle` | The user double-pointed a selection bounds edge or corner |\n| `onBlurEditingShape` | The user blurred an editing (text) shape |\n| `onError` | The renderer encountered an error |\n\n> Tip: If providing callbacks, either define the functions outside of the parent component or memoize them first with `React.useMemo`.\n\n### `TLPage`\n\nAn object describing the current page. It contains:\n\n| Property | Type | Description |\n| ----------------- | --------------------------- | --------------------------------------------------------------------------- |\n| `id` | `string` | A unique id for the page. |\n| `shapes` | [`TLShape{}`](#tlshape) | A table of shapes. |\n| `bindings` | [`TLBinding{}`](#tlbinding) | A table of bindings. |\n| `backgroundColor` | `string` | (optional) The page's background fill color. Will also overwrite the theme. |\n\n### `TLPageState`\n\nAn object describing the current page. It contains:\n\n| Property | Type | Description |\n| ------------------ | ---------- | --------------------------------------------------- |\n| `id` | `string` | The corresponding page's id |\n| `selectedIds` | `string[]` | An array of selected shape ids |\n| `camera` | `object` | An object describing the camera state |\n| `camera.point` | `number[]` | The camera's `[x, y]` coordinates |\n| `camera.zoom` | `number` | The camera's zoom level |\n| `currentParentId` | `string` | (optional) The current parent id for selection |\n| `brush` | `TLBounds` | (optional) A `Bounds` for the current selection box |\n| `pointedId` | `string` | (optional) The currently pointed shape id |\n| `hoveredId` | `string` | (optional) The currently hovered shape id |\n| `editingId` | `string` | (optional) The currently editing shape id |\n| `editingBindingId` | `string` | (optional) The currently editing binding id |\n\n### `TLShape`\n\nAn object that describes a shape on the page. The shapes in your document should extend this interface with other properties. See [Guide: Create a Custom Shape](#create-a-custom-shape).\n\n| Property | Type | Description |\n| --------------------- | ------------------------- | -------------------------------------------------------------------------------------- |\n| `id` | `string` | The shape's id. |\n| `type` | `string` | The type of the shape, corresponding to the `type` of a [`TLShapeUtil`](#tlshapeutil). |\n| `parentId` | `string` | The id of the shape's parent (either the current page or another shape). |\n| `childIndex` | `number` | the order of the shape among its parent's children |\n| `name` | `string` | the name of the shape |\n| `point` | `number[]` | the shape's current `[x, y]` coordinates on the page |\n| `rotation` | `number` | (optiona) The shape's current rotation in radians |\n| `children` | `string[]` | (optional) An array containing the ids of this shape's children |\n| `handles` | [`TLHandle{}`](#tlhandle) | (optional) A table of `TLHandle` objects |\n| `isLocked` | `boolean` | (optional) True if the shape is locked |\n| `isHidden` | `boolean` | (optional) True if the shape is hidden |\n| `isEditing` | `boolean` | (optional) True if the shape is currently editing |\n| `isGenerated` | `boolean` | optional) True if the shape is generated programatically |\n| `isAspectRatioLocked` | `boolean` | (optional) True if the shape's aspect ratio is locked |\n\n### `TLHandle`\n\nAn object that describes a relationship between two shapes on the page.\n\n| Property | Type | Description |\n| -------- | ---------- | ---------------------------------------------- |\n| `id` | `string` | An id for the handle. |\n| `index` | `number` | The handle's order within the shape's handles. |\n| `point` | `number[]` | The handle's `[x, y]` coordinates. |\n\n### `TLBinding`\n\nAn object that describes a relationship between two shapes on the page.\n\n| Property | Type | Description |\n| -------- | -------- | --------------------------------------------- |\n| `id` | `string` | A unique id for the binding. |\n| `type` | `string` | The binding's type. |\n| `fromId` | `string` | The id of the shape where the binding begins. |\n| `toId` | `string` | The id of the shape where the binding begins. |\n\n### `TLShapeUtil`\n\nThe `TLShapeUtil` is an abstract class that you can extend to create utilities for your custom shapes. See [Guide: Create a Custom Shape](#create-a-custom-shape).\n\n### `brushUpdater`\n\nThe `brushUpdater` is a special class instance that allows you to quickly update the selection brush rectangle.\n\n| Method | Description |\n| ------- | --------------------------------------------------------------- |\n| `set` | a method that accepts either a `TLBounds` object or `undefined` |\n| `clear` | a method to hide the brush |\n\nNormally, the renderer's brush will update in response to changes to `pageState.brush`; however, calling `brushUpdater.set` will produce a faster change in the brush rectangle. Calling `brushUpdater.set` will prevent the brush from any future updates from `pageState.brush`.\n\n## `inputs`\n\nA class instance that stores the current pointer position and pressed keys.\n\n### `Utils`\n\nA general purpose utility class.\n\n### `Vec`\n\nA utility class for vector math and related methods.\n\n### `Svg`\n\nA utility class for creating SVG path data through imperative commands.\n\n### `Intersect`\n\nA utility class for finding intersections between various geometric shapes.\n\n## Guides\n\n### Create a Custom Shape\n\n...\n\n### Example\n\n```tsx\nimport * as React from \"react\"\nimport { Renderer, TLShape, TLShapeUtil, Vec } from '@tldraw/core'\n\ninterface RectangleShape extends TLShape {\n type: \"rectangle\",\n size: number[]\n}\n\nclass Rectangle extends TLShapeUtil {\n // See the \"Create a Custom Shape\" guide\n}\n\nconst myShapes = { rectangle: new Rectangle() }\n\nfunction App() {\n const [page, setPage] = React.useState({\n id: \"page1\"\n shapes: {\n \"rect1\": {\n id: 'rect1',\n parentId: 'page1',\n name: 'Rectangle',\n childIndex: 0,\n type: 'rectangle',\n point: [0, 0],\n rotation: 0,\n size: [100, 100],\n }\n },\n bindings: {}\n })\n\n const [pageState, setPageState] = React.useState({\n id: \"page1\",\n selectedIds: [],\n camera: {\n point: [0,0],\n zoom: 1\n }\n })\n\n const handlePan = React.useCallback((delta: number[]) => {\n setPageState(pageState => {\n ...pageState,\n camera: {\n zoom,\n point: Vec.sub(pageState.point, Vec.div(delta, pageState.zoom)),\n },\n })\n }, [])\n\n return ()\n}\n```\n\n## Development\n\nRun `yarn` to install dependencies.\n\nRun `yarn start` to begin the monorepo's development server (`@tldraw/site`).\n\nRun `nx test core` to execute unit tests via [Jest](https://jestjs.io).\n\n## Contribution\n\nTo contribute, visit the [Discord channel](https://discord.gg/s4FXZ6fppJ).\n","gitHead":"af69aef5c0efcb80fac0394a6dacd1d92f0be782","license":"MIT","private":false,"scripts":{"docs":"typedoc","lint":"eslint src/ --ext .ts,.tsx","build":"yarn clean && node scripts/build && yarn types:build","clean":"rm -rf dist","start":"node scripts/dev & yarn types:dev","ts-node":"ts-node","start:pre":"node scripts/pre-dev && yarn types:pre","types:dev":"tsc --watch ","types:pre":"tsc","docs:watch":"typedoc --watch","types:build":"tsc --project tsconfig.build.json"},"typings":"./dist/types/index.d.ts","_npmUser":{"name":"steveruizok","email":"steveruizok@gmail.com"},"homepage":"https://github.com/tldraw/tldraw#readme","keywords":[],"repository":{"url":"git+https://github.com/tldraw/tldraw.git","type":"git","directory":"packages/core"},"_npmVersion":"lerna/3.22.1/node@v16.6.1+arm64 (darwin)","description":"A tiny little drawing app (core)","directories":{},"maintainers":[{"name":"steveruizok","email":"steveruizok@gmail.com"},{"name":"tldraw","email":"steveruizok+tldraw@gmail.com"}],"_nodeVersion":"16.6.1","dependencies":{"deepmerge":"^4.2.2","react-use-gesture":"^9.1.3"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"lerna":"^4.0.0","react":"^17.0.2","tslib":"^2.3.1","eslint":"^7.32.0","esbuild":"^0.12.24","ts-node":"^10.2.1","typedoc":"^0.21.9","react-dom":"^17.0.2","typescript":"^4.4.2","@babel/core":"^7.15.5","@types/jest":"^27.0.1","@types/node":"^16.7.10","@types/react":"^17.0.16","@types/react-dom":"^17.0.9","@babel/preset-env":"^7.15.4","@typescript-eslint/parser":"^4.30.0","@typescript-eslint/eslint-plugin":"^4.30.0"},"peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2"},"_npmOperationalInternal":{"tmp":"tmp/core_0.0.74-beta.1_1630851505156_0.6660868119288823","host":"s3://npm-registry-packages"},"_id":"@tldraw/core@0.0.74-beta.1","version":"0.0.74-beta.1"}