friendlier zoom; allow hitfunc clicks on entire stage

TODO.md

@@ -12,7 +12,9 @@
   - selectLayersByGroupId - some kind of compound parent key "[a]-[b]"
   - big thunk which just changes layer dimensions
   - if it has effects, can render those via selector
-- store pattern name and other desired attribution (?) in exported file and display it in preview window if provided
+- store pattern name and other desired attribution (?) in exported file and display it somewhere (either stats tab or in the preview window)
+- show pattern start/end type (e.g., 1-0) if start/end if specified
+- new fine tuning setting: when backtracking at end, optionally ignore border if enabled
 
 ## NEW IN 1.0.0
 

src/features/effects/FineTuning.js

@@ -162,7 +162,6 @@ export default class FineTuning extends Effect {
 
   drawBorder(vertices, effect) {
     let hull = convexHull(cloneVertices(vertices))
-    const start = vertices[0]
     const last = vertices[vertices.length - 1]
     const closestVertex = closest(hull, last)
     const index = hull.indexOf(closestVertex)

src/features/preview/PreviewWindow.js

@@ -23,6 +23,8 @@ const PreviewWindow = () => {
   const selectedLayer = useSelector(selectSelectedLayer, isEqual)
   const layerIds = useSelector(selectVisibleLayerIds, isEqual)
   const zoom = useSelector(selectPreviewZoom)
+  const stageZoom = zoom > 1 ? zoom : 1
+  const offsetZoom = zoom > 1 ? 1 : zoom
   const remainingLayerIds = layerIds.filter((id) => id !== selectedLayer?.id)
   const layerRef = useRef()
   const stagePadding = 22
@@ -68,33 +70,31 @@ const PreviewWindow = () => {
 
   // add hidden debugging option to toggle the hit canvas on the layer when the user
   // clicks on the layer while pressing the Alt key
-  const handleLayerClick = (e) => {
+  const handleStageClick = (e) => {
+    dispatch(setCurrentLayer(null))
     if (e.evt.altKey && layerRef.current) {
       layerRef.current.toggleHitCanvas()
       e.cancelBubble = true
     }
   }
 
-  const handleStageClick = (e) => {
-    dispatch(setCurrentLayer(null))
-  }
-
   // some awkward rendering to put the current layer as the last child in the layer to ensure
   // transformer rotation works; this is a Konva restriction.
   return (
     <Stage
       scaleX={scale * zoom}
       scaleY={scale * zoom}
-      height={height * scaleHeight * zoom + stagePadding}
-      width={width * scaleWidth * zoom + stagePadding}
-      offsetX={(-width * (scaleWidth / scale) - stagePadding * 0.5) / 2}
-      offsetY={(-height * (scaleHeight / scale) - stagePadding * 0.5) / 2}
+      height={height * scaleHeight * stageZoom + stagePadding}
+      width={width * scaleWidth * stageZoom + stagePadding}
+      offsetX={
+        (-width * (scaleWidth / scale / offsetZoom) - stagePadding * 0.5) / 2
+      }
+      offsetY={
+        (-height * (scaleHeight / scale / offsetZoom) - stagePadding * 0.5) / 2
+      }
       onClick={handleStageClick}
     >
-      <Layer
-        ref={layerRef}
-        onClick={handleLayerClick}
-      >
+      <Layer ref={layerRef}>
         {machine.type === "polar" && (
           <Circle
             x={0}