PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

remove useForceSolid effect for geo / line shapes (#1769)

Browse source 
These shapes no longer use perfect freehand for their rendering, so we
can drop the effect of `useForceSolid` for them.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Zoom out
2. Draw style draw shapes should not change

### Release Notes

- Remove the force solid switching for geo / line shapes
This commit is contained in:
Steve Ruiz 2023-07-27 18:18:44 +01:00 committed by GitHub
parent acbd9ce0cd
commit 18f5a1d9d2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
packages/tldraw/src/lib/shapes/geo/GeoShapeUtil.tsx
View file

@ -1,4 +1,3 @@
/* eslint-disable react-hooks/rules-of-hooks */
import {
BaseBoxShapeUtil,
DefaultFontFamilies,
@ -41,7 +40,6 @@ import {
} from '../shared/defaultStyleDefs'
import { getTextLabelSvgElement } from '../shared/getTextLabelSvgElement'
import { getRoundedInkyPolygonPath, getRoundedPolygonPoints } from '../shared/polygon-helpers'
import { useForceSolid } from '../shared/useForceSolid'
import { cloudOutline, cloudSvgPath } from './cloudOutline'
import { DashStyleCloud, DashStyleCloudSvg } from './components/DashStyleCloud'
import { DashStyleEllipse, DashStyleEllipseSvg } from './components/DashStyleEllipse'
@ -369,7 +367,6 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
component(shape: TLGeoShape) {
const { id, type, props } = shape
const forceSolid = useForceSolid()
const strokeWidth = STROKE_SIZES[props.size]
const { w, color, labelColor, fill, dash, growY, font, align, verticalAlign, size, text } =
@ -380,7 +377,7 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
switch (props.geo) {
case 'cloud': {
if (dash === 'solid' || (dash === 'draw' && forceSolid)) {
if (dash === 'solid') {
return (
<SolidStyleCloud
color={color}
@ -402,7 +399,7 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
h={h}
id={id}
size={size}
dash={dash === 'dashed' ? dash : size === 's' && forceSolid ? 'dashed' : dash}
dash={dash}
/>
)
} else if (dash === 'draw') {
@ -422,7 +419,7 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
break
}
case 'ellipse': {
if (dash === 'solid' || (dash === 'draw' && forceSolid)) {
if (dash === 'solid') {
return (
<SolidStyleEllipse strokeWidth={strokeWidth} w={w} h={h} color={color} fill={fill} />
)
@ -433,7 +430,7 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
strokeWidth={strokeWidth}
w={w}
h={h}
dash={dash === 'dashed' ? dash : size === 's' && forceSolid ? 'dashed' : dash}
dash={dash}
color={color}
fill={fill}
/>
@ -446,7 +443,7 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
break
}
case 'oval': {
if (dash === 'solid' || (dash === 'draw' && forceSolid)) {
if (dash === 'solid') {
return (
<SolidStyleOval strokeWidth={strokeWidth} w={w} h={h} color={color} fill={fill} />
)
@ -457,7 +454,7 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
strokeWidth={strokeWidth}
w={w}
h={h}
dash={dash === 'dashed' ? dash : size === 's' && forceSolid ? 'dashed' : dash}
dash={dash}
color={color}
fill={fill}
/>
@ -475,7 +472,7 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
geometry instanceof Group2d ? geometry.children[0].vertices : geometry.vertices
const lines = getLines(shape.props, strokeWidth)
if (dash === 'solid' || (dash === 'draw' && forceSolid)) {
if (dash === 'solid') {
return (
<SolidStylePolygon
fill={fill}
@ -488,7 +485,7 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
} else if (dash === 'dashed' || dash === 'dotted') {
return (
<DashStylePolygon
dash={dash === 'dashed' ? dash : size === 's' && forceSolid ? 'dashed' : dash}
dash={dash}
fill={fill}
color={color}
strokeWidth={strokeWidth}
@ -539,12 +536,11 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
const { w, size } = props
const h = props.h + props.growY
const forceSolid = useForceSolid()
const strokeWidth = STROKE_SIZES[size]
switch (props.geo) {
case 'ellipse': {
if (props.dash === 'draw' && !forceSolid) {
if (props.dash === 'draw') {
return <path d={getEllipseIndicatorPath(id, w, h, strokeWidth)} />
}
@ -563,7 +559,7 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
geometry instanceof Group2d ? geometry.children[0].vertices : geometry.vertices
let path: string
if (props.dash === 'draw' && !forceSolid) {
if (props.dash === 'draw') {
const polygonPoints = getRoundedPolygonPoints(id, outline, 0, strokeWidth * 2, 1)
path = getRoundedInkyPolygonPath(polygonPoints)
} else {

4
packages/tldraw/src/lib/shapes/line/LineShapeUtil.tsx
View file

@ -22,7 +22,6 @@ import { ShapeFill, useDefaultColorTheme } from '../shared/ShapeFill'
import { STROKE_SIZES } from '../shared/default-shape-constants'
import { getPerfectDashProps } from '../shared/getPerfectDashProps'
import { getDrawLinePathData } from '../shared/polygon-helpers'
import { useForceSolid } from '../shared/useForceSolid'
import { getLineDrawPath, getLineIndicatorPath } from './components/getLinePath'
import { getLineSvg } from './components/getLineSvg'
import {
@ -171,7 +170,6 @@ export class LineShapeUtil extends ShapeUtil<TLLineShape> {
component(shape: TLLineShape) {
const theme = useDefaultColorTheme()
const forceSolid = useForceSolid()
const spline = getGeometryForLineShape(shape)
const strokeWidth = STROKE_SIZES[shape.props.size]
@ -249,7 +247,7 @@ export class LineShapeUtil extends ShapeUtil<TLLineShape> {
if (shape.props.spline === 'cubic') {
const splinePath = getSvgPathForLineGeometry(spline)
if (dash === 'solid' || (dash === 'draw' && forceSolid)) {
if (dash === 'solid') {
return (
<SVGContainer id={shape.id}>
<ShapeFill d={splinePath} fill={'none'} color={color} theme={theme} />