Add tldraw component exports (#2188)
This PR adds the default tldraw components to the library's exports. ### Change Type - [x] `patch` — Bug fix
This commit is contained in:
Steve Ruiz
GitHub
parent
b232ac0c45
commit
3e78b18f72
9 changed files with 357 additions and 13 deletions
|
|
@ -62,7 +62,9 @@ import { TLExitEventHandler } from '@tldraw/editor';
|
|||
import { TLFrameShape } from '@tldraw/editor';
|
||||
import { TLGeoShape } from '@tldraw/editor';
|
||||
import { TLHandle } from '@tldraw/editor';
|
||||
import { TLHandlesComponent } from '@tldraw/editor';
|
||||
import { TLHighlightShape } from '@tldraw/editor';
|
||||
import { TLHoveredShapeIndicatorComponent } from '@tldraw/editor';
|
||||
import { TLImageShape } from '@tldraw/editor';
|
||||
import { TLInterruptEvent } from '@tldraw/editor';
|
||||
import { TLKeyboardEvent } from '@tldraw/editor';
|
||||
|
|
@ -85,6 +87,9 @@ import { TLPointerEventName } from '@tldraw/editor';
|
|||
import { TLRecord } from '@tldraw/editor';
|
||||
import { TLRotationSnapshot } from '@tldraw/editor';
|
||||
import { TLSchema } from '@tldraw/editor';
|
||||
import { TLScribbleComponent } from '@tldraw/editor';
|
||||
import { TLSelectionBackgroundComponent } from '@tldraw/editor';
|
||||
import { TLSelectionForegroundComponent } from '@tldraw/editor';
|
||||
import { TLSelectionHandle } from '@tldraw/editor';
|
||||
import { TLShape } from '@tldraw/editor';
|
||||
import { TLShapeId } from '@tldraw/editor';
|
||||
|
|
@ -1216,6 +1221,21 @@ export function Tldraw(props: TldrawEditorBaseProps & ({
|
|||
// @public (undocumented)
|
||||
export const TLDRAW_FILE_EXTENSION: ".tldr";
|
||||
|
||||
// @public (undocumented)
|
||||
export function TldrawCropHandles({ size, width, height, hideAlternateHandles, }: TldrawCropHandlesProps): JSX.Element;
|
||||
|
||||
// @public (undocumented)
|
||||
export interface TldrawCropHandlesProps {
|
||||
// (undocumented)
|
||||
height: number;
|
||||
// (undocumented)
|
||||
hideAlternateHandles: boolean;
|
||||
// (undocumented)
|
||||
size: number;
|
||||
// (undocumented)
|
||||
width: number;
|
||||
}
|
||||
|
||||
// @public (undocumented)
|
||||
export interface TldrawFile {
|
||||
// (undocumented)
|
||||
|
|
@ -1226,6 +1246,21 @@ export interface TldrawFile {
|
|||
tldrawFileFormatVersion: number;
|
||||
}
|
||||
|
||||
// @public (undocumented)
|
||||
export const TldrawHandles: TLHandlesComponent;
|
||||
|
||||
// @public (undocumented)
|
||||
export const TldrawHoveredShapeIndicator: TLHoveredShapeIndicatorComponent;
|
||||
|
||||
// @public (undocumented)
|
||||
export const TldrawScribble: TLScribbleComponent;
|
||||
|
||||
// @public (undocumented)
|
||||
export const TldrawSelectionBackground: TLSelectionBackgroundComponent;
|
||||
|
||||
// @public (undocumented)
|
||||
export const TldrawSelectionForeground: TLSelectionForegroundComponent;
|
||||
|
||||
// @public (undocumented)
|
||||
export const TldrawUi: React_2.NamedExoticComponent<TldrawUiProps>;
|
||||
|
||||
|
|
|
|||
|
|
@ -13310,6 +13310,183 @@
|
|||
],
|
||||
"name": "Tldraw"
|
||||
},
|
||||
{
|
||||
"kind": "Function",
|
||||
"canonicalReference": "@tldraw/tldraw!TldrawCropHandles:function(1)",
|
||||
"docComment": "/**\n * @public\n */\n",
|
||||
"excerptTokens": [
|
||||
{
|
||||
"kind": "Content",
|
||||
"text": "export declare function TldrawCropHandles({ size, width, height, hideAlternateHandles, }: "
|
||||
},
|
||||
{
|
||||
"kind": "Reference",
|
||||
"text": "TldrawCropHandlesProps",
|
||||
"canonicalReference": "@tldraw/tldraw!TldrawCropHandlesProps:interface"
|
||||
},
|
||||
{
|
||||
"kind": "Content",
|
||||
"text": "): "
|
||||
},
|
||||
{
|
||||
"kind": "Reference",
|
||||
"text": "JSX.Element",
|
||||
"canonicalReference": "@types/react!__global.JSX.Element:interface"
|
||||
},
|
||||
{
|
||||
"kind": "Content",
|
||||
"text": ";"
|
||||
}
|
||||
],
|
||||
"fileUrlPath": "packages/tldraw/src/lib/canvas/TldrawCropHandles.tsx",
|
||||
"returnTypeTokenRange": {
|
||||
"startIndex": 3,
|
||||
"endIndex": 4
|
||||
},
|
||||
"releaseTag": "Public",
|
||||
"overloadIndex": 1,
|
||||
"parameters": [
|
||||
{
|
||||
"parameterName": "{ size, width, height, hideAlternateHandles, }",
|
||||
"parameterTypeTokenRange": {
|
||||
"startIndex": 1,
|
||||
"endIndex": 2
|
||||
},
|
||||
"isOptional": false
|
||||
}
|
||||
],
|
||||
"name": "TldrawCropHandles"
|
||||
},
|
||||
{
|
||||
"kind": "Interface",
|
||||
"canonicalReference": "@tldraw/tldraw!TldrawCropHandlesProps:interface",
|
||||
"docComment": "/**\n * @public\n */\n",
|
||||
"excerptTokens": [
|
||||
{
|
||||
"kind": "Content",
|
||||
"text": "export interface TldrawCropHandlesProps "
|
||||
}
|
||||
],
|
||||
"fileUrlPath": "packages/tldraw/.tsbuild-api/lib/canvas/TldrawCropHandles.d.ts",
|
||||
"releaseTag": "Public",
|
||||
"name": "TldrawCropHandlesProps",
|
||||
"preserveMemberOrder": false,
|
||||
"members": [
|
||||
{
|
||||
"kind": "PropertySignature",
|
||||
"canonicalReference": "@tldraw/tldraw!TldrawCropHandlesProps#height:member",
|
||||
"docComment": "",
|
||||
"excerptTokens": [
|
||||
{
|
||||
"kind": "Content",
|
||||
"text": "height: "
|
||||
},
|
||||
{
|
||||
"kind": "Content",
|
||||
"text": "number"
|
||||
},
|
||||
{
|
||||
"kind": "Content",
|
||||
"text": ";"
|
||||
}
|
||||
],
|
||||
"fileUrlPath": "packages/tldraw/src/lib/canvas/TldrawCropHandles.tsx",
|
||||
"isReadonly": false,
|
||||
"isOptional": false,
|
||||
"releaseTag": "Public",
|
||||
"name": "height",
|
||||
"propertyTypeTokenRange": {
|
||||
"startIndex": 1,
|
||||
"endIndex": 2
|
||||
}
|
||||
},
|
||||
{
|
||||
"kind": "PropertySignature",
|
||||
"canonicalReference": "@tldraw/tldraw!TldrawCropHandlesProps#hideAlternateHandles:member",
|
||||
"docComment": "",
|
||||
"excerptTokens": [
|
||||
{
|
||||
"kind": "Content",
|
||||
"text": "hideAlternateHandles: "
|
||||
},
|
||||
{
|
||||
"kind": "Content",
|
||||
"text": "boolean"
|
||||
},
|
||||
{
|
||||
"kind": "Content",
|
||||
"text": ";"
|
||||
}
|
||||
],
|
||||
"fileUrlPath": "packages/tldraw/src/lib/canvas/TldrawCropHandles.tsx",
|
||||
"isReadonly": false,
|
||||
"isOptional": false,
|
||||
"releaseTag": "Public",
|
||||
"name": "hideAlternateHandles",
|
||||
"propertyTypeTokenRange": {
|
||||
"startIndex": 1,
|
||||
"endIndex": 2
|
||||
}
|
||||
},
|
||||
{
|
||||
"kind": "PropertySignature",
|
||||
"canonicalReference": "@tldraw/tldraw!TldrawCropHandlesProps#size:member",
|
||||
"docComment": "",
|
||||
"excerptTokens": [
|
||||
{
|
||||
"kind": "Content",
|
||||
"text": "size: "
|
||||
},
|
||||
{
|
||||
"kind": "Content",
|
||||
"text": "number"
|
||||
},
|
||||
{
|
||||
"kind": "Content",
|
||||
"text": ";"
|
||||
}
|
||||
],
|
||||
"fileUrlPath": "packages/tldraw/src/lib/canvas/TldrawCropHandles.tsx",
|
||||
"isReadonly": false,
|
||||
"isOptional": false,
|
||||
"releaseTag": "Public",
|
||||
"name": "size",
|
||||
"propertyTypeTokenRange": {
|
||||
"startIndex": 1,
|
||||
"endIndex": 2
|
||||
}
|
||||
},
|
||||
{
|
||||
"kind": "PropertySignature",
|
||||
"canonicalReference": "@tldraw/tldraw!TldrawCropHandlesProps#width:member",
|
||||
"docComment": "",
|
||||
"excerptTokens": [
|
||||
{
|
||||
"kind": "Content",
|
||||
"text": "width: "
|
||||
},
|
||||
{
|
||||
"kind": "Content",
|
||||
"text": "number"
|
||||
},
|
||||
{
|
||||
"kind": "Content",
|
||||
"text": ";"
|
||||
}
|
||||
],
|
||||
"fileUrlPath": "packages/tldraw/src/lib/canvas/TldrawCropHandles.tsx",
|
||||
"isReadonly": false,
|
||||
"isOptional": false,
|
||||
"releaseTag": "Public",
|
||||
"name": "width",
|
||||
"propertyTypeTokenRange": {
|
||||
"startIndex": 1,
|
||||
"endIndex": 2
|
||||
}
|
||||
}
|
||||
],
|
||||
"extendsTokenRanges": []
|
||||
},
|
||||
{
|
||||
"kind": "Interface",
|
||||
"canonicalReference": "@tldraw/tldraw!TldrawFile:interface",
|
||||
|
|
@ -13415,6 +13592,126 @@
|
|||
],
|
||||
"extendsTokenRanges": []
|
||||
},
|
||||
{
|
||||
"kind": "Variable",
|
||||
"canonicalReference": "@tldraw/tldraw!TldrawHandles:var",
|
||||
"docComment": "/**\n * @public\n */\n",
|
||||
"excerptTokens": [
|
||||
{
|
||||
"kind": "Content",
|
||||
"text": "TldrawHandles: "
|
||||
},
|
||||
{
|
||||
"kind": "Reference",
|
||||
"text": "TLHandlesComponent",
|
||||
"canonicalReference": "@tldraw/editor!TLHandlesComponent:type"
|
||||
}
|
||||
],
|
||||
"fileUrlPath": "packages/tldraw/src/lib/canvas/TldrawHandles.tsx",
|
||||
"isReadonly": true,
|
||||
"releaseTag": "Public",
|
||||
"name": "TldrawHandles",
|
||||
"variableTypeTokenRange": {
|
||||
"startIndex": 1,
|
||||
"endIndex": 2
|
||||
}
|
||||
},
|
||||
{
|
||||
"kind": "Variable",
|
||||
"canonicalReference": "@tldraw/tldraw!TldrawHoveredShapeIndicator:var",
|
||||
"docComment": "/**\n * @public\n */\n",
|
||||
"excerptTokens": [
|
||||
{
|
||||
"kind": "Content",
|
||||
"text": "TldrawHoveredShapeIndicator: "
|
||||
},
|
||||
{
|
||||
"kind": "Reference",
|
||||
"text": "TLHoveredShapeIndicatorComponent",
|
||||
"canonicalReference": "@tldraw/editor!TLHoveredShapeIndicatorComponent:type"
|
||||
}
|
||||
],
|
||||
"fileUrlPath": "packages/tldraw/src/lib/canvas/TldrawHoveredShapeIndicator.tsx",
|
||||
"isReadonly": true,
|
||||
"releaseTag": "Public",
|
||||
"name": "TldrawHoveredShapeIndicator",
|
||||
"variableTypeTokenRange": {
|
||||
"startIndex": 1,
|
||||
"endIndex": 2
|
||||
}
|
||||
},
|
||||
{
|
||||
"kind": "Variable",
|
||||
"canonicalReference": "@tldraw/tldraw!TldrawScribble:var",
|
||||
"docComment": "/**\n * @public\n */\n",
|
||||
"excerptTokens": [
|
||||
{
|
||||
"kind": "Content",
|
||||
"text": "TldrawScribble: "
|
||||
},
|
||||
{
|
||||
"kind": "Reference",
|
||||
"text": "TLScribbleComponent",
|
||||
"canonicalReference": "@tldraw/editor!TLScribbleComponent:type"
|
||||
}
|
||||
],
|
||||
"fileUrlPath": "packages/tldraw/src/lib/canvas/TldrawScribble.tsx",
|
||||
"isReadonly": true,
|
||||
"releaseTag": "Public",
|
||||
"name": "TldrawScribble",
|
||||
"variableTypeTokenRange": {
|
||||
"startIndex": 1,
|
||||
"endIndex": 2
|
||||
}
|
||||
},
|
||||
{
|
||||
"kind": "Variable",
|
||||
"canonicalReference": "@tldraw/tldraw!TldrawSelectionBackground:var",
|
||||
"docComment": "/**\n * @public\n */\n",
|
||||
"excerptTokens": [
|
||||
{
|
||||
"kind": "Content",
|
||||
"text": "TldrawSelectionBackground: "
|
||||
},
|
||||
{
|
||||
"kind": "Reference",
|
||||
"text": "TLSelectionBackgroundComponent",
|
||||
"canonicalReference": "@tldraw/editor!TLSelectionBackgroundComponent:type"
|
||||
}
|
||||
],
|
||||
"fileUrlPath": "packages/tldraw/src/lib/canvas/TldrawSelectionBackground.tsx",
|
||||
"isReadonly": true,
|
||||
"releaseTag": "Public",
|
||||
"name": "TldrawSelectionBackground",
|
||||
"variableTypeTokenRange": {
|
||||
"startIndex": 1,
|
||||
"endIndex": 2
|
||||
}
|
||||
},
|
||||
{
|
||||
"kind": "Variable",
|
||||
"canonicalReference": "@tldraw/tldraw!TldrawSelectionForeground:var",
|
||||
"docComment": "/**\n * @public\n */\n",
|
||||
"excerptTokens": [
|
||||
{
|
||||
"kind": "Content",
|
||||
"text": "TldrawSelectionForeground: "
|
||||
},
|
||||
{
|
||||
"kind": "Reference",
|
||||
"text": "TLSelectionForegroundComponent",
|
||||
"canonicalReference": "@tldraw/editor!TLSelectionForegroundComponent:type"
|
||||
}
|
||||
],
|
||||
"fileUrlPath": "packages/tldraw/src/lib/canvas/TldrawSelectionForeground.tsx",
|
||||
"isReadonly": true,
|
||||
"releaseTag": "Public",
|
||||
"name": "TldrawSelectionForeground",
|
||||
"variableTypeTokenRange": {
|
||||
"startIndex": 1,
|
||||
"endIndex": 2
|
||||
}
|
||||
},
|
||||
{
|
||||
"kind": "Variable",
|
||||
"canonicalReference": "@tldraw/tldraw!TldrawUi:var",
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
/// <reference types="react" />
|
||||
|
||||
import * as Dialog from './lib/ui/components/primitives/Dialog'
|
||||
import * as DropdownMenu from './lib/ui/components/primitives/DropdownMenu'
|
||||
|
||||
// eslint-disable-next-line local/no-export-star
|
||||
export * from '@tldraw/editor'
|
||||
export { Tldraw } from './lib/Tldraw'
|
||||
export { TldrawCropHandles, type TldrawCropHandlesProps } from './lib/canvas/TldrawCropHandles'
|
||||
export { TldrawHandles } from './lib/canvas/TldrawHandles'
|
||||
export { TldrawHoveredShapeIndicator } from './lib/canvas/TldrawHoveredShapeIndicator'
|
||||
export { TldrawScribble } from './lib/canvas/TldrawScribble'
|
||||
export { TldrawSelectionBackground } from './lib/canvas/TldrawSelectionBackground'
|
||||
export { TldrawSelectionForeground } from './lib/canvas/TldrawSelectionForeground'
|
||||
export { defaultShapeTools } from './lib/defaultShapeTools'
|
||||
export { defaultShapeUtils } from './lib/defaultShapeUtils'
|
||||
export { defaultTools } from './lib/defaultTools'
|
||||
|
|
@ -159,3 +162,5 @@ export {
|
|||
} from './lib/utils/file'
|
||||
export { truncateStringWithEllipsis } from './lib/utils/text'
|
||||
export { Dialog, DropdownMenu }
|
||||
import * as Dialog from './lib/ui/components/primitives/Dialog'
|
||||
import * as DropdownMenu from './lib/ui/components/primitives/DropdownMenu'
|
||||
|
|
|
|||
|
|
@ -1,14 +1,21 @@
|
|||
import { toDomPrecision } from '@tldraw/editor'
|
||||
import classNames from 'classnames'
|
||||
|
||||
interface CropHandlesProps {
|
||||
/** @public */
|
||||
export interface TldrawCropHandlesProps {
|
||||
size: number
|
||||
width: number
|
||||
height: number
|
||||
hideAlternateHandles: boolean
|
||||
}
|
||||
|
||||
export function CropHandles({ size, width, height, hideAlternateHandles }: CropHandlesProps) {
|
||||
/** @public */
|
||||
export function TldrawCropHandles({
|
||||
size,
|
||||
width,
|
||||
height,
|
||||
hideAlternateHandles,
|
||||
}: TldrawCropHandlesProps) {
|
||||
const cropStrokeWidth = toDomPrecision(size / 3)
|
||||
const offset = cropStrokeWidth / 2
|
||||
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
import { TLHandlesComponent, useEditor, useValue } from '@tldraw/editor'
|
||||
|
||||
/** @public */
|
||||
export const TldrawHandles: TLHandlesComponent = ({ children }) => {
|
||||
const editor = useEditor()
|
||||
const shouldDisplayHandles = useValue(
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import {
|
|||
useValue,
|
||||
} from '@tldraw/editor'
|
||||
|
||||
/** @public */
|
||||
export const TldrawHoveredShapeIndicator: TLHoveredShapeIndicatorComponent = ({ shapeId }) => {
|
||||
const editor = useEditor()
|
||||
const showHoveredShapeIndicator = useValue(
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { EASINGS, TLScribbleComponent, getSvgPathFromPoints } from '@tldraw/edit
|
|||
import classNames from 'classnames'
|
||||
import { getStroke } from '../shapes/shared/freehand/getStroke'
|
||||
|
||||
/** @public */
|
||||
export const TldrawScribble: TLScribbleComponent = ({
|
||||
scribble,
|
||||
zoom,
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import {
|
|||
useValue,
|
||||
} from '@tldraw/editor'
|
||||
|
||||
/** @public */
|
||||
export const TldrawSelectionBackground: TLSelectionBackgroundComponent = ({ bounds, rotation }) => {
|
||||
const editor = useEditor()
|
||||
|
||||
|
|
|
|||
|
|
@ -15,13 +15,9 @@ import {
|
|||
import classNames from 'classnames'
|
||||
import { useRef } from 'react'
|
||||
import { useReadonly } from '../ui/hooks/useReadonly'
|
||||
import { CropHandles } from './CropHandles'
|
||||
|
||||
const IS_FIREFOX =
|
||||
typeof navigator !== 'undefined' &&
|
||||
navigator.userAgent &&
|
||||
navigator.userAgent.toLowerCase().indexOf('firefox') > -1
|
||||
import { TldrawCropHandles } from './TldrawCropHandles'
|
||||
|
||||
/** @public */
|
||||
export const TldrawSelectionForeground: TLSelectionForegroundComponent = track(
|
||||
function TldrawSelectionForeground({ bounds, rotation }: { bounds: Box2d; rotation: number }) {
|
||||
const editor = useEditor()
|
||||
|
|
@ -102,7 +98,7 @@ export const TldrawSelectionForeground: TLSelectionForegroundComponent = track(
|
|||
editor.isShapeOfType<TLTextShape>(onlyShape, 'text'))
|
||||
|
||||
if (onlyShape && shouldDisplayBox) {
|
||||
if (IS_FIREFOX && editor.isShapeOfType<TLEmbedShape>(onlyShape, 'embed')) {
|
||||
if (editor.environment.isFirefox && editor.isShapeOfType<TLEmbedShape>(onlyShape, 'embed')) {
|
||||
shouldDisplayBox = false
|
||||
}
|
||||
}
|
||||
|
|
@ -437,7 +433,7 @@ export const TldrawSelectionForeground: TLSelectionForegroundComponent = track(
|
|||
)}
|
||||
{/* Crop Handles */}
|
||||
{showCropHandles && (
|
||||
<CropHandles
|
||||
<TldrawCropHandles
|
||||
{...{
|
||||
size,
|
||||
width,
|
||||
|
|
|
|||
Loading…
Reference in a new issue