diff --git a/apps/examples/e2e/tests/export-snapshots.spec.tsx-snapshots/Export-snapshots-Geo-shapes-dark-1-Mobile-Chrome-linux.png b/apps/examples/e2e/tests/export-snapshots.spec.tsx-snapshots/Export-snapshots-Geo-shapes-dark-1-Mobile-Chrome-linux.png index 075ad5fbc006..4a161ee82b27 100644 Binary files a/apps/examples/e2e/tests/export-snapshots.spec.tsx-snapshots/Export-snapshots-Geo-shapes-dark-1-Mobile-Chrome-linux.png and b/apps/examples/e2e/tests/export-snapshots.spec.tsx-snapshots/Export-snapshots-Geo-shapes-dark-1-Mobile-Chrome-linux.png differ diff --git a/apps/examples/e2e/tests/export-snapshots.spec.tsx-snapshots/Export-snapshots-Geo-shapes-dark-1-chromium-linux.png b/apps/examples/e2e/tests/export-snapshots.spec.tsx-snapshots/Export-snapshots-Geo-shapes-dark-1-chromium-linux.png index 075ad5fbc006..4a161ee82b27 100644 Binary files a/apps/examples/e2e/tests/export-snapshots.spec.tsx-snapshots/Export-snapshots-Geo-shapes-dark-1-chromium-linux.png and b/apps/examples/e2e/tests/export-snapshots.spec.tsx-snapshots/Export-snapshots-Geo-shapes-dark-1-chromium-linux.png differ diff --git a/apps/examples/e2e/tests/export-snapshots.spec.tsx-snapshots/Export-snapshots-Geo-shapes-light-1-Mobile-Chrome-linux.png b/apps/examples/e2e/tests/export-snapshots.spec.tsx-snapshots/Export-snapshots-Geo-shapes-light-1-Mobile-Chrome-linux.png index f673d0fafe2a..a492a31dd3d1 100644 Binary files a/apps/examples/e2e/tests/export-snapshots.spec.tsx-snapshots/Export-snapshots-Geo-shapes-light-1-Mobile-Chrome-linux.png and b/apps/examples/e2e/tests/export-snapshots.spec.tsx-snapshots/Export-snapshots-Geo-shapes-light-1-Mobile-Chrome-linux.png differ diff --git a/apps/examples/e2e/tests/export-snapshots.spec.tsx-snapshots/Export-snapshots-Geo-shapes-light-1-chromium-linux.png b/apps/examples/e2e/tests/export-snapshots.spec.tsx-snapshots/Export-snapshots-Geo-shapes-light-1-chromium-linux.png index f673d0fafe2a..a492a31dd3d1 100644 Binary files a/apps/examples/e2e/tests/export-snapshots.spec.tsx-snapshots/Export-snapshots-Geo-shapes-light-1-chromium-linux.png and b/apps/examples/e2e/tests/export-snapshots.spec.tsx-snapshots/Export-snapshots-Geo-shapes-light-1-chromium-linux.png differ diff --git a/packages/editor/src/lib/editor/shapes/shared/getPerfectDashProps.ts b/packages/editor/src/lib/editor/shapes/shared/getPerfectDashProps.ts index 3945f90303c3..14fbb1508d94 100644 --- a/packages/editor/src/lib/editor/shapes/shared/getPerfectDashProps.ts +++ b/packages/editor/src/lib/editor/shapes/shared/getPerfectDashProps.ts @@ -43,6 +43,13 @@ export function getPerfectDashProps( } } + if (style === 'none') { + return { + strokeDasharray: 'none', + strokeDashoffset: 'none', + } + } + switch (style) { case 'dashed': { ratio = 1 diff --git a/packages/tldraw/api-report.api.md b/packages/tldraw/api-report.api.md index b06557b22e5e..ece11c2ed537 100644 --- a/packages/tldraw/api-report.api.md +++ b/packages/tldraw/api-report.api.md @@ -1817,7 +1817,7 @@ export class GeoShapeUtil extends BaseBoxShapeUtil { // (undocumented) getText(shape: TLGeoShape): string; // (undocumented) - indicator(shape: TLGeoShape): JSX.Element; + indicator(shape: TLGeoShape): JSX.Element | null; // (undocumented) static migrations: TLPropsMigrations; // (undocumented) @@ -1831,7 +1831,7 @@ export class GeoShapeUtil extends BaseBoxShapeUtil { props: { align: "end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start"; color: TLDefaultColorStyle; - dash: "dashed" | "dotted" | "draw" | "solid"; + dash: "dashed" | "dotted" | "draw" | "none" | "solid"; fill: "fill" | "lined-fill" | "none" | "pattern" | "semi" | "solid"; font: TLDefaultFontStyle; geo: "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "check-box" | "cloud" | "diamond" | "ellipse" | "heart" | "hexagon" | "octagon" | "oval" | "pentagon" | "rectangle" | "rhombus-2" | "rhombus" | "star" | "trapezoid" | "triangle" | "x-box"; @@ -1866,7 +1866,7 @@ export class GeoShapeUtil extends BaseBoxShapeUtil { props: { align: "end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start"; color: TLDefaultColorStyle; - dash: "dashed" | "dotted" | "draw" | "solid"; + dash: "dashed" | "dotted" | "draw" | "none" | "solid"; fill: "fill" | "lined-fill" | "none" | "pattern" | "semi" | "solid"; font: TLDefaultFontStyle; geo: "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "check-box" | "cloud" | "diamond" | "ellipse" | "heart" | "hexagon" | "octagon" | "oval" | "pentagon" | "rectangle" | "rhombus-2" | "rhombus" | "star" | "trapezoid" | "triangle" | "x-box"; @@ -2345,7 +2345,7 @@ export class LineShapeUtil extends ShapeUtil { // (undocumented) hideSelectionBoundsFg(): boolean; // (undocumented) - indicator(shape: TLLineShape): JSX.Element; + indicator(shape: TLLineShape): JSX.Element | null; // (undocumented) static migrations: TLPropsMigrations; // (undocumented) @@ -2360,7 +2360,7 @@ export class LineShapeUtil extends ShapeUtil { parentId: TLParentId; props: { color: TLDefaultColorStyle; - dash: "dashed" | "dotted" | "draw" | "solid"; + dash: "dashed" | "dotted" | "draw" | "none" | "solid"; points: { [x: string]: { id: string; @@ -2389,7 +2389,7 @@ export class LineShapeUtil extends ShapeUtil { parentId: TLParentId; props: { color: TLDefaultColorStyle; - dash: "dashed" | "dotted" | "draw" | "solid"; + dash: "dashed" | "dotted" | "draw" | "none" | "solid"; points: { [x: string]: { id: IndexKey; @@ -2472,6 +2472,12 @@ export interface MoveToPathBuilderCommand extends PathBuilderCommandBase { type: 'move'; } +// @public (undocumented) +export interface NonePathBuilderOpts extends BasePathBuilderOpts { + // (undocumented) + style: 'none'; +} + // @public (undocumented) export interface NoteShapeOptions extends ShapeOptionsWithDisplayValues { resizeMode: 'none' | 'scale'; @@ -2736,7 +2742,7 @@ export class PathBuilder { // (undocumented) toPath2D(opts: PathBuilderOpts): Path2D; // (undocumented) - toSvg(opts: PathBuilderOpts): JSX.Element; + toSvg(opts: PathBuilderOpts): JSX.Element | null; } // @internal (undocumented) @@ -2799,7 +2805,7 @@ export interface PathBuilderLineOpts extends PathBuilderCommandOpts { } // @public (undocumented) -export type PathBuilderOpts = DashedPathBuilderOpts | DrawPathBuilderOpts | SolidPathBuilderOpts; +export type PathBuilderOpts = DashedPathBuilderOpts | DrawPathBuilderOpts | NonePathBuilderOpts | SolidPathBuilderOpts; // @public (undocumented) export interface PathBuilderToDOpts { diff --git a/packages/tldraw/src/index.ts b/packages/tldraw/src/index.ts index 1b31fc8fff31..14dc6a05d52b 100644 --- a/packages/tldraw/src/index.ts +++ b/packages/tldraw/src/index.ts @@ -11,6 +11,7 @@ export { type DashedPathBuilderOpts, type DrawPathBuilderDOpts, type DrawPathBuilderOpts, + type NonePathBuilderOpts, type LineToPathBuilderCommand, type MoveToPathBuilderCommand, type PathBuilderCommand, diff --git a/packages/tldraw/src/lib/shapes/draw/DrawShapeUtil.tsx b/packages/tldraw/src/lib/shapes/draw/DrawShapeUtil.tsx index 293f38244bb5..d5cec0e4ad64 100644 --- a/packages/tldraw/src/lib/shapes/draw/DrawShapeUtil.tsx +++ b/packages/tldraw/src/lib/shapes/draw/DrawShapeUtil.tsx @@ -423,15 +423,17 @@ function DrawShapeSvg({ ) : ( )} - + {shape.props.dash !== 'none' && ( + + )} ) } diff --git a/packages/tldraw/src/lib/shapes/draw/getPath.ts b/packages/tldraw/src/lib/shapes/draw/getPath.ts index d8c735706c7c..7093a6de8325 100644 --- a/packages/tldraw/src/lib/shapes/draw/getPath.ts +++ b/packages/tldraw/src/lib/shapes/draw/getPath.ts @@ -162,5 +162,6 @@ export function getDrawShapeStrokeDashArray( solid: `none`, dotted: `${dotAdjustment} ${strokeWidth * 2}`, dashed: `${strokeWidth * 2} ${strokeWidth * 2}`, + none: `none`, }[shape.props.dash] } diff --git a/packages/tldraw/src/lib/shapes/geo/getGeoShapePath.ts b/packages/tldraw/src/lib/shapes/geo/getGeoShapePath.ts index 439c711838f7..e0984dd4a12e 100644 --- a/packages/tldraw/src/lib/shapes/geo/getGeoShapePath.ts +++ b/packages/tldraw/src/lib/shapes/geo/getGeoShapePath.ts @@ -211,6 +211,10 @@ function getXBoxPath( .lineTo(0, h) .close() + if (dash === 'none') { + return path + } + if (dash === 'dashed' || dash === 'dotted') { return path .moveTo(0, 0, { diff --git a/packages/tldraw/src/lib/shapes/shared/PathBuilder.tsx b/packages/tldraw/src/lib/shapes/shared/PathBuilder.tsx index 3623edc36b05..d2a76455c641 100644 --- a/packages/tldraw/src/lib/shapes/shared/PathBuilder.tsx +++ b/packages/tldraw/src/lib/shapes/shared/PathBuilder.tsx @@ -60,7 +60,16 @@ export interface DrawPathBuilderOpts extends BasePathBuilderOpts, DrawPathBuilde } /** @public */ -export type PathBuilderOpts = SolidPathBuilderOpts | DashedPathBuilderOpts | DrawPathBuilderOpts +export interface NonePathBuilderOpts extends BasePathBuilderOpts { + style: 'none' +} + +/** @public */ +export type PathBuilderOpts = + | SolidPathBuilderOpts + | DashedPathBuilderOpts + | DrawPathBuilderOpts + | NonePathBuilderOpts /** @public */ export interface PathBuilderCommandOpts { @@ -507,6 +516,9 @@ export class PathBuilder { } toSvg(opts: PathBuilderOpts) { + if (opts.style === 'none') { + return null + } if (opts.forceSolid) { return this.toSolidSvg(opts) } @@ -526,6 +538,9 @@ export class PathBuilder { } toPath2D(opts: PathBuilderOpts): Path2D { + if (opts.style === 'none') { + return new Path2D() + } if (opts.forceSolid || opts.style === 'solid') { return new Path2D(this.toD({ onlyFilled: opts.onlyFilled })) } diff --git a/packages/tldraw/src/lib/ui/components/StylePanel/StylePanelContext.tsx b/packages/tldraw/src/lib/ui/components/StylePanel/StylePanelContext.tsx index 5fcd1d9b8cb8..4268b0dad4ab 100644 --- a/packages/tldraw/src/lib/ui/components/StylePanel/StylePanelContext.tsx +++ b/packages/tldraw/src/lib/ui/components/StylePanel/StylePanelContext.tsx @@ -41,7 +41,6 @@ export function StylePanelContextProvider({ children, styles }: StylePanelContex const skipNextShapeStyle = unsafe__withoutCapture( () => editor.getSelectedShapeIds().length > 0 && editor.inputs.getAccelKey() ) - editor.run(() => { if (editor.isIn('select')) { editor.setStyleForSelectedShapes(style, value) diff --git a/packages/tlschema/api-report.api.md b/packages/tlschema/api-report.api.md index 1faae1397a35..ecf5246d98a7 100644 --- a/packages/tlschema/api-report.api.md +++ b/packages/tlschema/api-report.api.md @@ -296,7 +296,7 @@ export const defaultBindingSchemas: { export const DefaultColorStyle: EnumStyleProp; // @public -export const DefaultDashStyle: EnumStyleProp<"dashed" | "dotted" | "draw" | "solid">; +export const DefaultDashStyle: EnumStyleProp<"dashed" | "dotted" | "draw" | "none" | "solid">; // @public export const DefaultFillStyle: EnumStyleProp<"fill" | "lined-fill" | "none" | "pattern" | "semi" | "solid">; diff --git a/packages/tlschema/src/styles/TLDashStyle.ts b/packages/tlschema/src/styles/TLDashStyle.ts index 351be45050bb..ae3cb1149254 100644 --- a/packages/tlschema/src/styles/TLDashStyle.ts +++ b/packages/tlschema/src/styles/TLDashStyle.ts @@ -35,7 +35,7 @@ import { StyleProp } from './StyleProp' */ export const DefaultDashStyle = StyleProp.defineEnum('tldraw:dash', { defaultValue: 'draw', - values: ['draw', 'solid', 'dashed', 'dotted'], + values: ['draw', 'solid', 'dashed', 'dotted', 'none'], }) /**