diff --git a/components/editor.tsx b/components/editor.tsx index 3be353162..674694039 100644 --- a/components/editor.tsx +++ b/components/editor.tsx @@ -7,6 +7,7 @@ import CodePanel from "./code-panel/code-panel" import ControlsPanel from "./controls-panel/controls-panel" import styled from "styles" import StylePanel from "./style-panel/style-panel" +import { useSelector } from "state" export default function Editor() { useKeyboardEvents() diff --git a/lib/shape-utils/dot.tsx b/lib/shape-utils/dot.tsx index cba7cf8b9..78f56594a 100644 --- a/lib/shape-utils/dot.tsx +++ b/lib/shape-utils/dot.tsx @@ -29,7 +29,7 @@ const dot = registerShapeUtils({ }, render({ id }) { - return + return }, applyStyles(shape, style) { diff --git a/lib/shape-utils/polyline.tsx b/lib/shape-utils/polyline.tsx index b6019283c..ae4d2a5bd 100644 --- a/lib/shape-utils/polyline.tsx +++ b/lib/shape-utils/polyline.tsx @@ -9,6 +9,7 @@ import { boundsContainPolygon, } from "utils/bounds" import { getBoundsFromPoints, translateBounds } from "utils/utils" +import { colors } from "state/data" const polyline = registerShapeUtils({ boundsCache: new WeakMap([]), @@ -24,7 +25,11 @@ const polyline = registerShapeUtils({ point: [0, 0], points: [[0, 0]], rotation: 0, - style: {}, + style: { + strokeWidth: 2, + strokeLinecap: "round", + strokeLinejoin: "round", + }, ...props, } }, diff --git a/state/data.ts b/state/data.ts index daf51a747..96742efd2 100644 --- a/state/data.ts +++ b/state/data.ts @@ -1,6 +1,27 @@ import { Data, ShapeType } from "types" import shapeUtils from "lib/shape-utils" +export const colors = { + transparent: "transparent", + white: "rgba(248, 249, 250, 1.000)", + lightGray: "rgba(224, 226, 230, 1.000)", + gray: "rgba(172, 181, 189, 1.000)", + darkGray: "rgba(52, 58, 64, 1.000)", + black: "rgba(0,0,0, 1.000)", + lime: "rgba(115, 184, 23, 1.000)", + green: "rgba(54, 178, 77, 1.000)", + teal: "rgba(9, 167, 120, 1.000)", + cyan: "rgba(14, 152, 173, 1.000)", + blue: "rgba(28, 126, 214, 1.000)", + indigo: "rgba(66, 99, 235, 1.000)", + violet: "rgba(112, 72, 232, 1.000)", + grape: "rgba(174, 62, 200, 1.000)", + pink: "rgba(214, 51, 108, 1.000)", + red: "rgba(240, 63, 63, 1.000)", + orange: "rgba(247, 103, 6, 1.000)", + yellow: "rgba(245, 159, 0, 1.000)", +} + export const defaultDocument: Data["document"] = { pages: { page0: { @@ -9,94 +30,107 @@ export const defaultDocument: Data["document"] = { name: "Page 0", childIndex: 0, shapes: { - rayShape: shapeUtils[ShapeType.Ray].create({ - id: "rayShape", - name: "Ray", + shape3: shapeUtils[ShapeType.Dot].create({ + id: "shape3", + name: "Shape 3", childIndex: 3, - point: [300, 300], - direction: [0.5, 0.5], + point: [400, 500], + style: { + stroke: colors.black, + fill: colors.lightGray, + strokeWidth: 1, + }, }), - // shape3: shapeUtils[ShapeType.Dot].create({ - // id: "shape3", - // name: "Shape 3", - // childIndex: 3, - // point: [400, 500], - // style: { - // fill: "#AAA", - // stroke: "#c6cacb", - // strokeWidth: 1, - // }, - // }), shape0: shapeUtils[ShapeType.Circle].create({ id: "shape0", name: "Shape 0", childIndex: 1, point: [100, 600], radius: 50, + style: { + stroke: colors.black, + fill: colors.lightGray, + strokeWidth: 1, + }, }), shape5: shapeUtils[ShapeType.Ellipse].create({ id: "shape5", name: "Shape 5", childIndex: 5, - point: [400, 600], + point: [200, 200], + radiusX: 50, + radiusY: 100, + style: { + stroke: colors.black, + fill: colors.lightGray, + strokeWidth: 1, + }, + }), + shape7: shapeUtils[ShapeType.Ellipse].create({ + id: "shape7", + name: "Shape 7", + childIndex: 7, + point: [100, 100], radiusX: 50, radiusY: 30, + style: { + stroke: colors.black, + fill: colors.lightGray, + strokeWidth: 1, + }, + }), + shape6: shapeUtils[ShapeType.Line].create({ + id: "shape6", + name: "Shape 6", + childIndex: 1, + point: [400, 400], + direction: [0.2, 0.2], + style: { + stroke: colors.black, + fill: colors.lightGray, + strokeWidth: 1, + }, + }), + rayShape: shapeUtils[ShapeType.Ray].create({ + id: "rayShape", + name: "Ray", + childIndex: 3, + point: [300, 100], + direction: [0.5, 0.5], + style: { + stroke: colors.black, + fill: colors.lightGray, + strokeWidth: 1, + }, + }), + shape2: shapeUtils[ShapeType.Polyline].create({ + id: "shape2", + name: "Shape 2", + childIndex: 2, + point: [200, 600], + points: [ + [0, 0], + [75, 200], + [100, 50], + ], + style: { + stroke: colors.black, + fill: colors.transparent, + strokeWidth: 1, + }, + }), + shape1: shapeUtils[ShapeType.Rectangle].create({ + id: "shape1", + name: "Shape 1", + childIndex: 1, + point: [400, 600], + size: [200, 200], + style: { + stroke: colors.black, + fill: colors.lightGray, + strokeWidth: 1, + }, }), - // shape7: shapeUtils[ShapeType.Ellipse].create({ - // id: "shape7", - // name: "Shape 7", - // childIndex: 7, - // point: [100, 100], - // radiusX: 50, - // radiusY: 30, - // style: { - // fill: "#AAA", - // stroke: "#c6cacb", - // strokeWidth: 1, - // }, - // }), - // shape2: shapeUtils[ShapeType.Polyline].create({ - // id: "shape2", - // name: "Shape 2", - // childIndex: 2, - // point: [200, 600], - // points: [ - // [0, 0], - // [75, 200], - // [100, 50], - // ], - // style: { - // fill: "none", - // stroke: "#c6cacb", - // strokeWidth: 2, - // strokeLinecap: "round", - // strokeLinejoin: "round", - // }, - // }), - // shape1: shapeUtils[ShapeType.Rectangle].create({ - // id: "shape1", - // name: "Shape 1", - // childIndex: 1, - // point: [400, 600], - // size: [200, 200], - // style: { - // fill: "#AAA", - // stroke: "#c6cacb", - // strokeWidth: 1, - // }, - // }), - // shape6: shapeUtils[ShapeType.Line].create({ - // id: "shape6", - // name: "Shape 6", - // childIndex: 1, - // point: [400, 400], - // direction: [0.2, 0.2], - // style: { - // fill: "#AAA", - // stroke: "#c6cacb", - // strokeWidth: 1, - // }, - // }), }, }, }, @@ -137,24 +171,3 @@ new Polyline({ }, }, } - -export const colors = { - transparent: "transparent", - white: "rgba(248, 249, 250, 1.000)", - lightGray: "rgba(224, 226, 230, 1.000)", - gray: "rgba(172, 181, 189, 1.000)", - darkGray: "rgba(52, 58, 64, 1.000)", - black: "rgba(0,0,0, 1.000)", - lime: "rgba(115, 184, 23, 1.000)", - green: "rgba(54, 178, 77, 1.000)", - teal: "rgba(9, 167, 120, 1.000)", - cyan: "rgba(14, 152, 173, 1.000)", - blue: "rgba(28, 126, 214, 1.000)", - indigo: "rgba(66, 99, 235, 1.000)", - violet: "rgba(112, 72, 232, 1.000)", - grape: "rgba(174, 62, 200, 1.000)", - pink: "rgba(214, 51, 108, 1.000)", - red: "rgba(240, 63, 63, 1.000)", - orange: "rgba(247, 103, 6, 1.000)", - yellow: "rgba(245, 159, 0, 1.000)", -} diff --git a/state/state.ts b/state/state.ts index 9e0233145..f02065edc 100644 --- a/state/state.ts +++ b/state/state.ts @@ -94,7 +94,7 @@ const state = createState({ loading: { on: { MOUNTED: { - do: "restoreSavedData", + do: ["restoreSavedData", "zoomCameraToFit"], to: "ready", }, },