@bigbluebutton/tldraw 2.0.0-alpha.19 → 2.0.0-alpha.20

package/dist-cjs/index.d.ts

@@ -14,6 +14,7 @@ import { EnumStyleProp } from '@bigbluebutton/editor';
 import { Geometry2d } from '@bigbluebutton/editor';
 import { Group2d } from '@bigbluebutton/editor';
 import { JsonObject } from '@bigbluebutton/editor';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { LANGUAGES } from '@bigbluebutton/editor';
 import { Matrix2d } from '@bigbluebutton/editor';
 import { Matrix2dModel } from '@bigbluebutton/editor';
@@ -95,6 +96,7 @@ import { TLStore } from '@bigbluebutton/editor';
 import { TLStoreWithStatus } from '@bigbluebutton/editor';
 import { TLSvgOptions } from '@bigbluebutton/editor';
 import { TLTextShape } from '@bigbluebutton/editor';
+import { TLTickEventHandler } from '@bigbluebutton/editor';
 import { TLUnknownShape } from '@bigbluebutton/editor';
 import { TLVideoShape } from '@bigbluebutton/editor';
 import { UnionValidator } from '@bigbluebutton/editor';
@@ -217,8 +219,8 @@ export declare class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
     onTranslateStart: TLOnTranslateStartHandler<TLArrowShape>;
     onResize: TLOnResizeHandler<TLArrowShape>;
     onDoubleClickHandle: (shape: TLArrowShape, handle: TLHandle) => TLShapePartial<TLArrowShape> | void;
-    component(shape: TLArrowShape): JSX.Element | null;
-    indicator(shape: TLArrowShape): JSX.Element | null;
+    component(shape: TLArrowShape): JSX_2.Element | null;
+    indicator(shape: TLArrowShape): JSX_2.Element | null;
     onEditEnd: TLOnEditEndHandler<TLArrowShape>;
     toSvg(shape: TLArrowShape, ctx: SvgExportContext): SVGGElement;
     getCanvasSvgDefs(): TLShapeUtilCanvasSvgDef[];
@@ -231,7 +233,7 @@ declare function Body_2({ className, children, style, }: {
     className?: string;
     children: any;
     style?: React.CSSProperties;
-}): JSX.Element;
+}): JSX_2.Element;
 
 /** @public */
 export declare class BookmarkShapeUtil extends BaseBoxShapeUtil<TLBookmarkShape> {
@@ -246,8 +248,8 @@ export declare class BookmarkShapeUtil extends BaseBoxShapeUtil<TLBookmarkShape>
     canResize: () => boolean;
     hideSelectionBoundsFg: () => boolean;
     getDefaultProps(): TLBookmarkShape['props'];
-    component(shape: TLBookmarkShape): JSX.Element;
-    indicator(shape: TLBookmarkShape): JSX.Element;
+    component(shape: TLBookmarkShape): JSX_2.Element;
+    indicator(shape: TLBookmarkShape): JSX_2.Element;
     onBeforeCreate?: TLOnBeforeCreateHandler<TLBookmarkShape>;
     onBeforeUpdate?: TLOnBeforeUpdateHandler<TLBookmarkShape>;
 }
@@ -261,7 +263,7 @@ declare type BoxWidthHeight = {
 export declare function BreakPointProvider({ forceMobile, children, }: {
     forceMobile?: boolean;
     children: any;
-}): JSX.Element;
+}): JSX_2.Element;
 
 declare class Brushing extends StateNode {
     static id: string;
@@ -286,6 +288,7 @@ declare class Brushing extends StateNode {
         target: 'canvas';
     }) => void;
     onExit: () => void;
+    onTick: TLTickEventHandler;
     onPointerMove: () => void;
     onPointerUp: TLEventHandlers['onPointerUp'];
     onComplete: TLEventHandlers['onComplete'];
@@ -304,10 +307,10 @@ declare class Brushing extends StateNode {
 export declare const Button: React_3.ForwardRefExoticComponent<TLUiButtonProps & React_3.RefAttributes<HTMLButtonElement>>;
 
 /** @public */
-declare function CheckboxItem({ children, onSelect, ...rest }: DropdownMenuCheckboxItemProps): JSX.Element;
+declare function CheckboxItem({ children, onSelect, ...rest }: DropdownMenuCheckboxItemProps): JSX_2.Element;
 
 /** @public */
-declare function CloseButton(): JSX.Element;
+declare function CloseButton(): JSX_2.Element;
 
 declare enum ColorStyle {
     White = "white",
@@ -344,12 +347,12 @@ declare function Content({ side, align, sideOffset, alignOffset, children, }: {
     sideOffset?: number;
     align?: 'center' | 'end' | 'start';
     side?: 'bottom' | 'left' | 'right' | 'top';
-}): JSX.Element;
+}): JSX_2.Element;
 
 /** @public */
 export declare const ContextMenu: ({ children }: {
     children: any;
-}) => JSX.Element;
+}) => JSX_2.Element;
 
 /**
  * Copy the given shapes to the clipboard.
@@ -585,8 +588,8 @@ export declare class DrawShapeUtil extends ShapeUtil<TLDrawShape> {
     hideSelectionBoundsFg: (shape: TLDrawShape) => boolean;
     getDefaultProps(): TLDrawShape['props'];
     getGeometry(shape: TLDrawShape): Circle2d | Polyline2d;
-    component(shape: TLDrawShape): JSX.Element;
-    indicator(shape: TLDrawShape): JSX.Element;
+    component(shape: TLDrawShape): JSX_2.Element;
+    indicator(shape: TLDrawShape): JSX_2.Element;
     toSvg(shape: TLDrawShape, ctx: SvgExportContext): SVGGElement;
     getCanvasSvgDefs(): TLShapeUtilCanvasSvgDef[];
     onResize: TLOnResizeHandler<TLDrawShape>;
@@ -660,8 +663,8 @@ export declare class EmbedShapeUtil extends BaseBoxShapeUtil<TLEmbedShape> {
     getDefaultProps(): TLEmbedShape['props'];
     isAspectRatioLocked: TLShapeUtilFlag<TLEmbedShape>;
     onResize: TLOnResizeHandler<TLEmbedShape>;
-    component(shape: TLEmbedShape): JSX.Element;
-    indicator(shape: TLEmbedShape): JSX.Element;
+    component(shape: TLEmbedShape): JSX_2.Element;
+    indicator(shape: TLEmbedShape): JSX_2.Element;
 }
 
 /** @public */
