Clean up editor
This commit is contained in:
parent
4ac1b93f96
commit
38ddf1f640
3 changed files with 18 additions and 65 deletions
|
@ -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.
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
|
|
|
@ -95,7 +95,5 @@ export default function Editor(): JSX.Element {
|
|||
return <div />
|
||||
}
|
||||
|
||||
console.log(value)
|
||||
|
||||
return <TLDraw document={value} onChange={handleChange} />
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue