Clean up editor

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.

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<RectangleShape> {
     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<RectangleShape> {
   }
 
   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<RectangleShape> {
   }
 
   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<RectangleShape> {
   transform(
     shape: RectangleShape,
     bounds: TLBounds,
-    {
-      initialShape,
-      transformOrigin,
-      scaleX,
-      scaleY,
-    }: TLTransformInfo<RectangleShape>
+    { initialShape, transformOrigin, scaleX, scaleY }: TLTransformInfo<RectangleShape>
   ) {
     if (!shape.rotation && !shape.isAspectRatioLocked) {
       return {
@@ -254,11 +231,7 @@ export class Rectangle extends TLDrawShapeUtil<RectangleShape> {
     }
   }
 
-  transformSingle(
-    shape: RectangleShape,
-    bounds: TLBounds,
-    info: TLTransformInfo<RectangleShape>
-  ) {
+  transformSingle(shape: RectangleShape, bounds: TLBounds, info: TLTransformInfo<RectangleShape>) {
     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)
 }

packages/www/components/editor.tsx

@@ -95,7 +95,5 @@ export default function Editor(): JSX.Element {
     return <div />
   }
 
-  console.log(value)
-
   return <TLDraw document={value} onChange={handleChange} />
 }