@@ -735,7 +738,7 @@ declare enum FontStyle {
 declare function Footer({ className, children }: {
     className?: string;
     children: any;
-}): JSX.Element;
+}): JSX_2.Element;
 
 /** @public */
 export declare class FrameShapeTool extends BaseBoxShapeTool {
@@ -758,9 +761,9 @@ export declare class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
     canEdit: () => boolean;
     getDefaultProps(): TLFrameShape['props'];
     getGeometry(shape: TLFrameShape): Geometry2d;
-    component(shape: TLFrameShape): JSX.Element;
+    component(shape: TLFrameShape): JSX_2.Element;
     toSvg(shape: TLFrameShape): Promise<SVGElement> | SVGElement;
-    indicator(shape: TLFrameShape): JSX.Element;
+    indicator(shape: TLFrameShape): JSX_2.Element;
     canReceiveNewChildrenOfType: (shape: TLShape, _type: TLShape['type']) => boolean;
     providesBackgroundForChildren(): boolean;
     canDropShapes: (shape: TLFrameShape, _shapes: TLShape[]) => boolean;
@@ -804,8 +807,8 @@ export declare class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
     getDefaultProps(): TLGeoShape['props'];
     getGeometry(shape: TLGeoShape): Geometry2d;
     onEditEnd: TLOnEditEndHandler<TLGeoShape>;
-    component(shape: TLGeoShape): JSX.Element;
-    indicator(shape: TLGeoShape): JSX.Element;
+    component(shape: TLGeoShape): JSX_2.Element;
+    indicator(shape: TLGeoShape): JSX_2.Element;
     toSvg(shape: TLGeoShape, ctx: SvgExportContext): SVGElement;
     getCanvasSvgDefs(): TLShapeUtilCanvasSvgDef[];
     onResize: TLOnResizeHandler<TLGeoShape>;
@@ -948,7 +951,7 @@ declare function getTranslatingSnapshot(editor: Editor): {
 declare function Group({ children, size, }: {
     children: any;
     size?: 'medium' | 'small' | 'tiny' | 'wide';
-}): JSX.Element;
+}): JSX_2.Element;
 
 declare interface GroupShape extends TDBaseShape {
     type: TDShapeType.Group;
@@ -970,7 +973,7 @@ export declare class HandTool extends StateNode {
 declare function Header({ className, children }: {
     className?: string;
     children: any;
-}): JSX.Element;
+}): JSX_2.Element;
 
 /** @public */
 export declare class HighlightShapeTool extends StateNode {
@@ -1000,9 +1003,9 @@ export declare class HighlightShapeUtil extends ShapeUtil<TLHighlightShape> {
     hideSelectionBoundsFg: (shape: TLHighlightShape) => boolean;
     getDefaultProps(): TLHighlightShape['props'];
     getGeometry(shape: TLHighlightShape): Circle2d | Polygon2d;
-    component(shape: TLHighlightShape): JSX.Element;
-    backgroundComponent(shape: TLHighlightShape): JSX.Element;
-    indicator(shape: TLHighlightShape): JSX.Element;
+    component(shape: TLHighlightShape): JSX_2.Element;
+    backgroundComponent(shape: TLHighlightShape): JSX_2.Element;
+    indicator(shape: TLHighlightShape): JSX_2.Element;
     toSvg(shape: TLHighlightShape): SVGPathElement;
     toBackgroundSvg(shape: TLHighlightShape): SVGPathElement;
     onResize: TLOnResizeHandler<TLHighlightShape>;
@@ -1147,15 +1150,15 @@ export declare class ImageShapeUtil extends BaseBoxShapeUtil<TLImageShape> {
     isAspectRatioLocked: () => boolean;
     canCrop: () => boolean;
     getDefaultProps(): TLImageShape['props'];
-    component(shape: TLImageShape): JSX.Element;
-    indicator(shape: TLImageShape): JSX.Element | null;
+    component(shape: TLImageShape): JSX_2.Element;
+    indicator(shape: TLImageShape): JSX_2.Element | null;
     toSvg(shape: TLImageShape): Promise<SVGGElement>;
     onDoubleClick: (shape: TLImageShape) => void;
     onDoubleClickEdge: TLOnDoubleClickHandler<TLImageShape>;
 }
 
 /** @public */
-declare function Indicator(): JSX.Element;
+declare function Indicator(): JSX_2.Element;
 
 /** @public */
 export declare const Input: React_3.ForwardRefExoticComponent<TLUiInputProps & React_3.RefAttributes<HTMLInputElement>>;
@@ -1164,7 +1167,7 @@ export declare const Input: React_3.ForwardRefExoticComponent<TLUiInputProps & R
 export declare function isGifAnimated(file: File): Promise<boolean>;
 
 /** @public */
-declare function Item({ noClose, ...props }: DropdownMenuItemProps): JSX.Element;
+declare function Item({ noClose, ...props }: DropdownMenuItemProps): JSX_2.Element;
 
 declare type Join<T, K> = K extends null ? {
     [R in keyof T]: T[R];
@@ -1227,8 +1230,8 @@ export declare class LineShapeUtil extends ShapeUtil<TLLineShape> {
     getOutlineSegments(shape: TLLineShape): Vec2d[][];
     onResize: TLOnResizeHandler<TLLineShape>;
     onHandleChange: TLOnHandleChangeHandler<TLLineShape>;
-    component(shape: TLLineShape): JSX.Element | undefined;
-    indicator(shape: TLLineShape): JSX.Element;
+    component(shape: TLLineShape): JSX_2.Element | undefined;
+    indicator(shape: TLLineShape): JSX_2.Element;
     toSvg(shape: TLLineShape): SVGGElement;
 }
 
@@ -1289,8 +1292,8 @@ export declare class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
     getDefaultProps(): TLNoteShape['props'];
     getHeight(shape: TLNoteShape): number;
     getGeometry(shape: TLNoteShape): Rectangle2d;
-    component(shape: TLNoteShape): JSX.Element;
-    indicator(shape: TLNoteShape): JSX.Element;
+    component(shape: TLNoteShape): JSX_2.Element;
+    indicator(shape: TLNoteShape): JSX_2.Element;
     toSvg(shape: TLNoteShape, ctx: SvgExportContext): SVGGElement;
     onBeforeCreate: (next: TLNoteShape) => {
         props: {
@@ -1342,7 +1345,7 @@ export declare class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 }
 
 /** @public */
-export declare function OfflineIndicator(): JSX.Element;
+export declare function OfflineIndicator(): JSX_2.Element;
 
 /* Excluded from this release type: parseAndLoadDocument */
 
@@ -1615,7 +1618,7 @@ declare class PointingShape extends StateNode {
 }
 
 /** @public */
-declare function RadioItem({ children, onSelect, ...rest }: DropdownMenuCheckboxItemProps): JSX.Element;
+declare function RadioItem({ children, onSelect, ...rest }: DropdownMenuCheckboxItemProps): JSX_2.Element;
 
 declare interface RectangleShape extends TDBaseShape {
     type: TDShapeType.Rectangle;
@@ -1660,6 +1663,7 @@ declare class Resizing extends StateNode {
     creationCursorOffset: VecLike;
     private snapshot;
     onEnter: TLEnterEventHandler;
+    onTick: TLTickEventHandler;
     onPointerMove: TLEventHandlers['onPointerMove'];
     onKeyDown: TLEventHandlers['onKeyDown'];
     onKeyUp: TLEventHandlers['onKeyUp'];
@@ -1707,7 +1711,7 @@ declare function Root({ id, children, modal, debugOpen, }: {
     children: any;
     modal?: boolean;
     debugOpen?: boolean;
-}): JSX.Element;
+}): JSX_2.Element;
 
 declare class Rotating extends StateNode {
     static id: string;
@@ -1815,21 +1819,21 @@ declare interface StickyShape extends TDBaseShape {
 declare function Sub({ id, children }: {
     id: string;
     children: any;
-}): JSX.Element;
+}): JSX_2.Element;
 
 /** @public */
 declare function SubContent({ alignOffset, sideOffset, children, }: {
     alignOffset?: number;
     sideOffset?: number;
     children: any;
-}): JSX.Element;
+}): JSX_2.Element;
 
 /** @public */
 declare function SubTrigger({ label, 'data-testid': testId, 'data-direction': dataDirection, }: {
     label: Exclude<string, TLUiTranslationKey> | TLUiTranslationKey;
     'data-testid'?: string;
     'data-direction'?: 'left' | 'right';
-}): JSX.Element;
+}): JSX_2.Element;
 
 declare type TDAsset = TDImageAsset | TDVideoAsset;
 
