fix: misc layer more visible, wavefirn scaling improvements

Author: seveibar

src/components/DurationBox/index.js renamed to src/components/DurationBoxes/index.js

@@ -54,6 +54,7 @@ export const DurationBox = ({
   onClick,
   onRemoveBox,
   onClickBox,
+  isMiscLayer = false,
   label = "",
 }) => {
   const [toolMode] = useToolMode()
@@ -63,18 +64,27 @@ export const DurationBox = ({
   return (
     <Container onClick={onClick} width={width} color={color} active={active}>
       {durations.map(
-        ({ start: startTime, end: endTime, label: durationLabel }, i) => {
+        (
+          {
+            start: startTime,
+            end: endTime,
+            label: durationLabel,
+            color: durationColor,
+          },
+          i
+        ) => {
           const startX =
             ((startTime - visibleTimeStart) / visibleDuration) * width
           const endX = ((endTime - visibleTimeStart) / visibleDuration) * width
 
           if (endX < 0) return null
           if (isNaN(startX) || isNaN(endX)) return null
+          console.log({ durationColor, color })
 
           return (
             <Box
               key={i}
-              color={color}
+              color={durationColor || color}
               x={startX}
               width={endX - startX}
               onClick={() => onClickBox(i)}
@@ -92,9 +102,11 @@ export const DurationBox = ({
           )
         }
       )}
-      {label && (
+      {(label || (isMiscLayer && durations.length === 0)) && (
         <Label colors={colors} key="label">
-          {label}
+          {isMiscLayer && durations.length === 0
+            ? "click to create durations"
+            : label}
         </Label>
       )}
     </Container>

src/components/DurationBox/index.stories.js renamed to src/components/DurationBoxes/index.stories.js

@@ -2,7 +2,7 @@ import React, { useState } from "react"
 import { styled } from "@material-ui/core/styles"
 import useTimeRange from "../../hooks/use-time-range.js"
 import ControllableWave from "../ControllableWave"
-import DurationBox from "../DurationBox"
+import DurationBoxes from "../DurationBoxes"
 import useEventCallback from "use-event-callback"
 import { setIn, getIn } from "seamless-immutable"
 import useColors from "../../hooks/use-colors"
@@ -74,14 +74,15 @@ export const MainLayout = ({
     )
   })
   const onDragDurationEnd = useEventCallback(() => {
+    setSelectedDurationIndex(draggedDurationIndex)
     setDraggedDurationIndex(null)
   })
   const onCreateTimestamp = useEventCallback((time) => {
     onChangeTimestamps(
       timestamps.concat([
         {
           time,
-          color: "#f00",
+          color: "#888",
         },
       ])
     )
@@ -164,7 +165,7 @@ export const MainLayout = ({
       />
       {durationGroups.map((dg, i) => {
         return (
-          <DurationBox
+          <DurationBoxes
             onClick={() => setActiveDurationGroup(i)}
             onClickBox={(di) => {
               setSelectedDurationIndex(di)
@@ -176,6 +177,7 @@ export const MainLayout = ({
             color={dg.color}
             width={width}
             label={dg.label}
+            isMiscLayer={dg.misc}
             durations={dg.durations}
             visibleTimeStart={visibleTimeStart}
             visibleTimeEnd={visibleTimeEnd}

src/components/MainLayout/index.js

@@ -13,7 +13,7 @@ const userSelectOffStyle = {
 
 const Container = styled("div")({})
 
-const reduceForVisibleDuration = (data, startTime, visibleDuration) => {
+const reduceForVisibleDuration = (data, startTime, visibleDuration, width) => {
   const firstInnerIndex = data.findIndex(([t]) => t >= startTime)
   let visibleSamples = data
     .slice(firstInnerIndex)
@@ -24,7 +24,7 @@ const reduceForVisibleDuration = (data, startTime, visibleDuration) => {
 
   data = data.slice(Math.max(0, firstInnerIndex - 1), lastInnerIndex + 1)
 
-  const minDistance = visibleDuration / 200
+  const minDistance = visibleDuration / (width / 4)
   const points = [data[0]]
   let lastAddedPointIndex = 0
   for (let i = 1; i < data.length; i++) {
@@ -143,7 +143,7 @@ export const Wave = ({
               />
             )
           })}
-        {durationGroups.flatMap(({ durations, color }, dgi) => {
+        {durationGroups.flatMap(({ durations, color: dgColor }, dgi) => {
           return durations.map((duration, di) => {
             const { x: startX } = transformMatrix.applyToPoint(
               duration.start,
@@ -154,7 +154,7 @@ export const Wave = ({
             return (
               <rect
                 key={`${dgi},${di}`}
-                fill={colorAlpha(color, 0.2)}
+                fill={colorAlpha(duration.color || dgColor, 0.2)}
                 x={startX}
                 y={0}
                 width={endX - startX}
@@ -171,7 +171,8 @@ export const Wave = ({
             points={reduceForVisibleDuration(
               curve.data,
               startTimeOnGraph,
-              visibleDuration
+              visibleDuration,
+              width
             )
               .map(([t, y]) => {
                 const p = transformMatrix.applyToPoint(t, y)

src/components/Wave/index.js

@@ -15,7 +15,7 @@ const colorsToCycle = [
 export default () => {
   const themeColors = useColors()
   return useEventCallback((label) => {
-    if (!label) return colorsToCycle[0]
+    if (!label) return themeColors.fg
     let hashNumber = 0
     for (let i = 0; i < label.length; i++) {
       hashNumber += label.charCodeAt(i)