diff --git a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/MarkerDot.tsx b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/MarkerDot.tsx index 6bc9be8..d62eaaa 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/MarkerDot.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/MarkerDot.tsx @@ -19,7 +19,6 @@ import type {SequenceEditorPanelLayout} from '@theatre/studio/panels/SequenceEdi import type {SequenceMarkerId} from '@theatre/shared/utils/ids' import type {SheetAddress} from '@theatre/shared/utils/addresses' import SnapCursor from './SnapCursor.svg' -import MarkerDotVisual from './MarkerDotVisual.svg' import useDrag from '@theatre/studio/uiComponents/useDrag' import type {UseDragOpts} from '@theatre/studio/uiComponents/useDrag' import type {CommitOrDiscard} from '@theatre/studio/StudioStore/StudioStore' @@ -27,8 +26,8 @@ import type {StudioHistoricStateSequenceEditorMarker} from '@theatre/studio/stor import {zIndexes} from '@theatre/studio/panels/SequenceEditorPanel/SequenceEditorPanel' import DopeSnap from './DopeSnap' -const MARKER_SIZE_W_PX = 10 -const MARKER_SIZE_H_PX = 8 +const MARKER_SIZE_W_PX = 12 +const MARKER_SIZE_H_PX = 12 const HIT_ZONE_SIZE_PX = 12 const SNAP_CURSOR_SIZE_PX = 34 const MARKER_HOVER_SIZE_W_PX = MARKER_SIZE_W_PX * 2 @@ -47,15 +46,32 @@ const MarkerDotContainer = styled.div` z-index: ${() => zIndexes.marker}; ` -const MarkerVisualDot = styled.div` +const MarkerVisualDotSVGContainer = styled.div` position: absolute; ${dims(MARKER_SIZE_W_PX, MARKER_SIZE_H_PX)} - - background-image: url(${MarkerDotVisual}); - background-size: contain; pointer-events: none; ` +// Attempted to optimize via memo + inline svg rather than background-url +const MarkerVisualDot = React.memo(() => ( + + + + } + /> +)) + const HitZone = styled.div` position: absolute; ${dims(HIT_ZONE_SIZE_PX)}; @@ -97,7 +113,10 @@ const HitZone = styled.div` pointer-events: none !important; } - &:hover + ${MarkerVisualDot}, &.beingDragged + ${MarkerVisualDot} { + &:hover + + ${MarkerVisualDotSVGContainer}, + &.beingDragged + + ${MarkerVisualDotSVGContainer} { ${dims(MARKER_HOVER_SIZE_W_PX, MARKER_HOVER_SIZE_H_PX)} } ` diff --git a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/MarkerDotVisual.svg b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/MarkerDotVisual.svg deleted file mode 100644 index 08008bd..0000000 --- a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/MarkerDotVisual.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - -