Adds tool lock

components/canvas/shape.tsx

@@ -23,9 +23,9 @@ function Shape({ id, isSelecting }: { id: string; isSelecting: boolean }) {
   // detects the change and pulls this component.
   if (!shape) return null
 
+  const center = getShapeUtils(shape).getCenter(shape)
   const transform = `
-  rotate(${shape.rotation * (180 / Math.PI)},
-  ${getShapeUtils(shape).getCenter(shape)})
+  rotate(${shape.rotation * (180 / Math.PI)}, ${center})
   translate(${shape.point})`
 
   return (
@@ -38,18 +38,37 @@ function Shape({ id, isSelecting }: { id: string; isSelecting: boolean }) {
     >
       {isSelecting && <HoverIndicator as="use" href={'#' + id} />}
       <StyledShape id={id} style={shape.style} />
+      {/* 
+      <text
+        y={4}
+        x={4}
+        fontSize={18}
+        fill="black"
+        stroke="none"
+        alignmentBaseline="text-before-edge"
+        pointerEvents="none"
+      >
+        {center.toString()}
+      </text> */}
     </StyledGroup>
   )
 }
 
 const StyledShape = memo(
   ({ id, style }: { id: string; style: ShapeStyles }) => {
-    return <MainShape as="use" href={'#' + id} {...style} />
+    return (
+      <MainShape
+        as="use"
+        href={'#' + id}
+        {...style}
+        // css={{ zStrokeWidth: Number(style.strokeWidth) }}
+      />
+    )
   }
 )
 
 const MainShape = styled('use', {
-  zStrokeWidth: 1,
+  // zStrokeWidth: 1,
 })
 
 const HoverIndicator = styled('path', {

components/panel.tsx

@@ -1,20 +1,20 @@
-import styled from "styles"
+import styled from 'styles'
 
-export const Root = styled("div", {
-  position: "relative",
-  backgroundColor: "$panel",
-  borderRadius: "4px",
-  overflow: "hidden",
-  border: "1px solid $border",
-  pointerEvents: "all",
-  userSelect: "none",
+export const Root = styled('div', {
+  position: 'relative',
+  backgroundColor: '$panel',
+  borderRadius: '4px',
+  overflow: 'hidden',
+  border: '1px solid $border',
+  pointerEvents: 'all',
+  userSelect: 'none',
   zIndex: 200,
-  boxShadow: "0px 2px 25px rgba(0,0,0,.16)",
+  boxShadow: '0px 2px 25px rgba(0,0,0,.16)',
 
   variants: {
     isOpen: {
       true: {
-        width: "auto",
+        width: 'auto',
         minWidth: 300,
       },
       false: {
@@ -25,63 +25,74 @@ export const Root = styled("div", {
   },
 })
 
-export const Layout = styled("div", {
-  display: "grid",
-  gridTemplateColumns: "1fr",
-  gridTemplateRows: "auto 1fr",
-  gridAutoRows: "28px",
-  height: "100%",
-  width: "auto",
-  minWidth: "100%",
+export const Layout = styled('div', {
+  display: 'grid',
+  gridTemplateColumns: '1fr',
+  gridTemplateRows: 'auto 1fr',
+  gridAutoRows: '28px',
+  height: '100%',
+  width: 'auto',
+  minWidth: '100%',
   maxWidth: 560,
-  overflow: "hidden",
-  userSelect: "none",
-  pointerEvents: "all",
+  overflow: 'hidden',
+  userSelect: 'none',
+  pointerEvents: 'all',
 })
 
-export const Header = styled("div", {
-  pointerEvents: "all",
-  display: "flex",
-  width: "100%",
-  alignItems: "center",
-  justifyContent: "space-between",
-  borderBottom: "1px solid $border",
-  position: "relative",
+export const Header = styled('div', {
+  pointerEvents: 'all',
+  display: 'flex',
+  width: '100%',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  borderBottom: '1px solid $border',
+  position: 'relative',
 
-  "& h3": {
-    position: "absolute",
+  '& h3': {
+    position: 'absolute',
     top: 0,
     left: 0,
-    width: "100%",
-    height: "100%",
-    textAlign: "center",
+    width: '100%',
+    height: '100%',
+    textAlign: 'center',
     padding: 0,
     margin: 0,
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    fontSize: "13px",
-    pointerEvents: "none",
-    userSelect: "none",
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    fontSize: '13px',
+    pointerEvents: 'none',
+    userSelect: 'none',
+  },
+
+  variants: {
+    side: {
+      left: {
+        flexDirection: 'row',
+      },
+      right: {
+        flexDirection: 'row-reverse',
+      },
+    },
   },
 })
 
-export const ButtonsGroup = styled("div", {
-  display: "flex",
+export const ButtonsGroup = styled('div', {
+  display: 'flex',
 })
 
-export const Content = styled("div", {
-  position: "relative",
-  pointerEvents: "all",
-  overflowY: "scroll",
+export const Content = styled('div', {
+  position: 'relative',
+  pointerEvents: 'all',
+  overflowY: 'scroll',
 })
 
-export const Footer = styled("div", {
-  overflowX: "scroll",
-  color: "$text",
-  font: "$debug",
-  padding: "0 12px",
-  display: "flex",
-  alignItems: "center",
-  borderTop: "1px solid $border",
+export const Footer = styled('div', {
+  overflowX: 'scroll',
+  color: '$text',
+  font: '$debug',
+  padding: '0 12px',
+  display: 'flex',
+  alignItems: 'center',
+  borderTop: '1px solid $border',
 })

components/style-panel/align-distribute.tsx

@@ -9,50 +9,50 @@ import {
   SpaceEvenlyVerticallyIcon,
   StretchHorizontallyIcon,
   StretchVerticallyIcon,
-} from "@radix-ui/react-icons"
-import { IconButton } from "components/shared"
-import state from "state"
-import styled from "styles"
-import { AlignType, DistributeType, StretchType } from "types"
+} from '@radix-ui/react-icons'
+import { IconButton } from 'components/shared'
+import state from 'state'
+import styled from 'styles'
+import { AlignType, DistributeType, StretchType } from 'types'
 
 function alignTop() {
-  state.send("ALIGNED", { type: AlignType.Top })
+  state.send('ALIGNED', { type: AlignType.Top })
 }
 
 function alignCenterVertical() {
-  state.send("ALIGNED", { type: AlignType.CenterVertical })
+  state.send('ALIGNED', { type: AlignType.CenterVertical })
 }
 
 function alignBottom() {
-  state.send("ALIGNED", { type: AlignType.Bottom })
+  state.send('ALIGNED', { type: AlignType.Bottom })
 }
 
 function stretchVertically() {
-  state.send("STRETCHED", { type: StretchType.Vertical })
+  state.send('STRETCHED', { type: StretchType.Vertical })
 }
 
 function distributeVertically() {
-  state.send("DISTRIBUTED", { type: DistributeType.Vertical })
+  state.send('DISTRIBUTED', { type: DistributeType.Vertical })
 }
 
 function alignLeft() {
-  state.send("ALIGNED", { type: AlignType.Left })
+  state.send('ALIGNED', { type: AlignType.Left })
 }
 
 function alignCenterHorizontal() {
-  state.send("ALIGNED", { type: AlignType.CenterHorizontal })
+  state.send('ALIGNED', { type: AlignType.CenterHorizontal })
 }
 
 function alignRight() {
-  state.send("ALIGNED", { type: AlignType.Right })
+  state.send('ALIGNED', { type: AlignType.Right })
 }
 
 function stretchHorizontally() {
-  state.send("STRETCHED", { type: StretchType.Horizontal })
+  state.send('STRETCHED', { type: StretchType.Horizontal })
 }
 
 function distributeHorizontally() {
-  state.send("DISTRIBUTED", { type: DistributeType.Horizontal })
+  state.send('DISTRIBUTED', { type: DistributeType.Horizontal })
 }
 
 export default function AlignDistribute({
@@ -98,15 +98,15 @@ export default function AlignDistribute({
   )
 }
 
-const Container = styled("div", {
-  display: "grid",
+const Container = styled('div', {
+  display: 'grid',
   padding: 4,
-  gridTemplateColumns: "repeat(5, auto)",
+  gridTemplateColumns: 'repeat(5, auto)',
   [`& ${IconButton}`]: {
-    color: "$text",
+    color: '$text',
   },
   [`& ${IconButton} > svg`]: {
-    fill: "red",
-    stroke: "transparent",
+    fill: 'red',
+    stroke: 'transparent',
   },
 })

components/style-panel/color-picker.tsx

@@ -1,6 +1,6 @@
-import * as DropdownMenu from "@radix-ui/react-dropdown-menu"
-import { Square } from "react-feather"
-import styled from "styles"
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import { Square } from 'react-feather'
+import styled from 'styles'
 
 interface Props {
   label: string
@@ -13,7 +13,7 @@ export default function ColorPicker({ label, color, colors, onChange }: Props) {
   return (
     <DropdownMenu.Root>
       <CurrentColor>
-        <h3>{label}</h3>
+        <label>{label}</label>
         <ColorIcon color={color} />
       </CurrentColor>
       <Colors sideOffset={4}>
@@ -31,96 +31,96 @@ function ColorIcon({ color }: { color: string }) {
   return (
     <Square
       fill={color}
-      strokeDasharray={color === "transparent" ? "2, 3" : "none"}
+      strokeDasharray={color === 'transparent' ? '2, 3' : 'none'}
     />
   )
 }
 
 const Colors = styled(DropdownMenu.Content, {
-  display: "grid",
+  display: 'grid',
   padding: 4,
-  gridTemplateColumns: "repeat(6, 1fr)",
-  border: "1px solid $border",
-  backgroundColor: "$panel",
+  gridTemplateColumns: 'repeat(6, 1fr)',
+  border: '1px solid $border',
+  backgroundColor: '$panel',
   borderRadius: 4,
-  boxShadow: "0px 5px 15px -5px hsla(206,22%,7%,.15)",
+  boxShadow: '0px 5px 15px -5px hsla(206,22%,7%,.15)',
 })
 
 const ColorButton = styled(DropdownMenu.Item, {
-  position: "relative",
-  cursor: "pointer",
+  position: 'relative',
+  cursor: 'pointer',
   height: 32,
   width: 32,
-  border: "none",
-  padding: "none",
-  background: "none",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
+  border: 'none',
+  padding: 'none',
+  background: 'none',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
 
-  "&::before": {
+  '&::before': {
     content: "''",
-    position: "absolute",
+    position: 'absolute',
     top: 4,
     left: 4,
     right: 4,
     bottom: 4,
-    pointerEvents: "none",
+    pointerEvents: 'none',
     zIndex: 0,
   },
 
-  "&:hover::before": {
-    backgroundColor: "$hover",
+  '&:hover::before': {
+    backgroundColor: '$hover',
     borderRadius: 4,
   },
 
-  "& svg": {
-    position: "relative",
-    stroke: "rgba(0,0,0,.2)",
+  '& svg': {
+    position: 'relative',
+    stroke: 'rgba(0,0,0,.2)',
     strokeWidth: 1,
     zIndex: 1,
   },
 })
 
 const CurrentColor = styled(DropdownMenu.Trigger, {
-  position: "relative",
-  display: "flex",
-  width: "100%",
-  background: "none",
-  border: "none",
-  cursor: "pointer",
-  outline: "none",
-  alignItems: "center",
-  justifyContent: "space-between",
-  padding: "4px 6px 4px 12px",
+  position: 'relative',
+  display: 'flex',
+  width: '100%',
+  background: 'none',
+  border: 'none',
+  cursor: 'pointer',
+  outline: 'none',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: '4px 6px 4px 12px',
 
-  "&::before": {
+  '&::before': {
     content: "''",
-    position: "absolute",
+    position: 'absolute',
     top: 0,
     left: 0,
     right: 0,
     bottom: 0,
-    pointerEvents: "none",
+    pointerEvents: 'none',
     zIndex: -1,
   },
 
-  "&:hover::before": {
-    backgroundColor: "$hover",
+  '&:hover::before': {
+    backgroundColor: '$hover',
     borderRadius: 4,
   },
 
-  "& h3": {
-    fontFamily: "$ui",
-    fontSize: "$2",
-    fontWeight: "$1",
+  '& label': {
+    fontFamily: '$ui',
+    fontSize: '$2',
+    fontWeight: '$1',
     margin: 0,
     padding: 0,
   },
 
-  "& svg": {
-    position: "relative",
-    stroke: "rgba(0,0,0,.2)",
+  '& svg': {
+    position: 'relative',
+    stroke: 'rgba(0,0,0,.2)',
     strokeWidth: 1,
     zIndex: 1,
   },

components/style-panel/style-panel.tsx

@@ -1,15 +1,17 @@
-import styled from "styles"
-import state, { useSelector } from "state"
-import * as Panel from "components/panel"
-import { useRef } from "react"
-import { IconButton } from "components/shared"
-import { Circle, Trash, X } from "react-feather"
-import { deepCompare, deepCompareArrays, getSelectedShapes } from "utils/utils"
-import { shades, fills, strokes } from "lib/colors"
-
-import ColorPicker from "./color-picker"
-import AlignDistribute from "./align-distribute"
-import { ShapeStyles } from "types"
+import styled from 'styles'
+import state, { useSelector } from 'state'
+import * as Panel from 'components/panel'
+import { useRef } from 'react'
+import { IconButton } from 'components/shared'
+import { Circle, Copy, Lock, Trash, Unlock, X } from 'react-feather'
+import { deepCompare, deepCompareArrays, getSelectedShapes } from 'utils/utils'
+import { shades, fills, strokes } from 'lib/colors'
+
+import ColorPicker from './color-picker'
+import AlignDistribute from './align-distribute'
+import { ShapeStyles } from 'types'
+import WidthPicker from './width-picker'
+import { CopyIcon } from '@radix-ui/react-icons'
 
 const fillColors = { ...shades, ...fills }
 const strokeColors = { ...shades, ...strokes }
@@ -23,7 +25,7 @@ export default function StylePanel() {
       {isOpen ? (
         <SelectedShapeStyles />
       ) : (
-        <IconButton onClick={() => state.send("TOGGLED_STYLE_PANEL_OPEN")}>
+        <IconButton onClick={() => state.send('TOGGLED_STYLE_PANEL_OPEN')}>
           <Circle />
         </IconButton>
       )}
@@ -72,17 +74,9 @@ function SelectedShapeStyles({}: {}) {
 
   return (
     <Panel.Layout>
-      <Panel.Header>
+      <Panel.Header side="right">
         <h3>Style</h3>
-        <Panel.ButtonsGroup>
-          <IconButton
-            disabled={!hasSelection}
-            onClick={() => state.send("DELETED")}
-          >
-            <Trash />
-          </IconButton>
-        </Panel.ButtonsGroup>
-        <IconButton onClick={() => state.send("TOGGLED_STYLE_PANEL_OPEN")}>
+        <IconButton onClick={() => state.send('TOGGLED_STYLE_PANEL_OPEN')}>
           <X />
         </IconButton>
       </Panel.Header>
@@ -91,18 +85,40 @@ function SelectedShapeStyles({}: {}) {
           label="Fill"
           color={shapesStyle.fill}
           colors={fillColors}
-          onChange={(color) => state.send("CHANGED_STYLE", { fill: color })}
+          onChange={(color) => state.send('CHANGED_STYLE', { fill: color })}
         />
         <ColorPicker
           label="Stroke"
           color={shapesStyle.stroke}
           colors={strokeColors}
-          onChange={(color) => state.send("CHANGED_STYLE", { stroke: color })}
+          onChange={(color) => state.send('CHANGED_STYLE', { stroke: color })}
         />
+        <Row>
+          <label htmlFor="width">Width</label>
+          <WidthPicker strokeWidth={Number(shapesStyle.strokeWidth)} />
+        </Row>
         <AlignDistribute
           hasTwoOrMore={selectedIds.length > 1}
           hasThreeOrMore={selectedIds.length > 2}
         />
+        <ButtonsRow>
+          <IconButton
+            disabled={!hasSelection}
+            onClick={() => state.send('DELETED')}
+          >
+            <Trash />
+          </IconButton>
+          <IconButton
+            disabled={!hasSelection}
+            onClick={() => state.send('DUPLICATED')}
+          >
+            <Copy />
+          </IconButton>
+
+          <IconButton>
+            <Unlock />
+          </IconButton>
+        </ButtonsRow>
       </Content>
     </Panel.Layout>
   )
@@ -112,8 +128,8 @@ const StylePanelRoot = styled(Panel.Root, {
   minWidth: 1,
   width: 184,
   maxWidth: 184,
-  overflow: "hidden",
-  position: "relative",
+  overflow: 'hidden',
+  position: 'relative',
 
   variants: {
     isOpen: {
@@ -129,3 +145,41 @@ const StylePanelRoot = styled(Panel.Root, {
 const Content = styled(Panel.Content, {
   padding: 8,
 })
+
+const Row = styled('div', {
+  position: 'relative',
+  display: 'flex',
+  width: '100%',
+  background: 'none',
+  border: 'none',
+  cursor: 'pointer',
+  outline: 'none',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: '4px 2px 4px 12px',
+
+  '& label': {
+    fontFamily: '$ui',
+    fontSize: '$2',
+    fontWeight: '$1',
+    margin: 0,
+    padding: 0,
+  },
+
+  '& > svg': {
+    position: 'relative',
+  },
+})
+
+const ButtonsRow = styled('div', {
+  position: 'relative',
+  display: 'flex',
+  width: '100%',
+  background: 'none',
+  border: 'none',
+  cursor: 'pointer',
+  outline: 'none',
+  alignItems: 'center',
+  justifyContent: 'flex-start',
+  padding: 4,
+})

components/style-panel/width-picker.tsx

@@ -0,0 +1,82 @@
+import { DotsHorizontalIcon } from '@radix-ui/react-icons'
+import * as RadioGroup from '@radix-ui/react-radio-group'
+import { IconButton } from 'components/shared'
+import { ChangeEvent } from 'react'
+import { Circle } from 'react-feather'
+import state from 'state'
+import styled from 'styles'
+
+function setWidth(e: ChangeEvent<HTMLInputElement>) {
+  state.send('CHANGED_STYLE', {
+    strokeWidth: Number(e.currentTarget.value),
+  })
+}
+
+export default function WidthPicker({
+  strokeWidth = 2,
+}: {
+  strokeWidth?: number
+}) {
+  return (
+    <Group name="width" onValueChange={setWidth}>
+      <RadioItem value="2" isActive={strokeWidth === 2}>
+        <Circle size={6} />
+      </RadioItem>
+      <RadioItem value="4" isActive={strokeWidth === 4}>
+        <Circle size={12} />
+      </RadioItem>
+      <RadioItem value="8" isActive={strokeWidth === 8}>
+        <Circle size={18} />
+      </RadioItem>
+    </Group>
+  )
+}
+
+const Group = styled(RadioGroup.Root, {
+  display: 'flex',
+})
+
+const RadioItem = styled(RadioGroup.Item, {
+  height: '32px',
+  width: '32px',
+  backgroundColor: '$panel',
+  borderRadius: '4px',
+  padding: '0',
+  margin: '0',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  outline: 'none',
+  border: 'none',
+  pointerEvents: 'all',
+  cursor: 'pointer',
+
+  '&:hover:not(:disabled)': {
+    backgroundColor: '$hover',
+    '& svg': {
+      fill: '$text',
+      strokeWidth: '0',
+    },
+  },
+
+  '&:disabled': {
+    opacity: '0.5',
+  },
+
+  variants: {
+    isActive: {
+      true: {
+        '& svg': {
+          fill: '$text',
+          strokeWidth: '0',
+        },
+      },
+      false: {
+        '& svg': {
+          fill: '$inactive',
+          strokeWidth: '0',
+        },
+      },
+    },
+  },
+})

components/toolbar.tsx

@@ -1,134 +1,147 @@
-import state, { useSelector } from "state"
-import styled from "styles"
-import { Menu } from "react-feather"
+import state, { useSelector } from 'state'
+import styled from 'styles'
+import { Lock, Menu, Unlock } from 'react-feather'
+import { IconButton } from './shared'
 
 export default function Toolbar() {
   const activeTool = useSelector((state) =>
     state.whenIn({
-      selecting: "select",
-      dot: "dot",
-      circle: "circle",
-      ellipse: "ellipse",
-      ray: "ray",
-      line: "line",
-      polyline: "polyline",
-      rectangle: "rectangle",
-      draw: "draw",
+      selecting: 'select',
+      dot: 'dot',
+      circle: 'circle',
+      ellipse: 'ellipse',
+      ray: 'ray',
+      line: 'line',
+      polyline: 'polyline',
+      rectangle: 'rectangle',
+      draw: 'draw',
     })
   )
 
+  const isToolLocked = useSelector((s) => s.data.settings.isToolLocked)
+
   return (
     <ToolbarContainer>
       <Section>
         <Button>
           <Menu />
         </Button>
+        <Button onClick={() => state.send('TOGGLED_TOOL_LOCK')}>
+          {isToolLocked ? <Lock /> : <Unlock />}
+        </Button>
         <Button
-          isSelected={activeTool === "select"}
-          onClick={() => state.send("SELECTED_SELECT_TOOL")}
+          isSelected={activeTool === 'select'}
+          onClick={() => state.send('SELECTED_SELECT_TOOL')}
         >
           Select
         </Button>
         <Button
-          isSelected={activeTool === "draw"}
-          onClick={() => state.send("SELECTED_DRAW_TOOL")}
+          isSelected={activeTool === 'draw'}
+          onClick={() => state.send('SELECTED_DRAW_TOOL')}
         >
           Draw
         </Button>
         <Button
-          isSelected={activeTool === "dot"}
-          onClick={() => state.send("SELECTED_DOT_TOOL")}
+          isSelected={activeTool === 'dot'}
+          onClick={() => state.send('SELECTED_DOT_TOOL')}
         >
           Dot
         </Button>
         <Button
-          isSelected={activeTool === "circle"}
-          onClick={() => state.send("SELECTED_CIRCLE_TOOL")}
+          isSelected={activeTool === 'circle'}
+          onClick={() => state.send('SELECTED_CIRCLE_TOOL')}
         >
           Circle
         </Button>
         <Button
-          isSelected={activeTool === "ellipse"}
-          onClick={() => state.send("SELECTED_ELLIPSE_TOOL")}
+          isSelected={activeTool === 'ellipse'}
+          onClick={() => state.send('SELECTED_ELLIPSE_TOOL')}
         >
           Ellipse
         </Button>
         <Button
-          isSelected={activeTool === "ray"}
-          onClick={() => state.send("SELECTED_RAY_TOOL")}
+          isSelected={activeTool === 'ray'}
+          onClick={() => state.send('SELECTED_RAY_TOOL')}
         >
           Ray
         </Button>
         <Button
-          isSelected={activeTool === "line"}
-          onClick={() => state.send("SELECTED_LINE_TOOL")}
+          isSelected={activeTool === 'line'}
+          onClick={() => state.send('SELECTED_LINE_TOOL')}
         >
           Line
         </Button>
         <Button
-          isSelected={activeTool === "polyline"}
-          onClick={() => state.send("SELECTED_POLYLINE_TOOL")}
+          isSelected={activeTool === 'polyline'}
+          onClick={() => state.send('SELECTED_POLYLINE_TOOL')}
         >
           Polyline
         </Button>
         <Button
-          isSelected={activeTool === "rectangle"}
-          onClick={() => state.send("SELECTED_RECTANGLE_TOOL")}
+          isSelected={activeTool === 'rectangle'}
+          onClick={() => state.send('SELECTED_RECTANGLE_TOOL')}
         >
           Rectangle
         </Button>
-        <Button onClick={() => state.send("RESET_CAMERA")}>Reset Camera</Button>
+        <Button onClick={() => state.send('RESET_CAMERA')}>Reset Camera</Button>
       </Section>
       <Section>
-        <Button onClick={() => state.send("UNDO")}>Undo</Button>
-        <Button onClick={() => state.send("REDO")}>Redo</Button>
+        <Button onClick={() => state.send('UNDO')}>Undo</Button>
+        <Button onClick={() => state.send('REDO')}>Redo</Button>
       </Section>
     </ToolbarContainer>
   )
 }
 
-const ToolbarContainer = styled("div", {
-  gridArea: "toolbar",
-  userSelect: "none",
-  borderBottom: "1px solid black",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  backgroundColor: "$panel",
+const ToolbarContainer = styled('div', {
+  gridArea: 'toolbar',
+  userSelect: 'none',
+  borderBottom: '1px solid black',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  backgroundColor: '$panel',
   gap: 8,
-  fontSize: "$1",
+  fontSize: '$1',
   zIndex: 200,
 })
 
-const Section = styled("div", {
-  whiteSpace: "nowrap",
-  overflow: "hidden",
-  display: "flex",
+const Section = styled('div', {
+  whiteSpace: 'nowrap',
+  overflowY: 'hidden',
+  overflowX: 'auto',
+  display: 'flex',
+  scrollbarWidth: 'none',
+  '&::-webkit-scrollbar': {
+    '-webkit-appearance': 'none',
+    width: 0,
+    height: 0,
+  },
 })
 
-const Button = styled("button", {
-  display: "flex",
-  alignItems: "center",
-  cursor: "pointer",
-  font: "$ui",
-  fontSize: "$ui",
-  height: "40px",
-  outline: "none",
+const Button = styled('button', {
+  display: 'flex',
+  alignItems: 'center',
+  cursor: 'pointer',
+  font: '$ui',
+  fontSize: '$ui',
+  height: '40px',
+  outline: 'none',
   borderRadius: 0,
-  border: "none",
-  padding: "0 12px",
-  background: "none",
-  "&:hover": {
-    backgroundColor: "$hint",
+  border: 'none',
+  padding: '0 12px',
+  background: 'none',
+  '&:hover': {
+    backgroundColor: '$hint',
   },
-  "& svg": {
+  '& svg': {
     height: 16,
     width: 16,
   },
   variants: {
     isSelected: {
       true: {
-        color: "$selected",
+        color: '$selected',
       },
       false: {},
     },

hooks/useKeyboardEvents.ts

@@ -1,197 +1,217 @@
-import { useEffect } from "react"
-import state from "state"
-import { MoveType } from "types"
-import { getKeyboardEventInfo, metaKey } from "utils/utils"
+import { useEffect } from 'react'
+import state from 'state'
+import { MoveType } from 'types'
+import { getKeyboardEventInfo, metaKey } from 'utils/utils'
 
 export default function useKeyboardEvents() {
   useEffect(() => {
     function handleKeyDown(e: KeyboardEvent) {
-      if (metaKey(e) && !["i", "r", "j"].includes(e.key)) {
+      if (metaKey(e) && !['i', 'r', 'j'].includes(e.key)) {
         e.preventDefault()
       }
 
       switch (e.key) {
-        case "!": {
+        case 'ArrowUp': {
+          state.send('NUDGED', { delta: [0, -1], ...getKeyboardEventInfo(e) })
+          break
+        }
+        case 'ArrowRight': {
+          state.send('NUDGED', { delta: [1, 0], ...getKeyboardEventInfo(e) })
+          break
+        }
+        case 'ArrowDown': {
+          state.send('NUDGED', { delta: [0, 1], ...getKeyboardEventInfo(e) })
+          break
+        }
+        case 'ArrowLeft': {
+          state.send('NUDGED', { delta: [-1, 0], ...getKeyboardEventInfo(e) })
+          break
+        }
+        case '!': {
           // Shift + 1
           if (e.shiftKey) {
-            state.send("ZOOMED_TO_FIT")
+            state.send('ZOOMED_TO_FIT')
           }
           break
         }
-        case "@": {
+        case '@': {
           // Shift + 2
           if (e.shiftKey) {
-            state.send("ZOOMED_TO_SELECTION")
+            state.send('ZOOMED_TO_SELECTION')
           }
           break
         }
-        case ")": {
+        case ')': {
           // Shift + 0
           if (e.shiftKey) {
-            state.send("ZOOMED_TO_ACTUAL")
+            state.send('ZOOMED_TO_ACTUAL')
           }
           break
         }
-        case "Escape": {
-          state.send("CANCELLED")
+        case 'Escape': {
+          state.send('CANCELLED')
           break
         }
-        case "z": {
+        case 'z': {
           if (metaKey(e)) {
             if (e.shiftKey) {
-              state.send("REDO", getKeyboardEventInfo(e))
+              state.send('REDO', getKeyboardEventInfo(e))
             } else {
-              state.send("UNDO", getKeyboardEventInfo(e))
+              state.send('UNDO', getKeyboardEventInfo(e))
             }
           }
           break
         }
-        case "‘": {
+        case '‘': {
           if (metaKey(e)) {
-            state.send("MOVED", {
+            state.send('MOVED', {
               ...getKeyboardEventInfo(e),
               type: MoveType.ToFront,
             })
           }
           break
         }
-        case "“": {
+        case '“': {
           if (metaKey(e)) {
-            state.send("MOVED", {
+            state.send('MOVED', {
               ...getKeyboardEventInfo(e),
               type: MoveType.ToBack,
             })
           }
           break
         }
-        case "]": {
+        case ']': {
           if (metaKey(e)) {
-            state.send("MOVED", {
+            state.send('MOVED', {
               ...getKeyboardEventInfo(e),
               type: MoveType.Forward,
             })
           }
           break
         }
-        case "[": {
+        case '[': {
           if (metaKey(e)) {
-            state.send("MOVED", {
+            state.send('MOVED', {
               ...getKeyboardEventInfo(e),
               type: MoveType.Backward,
             })
           }
           break
         }
-        case "Shift": {
-          state.send("PRESSED_SHIFT_KEY", getKeyboardEventInfo(e))
+        case 'Shift': {
+          state.send('PRESSED_SHIFT_KEY', getKeyboardEventInfo(e))
           break
         }
-        case "Alt": {
-          state.send("PRESSED_ALT_KEY", getKeyboardEventInfo(e))
+        case 'Alt': {
+          state.send('PRESSED_ALT_KEY', getKeyboardEventInfo(e))
           break
         }
-        case "Backspace": {
-          state.send("DELETED", getKeyboardEventInfo(e))
+        case 'Backspace': {
+          state.send('DELETED', getKeyboardEventInfo(e))
           break
         }
-        case "s": {
+        case 's': {
           if (metaKey(e)) {
-            state.send("SAVED", getKeyboardEventInfo(e))
+            state.send('SAVED', getKeyboardEventInfo(e))
           }
           break
         }
-        case "a": {
+        case 'a': {
           if (metaKey(e)) {
-            state.send("SELECTED_ALL", getKeyboardEventInfo(e))
+            state.send('SELECTED_ALL', getKeyboardEventInfo(e))
           }
           break
         }
-        case "v": {
+        case 'v': {
           if (metaKey(e)) {
-            state.send("PASTED", getKeyboardEventInfo(e))
+            state.send('PASTED', getKeyboardEventInfo(e))
           } else {
-            state.send("SELECTED_SELECT_TOOL", getKeyboardEventInfo(e))
+            state.send('SELECTED_SELECT_TOOL', getKeyboardEventInfo(e))
           }
           break
         }
-        case "d": {
-          state.send("SELECTED_DRAW_TOOL", getKeyboardEventInfo(e))
+        case 'd': {
+          if (metaKey(e)) {
+            state.send('DUPLICATED', getKeyboardEventInfo(e))
+          } else {
+            state.send('SELECTED_DRAW_TOOL', getKeyboardEventInfo(e))
+          }
           break
         }
-        case "t": {
+        case 't': {
           if (metaKey(e)) {
-            state.send("DUPLICATED", getKeyboardEventInfo(e))
+            state.send('DUPLICATED', getKeyboardEventInfo(e))
           } else {
-            state.send("SELECTED_DOT_TOOL", getKeyboardEventInfo(e))
+            state.send('SELECTED_DOT_TOOL', getKeyboardEventInfo(e))
           }
           break
         }
-        case "c": {
+        case 'c': {
           if (metaKey(e)) {
-            state.send("COPIED", getKeyboardEventInfo(e))
+            state.send('COPIED', getKeyboardEventInfo(e))
           } else {
-            state.send("SELECTED_CIRCLE_TOOL", getKeyboardEventInfo(e))
+            state.send('SELECTED_CIRCLE_TOOL', getKeyboardEventInfo(e))
           }
           break
         }
-        case "i": {
+        case 'i': {
           if (metaKey(e)) {
           } else {
-            state.send("SELECTED_ELLIPSE_TOOL", getKeyboardEventInfo(e))
+            state.send('SELECTED_ELLIPSE_TOOL', getKeyboardEventInfo(e))
           }
           break
         }
-        case "l": {
+        case 'l': {
           if (metaKey(e)) {
           } else {
-            state.send("SELECTED_LINE_TOOL", getKeyboardEventInfo(e))
+            state.send('SELECTED_LINE_TOOL', getKeyboardEventInfo(e))
           }
           break
         }
-        case "y": {
+        case 'y': {
           if (metaKey(e)) {
           } else {
-            state.send("SELECTED_RAY_TOOL", getKeyboardEventInfo(e))
+            state.send('SELECTED_RAY_TOOL', getKeyboardEventInfo(e))
           }
           break
         }
-        case "p": {
+        case 'p': {
           if (metaKey(e)) {
           } else {
-            state.send("SELECTED_POLYLINE_TOOL", getKeyboardEventInfo(e))
+            state.send('SELECTED_POLYLINE_TOOL', getKeyboardEventInfo(e))
           }
           break
         }
-        case "r": {
+        case 'r': {
           if (metaKey(e)) {
           } else {
-            state.send("SELECTED_RECTANGLE_TOOL", getKeyboardEventInfo(e))
+            state.send('SELECTED_RECTANGLE_TOOL', getKeyboardEventInfo(e))
           }
           break
         }
         default: {
-          state.send("PRESSED_KEY", getKeyboardEventInfo(e))
+          state.send('PRESSED_KEY', getKeyboardEventInfo(e))
         }
       }
     }
 
     function handleKeyUp(e: KeyboardEvent) {
-      if (e.key === "Shift") {
-        state.send("RELEASED_SHIFT_KEY", getKeyboardEventInfo(e))
+      if (e.key === 'Shift') {
+        state.send('RELEASED_SHIFT_KEY', getKeyboardEventInfo(e))
       }
 
-      if (e.key === "Alt") {
-        state.send("RELEASED_ALT_KEY", getKeyboardEventInfo(e))
+      if (e.key === 'Alt') {
+        state.send('RELEASED_ALT_KEY', getKeyboardEventInfo(e))
       }
 
-      state.send("RELEASED_KEY", getKeyboardEventInfo(e))
+      state.send('RELEASED_KEY', getKeyboardEventInfo(e))
     }
 
-    document.body.addEventListener("keydown", handleKeyDown)
-    document.body.addEventListener("keyup", handleKeyUp)
+    document.body.addEventListener('keydown', handleKeyDown)
+    document.body.addEventListener('keyup', handleKeyUp)
     return () => {
-      document.body.removeEventListener("keydown", handleKeyDown)
-      document.body.removeEventListener("keyup", handleKeyUp)
+      document.body.removeEventListener('keydown', handleKeyDown)
+      document.body.removeEventListener('keyup', handleKeyUp)
     }
   }, [])
 }

lib/colors.ts

@@ -1,38 +1,38 @@
 export const shades = {
-  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)",
+  none: 'none',
+  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)',
 }
 
 export const strokes = {
-  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)",
+  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 fills = {
-  lime: "rgba(217, 245, 162, 1.000)",
-  green: "rgba(177, 242, 188, 1.000)",
-  teal: "rgba(149, 242, 215, 1.000)",
-  cyan: "rgba(153, 233, 242, 1.000)",
-  blue: "rgba(166, 216, 255, 1.000)",
-  indigo: "rgba(186, 200, 255, 1.000)",
-  violet: "rgba(208, 191, 255, 1.000)",
-  grape: "rgba(237, 190, 250, 1.000)",
-  pink: "rgba(252, 194, 215, 1.000)",
-  red: "rgba(255, 201, 201, 1.000)",
-  orange: "rgba(255, 216, 168, 1.000)",
-  yellow: "rgba(255, 236, 153, 1.000)",
+  lime: 'rgba(217, 245, 162, 1.000)',
+  green: 'rgba(177, 242, 188, 1.000)',
+  teal: 'rgba(149, 242, 215, 1.000)',
+  cyan: 'rgba(153, 233, 242, 1.000)',
+  blue: 'rgba(166, 216, 255, 1.000)',
+  indigo: 'rgba(186, 200, 255, 1.000)',
+  violet: 'rgba(208, 191, 255, 1.000)',
+  grape: 'rgba(237, 190, 250, 1.000)',
+  pink: 'rgba(252, 194, 215, 1.000)',
+  red: 'rgba(255, 201, 201, 1.000)',
+  orange: 'rgba(255, 216, 168, 1.000)',
+  yellow: 'rgba(255, 236, 153, 1.000)',
 }

lib/shape-utils/circle.tsx

@@ -1,11 +1,11 @@
-import { v4 as uuid } from "uuid"
-import * as vec from "utils/vec"
-import { CircleShape, ShapeType } from "types"
-import { registerShapeUtils } from "./index"
-import { boundsContained } from "utils/bounds"
-import { intersectCircleBounds } from "utils/intersections"
-import { pointInCircle } from "utils/hitTests"
-import { translateBounds } from "utils/utils"
+import { v4 as uuid } from 'uuid'
+import * as vec from 'utils/vec'
+import { CircleShape, ShapeType } from 'types'
+import { registerShapeUtils } from './index'
+import { boundsContained } from 'utils/bounds'
+import { intersectCircleBounds } from 'utils/intersections'
+import { pointInCircle } from 'utils/hitTests'
+import { translateBounds } from 'utils/utils'
 
 const circle = registerShapeUtils<CircleShape>({
   boundsCache: new WeakMap([]),
@@ -15,22 +15,29 @@ const circle = registerShapeUtils<CircleShape>({
       id: uuid(),
       type: ShapeType.Circle,
       isGenerated: false,
-      name: "Circle",
-      parentId: "page0",
+      name: 'Circle',
+      parentId: 'page0',
       childIndex: 0,
       point: [0, 0],
       rotation: 0,
       radius: 1,
       style: {
-        fill: "#c6cacb",
-        stroke: "#000",
+        fill: '#c6cacb',
+        stroke: '#000',
       },
       ...props,
     }
   },
 
-  render({ id, radius }) {
-    return <circle id={id} cx={radius} cy={radius} r={radius} />
+  render({ id, radius, style }) {
+    return (
+      <circle
+        id={id}
+        cx={radius}
+        cy={radius}
+        r={Math.max(0, radius - Number(style.strokeWidth) / 2)}
+      />
+    )
   },
 
   applyStyles(shape, style) {
@@ -92,7 +99,7 @@ const circle = registerShapeUtils<CircleShape>({
   },
 
   translateTo(shape, point) {
-    shape.point = point
+    shape.point = vec.toPrecision(point)
     return this
   },
 

lib/shape-utils/dot.tsx

@@ -1,11 +1,11 @@
-import { v4 as uuid } from "uuid"
-import * as vec from "utils/vec"
-import { DotShape, ShapeType } from "types"
-import { registerShapeUtils } from "./index"
-import { boundsContained } from "utils/bounds"
-import { intersectCircleBounds } from "utils/intersections"
-import { DotCircle } from "components/canvas/misc"
-import { translateBounds } from "utils/utils"
+import { v4 as uuid } from 'uuid'
+import * as vec from 'utils/vec'
+import { DotShape, ShapeType } from 'types'
+import { registerShapeUtils } from './index'
+import { boundsContained } from 'utils/bounds'
+import { intersectCircleBounds } from 'utils/intersections'
+import { DotCircle } from 'components/canvas/misc'
+import { translateBounds } from 'utils/utils'
 
 const dot = registerShapeUtils<DotShape>({
   boundsCache: new WeakMap([]),
@@ -15,14 +15,14 @@ const dot = registerShapeUtils<DotShape>({
       id: uuid(),
       type: ShapeType.Dot,
       isGenerated: false,
-      name: "Dot",
-      parentId: "page0",
+      name: 'Dot',
+      parentId: 'page0',
       childIndex: 0,
       point: [0, 0],
       rotation: 0,
       style: {
-        fill: "#c6cacb",
-        strokeWidth: "0",
+        fill: '#c6cacb',
+        strokeWidth: '0',
       },
       ...props,
     }
@@ -79,7 +79,7 @@ const dot = registerShapeUtils<DotShape>({
   },
 
   translateTo(shape, point) {
-    shape.point = point
+    shape.point = vec.toPrecision(point)
     return this
   },
 

lib/shape-utils/draw.tsx

@@ -34,13 +34,13 @@ const draw = registerShapeUtils<DrawShape>({
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
         ...props.style,
-        stroke: 'transparent',
+        fill: props.style.stroke,
       },
     }
   },
 
   render(shape) {
-    const { id, point, points } = shape
+    const { id, point, points, style } = shape
 
     if (!pathCache.has(points)) {
       if (points.length < 2) {
@@ -51,7 +51,12 @@ const draw = registerShapeUtils<DrawShape>({
         }
         pathCache.set(points, getSvgPathFromStroke(d))
       } else {
-        pathCache.set(points, getSvgPathFromStroke(getStroke(points)))
+        pathCache.set(
+          points,
+          getSvgPathFromStroke(
+            getStroke(points, { size: Number(style.strokeWidth) * 2 })
+          )
+        )
       }
     }
 
@@ -60,6 +65,7 @@ const draw = registerShapeUtils<DrawShape>({
 
   applyStyles(shape, style) {
     Object.assign(shape.style, style)
+    shape.style.fill = shape.style.stroke
     return this
   },
 
@@ -128,7 +134,7 @@ const draw = registerShapeUtils<DrawShape>({
   },
 
   translateTo(shape, point) {
-    shape.point = point
+    shape.point = vec.toPrecision(point)
     return this
   },
 

lib/shape-utils/ellipse.tsx

@@ -1,16 +1,16 @@
-import { v4 as uuid } from "uuid"
-import * as vec from "utils/vec"
-import { EllipseShape, ShapeType } from "types"
-import { registerShapeUtils } from "./index"
-import { boundsContained, getRotatedEllipseBounds } from "utils/bounds"
-import { intersectEllipseBounds } from "utils/intersections"
-import { pointInEllipse } from "utils/hitTests"
+import { v4 as uuid } from 'uuid'
+import * as vec from 'utils/vec'
+import { EllipseShape, ShapeType } from 'types'
+import { registerShapeUtils } from './index'
+import { boundsContained, getRotatedEllipseBounds } from 'utils/bounds'
+import { intersectEllipseBounds } from 'utils/intersections'
+import { pointInEllipse } from 'utils/hitTests'
 import {
   getBoundsFromPoints,
   getRotatedCorners,
   rotateBounds,
   translateBounds,
-} from "utils/utils"
+} from 'utils/utils'
 
 const ellipse = registerShapeUtils<EllipseShape>({
   boundsCache: new WeakMap([]),
@@ -20,24 +20,30 @@ const ellipse = registerShapeUtils<EllipseShape>({
       id: uuid(),
       type: ShapeType.Ellipse,
       isGenerated: false,
-      name: "Ellipse",
-      parentId: "page0",
+      name: 'Ellipse',
+      parentId: 'page0',
       childIndex: 0,
       point: [0, 0],
       radiusX: 1,
       radiusY: 1,
       rotation: 0,
       style: {
-        fill: "#c6cacb",
-        stroke: "#000",
+        fill: '#c6cacb',
+        stroke: '#000',
       },
       ...props,
     }
   },
 
-  render({ id, radiusX, radiusY }) {
+  render({ id, radiusX, radiusY, style }) {
     return (
-      <ellipse id={id} cx={radiusX} cy={radiusY} rx={radiusX} ry={radiusY} />
+      <ellipse
+        id={id}
+        cx={radiusX}
+        cy={radiusY}
+        rx={Math.max(0, radiusX - Number(style.strokeWidth) / 2)}
+        ry={Math.max(0, radiusY - Number(style.strokeWidth) / 2)}
+      />
     )
   },
 
@@ -110,7 +116,7 @@ const ellipse = registerShapeUtils<EllipseShape>({
   },
 
   translateTo(shape, point) {
-    shape.point = point
+    shape.point = vec.toPrecision(point)
     return this
   },
 

lib/shape-utils/line.tsx

@@ -1,11 +1,11 @@
-import { v4 as uuid } from "uuid"
-import * as vec from "utils/vec"
-import { LineShape, ShapeType } from "types"
-import { registerShapeUtils } from "./index"
-import { boundsContained } from "utils/bounds"
-import { intersectCircleBounds } from "utils/intersections"
-import { DotCircle } from "components/canvas/misc"
-import { translateBounds } from "utils/utils"
+import { v4 as uuid } from 'uuid'
+import * as vec from 'utils/vec'
+import { LineShape, ShapeType } from 'types'
+import { registerShapeUtils } from './index'
+import { boundsContained } from 'utils/bounds'
+import { intersectCircleBounds } from 'utils/intersections'
+import { DotCircle } from 'components/canvas/misc'
+import { translateBounds } from 'utils/utils'
 
 const line = registerShapeUtils<LineShape>({
   boundsCache: new WeakMap([]),
@@ -15,15 +15,15 @@ const line = registerShapeUtils<LineShape>({
       id: uuid(),
       type: ShapeType.Line,
       isGenerated: false,
-      name: "Line",
-      parentId: "page0",
+      name: 'Line',
+      parentId: 'page0',
       childIndex: 0,
       point: [0, 0],
       direction: [0, 0],
       rotation: 0,
       style: {
-        fill: "#c6cacb",
-        stroke: "#000",
+        fill: '#c6cacb',
+        stroke: '#000',
       },
       ...props,
     }
@@ -88,7 +88,7 @@ const line = registerShapeUtils<LineShape>({
   },
 
   translateTo(shape, point) {
-    shape.point = point
+    shape.point = vec.toPrecision(point)
     return this
   },
 

lib/shape-utils/polyline.tsx

@@ -1,10 +1,10 @@
-import { v4 as uuid } from "uuid"
-import * as vec from "utils/vec"
-import { PolylineShape, ShapeType } from "types"
-import { registerShapeUtils } from "./index"
-import { intersectPolylineBounds } from "utils/intersections"
-import { boundsContainPolygon } from "utils/bounds"
-import { getBoundsFromPoints, translateBounds } from "utils/utils"
+import { v4 as uuid } from 'uuid'
+import * as vec from 'utils/vec'
+import { PolylineShape, ShapeType } from 'types'
+import { registerShapeUtils } from './index'
+import { intersectPolylineBounds } from 'utils/intersections'
+import { boundsContainPolygon } from 'utils/bounds'
+import { getBoundsFromPoints, translateBounds } from 'utils/utils'
 
 const polyline = registerShapeUtils<PolylineShape>({
   boundsCache: new WeakMap([]),
@@ -14,16 +14,16 @@ const polyline = registerShapeUtils<PolylineShape>({
       id: uuid(),
       type: ShapeType.Polyline,
       isGenerated: false,
-      name: "Polyline",
-      parentId: "page0",
+      name: 'Polyline',
+      parentId: 'page0',
       childIndex: 0,
       point: [0, 0],
       points: [[0, 0]],
       rotation: 0,
       style: {
         strokeWidth: 2,
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
       },
       ...props,
     }
@@ -97,7 +97,7 @@ const polyline = registerShapeUtils<PolylineShape>({
   },
 
   translateTo(shape, point) {
-    shape.point = point
+    shape.point = vec.toPrecision(point)
     return this
   },
 

lib/shape-utils/ray.tsx

@@ -1,11 +1,11 @@
-import { v4 as uuid } from "uuid"
-import * as vec from "utils/vec"
-import { RayShape, ShapeType } from "types"
-import { registerShapeUtils } from "./index"
-import { boundsContained } from "utils/bounds"
-import { intersectCircleBounds } from "utils/intersections"
-import { DotCircle } from "components/canvas/misc"
-import { translateBounds } from "utils/utils"
+import { v4 as uuid } from 'uuid'
+import * as vec from 'utils/vec'
+import { RayShape, ShapeType } from 'types'
+import { registerShapeUtils } from './index'
+import { boundsContained } from 'utils/bounds'
+import { intersectCircleBounds } from 'utils/intersections'
+import { DotCircle } from 'components/canvas/misc'
+import { translateBounds } from 'utils/utils'
 
 const ray = registerShapeUtils<RayShape>({
   boundsCache: new WeakMap([]),
@@ -15,15 +15,15 @@ const ray = registerShapeUtils<RayShape>({
       id: uuid(),
       type: ShapeType.Ray,
       isGenerated: false,
-      name: "Ray",
-      parentId: "page0",
+      name: 'Ray',
+      parentId: 'page0',
       childIndex: 0,
       point: [0, 0],
       direction: [0, 1],
       rotation: 0,
       style: {
-        fill: "#c6cacb",
-        stroke: "#000",
+        fill: '#c6cacb',
+        stroke: '#000',
         strokeWidth: 1,
       },
       ...props,
@@ -88,7 +88,7 @@ const ray = registerShapeUtils<RayShape>({
   },
 
   translateTo(shape, point) {
-    shape.point = point
+    shape.point = vec.toPrecision(point)
     return this
   },
 

lib/shape-utils/rectangle.tsx

@@ -1,13 +1,13 @@
-import { v4 as uuid } from "uuid"
-import * as vec from "utils/vec"
-import { RectangleShape, ShapeType } from "types"
-import { registerShapeUtils } from "./index"
-import { boundsCollidePolygon, boundsContainPolygon } from "utils/bounds"
+import { v4 as uuid } from 'uuid'
+import * as vec from 'utils/vec'
+import { RectangleShape, ShapeType } from 'types'
+import { registerShapeUtils } from './index'
+import { boundsCollidePolygon, boundsContainPolygon } from 'utils/bounds'
 import {
   getBoundsFromPoints,
   getRotatedCorners,
   translateBounds,
-} from "utils/utils"
+} from 'utils/utils'
 
 const rectangle = registerShapeUtils<RectangleShape>({
   boundsCache: new WeakMap([]),
@@ -17,42 +17,31 @@ const rectangle = registerShapeUtils<RectangleShape>({
       id: uuid(),
       type: ShapeType.Rectangle,
       isGenerated: false,
-      name: "Rectangle",
-      parentId: "page0",
+      name: 'Rectangle',
+      parentId: 'page0',
       childIndex: 0,
       point: [0, 0],
       size: [1, 1],
       radius: 2,
       rotation: 0,
       style: {
-        fill: "#c6cacb",
-        stroke: "#000",
+        fill: '#c6cacb',
+        stroke: '#000',
       },
       ...props,
     }
   },
 
-  render({ id, size, radius, childIndex }) {
+  render({ id, size, radius, style }) {
     return (
       <g id={id}>
         <rect
           id={id}
-          width={size[0]}
-          height={size[1]}
           rx={radius}
           ry={radius}
+          width={Math.max(0, size[0] - Number(style.strokeWidth) / 2)}
+          height={Math.max(0, size[1] - Number(style.strokeWidth) / 2)}
         />
-        <text
-          y={4}
-          x={4}
-          fontSize={18}
-          fill="black"
-          stroke="none"
-          alignmentBaseline="text-before-edge"
-          pointerEvents="none"
-        >
-          {childIndex}
-        </text>
       </g>
     )
   },
@@ -113,7 +102,7 @@ const rectangle = registerShapeUtils<RectangleShape>({
   },
 
   translateTo(shape, point) {
-    shape.point = point
+    shape.point = vec.toPrecision(point)
     return this
   },
 

package.json

@@ -11,6 +11,7 @@
     "@monaco-editor/react": "^4.1.3",
     "@radix-ui/react-dropdown-menu": "^0.0.19",
     "@radix-ui/react-icons": "^1.0.3",
+    "@radix-ui/react-radio-group": "^0.0.16",
     "@state-designer/react": "^1.7.1",
     "@stitches/react": "^0.1.9",
     "framer-motion": "^4.1.16",

state/commands/duplicate.ts

@@ -0,0 +1,48 @@
+import Command from './command'
+import history from '../history'
+import { Data } from 'types'
+import { getPage, getSelectedShapes } from 'utils/utils'
+import { v4 as uuid } from 'uuid'
+import { current } from 'immer'
+import * as vec from 'utils/vec'
+
+export default function duplicateCommand(data: Data) {
+  const { currentPageId } = data
+  const selectedShapes = getSelectedShapes(current(data))
+  const duplicates = selectedShapes.map((shape) => ({
+    ...shape,
+    id: uuid(),
+    point: vec.add(shape.point, vec.div([16, 16], data.camera.zoom)),
+  }))
+
+  history.execute(
+    data,
+    new Command({
+      name: 'duplicate_shapes',
+      category: 'canvas',
+      manualSelection: true,
+      do(data) {
+        const { shapes } = getPage(data, currentPageId)
+
+        data.selectedIds.clear()
+
+        for (const duplicate of duplicates) {
+          shapes[duplicate.id] = duplicate
+          data.selectedIds.add(duplicate.id)
+        }
+      },
+      undo(data) {
+        const { shapes } = getPage(data, currentPageId)
+        data.selectedIds.clear()
+
+        for (const duplicate of duplicates) {
+          delete shapes[duplicate.id]
+        }
+
+        for (let id in selectedShapes) {
+          data.selectedIds.add(id)
+        }
+      },
+    })
+  )
+}

state/commands/index.ts

@@ -1,22 +1,25 @@
-import align from "./align"
-import deleteSelected from "./delete-selected"
-import direct from "./direct"
-import distribute from "./distribute"
-import generate from "./generate"
-import move from "./move"
-import draw from "./draw"
-import rotate from "./rotate"
-import stretch from "./stretch"
-import style from "./style"
-import transform from "./transform"
-import transformSingle from "./transform-single"
-import translate from "./translate"
+import align from './align'
+import deleteSelected from './delete-selected'
+import direct from './direct'
+import distribute from './distribute'
+import duplicate from './duplicate'
+import generate from './generate'
+import move from './move'
+import draw from './draw'
+import rotate from './rotate'
+import stretch from './stretch'
+import style from './style'
+import transform from './transform'
+import transformSingle from './transform-single'
+import translate from './translate'
+import nudge from './nudge'
 
 const commands = {
   align,
   deleteSelected,
   direct,
   distribute,
+  duplicate,
   generate,
   move,
   draw,
@@ -26,6 +29,7 @@ const commands = {
   transform,
   transformSingle,
   translate,
+  nudge,
 }
 
 export default commands

state/commands/nudge.ts

@@ -0,0 +1,40 @@
+import Command from './command'
+import history from '../history'
+import { Data } from 'types'
+import { getPage, getSelectedShapes } from 'utils/utils'
+import { getShapeUtils } from 'lib/shape-utils'
+import * as vec from 'utils/vec'
+
+export default function nudgeCommand(data: Data, delta: number[]) {
+  const { currentPageId } = data
+  const selectedShapes = getSelectedShapes(data)
+  const shapeBounds = Object.fromEntries(
+    selectedShapes.map(
+      (shape) => [shape.id, getShapeUtils(shape).getBounds(shape)] as const
+    )
+  )
+
+  history.execute(
+    data,
+    new Command({
+      name: 'set_direction',
+      category: 'canvas',
+      do(data) {
+        const { shapes } = getPage(data, currentPageId)
+
+        for (let id in shapeBounds) {
+          const shape = shapes[id]
+          getShapeUtils(shape).translateTo(shape, vec.add(shape.point, delta))
+        }
+      },
+      undo(data) {
+        const { shapes } = getPage(data, currentPageId)
+
+        for (let id in shapeBounds) {
+          const shape = shapes[id]
+          getShapeUtils(shape).translateTo(shape, vec.sub(shape.point, delta))
+        }
+      },
+    })
+  )
+}

state/commands/transform-single.ts

@@ -1,10 +1,10 @@
-import Command from "./command"
-import history from "../history"
-import { Data, Corner, Edge } from "types"
-import { getShapeUtils } from "lib/shape-utils"
-import { current } from "immer"
-import { TransformSingleSnapshot } from "state/sessions/transform-single-session"
-import { getPage } from "utils/utils"
+import Command from './command'
+import history from '../history'
+import { Data, Corner, Edge } from 'types'
+import { getShapeUtils } from 'lib/shape-utils'
+import { current } from 'immer'
+import { TransformSingleSnapshot } from 'state/sessions/transform-single-session'
+import { getPage } from 'utils/utils'
 
 export default function transformSingleCommand(
   data: Data,
@@ -14,13 +14,13 @@ export default function transformSingleCommand(
   scaleY: number,
   isCreating: boolean
 ) {
-  const shape = getPage(data, after.currentPageId).shapes[after.id]
+  const shape = current(getPage(data, after.currentPageId).shapes[after.id])
 
   history.execute(
     data,
     new Command({
-      name: "transform_single_shape",
-      category: "canvas",
+      name: 'transform_single_shape',
+      category: 'canvas',
       manualSelection: true,
       do(data) {
         const { id, type, initialShape, initialShapeBounds } = after

state/state.ts

@@ -41,10 +41,15 @@ const initialData: Data = {
     isDarkMode: false,
     isCodeOpen: false,
     isStyleOpen: false,
+    isToolLocked: false,
+    isPenLocked: false,
+    nudgeDistanceLarge: 10,
+    nudgeDistanceSmall: 1,
   },
   currentStyle: {
     fill: shades.lightGray,
     stroke: shades.darkGray,
+    strokeWidth: 2,
   },
   camera: {
     point: [0, 0],
@@ -94,6 +99,9 @@ const state = createState({
       else: 'zoomCameraToActual',
     },
     SELECTED_ALL: { to: 'selecting', do: 'selectAll' },
+    NUDGED: { do: 'nudgeSelection' },
+    USED_PEN_DEVICE: 'enablePenLock',
+    DISABLED_PEN_LOCK: 'disablePenLock',
   },
   initial: 'loading',
   states: {
@@ -124,20 +132,22 @@ const state = createState({
         selecting: {
           on: {
             SAVED: 'forceSave',
-            UNDO: { do: 'undo' },
-            REDO: { do: 'redo' },
-            CANCELLED: { do: 'clearSelectedIds' },
-            DELETED: { do: 'deleteSelectedIds' },
+            UNDO: 'undo',
+            REDO: 'redo',
             SAVED_CODE: 'saveCode',
-            GENERATED_FROM_CODE: ['setCodeControls', 'setGeneratedShapes'],
+            CANCELLED: 'clearSelectedIds',
+            DELETED: 'deleteSelectedIds',
+            STARTED_PINCHING: { to: 'pinching' },
             INCREASED_CODE_FONT_SIZE: 'increaseCodeFontSize',
             DECREASED_CODE_FONT_SIZE: 'decreaseCodeFontSize',
             CHANGED_CODE_CONTROL: 'updateControls',
-            ALIGNED: 'alignSelection',
-            STRETCHED: 'stretchSelection',
-            DISTRIBUTED: 'distributeSelection',
-            MOVED: 'moveSelection',
-            STARTED_PINCHING: { to: 'pinching' },
+            GENERATED_FROM_CODE: ['setCodeControls', 'setGeneratedShapes'],
+            TOGGLED_TOOL_LOCK: 'toggleToolLock',
+            MOVED: { if: 'hasSelection', do: 'moveSelection' },
+            ALIGNED: { if: 'hasSelection', do: 'alignSelection' },
+            STRETCHED: { if: 'hasSelection', do: 'stretchSelection' },
+            DISTRIBUTED: { if: 'hasSelection', do: 'distributeSelection' },
+            DUPLICATED: { if: 'hasSelection', do: 'duplicateSelection' },
           },
           initial: 'notPointing',
           states: {
@@ -262,241 +272,259 @@ const state = createState({
             PINCHED: { do: 'pinchCamera' },
           },
         },
-        draw: {
-          initial: 'creating',
+        usingTool: {
+          initial: 'draw',
           states: {
-            creating: {
-              on: {
-                CANCELLED: { to: 'selecting' },
-                POINTED_CANVAS: {
-                  get: 'newDraw',
-                  do: 'createShape',
-                  to: 'draw.editing',
+            draw: {
+              initial: 'creating',
+              states: {
+                creating: {
+                  on: {
+                    CANCELLED: { to: 'selecting' },
+                    POINTED_CANVAS: {
+                      get: 'newDraw',
+                      do: 'createShape',
+                      to: 'draw.editing',
+                    },
+                    UNDO: { do: 'undo' },
+                    REDO: { do: 'redo' },
+                  },
+                },
+                editing: {
+                  onEnter: 'startDrawSession',
+                  on: {
+                    STOPPED_POINTING: {
+                      do: 'completeSession',
+                      to: 'draw.creating',
+                    },
+                    CANCELLED: {
+                      do: ['cancelSession', 'deleteSelectedIds'],
+                      to: 'selecting',
+                    },
+                    MOVED_POINTER: 'updateDrawSession',
+                    PANNED_CAMERA: 'updateDrawSession',
+                  },
                 },
-                UNDO: { do: 'undo' },
-                REDO: { do: 'redo' },
               },
             },
-            editing: {
-              onEnter: 'startDrawSession',
-              on: {
-                STOPPED_POINTING: {
-                  do: 'completeSession',
-                  to: 'draw.creating',
+            dot: {
+              initial: 'creating',
+              states: {
+                creating: {
+                  on: {
+                    CANCELLED: { to: 'selecting' },
+                    POINTED_CANVAS: {
+                      get: 'newDot',
+                      do: 'createShape',
+                      to: 'dot.editing',
+                    },
+                  },
                 },
-                CANCELLED: {
-                  do: ['cancelSession', 'deleteSelectedIds'],
-                  to: 'selecting',
+                editing: {
+                  on: {
+                    STOPPED_POINTING: [
+                      'completeSession',
+                      {
+                        if: 'isToolLocked',
+                        to: 'dot.creating',
+                        else: {
+                          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',
+                      },
+                    },
+                  },
                 },
-                MOVED_POINTER: 'updateDrawSession',
-                PANNED_CAMERA: 'updateDrawSession',
               },
             },
-          },
-        },
-        dot: {
-          initial: 'creating',
-          states: {
-            creating: {
-              on: {
-                CANCELLED: { to: 'selecting' },
-                POINTED_CANVAS: {
-                  get: 'newDot',
-                  do: 'createShape',
-                  to: 'dot.editing',
+            circle: {
+              initial: 'creating',
+              states: {
+                creating: {
+                  on: {
+                    CANCELLED: { to: 'selecting' },
+                    POINTED_CANVAS: {
+                      to: 'circle.editing',
+                    },
+                  },
                 },
-              },
-            },
-            editing: {
-              on: {
-                STOPPED_POINTING: { do: 'completeSession', to: 'selecting' },
-                CANCELLED: {
-                  do: ['cancelSession', 'deleteSelectedIds'],
-                  to: 'selecting',
+                editing: {
+                  on: {
+                    STOPPED_POINTING: { to: 'selecting' },
+                    CANCELLED: { to: 'selecting' },
+                    MOVED_POINTER: {
+                      if: 'distanceImpliesDrag',
+                      then: {
+                        get: 'newCircle',
+                        do: 'createShape',
+                        to: 'drawingShape.bounds',
+                      },
+                    },
+                  },
                 },
               },
-              initial: 'inactive',
+            },
+            ellipse: {
+              initial: 'creating',
               states: {
-                inactive: {
+                creating: {
                   on: {
-                    MOVED_POINTER: {
-                      if: 'distanceImpliesDrag',
-                      to: 'dot.editing.active',
+                    CANCELLED: { to: 'selecting' },
+                    POINTED_CANVAS: {
+                      to: 'ellipse.editing',
                     },
                   },
                 },
-                active: {
-                  onEnter: 'startTranslateSession',
+                editing: {
                   on: {
-                    MOVED_POINTER: 'updateTranslateSession',
-                    PANNED_CAMERA: 'updateTranslateSession',
+                    STOPPED_POINTING: { to: 'selecting' },
+                    CANCELLED: { to: 'selecting' },
+                    MOVED_POINTER: {
+                      if: 'distanceImpliesDrag',
+                      then: {
+                        get: 'newEllipse',
+                        do: 'createShape',
+                        to: 'drawingShape.bounds',
+                      },
+                    },
                   },
                 },
               },
             },
-          },
-        },
-        circle: {
-          initial: 'creating',
-          states: {
-            creating: {
-              on: {
-                CANCELLED: { to: 'selecting' },
-                POINTED_CANVAS: {
-                  to: 'circle.editing',
+            rectangle: {
+              initial: 'creating',
+              states: {
+                creating: {
+                  on: {
+                    CANCELLED: { to: 'selecting' },
+                    POINTED_CANVAS: {
+                      to: 'rectangle.editing',
+                    },
+                  },
                 },
-              },
-            },
-            editing: {
-              on: {
-                STOPPED_POINTING: { to: 'selecting' },
-                CANCELLED: { to: 'selecting' },
-                MOVED_POINTER: {
-                  if: 'distanceImpliesDrag',
-                  then: {
-                    get: 'newCircle',
-                    do: 'createShape',
-                    to: 'drawingShape.bounds',
+                editing: {
+                  on: {
+                    STOPPED_POINTING: { to: 'selecting' },
+                    CANCELLED: { to: 'selecting' },
+                    MOVED_POINTER: {
+                      if: 'distanceImpliesDrag',
+                      then: {
+                        get: 'newRectangle',
+                        do: 'createShape',
+                        to: 'drawingShape.bounds',
+                      },
+                    },
                   },
                 },
               },
             },
-          },
-        },
-        ellipse: {
-          initial: 'creating',
-          states: {
-            creating: {
-              on: {
-                CANCELLED: { to: 'selecting' },
-                POINTED_CANVAS: {
-                  to: 'ellipse.editing',
+            ray: {
+              initial: 'creating',
+              states: {
+                creating: {
+                  on: {
+                    CANCELLED: { to: 'selecting' },
+                    POINTED_CANVAS: {
+                      get: 'newRay',
+                      do: 'createShape',
+                      to: 'ray.editing',
+                    },
+                  },
                 },
-              },
-            },
-            editing: {
-              on: {
-                STOPPED_POINTING: { to: 'selecting' },
-                CANCELLED: { to: 'selecting' },
-                MOVED_POINTER: {
-                  if: 'distanceImpliesDrag',
-                  then: {
-                    get: 'newEllipse',
-                    do: 'createShape',
-                    to: 'drawingShape.bounds',
+                editing: {
+                  on: {
+                    STOPPED_POINTING: { to: 'selecting' },
+                    CANCELLED: { to: 'selecting' },
+                    MOVED_POINTER: {
+                      if: 'distanceImpliesDrag',
+                      to: 'drawingShape.direction',
+                    },
                   },
                 },
               },
             },
-          },
-        },
-        rectangle: {
-          initial: 'creating',
-          states: {
-            creating: {
-              on: {
-                CANCELLED: { to: 'selecting' },
-                POINTED_CANVAS: {
-                  to: 'rectangle.editing',
+            line: {
+              initial: 'creating',
+              states: {
+                creating: {
+                  on: {
+                    CANCELLED: { to: 'selecting' },
+                    POINTED_CANVAS: {
+                      get: 'newLine',
+                      do: 'createShape',
+                      to: 'line.editing',
+                    },
+                  },
                 },
-              },
-            },
-            editing: {
-              on: {
-                STOPPED_POINTING: { to: 'selecting' },
-                CANCELLED: { to: 'selecting' },
-                MOVED_POINTER: {
-                  if: 'distanceImpliesDrag',
-                  then: {
-                    get: 'newRectangle',
-                    do: 'createShape',
-                    to: 'drawingShape.bounds',
+                editing: {
+                  on: {
+                    STOPPED_POINTING: { to: 'selecting' },
+                    CANCELLED: { to: 'selecting' },
+                    MOVED_POINTER: {
+                      if: 'distanceImpliesDrag',
+                      to: 'drawingShape.direction',
+                    },
                   },
                 },
               },
             },
+            polyline: {},
           },
         },
-        ray: {
-          initial: 'creating',
-          states: {
-            creating: {
-              on: {
-                CANCELLED: { to: 'selecting' },
-                POINTED_CANVAS: {
-                  get: 'newRay',
-                  do: 'createShape',
-                  to: 'ray.editing',
-                },
-              },
-            },
-            editing: {
-              on: {
-                STOPPED_POINTING: { to: 'selecting' },
-                CANCELLED: { to: 'selecting' },
-                MOVED_POINTER: {
-                  if: 'distanceImpliesDrag',
-                  to: 'drawingShape.direction',
-                },
+        drawingShape: {
+          on: {
+            STOPPED_POINTING: [
+              'completeSession',
+              {
+                if: 'isToolLocked',
+                to: 'usingTool.previous',
+                else: { to: 'selecting' },
               },
+            ],
+            CANCELLED: {
+              do: ['cancelSession', 'deleteSelectedIds'],
+              to: 'selecting',
             },
           },
-        },
-        line: {
-          initial: 'creating',
+          initial: 'drawingShapeBounds',
           states: {
-            creating: {
+            bounds: {
+              onEnter: 'startDrawTransformSession',
               on: {
-                CANCELLED: { to: 'selecting' },
-                POINTED_CANVAS: {
-                  get: 'newLine',
-                  do: 'createShape',
-                  to: 'line.editing',
-                },
+                MOVED_POINTER: 'updateTransformSession',
+                PANNED_CAMERA: 'updateTransformSession',
               },
             },
-            editing: {
+            direction: {
+              onEnter: 'startDirectionSession',
               on: {
-                STOPPED_POINTING: { to: 'selecting' },
-                CANCELLED: { to: 'selecting' },
-                MOVED_POINTER: {
-                  if: 'distanceImpliesDrag',
-                  to: 'drawingShape.direction',
-                },
+                MOVED_POINTER: 'updateDirectionSession',
+                PANNED_CAMERA: 'updateDirectionSession',
               },
             },
           },
         },
-        polyline: {},
-      },
-    },
-    drawingShape: {
-      on: {
-        STOPPED_POINTING: {
-          do: 'completeSession',
-          to: 'selecting',
-        },
-        CANCELLED: {
-          do: ['cancelSession', 'deleteSelectedIds'],
-          to: 'selecting',
-        },
-      },
-      initial: 'drawingShapeBounds',
-      states: {
-        bounds: {
-          onEnter: 'startDrawTransformSession',
-          on: {
-            MOVED_POINTER: 'updateTransformSession',
-            PANNED_CAMERA: 'updateTransformSession',
-          },
-        },
-        direction: {
-          onEnter: 'startDirectionSession',
-          on: {
-            MOVED_POINTER: 'updateDirectionSession',
-            PANNED_CAMERA: 'updateDirectionSession',
-          },
-        },
       },
     },
   },
@@ -562,6 +590,12 @@ const state = createState({
     hasSelection(data) {
       return data.selectedIds.size > 0
     },
+    isToolLocked(data) {
+      return data.settings.isToolLocked
+    },
+    isPenLocked(data) {
+      return data.settings.isPenLocked
+    },
   },
   actions: {
     /* --------------------- Shapes --------------------- */
@@ -712,6 +746,19 @@ const state = createState({
       session.update(data, screenToWorld(payload.point, data))
     },
 
+    // Nudges
+    nudgeSelection(data, payload: { delta: number[]; shiftKey: boolean }) {
+      commands.nudge(
+        data,
+        vec.mul(
+          payload.delta,
+          payload.shiftKey
+            ? data.settings.nudgeDistanceLarge
+            : data.settings.nudgeDistanceSmall
+        )
+      )
+    },
+
     /* -------------------- Selection ------------------- */
 
     selectAll(data) {
@@ -756,6 +803,9 @@ const state = createState({
     distributeSelection(data, payload: { type: DistributeType }) {
       commands.distribute(data, payload.type)
     },
+    duplicateSelection(data) {
+      commands.duplicate(data)
+    },
 
     /* --------------------- Camera --------------------- */
 
@@ -913,6 +963,7 @@ const state = createState({
     },
 
     /* ---------------------- Code ---------------------- */
+
     closeCodePanel(data) {
       data.settings.isCodeOpen = false
     },
@@ -962,7 +1013,20 @@ const state = createState({
       history.enable()
     },
 
-    // Data
+    /* -------------------- Settings -------------------- */
+
+    enablePenLock(data) {
+      data.settings.isPenLocked = true
+    },
+    disablePenLock(data) {
+      data.settings.isPenLocked = false
+    },
+    toggleToolLock(data) {
+      data.settings.isToolLocked = !data.settings.isToolLocked
+    },
+
+    /* ---------------------- Data ---------------------- */
+
     saveCode(data, payload: { code: string }) {
       data.document.code[data.currentCodeFileId].code = payload.code
       history.save(data)

styles/stitches.config.ts

@@ -1,4 +1,4 @@
-import { createCss, defaultThemeMap } from "@stitches/react"
+import { createCss, defaultThemeMap } from '@stitches/react'
 
 const { styled, global, css, theme, getCssString } = createCss({
   themeMap: {
@@ -6,26 +6,27 @@ const { styled, global, css, theme, getCssString } = createCss({
   },
   theme: {
     colors: {
-      brushFill: "rgba(0,0,0,.1)",
-      brushStroke: "rgba(0,0,0,.5)",
-      hint: "rgba(66, 133, 244, 0.200)",
-      selected: "rgba(66, 133, 244, 1.000)",
-      bounds: "rgba(65, 132, 244, 1.000)",
-      boundsBg: "rgba(65, 132, 244, 0.100)",
-      border: "#aaa",
-      panel: "#fefefe",
-      hover: "#efefef",
-      text: "#333",
-      input: "#f3f3f3",
-      inputBorder: "#ddd",
+      brushFill: 'rgba(0,0,0,.1)',
+      brushStroke: 'rgba(0,0,0,.5)',
+      hint: 'rgba(66, 133, 244, 0.200)',
+      selected: 'rgba(66, 133, 244, 1.000)',
+      bounds: 'rgba(65, 132, 244, 1.000)',
+      boundsBg: 'rgba(65, 132, 244, 0.100)',
+      border: '#aaa',
+      panel: '#fefefe',
+      inactive: '#cccccf',
+      hover: '#efefef',
+      text: '#333',
+      input: '#f3f3f3',
+      inputBorder: '#ddd',
     },
     space: {},
     fontSizes: {
-      0: "10px",
-      1: "12px",
-      2: "13px",
-      3: "16px",
-      4: "18px",
+      0: '10px',
+      1: '12px',
+      2: '13px',
+      3: '16px',
+      4: '18px',
     },
     fonts: {
       ui: '"Recursive", system-ui, sans-serif',
@@ -72,17 +73,17 @@ const light = theme({})
 const dark = theme({})
 
 const globalStyles = global({
-  "*": { boxSizing: "border-box" },
-  ":root": {
-    "--camera-zoom": 1,
-    "--scale": "calc(1 / var(--camera-zoom))",
+  '*': { boxSizing: 'border-box' },
+  ':root': {
+    '--camera-zoom': 1,
+    '--scale': 'calc(1 / var(--camera-zoom))',
   },
-  "html, body": {
-    padding: "0px",
-    margin: "0px",
-    overscrollBehavior: "none",
-    fontFamily: "$ui",
-    fontSize: "$2",
+  'html, body': {
+    padding: '0px',
+    margin: '0px',
+    overscrollBehavior: 'none',
+    fontFamily: '$ui',
+    fontSize: '$2',
   },
 })
 

types.ts

@@ -1,6 +1,6 @@
-import * as monaco from "monaco-editor/esm/vs/editor/editor.api"
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
 
-import React from "react"
+import React from 'react'
 
 /* -------------------------------------------------- */
 /*                    Client State                    */
@@ -13,6 +13,10 @@ export interface Data {
     isDarkMode: boolean
     isCodeOpen: boolean
     isStyleOpen: boolean
+    nudgeDistanceSmall: number
+    nudgeDistanceLarge: number
+    isToolLocked: boolean
+    isPenLocked: boolean
   }
   currentStyle: ShapeStyles
   camera: {
@@ -39,21 +43,21 @@ export interface Data {
 
 export interface Page {
   id: string
-  type: "page"
+  type: 'page'
   childIndex: number
   name: string
   shapes: Record<string, Shape>
 }
 
 export enum ShapeType {
-  Dot = "dot",
-  Circle = "circle",
-  Ellipse = "ellipse",
-  Line = "line",
-  Ray = "ray",
-  Polyline = "polyline",
-  Rectangle = "rectangle",
-  Draw = "draw",
+  Dot = 'dot',
+  Circle = 'circle',
+  Ellipse = 'ellipse',
+  Line = 'line',
+  Ray = 'ray',
+  Polyline = 'polyline',
+  Rectangle = 'rectangle',
+  Draw = 'draw',
 }
 
 // Consider:
@@ -164,17 +168,17 @@ export interface PointerInfo {
 }
 
 export enum Edge {
-  Top = "top_edge",
-  Right = "right_edge",
-  Bottom = "bottom_edge",
-  Left = "left_edge",
+  Top = 'top_edge',
+  Right = 'right_edge',
+  Bottom = 'bottom_edge',
+  Left = 'left_edge',
 }
 
 export enum Corner {
-  TopLeft = "top_left_corner",
-  TopRight = "top_right_corner",
-  BottomRight = "bottom_right_corner",
-  BottomLeft = "bottom_left_corner",
+  TopLeft = 'top_left_corner',
+  TopRight = 'top_right_corner',
+  BottomRight = 'bottom_right_corner',
+  BottomLeft = 'bottom_left_corner',
 }
 
 export interface Bounds {
@@ -262,10 +266,10 @@ export type IMonaco = typeof monaco
 export type IMonacoEditor = monaco.editor.IStandaloneCodeEditor
 
 export enum ControlType {
-  Number = "number",
-  Vector = "vector",
-  Text = "text",
-  Select = "select",
+  Number = 'number',
+  Vector = 'vector',
+  Text = 'text',
+  Select = 'select',
 }
 
 export interface BaseCodeControl {
@@ -296,7 +300,7 @@ export interface TextCodeControl extends BaseCodeControl {
   format?: (value: string) => string
 }
 
-export interface SelectCodeControl<T extends string = "">
+export interface SelectCodeControl<T extends string = ''>
   extends BaseCodeControl {
   type: ControlType.Select
   value: T

utils/utils.ts

@@ -1,9 +1,9 @@
-import Vector from "lib/code/vector"
-import React from "react"
-import { Data, Bounds, Edge, Corner, Shape, ShapeStyles } from "types"
-import * as vec from "./vec"
-import _isMobile from "ismobilejs"
-import { getShapeUtils } from "lib/shape-utils"
+import Vector from 'lib/code/vector'
+import React from 'react'
+import { Data, Bounds, Edge, Corner, Shape, ShapeStyles } from 'types'
+import * as vec from './vec'
+import _isMobile from 'ismobilejs'
+import { getShapeUtils } from 'lib/shape-utils'
 
 export function screenToWorld(point: number[], data: Data) {
   return vec.sub(vec.div(point, data.camera.zoom), data.camera.point)
@@ -132,7 +132,7 @@ export function getBezierCurveSegments(points: number[][], tension = 0.4) {
     cpoints: number[][] = [...points]
 
   if (len < 2) {
-    throw Error("Curve must have at least two points.")
+    throw Error('Curve must have at least two points.')
   }
 
   for (let i = 1; i < len - 1; i++) {
@@ -260,12 +260,12 @@ export function copyToClipboard(string: string) {
     navigator.clipboard.writeText(string)
   } catch (e) {
     try {
-      textarea = document.createElement("textarea")
-      textarea.setAttribute("position", "fixed")
-      textarea.setAttribute("top", "0")
-      textarea.setAttribute("readonly", "true")
-      textarea.setAttribute("contenteditable", "true")
-      textarea.style.position = "fixed" // prevent scroll from jumping to the bottom when focus is set.
+      textarea = document.createElement('textarea')
+      textarea.setAttribute('position', 'fixed')
+      textarea.setAttribute('top', '0')
+      textarea.setAttribute('readonly', 'true')
+      textarea.setAttribute('contenteditable', 'true')
+      textarea.style.position = 'fixed' // prevent scroll from jumping to the bottom when focus is set.
       textarea.value = string
 
       document.body.appendChild(textarea)
@@ -281,7 +281,7 @@ export function copyToClipboard(string: string) {
       sel.addRange(range)
 
       textarea.setSelectionRange(0, textarea.value.length)
-      result = document.execCommand("copy")
+      result = document.execCommand('copy')
     } catch (err) {
       result = null
     } finally {
@@ -549,7 +549,7 @@ export function arrsIntersect<T>(
 
 export function getTouchDisplay() {
   return (
-    "ontouchstart" in window ||
+    'ontouchstart' in window ||
     navigator.maxTouchPoints > 0 ||
     navigator.msMaxTouchPoints > 0
   )
@@ -604,7 +604,7 @@ export function modulate(
 export function clamp(n: number, min: number): number
 export function clamp(n: number, min: number, max: number): number
 export function clamp(n: number, min: number, max?: number): number {
-  return Math.max(min, typeof max !== "undefined" ? Math.min(n, max) : n)
+  return Math.max(min, typeof max !== 'undefined' ? Math.min(n, max) : n)
 }
 
 // CURVES
@@ -871,8 +871,8 @@ export async function postJsonToEndpoint(
   const d = await fetch(
     `${process.env.NEXT_PUBLIC_BASE_API_URL}/api/${endpoint}`,
     {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(data),
     }
   )
@@ -962,7 +962,7 @@ export function getTransformAnchor(
 }
 
 export function vectorToPoint(point: number[] | Vector | undefined) {
-  if (typeof point === "undefined") {
+  if (typeof point === 'undefined') {
     return [0, 0]
   }
 
@@ -1062,7 +1062,7 @@ export function getRotatedCorners(b: Bounds, rotation: number) {
 
 export function getTransformedBoundingBox(
   bounds: Bounds,
-  handle: Corner | Edge | "center",
+  handle: Corner | Edge | 'center',
   delta: number[],
   rotation = 0,
   isAspectRatioLocked = false
@@ -1076,7 +1076,7 @@ export function getTransformedBoundingBox(
   let [bx1, by1] = [bounds.maxX, bounds.maxY]
 
   // If the drag is on the center, just translate the bounds.
-  if (handle === "center") {
+  if (handle === 'center') {
     return {
       minX: bx0 + delta[0],
       minY: by0 + delta[1],
@@ -1491,7 +1491,7 @@ export function forceIntegerChildIndices(shapes: Shape[]) {
   }
 }
 export function setZoomCSS(zoom: number) {
-  document.documentElement.style.setProperty("--camera-zoom", zoom.toString())
+  document.documentElement.style.setProperty('--camera-zoom', zoom.toString())
 }
 
 export function getCurrent<T extends object>(source: T): T {
@@ -1539,7 +1539,7 @@ export function simplify(points: number[][], tolerance = 1) {
 }
 
 export function getSvgPathFromStroke(stroke: number[][]) {
-  if (!stroke.length) return ""
+  if (!stroke.length) return ''
 
   const d = stroke.reduce(
     (acc, [x0, y0], i, arr) => {
@@ -1547,9 +1547,9 @@ export function getSvgPathFromStroke(stroke: number[][]) {
       acc.push(x0, y0, (x0 + x1) / 2, (y0 + y1) / 2)
       return acc
     },
-    ["M", ...stroke[0], "Q"]
+    ['M', ...stroke[0], 'Q']
   )
 
-  d.push("Z")
-  return d.join(" ")
+  d.push('Z')
+  return d.join(' ')
 }

utils/vec.ts

@@ -483,6 +483,6 @@ export function nudge(A: number[], B: number[], d: number) {
  * @param a
  * @param n
  */
-export function toPrecision(a: number[], n = 3) {
+export function toPrecision(a: number[], n = 4) {
   return [+a[0].toPrecision(n), +a[1].toPrecision(n)]
 }

yarn.lock

@@ -1358,6 +1358,17 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-label@0.0.13":
+  version "0.0.13"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-label/-/react-label-0.0.13.tgz#b71930fa16a2cf859296317436cb88e31efb8ecf"
+  integrity sha512-csNElm8qA38pOHr772CXIvBXd/eCGaoAMImuLdawUxQNzwxQ4npd8lr/f9fi/4OLkgeNOVOqjsaVamiNmF/lIw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "0.0.5"
+    "@radix-ui/react-id" "0.0.6"
+    "@radix-ui/react-polymorphic" "0.0.11"
+    "@radix-ui/react-primitive" "0.0.13"
+
 "@radix-ui/react-menu@0.0.18":
   version "0.0.18"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-menu/-/react-menu-0.0.18.tgz#b36f7657eb6757c623ffc688c48a4781ffd82351"
@@ -1431,6 +1442,24 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-polymorphic" "0.0.11"
 
+"@radix-ui/react-radio-group@^0.0.16":
+  version "0.0.16"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-radio-group/-/react-radio-group-0.0.16.tgz#10fc6e5c3102599cf422e9f6f8d2766088e602a1"
+  integrity sha512-vOtgflNWcauSul+EvnPCxATdmPw7fb1cuqBJX07yJdjbrw1Iv5v/+d79fNyIwPR+KrkhP+uCMIBfF0gvo6K7ZQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "0.0.5"
+    "@radix-ui/react-compose-refs" "0.0.5"
+    "@radix-ui/react-context" "0.0.5"
+    "@radix-ui/react-label" "0.0.13"
+    "@radix-ui/react-polymorphic" "0.0.11"
+    "@radix-ui/react-presence" "0.0.14"
+    "@radix-ui/react-primitive" "0.0.13"
+    "@radix-ui/react-roving-focus" "0.0.13"
+    "@radix-ui/react-slot" "0.0.10"
+    "@radix-ui/react-use-callback-ref" "0.0.5"
+    "@radix-ui/react-use-controllable-state" "0.0.6"
+
 "@radix-ui/react-roving-focus@0.0.13":
   version "0.0.13"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-0.0.13.tgz#c72f503832577979c4caa9efcfd59140730c2f80"