@@ -1926,8 +1930,8 @@ export declare class TextShapeUtil extends ShapeUtil<TLTextShape> {
     getGeometry(shape: TLTextShape): Rectangle2d;
     canEdit: () => boolean;
     isAspectRatioLocked: TLShapeUtilFlag<TLTextShape>;
-    component(shape: TLTextShape): JSX.Element;
-    indicator(shape: TLTextShape): JSX.Element | null;
+    component(shape: TLTextShape): JSX_2.Element;
+    indicator(shape: TLTextShape): JSX_2.Element | null;
     toSvg(shape: TLTextShape, ctx: SvgExportContext): SVGGElement;
     onResize: TLOnResizeHandler<TLTextShape>;
     onBeforeCreate: (shape: TLTextShape) => {
@@ -1998,19 +2002,19 @@ export declare class TextShapeUtil extends ShapeUtil<TLTextShape> {
 declare function Title({ className, children }: {
     className?: string;
     children: any;
-}): JSX.Element;
+}): JSX_2.Element;
 
 /** @public */
 declare type TLCopyType = 'jpeg' | 'json' | 'png' | 'svg';
 
 /** @public */
-export declare function Tldraw(props: TldrawProps): JSX.Element;
+export declare function Tldraw(props: TldrawProps): JSX_2.Element;
 
 /** @public */
 export declare const TLDRAW_FILE_EXTENSION: ".tldr";
 
 /** @public */
-export declare function TldrawCropHandles({ size, width, height, hideAlternateHandles, }: TldrawCropHandlesProps): JSX.Element;
+export declare function TldrawCropHandles({ size, width, height, hideAlternateHandles, }: TldrawCropHandlesProps): JSX_2.Element;
 
 /** @public */
 export declare interface TldrawCropHandlesProps {
@@ -2107,7 +2111,7 @@ export declare interface TldrawUiBaseProps {
 }
 
 /** @public */
-export declare function TldrawUiContextProvider({ overrides, assetUrls, onUiEvent, forceMobile, children, }: TldrawUiContextProviderProps): JSX.Element;
+export declare function TldrawUiContextProvider({ overrides, assetUrls, onUiEvent, forceMobile, children, }: TldrawUiContextProviderProps): JSX_2.Element;
 
 /**
  * Props for the {@link @bigbluebutton/tldraw#Tldraw} and {@link TldrawUi} components.
@@ -2362,6 +2366,7 @@ export declare interface TLUiEventMap {
     'toggle-debug-mode': null;
     'toggle-lock': null;
     'toggle-reduce-motion': null;
+    'toggle-edge-scrolling': null;
     'exit-pen-mode': null;
     'stop-following': null;
     'open-cursor-chat': null;
@@ -2590,7 +2595,7 @@ export declare type TLUiTranslation = {
 export declare type TLUiTranslationContextType = TLUiTranslation;
 
 /** @public */
-export declare type TLUiTranslationKey = 'action.align-bottom' | 'action.align-center-horizontal.short' | 'action.align-center-horizontal' | 'action.align-center-vertical.short' | 'action.align-center-vertical' | 'action.align-left' | 'action.align-right' | 'action.align-top' | 'action.back-to-content' | 'action.bring-forward' | 'action.bring-to-front' | 'action.convert-to-bookmark' | 'action.convert-to-embed' | 'action.copy-as-json.short' | 'action.copy-as-json' | 'action.copy-as-png.short' | 'action.copy-as-png' | 'action.copy-as-svg.short' | 'action.copy-as-svg' | 'action.copy' | 'action.cut' | 'action.delete' | 'action.distribute-horizontal.short' | 'action.distribute-horizontal' | 'action.distribute-vertical.short' | 'action.distribute-vertical' | 'action.duplicate' | 'action.edit-link' | 'action.exit-pen-mode' | 'action.export-as-json.short' | 'action.export-as-json' | 'action.export-as-png.short' | 'action.export-as-png' | 'action.export-as-svg.short' | 'action.export-as-svg' | 'action.fit-frame-to-content' | 'action.flip-horizontal.short' | 'action.flip-horizontal' | 'action.flip-vertical.short' | 'action.flip-vertical' | 'action.fork-project' | 'action.group' | 'action.insert-embed' | 'action.insert-media' | 'action.leave-shared-project' | 'action.new-project' | 'action.new-shared-project' | 'action.open-cursor-chat' | 'action.open-embed-link' | 'action.open-file' | 'action.pack' | 'action.paste' | 'action.print' | 'action.redo' | 'action.remove-frame' | 'action.rotate-ccw' | 'action.rotate-cw' | 'action.save-copy' | 'action.select-all' | 'action.select-none' | 'action.send-backward' | 'action.send-to-back' | 'action.share-project' | 'action.stack-horizontal.short' | 'action.stack-horizontal' | 'action.stack-vertical.short' | 'action.stack-vertical' | 'action.stop-following' | 'action.stretch-horizontal.short' | 'action.stretch-horizontal' | 'action.stretch-vertical.short' | 'action.stretch-vertical' | 'action.toggle-auto-size' | 'action.toggle-dark-mode.menu' | 'action.toggle-dark-mode' | 'action.toggle-debug-mode.menu' | 'action.toggle-debug-mode' | 'action.toggle-focus-mode.menu' | 'action.toggle-focus-mode' | 'action.toggle-grid.menu' | 'action.toggle-grid' | 'action.toggle-lock' | 'action.toggle-reduce-motion.menu' | 'action.toggle-reduce-motion' | 'action.toggle-snap-mode.menu' | 'action.toggle-snap-mode' | 'action.toggle-tool-lock.menu' | 'action.toggle-tool-lock' | 'action.toggle-transparent.context-menu' | 'action.toggle-transparent.menu' | 'action.toggle-transparent' | 'action.undo' | 'action.ungroup' | 'action.unlock-all' | 'action.zoom-in' | 'action.zoom-out' | 'action.zoom-to-100' | 'action.zoom-to-fit' | 'action.zoom-to-selection' | 'actions-menu.title' | 'align-style.end' | 'align-style.justify' | 'align-style.middle' | 'align-style.start' | 'arrowheadEnd-style.arrow' | 'arrowheadEnd-style.bar' | 'arrowheadEnd-style.diamond' | 'arrowheadEnd-style.dot' | 'arrowheadEnd-style.inverted' | 'arrowheadEnd-style.none' | 'arrowheadEnd-style.pipe' | 'arrowheadEnd-style.square' | 'arrowheadEnd-style.triangle' | 'arrowheadStart-style.arrow' | 'arrowheadStart-style.bar' | 'arrowheadStart-style.diamond' | 'arrowheadStart-style.dot' | 'arrowheadStart-style.inverted' | 'arrowheadStart-style.none' | 'arrowheadStart-style.pipe' | 'arrowheadStart-style.square' | 'arrowheadStart-style.triangle' | 'color-style.black' | 'color-style.blue' | 'color-style.green' | 'color-style.grey' | 'color-style.light-blue' | 'color-style.light-green' | 'color-style.light-red' | 'color-style.light-violet' | 'color-style.orange' | 'color-style.red' | 'color-style.violet' | 'color-style.yellow' | 'context-menu.arrange' | 'context-menu.copy-as' | 'context-menu.export-as' | 'context-menu.move-to-page' | 'context-menu.reorder' | 'context.pages.new-page' | 'cursor-chat.type-to-chat' | 'dash-style.dashed' | 'dash-style.dotted' | 'dash-style.draw' | 'dash-style.solid' | 'debug-panel.more' | 'edit-link-dialog.cancel' | 'edit-link-dialog.clear' | 'edit-link-dialog.detail' | 'edit-link-dialog.invalid-url' | 'edit-link-dialog.save' | 'edit-link-dialog.title' | 'edit-link-dialog.url' | 'edit-pages-dialog.move-down' | 'edit-pages-dialog.move-up' | 'embed-dialog.back' | 'embed-dialog.cancel' | 'embed-dialog.create' | 'embed-dialog.instruction' | 'embed-dialog.invalid-url' | 'embed-dialog.title' | 'embed-dialog.url' | 'file-system.confirm-clear.cancel' | 'file-system.confirm-clear.continue' | 'file-system.confirm-clear.description' | 'file-system.confirm-clear.dont-show-again' | 'file-system.confirm-clear.title' | 'file-system.confirm-open.cancel' | 'file-system.confirm-open.description' | 'file-system.confirm-open.dont-show-again' | 'file-system.confirm-open.open' | 'file-system.confirm-open.title' | 'file-system.file-open-error.file-format-version-too-new' | 'file-system.file-open-error.generic-corrupted-file' | 'file-system.file-open-error.not-a-tldraw-file' | 'file-system.file-open-error.title' | 'file-system.shared-document-file-open-error.description' | 'file-system.shared-document-file-open-error.title' | 'fill-style.none' | 'fill-style.pattern' | 'fill-style.semi' | 'fill-style.solid' | 'focus-mode.toggle-focus-mode' | 'font-style.draw' | 'font-style.mono' | 'font-style.sans' | 'font-style.serif' | 'geo-style.arrow-down' | 'geo-style.arrow-left' | 'geo-style.arrow-right' | 'geo-style.arrow-up' | 'geo-style.check-box' | 'geo-style.cloud' | 'geo-style.diamond' | 'geo-style.ellipse' | 'geo-style.hexagon' | 'geo-style.octagon' | 'geo-style.oval' | 'geo-style.pentagon' | 'geo-style.rectangle' | 'geo-style.rhombus-2' | 'geo-style.rhombus' | 'geo-style.star' | 'geo-style.trapezoid' | 'geo-style.triangle' | 'geo-style.x-box' | 'help-menu.about' | 'help-menu.discord' | 'help-menu.github' | 'help-menu.keyboard-shortcuts' | 'help-menu.title' | 'help-menu.twitter' | 'home-project-dialog.description' | 'home-project-dialog.ok' | 'home-project-dialog.title' | 'menu.copy-as' | 'menu.edit' | 'menu.export-as' | 'menu.file' | 'menu.language' | 'menu.preferences' | 'menu.title' | 'menu.view' | 'navigation-zone.toggle-minimap' | 'navigation-zone.zoom' | 'opacity-style.0.1' | 'opacity-style.0.25' | 'opacity-style.0.5' | 'opacity-style.0.75' | 'opacity-style.1' | 'page-menu.create-new-page' | 'page-menu.edit-done' | 'page-menu.edit-start' | 'page-menu.go-to-page' | 'page-menu.max-page-count-reached' | 'page-menu.new-page-initial-name' | 'page-menu.submenu.delete' | 'page-menu.submenu.duplicate-page' | 'page-menu.submenu.move-down' | 'page-menu.submenu.move-up' | 'page-menu.submenu.rename' | 'page-menu.submenu.title' | 'page-menu.title' | 'people-menu.change-color' | 'people-menu.change-name' | 'people-menu.follow' | 'people-menu.following' | 'people-menu.invite' | 'people-menu.leading' | 'people-menu.title' | 'people-menu.user' | 'rename-project-dialog.cancel' | 'rename-project-dialog.rename' | 'rename-project-dialog.title' | 'share-menu.copy-link-note' | 'share-menu.copy-link' | 'share-menu.copy-readonly-link-note' | 'share-menu.copy-readonly-link' | 'share-menu.create-snapshot-link' | 'share-menu.default-project-name' | 'share-menu.fork-note' | 'share-menu.offline-note' | 'share-menu.project-too-large' | 'share-menu.readonly-link' | 'share-menu.save-note' | 'share-menu.share-project' | 'share-menu.snapshot-link-note' | 'share-menu.title' | 'share-menu.upload-failed' | 'sharing.confirm-leave.cancel' | 'sharing.confirm-leave.description' | 'sharing.confirm-leave.dont-show-again' | 'sharing.confirm-leave.leave' | 'sharing.confirm-leave.title' | 'shortcuts-dialog.collaboration' | 'shortcuts-dialog.edit' | 'shortcuts-dialog.file' | 'shortcuts-dialog.preferences' | 'shortcuts-dialog.title' | 'shortcuts-dialog.tools' | 'shortcuts-dialog.transform' | 'shortcuts-dialog.view' | 'size-style.l' | 'size-style.m' | 'size-style.s' | 'size-style.xl' | 'spline-style.cubic' | 'spline-style.line' | 'status.offline' | 'status.online' | 'style-panel.align' | 'style-panel.arrowhead-end' | 'style-panel.arrowhead-start' | 'style-panel.arrowheads' | 'style-panel.color' | 'style-panel.dash' | 'style-panel.fill' | 'style-panel.font' | 'style-panel.geo' | 'style-panel.mixed' | 'style-panel.opacity' | 'style-panel.position' | 'style-panel.size' | 'style-panel.spline' | 'style-panel.title' | 'style-panel.vertical-align' | 'toast.close' | 'toast.error.copy-fail.desc' | 'toast.error.copy-fail.title' | 'toast.error.export-fail.desc' | 'toast.error.export-fail.title' | 'tool-panel.drawing' | 'tool-panel.more' | 'tool-panel.shapes' | 'tool.arrow-down' | 'tool.arrow-left' | 'tool.arrow-right' | 'tool.arrow-up' | 'tool.arrow' | 'tool.asset' | 'tool.check-box' | 'tool.cloud' | 'tool.diamond' | 'tool.draw' | 'tool.ellipse' | 'tool.embed' | 'tool.eraser' | 'tool.frame' | 'tool.hand' | 'tool.hexagon' | 'tool.highlight' | 'tool.laser' | 'tool.line' | 'tool.note' | 'tool.octagon' | 'tool.oval' | 'tool.pentagon' | 'tool.rectangle' | 'tool.rhombus' | 'tool.select' | 'tool.star' | 'tool.text' | 'tool.trapezoid' | 'tool.triangle' | 'tool.x-box' | 'vscode.file-open.backup-failed' | 'vscode.file-open.backup-saved' | 'vscode.file-open.backup' | 'vscode.file-open.desc' | 'vscode.file-open.dont-show-again' | 'vscode.file-open.open';
+export declare type TLUiTranslationKey = 'action.align-bottom' | 'action.align-center-horizontal.short' | 'action.align-center-horizontal' | 'action.align-center-vertical.short' | 'action.align-center-vertical' | 'action.align-left' | 'action.align-right' | 'action.align-top' | 'action.back-to-content' | 'action.bring-forward' | 'action.bring-to-front' | 'action.convert-to-bookmark' | 'action.convert-to-embed' | 'action.copy-as-json.short' | 'action.copy-as-json' | 'action.copy-as-png.short' | 'action.copy-as-png' | 'action.copy-as-svg.short' | 'action.copy-as-svg' | 'action.copy' | 'action.cut' | 'action.delete' | 'action.distribute-horizontal.short' | 'action.distribute-horizontal' | 'action.distribute-vertical.short' | 'action.distribute-vertical' | 'action.duplicate' | 'action.edit-link' | 'action.exit-pen-mode' | 'action.export-as-json.short' | 'action.export-as-json' | 'action.export-as-png.short' | 'action.export-as-png' | 'action.export-as-svg.short' | 'action.export-as-svg' | 'action.fit-frame-to-content' | 'action.flip-horizontal.short' | 'action.flip-horizontal' | 'action.flip-vertical.short' | 'action.flip-vertical' | 'action.fork-project' | 'action.group' | 'action.insert-embed' | 'action.insert-media' | 'action.leave-shared-project' | 'action.new-project' | 'action.new-shared-project' | 'action.open-cursor-chat' | 'action.open-embed-link' | 'action.open-file' | 'action.pack' | 'action.paste' | 'action.print' | 'action.redo' | 'action.remove-frame' | 'action.rotate-ccw' | 'action.rotate-cw' | 'action.save-copy' | 'action.select-all' | 'action.select-none' | 'action.send-backward' | 'action.send-to-back' | 'action.share-project' | 'action.stack-horizontal.short' | 'action.stack-horizontal' | 'action.stack-vertical.short' | 'action.stack-vertical' | 'action.stop-following' | 'action.stretch-horizontal.short' | 'action.stretch-horizontal' | 'action.stretch-vertical.short' | 'action.stretch-vertical' | 'action.toggle-auto-size' | 'action.toggle-dark-mode.menu' | 'action.toggle-dark-mode' | 'action.toggle-debug-mode.menu' | 'action.toggle-debug-mode' | 'action.toggle-edge-scrolling.menu' | 'action.toggle-edge-scrolling' | 'action.toggle-focus-mode.menu' | 'action.toggle-focus-mode' | 'action.toggle-grid.menu' | 'action.toggle-grid' | 'action.toggle-lock' | 'action.toggle-reduce-motion.menu' | 'action.toggle-reduce-motion' | 'action.toggle-snap-mode.menu' | 'action.toggle-snap-mode' | 'action.toggle-tool-lock.menu' | 'action.toggle-tool-lock' | 'action.toggle-transparent.context-menu' | 'action.toggle-transparent.menu' | 'action.toggle-transparent' | 'action.undo' | 'action.ungroup' | 'action.unlock-all' | 'action.zoom-in' | 'action.zoom-out' | 'action.zoom-to-100' | 'action.zoom-to-fit' | 'action.zoom-to-selection' | 'actions-menu.title' | 'align-style.end' | 'align-style.justify' | 'align-style.middle' | 'align-style.start' | 'arrowheadEnd-style.arrow' | 'arrowheadEnd-style.bar' | 'arrowheadEnd-style.diamond' | 'arrowheadEnd-style.dot' | 'arrowheadEnd-style.inverted' | 'arrowheadEnd-style.none' | 'arrowheadEnd-style.pipe' | 'arrowheadEnd-style.square' | 'arrowheadEnd-style.triangle' | 'arrowheadStart-style.arrow' | 'arrowheadStart-style.bar' | 'arrowheadStart-style.diamond' | 'arrowheadStart-style.dot' | 'arrowheadStart-style.inverted' | 'arrowheadStart-style.none' | 'arrowheadStart-style.pipe' | 'arrowheadStart-style.square' | 'arrowheadStart-style.triangle' | 'color-style.black' | 'color-style.blue' | 'color-style.green' | 'color-style.grey' | 'color-style.light-blue' | 'color-style.light-green' | 'color-style.light-red' | 'color-style.light-violet' | 'color-style.orange' | 'color-style.red' | 'color-style.violet' | 'color-style.yellow' | 'context-menu.arrange' | 'context-menu.copy-as' | 'context-menu.export-as' | 'context-menu.move-to-page' | 'context-menu.reorder' | 'context.pages.new-page' | 'cursor-chat.type-to-chat' | 'dash-style.dashed' | 'dash-style.dotted' | 'dash-style.draw' | 'dash-style.solid' | 'debug-panel.more' | 'edit-link-dialog.cancel' | 'edit-link-dialog.clear' | 'edit-link-dialog.detail' | 'edit-link-dialog.invalid-url' | 'edit-link-dialog.save' | 'edit-link-dialog.title' | 'edit-link-dialog.url' | 'edit-pages-dialog.move-down' | 'edit-pages-dialog.move-up' | 'embed-dialog.back' | 'embed-dialog.cancel' | 'embed-dialog.create' | 'embed-dialog.instruction' | 'embed-dialog.invalid-url' | 'embed-dialog.title' | 'embed-dialog.url' | 'file-system.confirm-clear.cancel' | 'file-system.confirm-clear.continue' | 'file-system.confirm-clear.description' | 'file-system.confirm-clear.dont-show-again' | 'file-system.confirm-clear.title' | 'file-system.confirm-open.cancel' | 'file-system.confirm-open.description' | 'file-system.confirm-open.dont-show-again' | 'file-system.confirm-open.open' | 'file-system.confirm-open.title' | 'file-system.file-open-error.file-format-version-too-new' | 'file-system.file-open-error.generic-corrupted-file' | 'file-system.file-open-error.not-a-tldraw-file' | 'file-system.file-open-error.title' | 'file-system.shared-document-file-open-error.description' | 'file-system.shared-document-file-open-error.title' | 'fill-style.none' | 'fill-style.pattern' | 'fill-style.semi' | 'fill-style.solid' | 'focus-mode.toggle-focus-mode' | 'font-style.draw' | 'font-style.mono' | 'font-style.sans' | 'font-style.serif' | 'geo-style.arrow-down' | 'geo-style.arrow-left' | 'geo-style.arrow-right' | 'geo-style.arrow-up' | 'geo-style.check-box' | 'geo-style.cloud' | 'geo-style.diamond' | 'geo-style.ellipse' | 'geo-style.hexagon' | 'geo-style.octagon' | 'geo-style.oval' | 'geo-style.pentagon' | 'geo-style.rectangle' | 'geo-style.rhombus-2' | 'geo-style.rhombus' | 'geo-style.star' | 'geo-style.trapezoid' | 'geo-style.triangle' | 'geo-style.x-box' | 'help-menu.about' | 'help-menu.discord' | 'help-menu.github' | 'help-menu.keyboard-shortcuts' | 'help-menu.title' | 'help-menu.twitter' | 'home-project-dialog.description' | 'home-project-dialog.ok' | 'home-project-dialog.title' | 'menu.copy-as' | 'menu.edit' | 'menu.export-as' | 'menu.file' | 'menu.language' | 'menu.preferences' | 'menu.title' | 'menu.view' | 'navigation-zone.toggle-minimap' | 'navigation-zone.zoom' | 'opacity-style.0.1' | 'opacity-style.0.25' | 'opacity-style.0.5' | 'opacity-style.0.75' | 'opacity-style.1' | 'page-menu.create-new-page' | 'page-menu.edit-done' | 'page-menu.edit-start' | 'page-menu.go-to-page' | 'page-menu.max-page-count-reached' | 'page-menu.new-page-initial-name' | 'page-menu.submenu.delete' | 'page-menu.submenu.duplicate-page' | 'page-menu.submenu.move-down' | 'page-menu.submenu.move-up' | 'page-menu.submenu.rename' | 'page-menu.submenu.title' | 'page-menu.title' | 'people-menu.change-color' | 'people-menu.change-name' | 'people-menu.follow' | 'people-menu.following' | 'people-menu.invite' | 'people-menu.leading' | 'people-menu.title' | 'people-menu.user' | 'rename-project-dialog.cancel' | 'rename-project-dialog.rename' | 'rename-project-dialog.title' | 'share-menu.copy-link-note' | 'share-menu.copy-link' | 'share-menu.copy-readonly-link-note' | 'share-menu.copy-readonly-link' | 'share-menu.create-snapshot-link' | 'share-menu.default-project-name' | 'share-menu.fork-note' | 'share-menu.offline-note' | 'share-menu.project-too-large' | 'share-menu.readonly-link' | 'share-menu.save-note' | 'share-menu.share-project' | 'share-menu.snapshot-link-note' | 'share-menu.title' | 'share-menu.upload-failed' | 'sharing.confirm-leave.cancel' | 'sharing.confirm-leave.description' | 'sharing.confirm-leave.dont-show-again' | 'sharing.confirm-leave.leave' | 'sharing.confirm-leave.title' | 'shortcuts-dialog.collaboration' | 'shortcuts-dialog.edit' | 'shortcuts-dialog.file' | 'shortcuts-dialog.preferences' | 'shortcuts-dialog.title' | 'shortcuts-dialog.tools' | 'shortcuts-dialog.transform' | 'shortcuts-dialog.view' | 'size-style.l' | 'size-style.m' | 'size-style.s' | 'size-style.xl' | 'spline-style.cubic' | 'spline-style.line' | 'status.offline' | 'status.online' | 'style-panel.align' | 'style-panel.arrowhead-end' | 'style-panel.arrowhead-start' | 'style-panel.arrowheads' | 'style-panel.color' | 'style-panel.dash' | 'style-panel.fill' | 'style-panel.font' | 'style-panel.geo' | 'style-panel.mixed' | 'style-panel.opacity' | 'style-panel.position' | 'style-panel.size' | 'style-panel.spline' | 'style-panel.title' | 'style-panel.vertical-align' | 'toast.close' | 'toast.error.copy-fail.desc' | 'toast.error.copy-fail.title' | 'toast.error.export-fail.desc' | 'toast.error.export-fail.title' | 'tool-panel.drawing' | 'tool-panel.more' | 'tool-panel.shapes' | 'tool.arrow-down' | 'tool.arrow-left' | 'tool.arrow-right' | 'tool.arrow-up' | 'tool.arrow' | 'tool.asset' | 'tool.check-box' | 'tool.cloud' | 'tool.diamond' | 'tool.draw' | 'tool.ellipse' | 'tool.embed' | 'tool.eraser' | 'tool.frame' | 'tool.hand' | 'tool.hexagon' | 'tool.highlight' | 'tool.laser' | 'tool.line' | 'tool.note' | 'tool.octagon' | 'tool.oval' | 'tool.pentagon' | 'tool.rectangle' | 'tool.rhombus' | 'tool.select' | 'tool.star' | 'tool.text' | 'tool.trapezoid' | 'tool.triangle' | 'tool.x-box' | 'vscode.file-open.backup-failed' | 'vscode.file-open.backup-saved' | 'vscode.file-open.backup' | 'vscode.file-open.desc' | 'vscode.file-open.dont-show-again' | 'vscode.file-open.open';
 
 /** @public */
 declare interface TLUiTranslationProviderProps {
@@ -2701,6 +2706,7 @@ declare class Translating extends StateNode {
         onInteractionEnd?: string;
     }) => void;
     onExit: () => void;
+    onTick: TLTickEventHandler;
     onPointerMove: () => void;
     onKeyDown: () => void;
     onKeyUp: TLEventHandlers['onKeyUp'];
@@ -2709,7 +2715,6 @@ declare class Translating extends StateNode {
     onCancel: TLEventHandlers['onCancel'];
     protected startCloning(): void;
     protected stopCloning(): void;
-    updateParent: () => void;
     reset(): void;
     protected complete(): void;
     private cancel;
@@ -2770,13 +2775,13 @@ declare interface TriangleShape extends TDBaseShape {
 declare function Trigger({ children, 'data-testid': testId, }: {
     children: any;
     'data-testid'?: string;
-}): JSX.Element;
+}): JSX_2.Element;
 
 /** @public */
 export declare const truncateStringWithEllipsis: (str: string, maxLength: number) => string;
 
 /** @public */
-export declare function UiEventsProvider({ onEvent, children }: EventsProviderProps): JSX.Element;
+export declare function UiEventsProvider({ onEvent, children }: EventsProviderProps): JSX_2.Element;
 
 /** @public */
 export declare function useActions(): TLUiActionsContextType;
@@ -2904,8 +2909,8 @@ export declare class VideoShapeUtil extends BaseBoxShapeUtil<TLVideoShape> {
     canEdit: () => boolean;
     isAspectRatioLocked: () => boolean;
     getDefaultProps(): TLVideoShape['props'];
-    component(shape: TLVideoShape): JSX.Element;
-    indicator(shape: TLVideoShape): JSX.Element;
+    component(shape: TLVideoShape): JSX_2.Element;
+    indicator(shape: TLVideoShape): JSX_2.Element;
     toSvg(shape: TLVideoShape): SVGGElement;
 }
 

package/dist-cjs/lib/shapes/bookmark/BookmarkShapeUtil.js

@@ -92,8 +92,8 @@ class BookmarkShapeUtil extends import_editor.BaseBoxShapeUtil {
       {
         width: (0, import_editor.toDomPrecision)(shape.props.w),
         height: (0, import_editor.toDomPrecision)(shape.props.h),
-        rx: "8",
-        ry: "8"
+        rx: "6",
+        ry: "6"
       }
     );
   }

package/dist-cjs/lib/shapes/bookmark/BookmarkShapeUtil.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/shapes/bookmark/BookmarkShapeUtil.tsx"],
-  "sourcesContent": ["import {\n\tAssetRecordType,\n\tBaseBoxShapeUtil,\n\tEditor,\n\tHTMLContainer,\n\tTLAssetId,\n\tTLBookmarkAsset,\n\tTLBookmarkShape,\n\tTLOnBeforeCreateHandler,\n\tTLOnBeforeUpdateHandler,\n\tbookmarkShapeMigrations,\n\tbookmarkShapeProps,\n\tdebounce,\n\tgetHashForString,\n\tisValidUrl,\n\tstopEventPropagation,\n\ttoDomPrecision,\n} from '@bigbluebutton/editor'\nimport { truncateStringWithEllipsis } from '../../utils/text/text'\nimport { HyperlinkButton } from '../shared/HyperlinkButton'\nimport { getRotatedBoxShadow } from '../shared/rotated-box-shadow'\n\n/** @public */\nexport class BookmarkShapeUtil extends BaseBoxShapeUtil<TLBookmarkShape> {\n\tstatic override type = 'bookmark' as const\n\tstatic override props = bookmarkShapeProps\n\tstatic override migrations = bookmarkShapeMigrations\n\n\toverride canResize = () => false\n\n\toverride hideSelectionBoundsFg = () => true\n\n\toverride getDefaultProps(): TLBookmarkShape['props'] {\n\t\treturn {\n\t\t\turl: '',\n\t\t\tw: 300,\n\t\t\th: 320,\n\t\t\tassetId: null,\n\t\t}\n\t}\n\n\toverride component(shape: TLBookmarkShape) {\n\t\tconst asset = (\n\t\t\tshape.props.assetId ? this.editor.getAsset(shape.props.assetId) : null\n\t\t) as TLBookmarkAsset\n\n\t\tconst pageRotation = this.editor.getShapePageTransform(shape)!.rotation()\n\n\t\tconst address = getHumanReadableAddress(shape)\n\n\t\treturn (\n\t\t\t<HTMLContainer>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"tl-bookmark__container\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tboxShadow: getRotatedBoxShadow(pageRotation),\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"tl-bookmark__image_container\">\n\t\t\t\t\t\t{asset?.props.image ? (\n\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\tclassName=\"tl-bookmark__image\"\n\t\t\t\t\t\t\t\tdraggable={false}\n\t\t\t\t\t\t\t\tsrc={asset?.props.image}\n\t\t\t\t\t\t\t\talt={asset?.props.title || ''}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<div className=\"tl-bookmark__placeholder\" />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<HyperlinkButton url={shape.props.url} zoomLevel={this.editor.getZoomLevel()} />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"tl-bookmark__copy_container\">\n\t\t\t\t\t\t{asset?.props.title && (\n\t\t\t\t\t\t\t<h2 className=\"tl-bookmark__heading\">\n\t\t\t\t\t\t\t\t{truncateStringWithEllipsis(asset?.props.title || '', 54)}\n\t\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{asset?.props.description && (\n\t\t\t\t\t\t\t<p className=\"tl-bookmark__description\">\n\t\t\t\t\t\t\t\t{truncateStringWithEllipsis(asset?.props.description || '', 128)}\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\tclassName=\"tl-bookmark__link\"\n\t\t\t\t\t\t\thref={shape.props.url || ''}\n\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\t\tonPointerDown={stopEventPropagation}\n\t\t\t\t\t\t\tonPointerUp={stopEventPropagation}\n\t\t\t\t\t\t\tonClick={stopEventPropagation}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{truncateStringWithEllipsis(address, 45)}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</HTMLContainer>\n\t\t)\n\t}\n\n\toverride indicator(shape: TLBookmarkShape) {\n\t\treturn (\n\t\t\t<rect\n\t\t\t\twidth={toDomPrecision(shape.props.w)}\n\t\t\t\theight={toDomPrecision(shape.props.h)}\n\t\t\t\trx=\"8\"\n\t\t\t\try=\"8\"\n\t\t\t/>\n\t\t)\n\t}\n\n\toverride onBeforeCreate?: TLOnBeforeCreateHandler<TLBookmarkShape> = (shape) => {\n\t\tupdateBookmarkAssetOnUrlChange(this.editor, shape)\n\t}\n\n\toverride onBeforeUpdate?: TLOnBeforeUpdateHandler<TLBookmarkShape> = (prev, shape) => {\n\t\tif (prev.props.url !== shape.props.url) {\n\t\t\tif (!isValidUrl(shape.props.url)) {\n\t\t\t\treturn { ...shape, props: { ...shape.props, url: prev.props.url } }\n\t\t\t} else {\n\t\t\t\tupdateBookmarkAssetOnUrlChange(this.editor, shape)\n\t\t\t}\n\t\t}\n\t}\n}\n\n/** @internal */\nexport const getHumanReadableAddress = (shape: TLBookmarkShape) => {\n\ttry {\n\t\tconst url = new URL(shape.props.url)\n\t\tconst path = url.pathname.replace(/\\/*$/, '')\n\t\treturn `${url.hostname}${path}`\n\t} catch (e) {\n\t\treturn shape.props.url\n\t}\n}\n\nfunction updateBookmarkAssetOnUrlChange(editor: Editor, shape: TLBookmarkShape) {\n\tconst { url } = shape.props\n\n\t// Derive the asset id from the URL\n\tconst assetId: TLAssetId = AssetRecordType.createId(getHashForString(url))\n\n\tif (editor.getAsset(assetId)) {\n\t\t// Existing asset for this URL?\n\t\tif (shape.props.assetId !== assetId) {\n\t\t\teditor.updateShapes<TLBookmarkShape>([\n\t\t\t\t{\n\t\t\t\t\tid: shape.id,\n\t\t\t\t\ttype: shape.type,\n\t\t\t\t\tprops: { assetId },\n\t\t\t\t},\n\t\t\t])\n\t\t}\n\t} else {\n\t\t// No asset for this URL?\n\n\t\t// First, clear out the existing asset reference\n\t\teditor.updateShapes<TLBookmarkShape>([\n\t\t\t{\n\t\t\t\tid: shape.id,\n\t\t\t\ttype: shape.type,\n\t\t\t\tprops: { assetId: null },\n\t\t\t},\n\t\t])\n\n\t\t// Then try to asyncronously create a new one\n\t\tcreateBookmarkAssetOnUrlChange(editor, shape)\n\t}\n}\n\nconst createBookmarkAssetOnUrlChange = debounce(async (editor: Editor, shape: TLBookmarkShape) => {\n\tconst { url } = shape.props\n\n\t// Create the asset using the external content manager's createAssetFromUrl method.\n\t// This may be overwritten by the user (for example, we overwrite it on tldraw.com)\n\tconst asset = await editor.getAssetForExternalContent({ type: 'url', url })\n\n\tif (!asset) {\n\t\t// No asset? Just leave the bookmark as a null assetId.\n\t\treturn\n\t}\n\n\teditor.batch(() => {\n\t\t// Create the new asset\n\t\teditor.createAssets([asset])\n\n\t\t// And update the shape\n\t\teditor.updateShapes<TLBookmarkShape>([\n\t\t\t{\n\t\t\t\tid: shape.id,\n\t\t\t\ttype: shape.type,\n\t\t\t\tprops: { assetId: asset.id },\n\t\t\t},\n\t\t])\n\t})\n}, 500)\n"],
+  "sourcesContent": ["import {\n\tAssetRecordType,\n\tBaseBoxShapeUtil,\n\tEditor,\n\tHTMLContainer,\n\tTLAssetId,\n\tTLBookmarkAsset,\n\tTLBookmarkShape,\n\tTLOnBeforeCreateHandler,\n\tTLOnBeforeUpdateHandler,\n\tbookmarkShapeMigrations,\n\tbookmarkShapeProps,\n\tdebounce,\n\tgetHashForString,\n\tisValidUrl,\n\tstopEventPropagation,\n\ttoDomPrecision,\n} from '@bigbluebutton/editor'\nimport { truncateStringWithEllipsis } from '../../utils/text/text'\nimport { HyperlinkButton } from '../shared/HyperlinkButton'\nimport { getRotatedBoxShadow } from '../shared/rotated-box-shadow'\n\n/** @public */\nexport class BookmarkShapeUtil extends BaseBoxShapeUtil<TLBookmarkShape> {\n\tstatic override type = 'bookmark' as const\n\tstatic override props = bookmarkShapeProps\n\tstatic override migrations = bookmarkShapeMigrations\n\n\toverride canResize = () => false\n\n\toverride hideSelectionBoundsFg = () => true\n\n\toverride getDefaultProps(): TLBookmarkShape['props'] {\n\t\treturn {\n\t\t\turl: '',\n\t\t\tw: 300,\n\t\t\th: 320,\n\t\t\tassetId: null,\n\t\t}\n\t}\n\n\toverride component(shape: TLBookmarkShape) {\n\t\tconst asset = (\n\t\t\tshape.props.assetId ? this.editor.getAsset(shape.props.assetId) : null\n\t\t) as TLBookmarkAsset\n\n\t\tconst pageRotation = this.editor.getShapePageTransform(shape)!.rotation()\n\n\t\tconst address = getHumanReadableAddress(shape)\n\n\t\treturn (\n\t\t\t<HTMLContainer>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"tl-bookmark__container\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tboxShadow: getRotatedBoxShadow(pageRotation),\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"tl-bookmark__image_container\">\n\t\t\t\t\t\t{asset?.props.image ? (\n\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\tclassName=\"tl-bookmark__image\"\n\t\t\t\t\t\t\t\tdraggable={false}\n\t\t\t\t\t\t\t\tsrc={asset?.props.image}\n\t\t\t\t\t\t\t\talt={asset?.props.title || ''}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<div className=\"tl-bookmark__placeholder\" />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<HyperlinkButton url={shape.props.url} zoomLevel={this.editor.getZoomLevel()} />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"tl-bookmark__copy_container\">\n\t\t\t\t\t\t{asset?.props.title && (\n\t\t\t\t\t\t\t<h2 className=\"tl-bookmark__heading\">\n\t\t\t\t\t\t\t\t{truncateStringWithEllipsis(asset?.props.title || '', 54)}\n\t\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{asset?.props.description && (\n\t\t\t\t\t\t\t<p className=\"tl-bookmark__description\">\n\t\t\t\t\t\t\t\t{truncateStringWithEllipsis(asset?.props.description || '', 128)}\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\tclassName=\"tl-bookmark__link\"\n\t\t\t\t\t\t\thref={shape.props.url || ''}\n\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\t\tonPointerDown={stopEventPropagation}\n\t\t\t\t\t\t\tonPointerUp={stopEventPropagation}\n\t\t\t\t\t\t\tonClick={stopEventPropagation}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{truncateStringWithEllipsis(address, 45)}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</HTMLContainer>\n\t\t)\n\t}\n\n\toverride indicator(shape: TLBookmarkShape) {\n\t\treturn (\n\t\t\t<rect\n\t\t\t\twidth={toDomPrecision(shape.props.w)}\n\t\t\t\theight={toDomPrecision(shape.props.h)}\n\t\t\t\trx=\"6\"\n\t\t\t\try=\"6\"\n\t\t\t/>\n\t\t)\n\t}\n\n\toverride onBeforeCreate?: TLOnBeforeCreateHandler<TLBookmarkShape> = (shape) => {\n\t\tupdateBookmarkAssetOnUrlChange(this.editor, shape)\n\t}\n\n\toverride onBeforeUpdate?: TLOnBeforeUpdateHandler<TLBookmarkShape> = (prev, shape) => {\n\t\tif (prev.props.url !== shape.props.url) {\n\t\t\tif (!isValidUrl(shape.props.url)) {\n\t\t\t\treturn { ...shape, props: { ...shape.props, url: prev.props.url } }\n\t\t\t} else {\n\t\t\t\tupdateBookmarkAssetOnUrlChange(this.editor, shape)\n\t\t\t}\n\t\t}\n\t}\n}\n\n/** @internal */\nexport const getHumanReadableAddress = (shape: TLBookmarkShape) => {\n\ttry {\n\t\tconst url = new URL(shape.props.url)\n\t\tconst path = url.pathname.replace(/\\/*$/, '')\n\t\treturn `${url.hostname}${path}`\n\t} catch (e) {\n\t\treturn shape.props.url\n\t}\n}\n\nfunction updateBookmarkAssetOnUrlChange(editor: Editor, shape: TLBookmarkShape) {\n\tconst { url } = shape.props\n\n\t// Derive the asset id from the URL\n\tconst assetId: TLAssetId = AssetRecordType.createId(getHashForString(url))\n\n\tif (editor.getAsset(assetId)) {\n\t\t// Existing asset for this URL?\n\t\tif (shape.props.assetId !== assetId) {\n\t\t\teditor.updateShapes<TLBookmarkShape>([\n\t\t\t\t{\n\t\t\t\t\tid: shape.id,\n\t\t\t\t\ttype: shape.type,\n\t\t\t\t\tprops: { assetId },\n\t\t\t\t},\n\t\t\t])\n\t\t}\n\t} else {\n\t\t// No asset for this URL?\n\n\t\t// First, clear out the existing asset reference\n\t\teditor.updateShapes<TLBookmarkShape>([\n\t\t\t{\n\t\t\t\tid: shape.id,\n\t\t\t\ttype: shape.type,\n\t\t\t\tprops: { assetId: null },\n\t\t\t},\n\t\t])\n\n\t\t// Then try to asyncronously create a new one\n\t\tcreateBookmarkAssetOnUrlChange(editor, shape)\n\t}\n}\n\nconst createBookmarkAssetOnUrlChange = debounce(async (editor: Editor, shape: TLBookmarkShape) => {\n\tconst { url } = shape.props\n\n\t// Create the asset using the external content manager's createAssetFromUrl method.\n\t// This may be overwritten by the user (for example, we overwrite it on tldraw.com)\n\tconst asset = await editor.getAssetForExternalContent({ type: 'url', url })\n\n\tif (!asset) {\n\t\t// No asset? Just leave the bookmark as a null assetId.\n\t\treturn\n\t}\n\n\teditor.batch(() => {\n\t\t// Create the new asset\n\t\teditor.createAssets([asset])\n\n\t\t// And update the shape\n\t\teditor.updateShapes<TLBookmarkShape>([\n\t\t\t{\n\t\t\t\tid: shape.id,\n\t\t\t\ttype: shape.type,\n\t\t\t\tprops: { assetId: asset.id },\n\t\t\t},\n\t\t])\n\t})\n}, 500)\n"],
   "mappings": "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",
   "names": []
 }

