diff --git a/packages/dev/README.md b/packages/dev/README.md index 12f924540..c8d3b3631 100644 --- a/packages/dev/README.md +++ b/packages/dev/README.md @@ -1,18 +1,3 @@ -# react-esbuild-starter +# Dev Server -Starter template for React and Typescript. -Inspired by https://github.com/sikanhe/rescript-esbuild-starter - -It provides minimal yet 🔥 blazing fast ™ development boilerplate for rapid React prototyping. - -- `yarn start` Starts typescript typechecking and esbuild in watch mode, and serves web page at localhost:5000. -- `yarn build` Builds production bundle for browser, outputs bundle to dist/bundle.js with source map. -- `yarn clean` Clean up assets produced by esbuild. - -All code bundling and transpilation is handled by esbuild. Its configuration is kept inside `esbuild.config.mjs`. Follow [esbuild docs](https://esbuild.github.io/getting-started/) to see all supported options. - -### Caveats - -- No output file hashing -- No test runner -- Importing CSS in JS file is not supported in esbuild yet. It is currently in development https://github.com/evanw/esbuild/issues/20. In meantime either opt-in for some CSS-in-JS solution, or include styles directly in `www/index.html`. +Dev server with fast refresh. diff --git a/packages/tldraw/src/shape/shapes/rectangle/rectangle.tsx b/packages/tldraw/src/shape/shapes/rectangle/rectangle.tsx index 50cd5a171..f56535dbc 100644 --- a/packages/tldraw/src/shape/shapes/rectangle/rectangle.tsx +++ b/packages/tldraw/src/shape/shapes/rectangle/rectangle.tsx @@ -1,18 +1,7 @@ import * as React from 'react' -import { - TLBounds, - Utils, - Vec, - TLTransformInfo, - TLRenderInfo, - Intersect, -} from '@tldraw/core' +import { TLBounds, Utils, Vec, TLTransformInfo, TLRenderInfo, Intersect } from '@tldraw/core' import getStroke from 'perfect-freehand' -import { - getPerfectDashProps, - defaultStyle, - getShapeStyle, -} from '../../shape-styles' +import { getPerfectDashProps, defaultStyle, getShapeStyle } from '../../shape-styles' import { RectangleShape, DashStyle, @@ -49,9 +38,7 @@ export class Rectangle extends TLDrawShapeUtil { const strokeWidth = +styles.strokeWidth if (style.dash === DashStyle.Draw) { - const pathData = Utils.getFromCache(this.pathCache, shape.size, () => - renderPath(shape) - ) + const pathData = Utils.getFromCache(this.pathCache, shape.size, () => renderPath(shape)) return ( <> @@ -185,9 +172,7 @@ export class Rectangle extends TLDrawShapeUtil { } getRotatedBounds(shape: RectangleShape) { - return Utils.getBoundsFromPoints( - Utils.getRotatedCorners(this.getBounds(shape), shape.rotation) - ) + return Utils.getBoundsFromPoints(Utils.getRotatedCorners(this.getBounds(shape), shape.rotation)) } getCenter(shape: RectangleShape): number[] { @@ -199,13 +184,10 @@ export class Rectangle extends TLDrawShapeUtil { } hitTestBounds(shape: RectangleShape, bounds: TLBounds) { - const rotatedCorners = Utils.getRotatedCorners( - this.getBounds(shape), - shape.rotation - ) + const rotatedCorners = Utils.getRotatedCorners(this.getBounds(shape), shape.rotation) return ( - rotatedCorners.every(point => Utils.pointInBounds(point, bounds)) || + rotatedCorners.every((point) => Utils.pointInBounds(point, bounds)) || Intersect.polyline.bounds(rotatedCorners, bounds).length > 0 ) } @@ -213,12 +195,7 @@ export class Rectangle extends TLDrawShapeUtil { transform( shape: RectangleShape, bounds: TLBounds, - { - initialShape, - transformOrigin, - scaleX, - scaleY, - }: TLTransformInfo + { initialShape, transformOrigin, scaleX, scaleY }: TLTransformInfo ) { if (!shape.rotation && !shape.isAspectRatioLocked) { return { @@ -254,11 +231,7 @@ export class Rectangle extends TLDrawShapeUtil { } } - transformSingle( - shape: RectangleShape, - bounds: TLBounds, - info: TLTransformInfo - ) { + transformSingle(shape: RectangleShape, bounds: TLBounds, info: TLTransformInfo) { return { size: Vec.round([bounds.width, bounds.height]), point: Vec.round([bounds.minX, bounds.minY]), @@ -300,17 +273,14 @@ function renderPath(shape: RectangleShape) { Math.floor(5 + getRandom() * 4) ) - const stroke = getStroke( - [...lines.flat().slice(2), ...lines[0], ...lines[0].slice(4)], - { - size: 1 + +styles.strokeWidth, - thinning: 0.6, - easing: t => t * t * t * t, - end: { taper: +styles.strokeWidth * 20 }, - start: { taper: +styles.strokeWidth * 20 }, - simulatePressure: false, - } - ) + const stroke = getStroke([...lines.flat().slice(2), ...lines[0], ...lines[0].slice(4)], { + size: 1 + +styles.strokeWidth, + thinning: 0.6, + easing: (t) => t * t * t * t, + end: { taper: +styles.strokeWidth * 20 }, + start: { taper: +styles.strokeWidth * 20 }, + simulatePressure: false, + }) return Utils.getSvgPathFromStroke(stroke) } diff --git a/packages/www/components/editor.tsx b/packages/www/components/editor.tsx index e93a799a3..8efb030ab 100644 --- a/packages/www/components/editor.tsx +++ b/packages/www/components/editor.tsx @@ -95,7 +95,5 @@ export default function Editor(): JSX.Element { return
} - console.log(value) - return }