mirror
/
Tldraw
kopia lustrzana https://github.com/Tldraw/Tldraw
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność

Improves stroke width

canvas-rendering
Steve Ruiz 2021-05-15 18:11:08 +01:00
rodzic 8a650a99d6
commit 138e1fa24d
10 zmienionych plików z 155 dodań i 59 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

8
components/canvas/shape.tsx
Wyświetl plik

@ -66,16 +66,20 @@ function Shape({ id }: { id: string }) {
>
<defs>{getShapeUtils(shape).render(shape)}</defs>
<HoverIndicator as="use" xlinkHref={"#" + id} />
<use xlinkHref={"#" + id} {...shape.style} />
<MainShape as="use" xlinkHref={"#" + id} {...shape.style} />
<Indicator as="use" xlinkHref={"#" + id} />
</StyledGroup>
)
}
const MainShape = styled("use", {
zStrokeWidth: 1,
})
const Indicator = styled("path", {
fill: "none",
stroke: "transparent",
zStrokeWidth: [1, 1],
zStrokeWidth: 1,
pointerEvents: "none",
strokeLineCap: "round",
strokeLinejoin: "round",

2
lib/code/line.ts
Wyświetl plik

@ -12,7 +12,7 @@ export default class Line extends CodeShape<LineShape> {
parentId: "page0",
childIndex: 0,
point: [0, 0],
direction: [0, 0],
direction: [-0.5, 0.5],
rotation: 0,
style: {
fill: "#777",

5
lib/shapes/circle.tsx
Wyświetl plik

@ -20,7 +20,10 @@ const circle = createShape<CircleShape>({
point: [0, 0],
rotation: 0,
radius: 20,
style: {},
style: {
fill: "#777",
stroke: "#000",
},
...props,
}
},

5
lib/shapes/dot.tsx
Wyświetl plik

@ -18,7 +18,10 @@ const dot = createShape<DotShape>({
childIndex: 0,
point: [0, 0],
rotation: 0,
style: {},
style: {
fill: "#777",
stroke: "#000",
},
...props,
}
},

5
lib/shapes/ellipse.tsx
Wyświetl plik

@ -21,7 +21,10 @@ const ellipse = createShape<EllipseShape>({
radiusX: 20,
radiusY: 20,
rotation: 0,
style: {},
style: {
fill: "#777",
stroke: "#000",
},
...props,
}
},

5
lib/shapes/line.tsx
Wyświetl plik

@ -19,7 +19,10 @@ const line = createShape<LineShape>({
point: [0, 0],
direction: [0, 0],
rotation: 0,
style: {},
style: {
fill: "#777",
stroke: "#000",
},
...props,
}
},

2
lib/shapes/ray.tsx
Wyświetl plik

@ -4,6 +4,7 @@ import { RayShape, ShapeType } from "types"
import { createShape } from "./index"
import { boundsContained } from "utils/bounds"
import { intersectCircleBounds } from "utils/intersections"
import styled from "styles"
const ray = createShape<RayShape>({
boundsCache: new WeakMap([]),
@ -20,6 +21,7 @@ const ray = createShape<RayShape>({
direction: [0, 1],
rotation: 0,
style: {
fill: "#777",
stroke: "#000",
strokeWidth: 1,
},

10
lib/shapes/rectangle.tsx
Wyświetl plik

@ -18,7 +18,10 @@ const rectangle = createShape<RectangleShape>({
point: [0, 0],
size: [1, 1],
rotation: 0,
style: {},
style: {
fill: "#777",
stroke: "#000",
},
...props,
}
},
@ -76,11 +79,6 @@ const rectangle = createShape<RectangleShape>({
return shape
},
stretch(shape, scaleX, scaleY) {
shape.size = vec.mulV(shape.size, [scaleX, scaleY])
return shape
},
transform(shape, bounds) {
shape.point = [bounds.minX, bounds.minY]
shape.size = [bounds.width, bounds.height]

74
state/data.ts
Wyświetl plik

@ -32,31 +32,31 @@ export const defaultDocument: Data["document"] = {
// strokeWidth: 1,
// },
// }),
// shape0: shapeUtils[ShapeType.Circle].create({
// id: "shape0",
// name: "Shape 0",
// childIndex: 1,
// point: [100, 600],
// radius: 50,
// style: {
// fill: "#AAA",
// stroke: "#777",
// strokeWidth: 1,
// },
// }),
// shape5: shapeUtils[ShapeType.Ellipse].create({
// id: "shape5",
// name: "Shape 5",
// childIndex: 5,
// point: [400, 600],
// radiusX: 50,
// radiusY: 30,
// style: {
// fill: "#AAA",
// stroke: "#777",
// strokeWidth: 1,
// },
// }),
shape0: shapeUtils[ShapeType.Circle].create({
id: "shape0",
name: "Shape 0",
childIndex: 1,
point: [100, 600],
radius: 50,
style: {
fill: "#AAA",
stroke: "#777",
strokeWidth: 1,
},
}),
shape5: shapeUtils[ShapeType.Ellipse].create({
id: "shape5",
name: "Shape 5",
childIndex: 5,
point: [400, 600],
radiusX: 50,
radiusY: 30,
style: {
fill: "#AAA",
stroke: "#777",
strokeWidth: 1,
},
}),
// shape7: shapeUtils[ShapeType.Ellipse].create({
// id: "shape7",
// name: "Shape 7",
@ -88,18 +88,18 @@ export const defaultDocument: Data["document"] = {
// strokeLinejoin: "round",
// },
// }),
// shape1: shapeUtils[ShapeType.Rectangle].create({
// id: "shape1",
// name: "Shape 1",
// childIndex: 1,
// point: [400, 600],
// size: [200, 200],
// style: {
// fill: "#AAA",
// stroke: "#777",
// strokeWidth: 1,
// },
// }),
shape1: shapeUtils[ShapeType.Rectangle].create({
id: "shape1",
name: "Shape 1",
childIndex: 1,
point: [400, 600],
size: [200, 200],
style: {
fill: "#AAA",
stroke: "#777",
strokeWidth: 1,
},
}),
// shape6: shapeUtils[ShapeType.Line].create({
// id: "shape6",
// name: "Shape 6",

98
state/state.ts
Wyświetl plik

@ -166,16 +166,31 @@ const state = createState({
},
},
editing: {
onEnter: "startTranslateSession",
on: {
MOVED_POINTER: "updateTranslateSession",
PANNED_CAMERA: "updateTranslateSession",
STOPPED_POINTING: { do: "completeSession", to: "selecting" },
CANCELLED: {
do: ["cancelSession", "deleteSelectedIds"],
to: "selecting",
},
},
initial: "inactive",
states: {
inactive: {
on: {
MOVED_POINTER: {
if: "distanceImpliesDrag",
to: "dot.editing.active",
},
},
},
active: {
onEnter: "startTranslateSession",
on: {
MOVED_POINTER: "updateTranslateSession",
PANNED_CAMERA: "updateTranslateSession",
},
},
},
},
},
},
@ -193,20 +208,74 @@ const state = createState({
},
},
editing: {
onEnter: "startDirectionSession",
on: {
MOVED_POINTER: "updateDirectionSession",
PANNED_CAMERA: "updateDirectionSession",
STOPPED_POINTING: { do: "completeSession", to: "selecting" },
CANCELLED: {
do: ["cancelSession", "deleteSelectedIds"],
to: "selecting",
},
},
initial: "inactive",
states: {
inactive: {
on: {
MOVED_POINTER: {
if: "distanceImpliesDrag",
to: "ray.editing.active",
},
},
},
active: {
onEnter: "startDirectionSession",
on: {
MOVED_POINTER: "updateDirectionSession",
PANNED_CAMERA: "updateDirectionSession",
},
},
},
},
},
},
line: {
initial: "creating",
states: {
creating: {
on: {
POINTED_CANVAS: {
do: "createLine",
to: "line.editing",
},
},
},
editing: {
on: {
STOPPED_POINTING: { do: "completeSession", to: "selecting" },
CANCELLED: {
do: ["cancelSession", "deleteSelectedIds"],
to: "selecting",
},
},
initial: "inactive",
states: {
inactive: {
on: {
MOVED_POINTER: {
if: "distanceImpliesDrag",
to: "line.editing.active",
},
},
},
active: {
onEnter: "startDirectionSession",
on: {
MOVED_POINTER: "updateDirectionSession",
PANNED_CAMERA: "updateDirectionSession",
},
},
},
},
},
},
line: {},
polyline: {},
rectangle: {},
},
@ -262,15 +331,26 @@ const state = createState({
data.selectedIds.add(shape.id)
},
// Line
createLine(data, payload: PointerInfo) {
const shape = shapeUtilityMap[ShapeType.Line].create({
point: screenToWorld(payload.point, data),
direction: [0, 1],
})
commands.createShape(data, shape)
data.selectedIds.add(shape.id)
},
/* -------------------- Sessions -------------------- */
// Shared
cancelSession(data) {
session.cancel(data)
session?.cancel(data)
session = undefined
},
completeSession(data) {
session.complete(data)
session?.complete(data)
session = undefined
},