package/dist-cjs/lib/tools/SelectTool/childStates/Brushing.js

@@ -50,6 +50,9 @@ class Brushing extends import_editor.StateNode {
     this.initialSelectedShapeIds = [];
     this.editor.updateInstanceState({ brush: null });
   };
+  onTick = () => {
+    (0, import_editor.moveCameraWhenCloseToEdge)(this.editor);
+  };
   onPointerMove = () => {
     this.hitTestShapes();
   };

package/dist-cjs/lib/tools/SelectTool/childStates/Brushing.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/tools/SelectTool/childStates/Brushing.ts"],
-  "sourcesContent": ["import {\n\tBox2d,\n\tHIT_TEST_MARGIN,\n\tMatrix2d,\n\tStateNode,\n\tTLCancelEvent,\n\tTLEventHandlers,\n\tTLFrameShape,\n\tTLGroupShape,\n\tTLInterruptEvent,\n\tTLKeyboardEvent,\n\tTLPageId,\n\tTLPointerEventInfo,\n\tTLShape,\n\tTLShapeId,\n\tVec2d,\n\tpointInPolygon,\n\tpolygonsIntersect,\n} from '@bigbluebutton/editor'\n\nexport class Brushing extends StateNode {\n\tstatic override id = 'brushing'\n\n\tinfo = {} as TLPointerEventInfo & { target: 'canvas' }\n\n\tbrush = new Box2d()\n\tinitialSelectedShapeIds: TLShapeId[] = []\n\texcludedShapeIds = new Set<TLShapeId>()\n\n\t// The shape that the brush started on\n\tinitialStartShape: TLShape | null = null\n\n\toverride onEnter = (info: TLPointerEventInfo & { target: 'canvas' }) => {\n\t\tconst { altKey, currentPagePoint } = this.editor.inputs\n\n\t\tif (altKey) {\n\t\t\tthis.parent.transition('scribble_brushing', info)\n\t\t\treturn\n\t\t}\n\n\t\tthis.excludedShapeIds = new Set(\n\t\t\tthis.editor\n\t\t\t\t.getCurrentPageShapes()\n\t\t\t\t.filter(\n\t\t\t\t\t(shape) =>\n\t\t\t\t\t\tthis.editor.isShapeOfType<TLGroupShape>(shape, 'group') ||\n\t\t\t\t\t\tthis.editor.isShapeOrAncestorLocked(shape)\n\t\t\t\t)\n\t\t\t\t.map((shape) => shape.id)\n\t\t)\n\n\t\tthis.info = info\n\t\tthis.initialSelectedShapeIds = this.editor.getSelectedShapeIds().slice()\n\t\tthis.initialStartShape = this.editor.getShapesAtPoint(currentPagePoint)[0]\n\t\tthis.onPointerMove()\n\t}\n\n\toverride onExit = () => {\n\t\tthis.initialSelectedShapeIds = []\n\t\tthis.editor.updateInstanceState({ brush: null })\n\t}\n\n\toverride onPointerMove = () => {\n\t\tthis.hitTestShapes()\n\t}\n\n\toverride onPointerUp: TLEventHandlers['onPointerUp'] = () => {\n\t\tthis.complete()\n\t}\n\n\toverride onComplete: TLEventHandlers['onComplete'] = () => {\n\t\tthis.complete()\n\t}\n\n\toverride onCancel?: TLCancelEvent | undefined = (info) => {\n\t\tthis.editor.setSelectedShapes(this.initialSelectedShapeIds, { squashing: true })\n\t\tthis.parent.transition('idle', info)\n\t}\n\n\toverride onKeyDown: TLEventHandlers['onKeyDown'] = (info) => {\n\t\tif (this.editor.inputs.altKey) {\n\t\t\tthis.parent.transition('scribble_brushing', info)\n\t\t} else {\n\t\t\tthis.hitTestShapes()\n\t\t}\n\t}\n\n\toverride onKeyUp?: TLKeyboardEvent | undefined = () => {\n\t\tthis.hitTestShapes()\n\t}\n\n\tprivate complete() {\n\t\tthis.parent.transition('idle')\n\t}\n\n\tprivate hitTestShapes() {\n\t\tconst zoomLevel = this.editor.getZoomLevel()\n\t\tconst currentPageShapes = this.editor.getCurrentPageShapes()\n\t\tconst currentPageId = this.editor.getCurrentPageId()\n\t\tconst {\n\t\t\tinputs: { originPagePoint, currentPagePoint, shiftKey, ctrlKey },\n\t\t} = this.editor\n\n\t\t// Set the brush to contain the current and origin points\n\t\tthis.brush.setTo(Box2d.FromPoints([originPagePoint, currentPagePoint]))\n\n\t\t// We'll be collecting shape ids\n\t\tconst results = new Set(shiftKey ? this.initialSelectedShapeIds : [])\n\n\t\tlet A: Vec2d,\n\t\t\tB: Vec2d,\n\t\t\tshape: TLShape,\n\t\t\tpageBounds: Box2d | undefined,\n\t\t\tpageTransform: Matrix2d | undefined,\n\t\t\tlocalCorners: Vec2d[]\n\n\t\t// We'll be testing the corners of the brush against the shapes\n\t\tconst { corners } = this.brush\n\n\t\tconst { excludedShapeIds } = this\n\n\t\ttestAllShapes: for (let i = 0, n = currentPageShapes.length; i < n; i++) {\n\t\t\tshape = currentPageShapes[i]\n\t\t\tif (excludedShapeIds.has(shape.id)) continue testAllShapes\n\t\t\tif (results.has(shape.id)) continue testAllShapes\n\n\t\t\tpageBounds = this.editor.getShapePageBounds(shape)\n\t\t\tif (!pageBounds) continue testAllShapes\n\n\t\t\t// If the brush fully wraps a shape, it's almost certainly a hit\n\t\t\tif (this.brush.contains(pageBounds)) {\n\t\t\t\tthis.handleHit(shape, currentPagePoint, currentPageId, results, corners)\n\t\t\t\tcontinue testAllShapes\n\t\t\t}\n\n\t\t\t// Should we even test for a single segment intersections? Only if\n\t\t\t// we're not holding the ctrl key for alternate selection mode\n\t\t\t// (only wraps count!), or if the shape is a frame.\n\t\t\tif (ctrlKey || this.editor.isShapeOfType<TLFrameShape>(shape, 'frame')) {\n\t\t\t\tcontinue testAllShapes\n\t\t\t}\n\n\t\t\t// If the brush collides the page bounds, then do hit tests against\n\t\t\t// each of the brush's four sides.\n\t\t\tif (this.brush.collides(pageBounds)) {\n\t\t\t\t// Shapes expect to hit test line segments in their own coordinate system,\n\t\t\t\t// so we first need to get the brush corners in the shape's local space.\n\t\t\t\tconst geometry = this.editor.getShapeGeometry(shape)\n\n\t\t\t\tpageTransform = this.editor.getShapePageTransform(shape)\n\n\t\t\t\tif (!pageTransform) {\n\t\t\t\t\tcontinue testAllShapes\n\t\t\t\t}\n\n\t\t\t\t// Check whether any of the the brush edges intersect the shape\n\t\t\t\tlocalCorners = pageTransform.clone().invert().applyToPoints(corners)\n\n\t\t\t\thitTestBrushEdges: for (let i = 0; i < localCorners.length; i++) {\n\t\t\t\t\tA = localCorners[i]\n\t\t\t\t\tB = localCorners[(i + 1) % localCorners.length]\n\n\t\t\t\t\tif (geometry.hitTestLineSegment(A, B, HIT_TEST_MARGIN / zoomLevel)) {\n\t\t\t\t\t\tthis.handleHit(shape, currentPagePoint, currentPageId, results, corners)\n\t\t\t\t\t\tbreak hitTestBrushEdges\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tthis.editor.updateInstanceState({ brush: { ...this.brush.toJson() } })\n\t\tthis.editor.setSelectedShapes(Array.from(results), { squashing: true })\n\t}\n\n\toverride onInterrupt: TLInterruptEvent = () => {\n\t\tthis.editor.updateInstanceState({ brush: null })\n\t}\n\n\tprivate handleHit(\n\t\tshape: TLShape,\n\t\tcurrentPagePoint: Vec2d,\n\t\tcurrentPageId: TLPageId,\n\t\tresults: Set<TLShapeId>,\n\t\tcorners: Vec2d[]\n\t) {\n\t\tif (shape.parentId === currentPageId) {\n\t\t\tresults.add(shape.id)\n\t\t\treturn\n\t\t}\n\n\t\t// Find the outermost selectable shape, check to see if it has a\n\t\t// page mask; and if so, check to see if the brush intersects it\n\t\tconst selectedShape = this.editor.getOutermostSelectableShape(shape)\n\t\tconst pageMask = this.editor.getShapeMask(selectedShape.id)\n\n\t\tif (\n\t\t\tpageMask &&\n\t\t\t!polygonsIntersect(pageMask, corners) &&\n\t\t\t!pointInPolygon(currentPagePoint, pageMask)\n\t\t) {\n\t\t\treturn\n\t\t}\n\n\t\tresults.add(selectedShape.id)\n\t}\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n\tBox2d,\n\tHIT_TEST_MARGIN,\n\tMatrix2d,\n\tStateNode,\n\tTLCancelEvent,\n\tTLEventHandlers,\n\tTLFrameShape,\n\tTLGroupShape,\n\tTLInterruptEvent,\n\tTLKeyboardEvent,\n\tTLPageId,\n\tTLPointerEventInfo,\n\tTLShape,\n\tTLShapeId,\n\tTLTickEventHandler,\n\tVec2d,\n\tmoveCameraWhenCloseToEdge,\n\tpointInPolygon,\n\tpolygonsIntersect,\n} from '@bigbluebutton/editor'\n\nexport class Brushing extends StateNode {\n\tstatic override id = 'brushing'\n\n\tinfo = {} as TLPointerEventInfo & { target: 'canvas' }\n\n\tbrush = new Box2d()\n\tinitialSelectedShapeIds: TLShapeId[] = []\n\texcludedShapeIds = new Set<TLShapeId>()\n\n\t// The shape that the brush started on\n\tinitialStartShape: TLShape | null = null\n\n\toverride onEnter = (info: TLPointerEventInfo & { target: 'canvas' }) => {\n\t\tconst { altKey, currentPagePoint } = this.editor.inputs\n\n\t\tif (altKey) {\n\t\t\tthis.parent.transition('scribble_brushing', info)\n\t\t\treturn\n\t\t}\n\n\t\tthis.excludedShapeIds = new Set(\n\t\t\tthis.editor\n\t\t\t\t.getCurrentPageShapes()\n\t\t\t\t.filter(\n\t\t\t\t\t(shape) =>\n\t\t\t\t\t\tthis.editor.isShapeOfType<TLGroupShape>(shape, 'group') ||\n\t\t\t\t\t\tthis.editor.isShapeOrAncestorLocked(shape)\n\t\t\t\t)\n\t\t\t\t.map((shape) => shape.id)\n\t\t)\n\n\t\tthis.info = info\n\t\tthis.initialSelectedShapeIds = this.editor.getSelectedShapeIds().slice()\n\t\tthis.initialStartShape = this.editor.getShapesAtPoint(currentPagePoint)[0]\n\t\tthis.onPointerMove()\n\t}\n\n\toverride onExit = () => {\n\t\tthis.initialSelectedShapeIds = []\n\t\tthis.editor.updateInstanceState({ brush: null })\n\t}\n\n\toverride onTick: TLTickEventHandler = () => {\n\t\tmoveCameraWhenCloseToEdge(this.editor)\n\t}\n\n\toverride onPointerMove = () => {\n\t\tthis.hitTestShapes()\n\t}\n\n\toverride onPointerUp: TLEventHandlers['onPointerUp'] = () => {\n\t\tthis.complete()\n\t}\n\n\toverride onComplete: TLEventHandlers['onComplete'] = () => {\n\t\tthis.complete()\n\t}\n\n\toverride onCancel?: TLCancelEvent | undefined = (info) => {\n\t\tthis.editor.setSelectedShapes(this.initialSelectedShapeIds, { squashing: true })\n\t\tthis.parent.transition('idle', info)\n\t}\n\n\toverride onKeyDown: TLEventHandlers['onKeyDown'] = (info) => {\n\t\tif (this.editor.inputs.altKey) {\n\t\t\tthis.parent.transition('scribble_brushing', info)\n\t\t} else {\n\t\t\tthis.hitTestShapes()\n\t\t}\n\t}\n\n\toverride onKeyUp?: TLKeyboardEvent | undefined = () => {\n\t\tthis.hitTestShapes()\n\t}\n\n\tprivate complete() {\n\t\tthis.parent.transition('idle')\n\t}\n\n\tprivate hitTestShapes() {\n\t\tconst zoomLevel = this.editor.getZoomLevel()\n\t\tconst currentPageShapes = this.editor.getCurrentPageShapes()\n\t\tconst currentPageId = this.editor.getCurrentPageId()\n\t\tconst {\n\t\t\tinputs: { originPagePoint, currentPagePoint, shiftKey, ctrlKey },\n\t\t} = this.editor\n\n\t\t// Set the brush to contain the current and origin points\n\t\tthis.brush.setTo(Box2d.FromPoints([originPagePoint, currentPagePoint]))\n\n\t\t// We'll be collecting shape ids\n\t\tconst results = new Set(shiftKey ? this.initialSelectedShapeIds : [])\n\n\t\tlet A: Vec2d,\n\t\t\tB: Vec2d,\n\t\t\tshape: TLShape,\n\t\t\tpageBounds: Box2d | undefined,\n\t\t\tpageTransform: Matrix2d | undefined,\n\t\t\tlocalCorners: Vec2d[]\n\n\t\t// We'll be testing the corners of the brush against the shapes\n\t\tconst { corners } = this.brush\n\n\t\tconst { excludedShapeIds } = this\n\n\t\ttestAllShapes: for (let i = 0, n = currentPageShapes.length; i < n; i++) {\n\t\t\tshape = currentPageShapes[i]\n\t\t\tif (excludedShapeIds.has(shape.id)) continue testAllShapes\n\t\t\tif (results.has(shape.id)) continue testAllShapes\n\n\t\t\tpageBounds = this.editor.getShapePageBounds(shape)\n\t\t\tif (!pageBounds) continue testAllShapes\n\n\t\t\t// If the brush fully wraps a shape, it's almost certainly a hit\n\t\t\tif (this.brush.contains(pageBounds)) {\n\t\t\t\tthis.handleHit(shape, currentPagePoint, currentPageId, results, corners)\n\t\t\t\tcontinue testAllShapes\n\t\t\t}\n\n\t\t\t// Should we even test for a single segment intersections? Only if\n\t\t\t// we're not holding the ctrl key for alternate selection mode\n\t\t\t// (only wraps count!), or if the shape is a frame.\n\t\t\tif (ctrlKey || this.editor.isShapeOfType<TLFrameShape>(shape, 'frame')) {\n\t\t\t\tcontinue testAllShapes\n\t\t\t}\n\n\t\t\t// If the brush collides the page bounds, then do hit tests against\n\t\t\t// each of the brush's four sides.\n\t\t\tif (this.brush.collides(pageBounds)) {\n\t\t\t\t// Shapes expect to hit test line segments in their own coordinate system,\n\t\t\t\t// so we first need to get the brush corners in the shape's local space.\n\t\t\t\tconst geometry = this.editor.getShapeGeometry(shape)\n\n\t\t\t\tpageTransform = this.editor.getShapePageTransform(shape)\n\n\t\t\t\tif (!pageTransform) {\n\t\t\t\t\tcontinue testAllShapes\n\t\t\t\t}\n\n\t\t\t\t// Check whether any of the the brush edges intersect the shape\n\t\t\t\tlocalCorners = pageTransform.clone().invert().applyToPoints(corners)\n\n\t\t\t\thitTestBrushEdges: for (let i = 0; i < localCorners.length; i++) {\n\t\t\t\t\tA = localCorners[i]\n\t\t\t\t\tB = localCorners[(i + 1) % localCorners.length]\n\n\t\t\t\t\tif (geometry.hitTestLineSegment(A, B, HIT_TEST_MARGIN / zoomLevel)) {\n\t\t\t\t\t\tthis.handleHit(shape, currentPagePoint, currentPageId, results, corners)\n\t\t\t\t\t\tbreak hitTestBrushEdges\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tthis.editor.updateInstanceState({ brush: { ...this.brush.toJson() } })\n\t\tthis.editor.setSelectedShapes(Array.from(results), { squashing: true })\n\t}\n\n\toverride onInterrupt: TLInterruptEvent = () => {\n\t\tthis.editor.updateInstanceState({ brush: null })\n\t}\n\n\tprivate handleHit(\n\t\tshape: TLShape,\n\t\tcurrentPagePoint: Vec2d,\n\t\tcurrentPageId: TLPageId,\n\t\tresults: Set<TLShapeId>,\n\t\tcorners: Vec2d[]\n\t) {\n\t\tif (shape.parentId === currentPageId) {\n\t\t\tresults.add(shape.id)\n\t\t\treturn\n\t\t}\n\n\t\t// Find the outermost selectable shape, check to see if it has a\n\t\t// page mask; and if so, check to see if the brush intersects it\n\t\tconst selectedShape = this.editor.getOutermostSelectableShape(shape)\n\t\tconst pageMask = this.editor.getShapeMask(selectedShape.id)\n\n\t\tif (\n\t\t\tpageMask &&\n\t\t\t!polygonsIntersect(pageMask, corners) &&\n\t\t\t!pointInPolygon(currentPagePoint, pageMask)\n\t\t) {\n\t\t\treturn\n\t\t}\n\n\t\tresults.add(selectedShape.id)\n\t}\n}\n"],
+  "mappings": "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",
   "names": ["i"]
 }

package/dist-cjs/lib/tools/SelectTool/childStates/Idle.js

@@ -59,7 +59,7 @@ class Idle extends import_editor.StateNode {
     switch (info.target) {
       case "canvas": {
         const hitShape = (0, import_getHitShapeOnCanvasPointerDown.getHitShapeOnCanvasPointerDown)(this.editor);
-        if (hitShape) {
+        if (hitShape && !hitShape.isLocked) {
           this.onPointerDown({
             ...info,
             shape: hitShape,
@@ -136,7 +136,7 @@ class Idle extends import_editor.StateNode {
           }
           default: {
             const hoveredShape = this.editor.getHoveredShape();
-            if (hoveredShape && !this.editor.getSelectedShapeIds().includes(hoveredShape.id)) {
+            if (hoveredShape && !this.editor.getSelectedShapeIds().includes(hoveredShape.id) && !hoveredShape.isLocked) {
               this.onPointerDown({
                 ...info,
                 shape: hoveredShape,