make surface system in graph optional

Author: chfin

annotation-tool/src/App/Tabs/SVG.purs

@@ -13,6 +13,7 @@ import Effect.Class (class MonadEffect)
 import Halogen as H
 import Halogen.HTML as HH
 import Halogen.HTML.Core as HC
+import Halogen.HTML.Events as HE
 import Halogen.HTML.Properties as HP
 import Halogen.Query.Input (Input(..))
 import Halogen.Svg.Attributes as SA
@@ -38,11 +39,13 @@ type SVGInput = { modelInfo :: ModelInfo, settings :: AppSettings }
 data SVGAction
   = SVGRegisterElt Element
   | SVGReceive SVGInput
+  | SVGToggleSurface
 
 type SVGState =
   { scoreElt :: Maybe Element
   , modelInfo :: ModelInfo
   , settings :: AppSettings
+  , showSurface :: Boolean
   }
 
 svgComponent
@@ -58,35 +61,53 @@ svgComponent = H.mkComponent
       }
   }
   where
-  initialState { modelInfo, settings } = { modelInfo, settings, scoreElt: Nothing }
+  initialState { modelInfo, settings } = { modelInfo, settings, scoreElt: Nothing, showSurface: true }
 
-  render { modelInfo, settings } = HH.div [ class_ "wide" ]
-    [ svgContainer settings modelInfo ]
+  render :: SVGState -> _
+  render { modelInfo, settings, showSurface } = HH.div_
+    [ HH.div [ class_ "content-np tab pure-form pure-g" ]
+        [ HH.div [ class_ "pure-u-3-4" ]
+            [ HH.input
+                [ HP.type_ $ HP.InputCheckbox
+                , HP.checked showSurface
+                , HE.onChange \_ -> SVGToggleSurface
+                , HP.id "showSurface"
+                ]
+            , HH.label [ HP.for "showSurface" ] [ HH.text " show full surface below graph" ]
+            ]
+        ]
+    , HH.div [ class_ "wide" ]
+        [ svgContainer settings showSurface modelInfo ]
+    ]
 
   handleSVGAction action = do
     case action of
-      SVGRegisterElt elt -> do
+      SVGRegisterElt elt ->
         H.modify_ \st -> st { scoreElt = Just elt }
       SVGReceive { modelInfo, settings } ->
         H.modify_ \st -> st { modelInfo = modelInfo, settings = settings }
+      SVGToggleSurface ->
+        H.modify_ \st -> st { showSurface = not st.showSurface }
     redrawGraph
 
 svgContainer
   :: forall p
    . AppSettings
+  -> Boolean
   -> ModelInfo
   -> HH.HTML p SVGAction
-svgContainer sett { model, graph } =
+svgContainer sett showSurface { model, graph } =
   let
     isComplete = L.length model.reduction.segments == 1
     width = scalex sett (graph.maxx + 1.0) + sliceDistance / 2.0
     staff = model.styles.staff
     systemHeight = if staff == GrandStaff then scoreHeightGrand else scoreHeightSingle
     extraRows = if isComplete then 0.0 else 1.0
-    height = systemHeight * (graph.maxd + 1.0 + extraRows) + axisHeight
+    surfaceRows = if showSurface then 1.0 else 0.0
+    height = systemHeight * (graph.maxd + surfaceRows + extraRows) + axisHeight
   in
     HH.div
-      [ HP.style "overflow: scroll; position: relative; left: 50%; transform: translateX(-50%); width: auto;"
+      [ HP.style "overflow: scroll;"
       ]
       [ SE.svg
           [ SA.width width
@@ -105,7 +126,7 @@ svgContainer sett { model, graph } =
 
 redrawGraph :: forall o m s. (MonadEffect m) => H.HalogenM SVGState SVGAction s o m Unit
 redrawGraph = do
-  { modelInfo: { model, graph, surface }, settings, scoreElt } <- H.get
+  { modelInfo: { model, graph, surface }, settings, scoreElt, showSurface } <- H.get
   case scoreElt of
     Nothing -> pure unit
     Just elt ->
@@ -114,4 +135,4 @@ redrawGraph = do
         toX x = scalex settings x -- - (noteSize / 2.0)
       in
         H.liftEffect $ do
-          insertScore elt $ renderGraph graph model.piece surface model.styles Nothing Nothing toX totalWidth scoreScale
+          insertScore elt $ renderGraph graph model.piece surface model.styles Nothing Nothing toX totalWidth scoreScale showSurface

model/src/ProtoVoices/RenderSVG.js

@@ -391,7 +391,7 @@ function drawTimeLabel(time, y) {
   return label;
 }
 
-export const drawGraph = (graph) => (totalWidth) => (scale) => {
+export const drawGraph = (graph) => (totalWidth) => (scale) => (showScore) => {
   // The graph is drawn in several steps:
   // - create a container element, add marker defs and CSS
   // - add a separator element to be able to sort element into foreground and background
@@ -475,13 +475,17 @@ export const drawGraph = (graph) => (totalWidth) => (scale) => {
   });
 
   // draw score
-  let score = drawScore(graph.surfaceSlices)(graph.surfaceTransitions)(graph.styles.staffType)(totalWidth)(scale);
-  score.setAttribute(
-    "transform",
-    `translate(0 ${(graph.maxd - minLevel + 1) * levelOffset})`,
-  );
-  graphContainer.appendChild(score);
-  let yoff = (graph.maxd - minLevel + 2) * levelOffset + 20;
+  if (showScore) {
+    let score = drawScore(graph.surfaceSlices)(graph.surfaceTransitions)(graph.styles.staffType)(totalWidth)(scale);
+    score.setAttribute(
+      "transform",
+      `translate(0 ${(graph.maxd - minLevel + 1) * levelOffset})`,
+    );
+    graphContainer.appendChild(score);
+  }
+
+  // draw time labels
+  let yoff = (graph.maxd - minLevel + (showScore ? 2 : 1)) * levelOffset + 20;
   graph.times.forEach((time) => {
     graphContainer.appendChild(drawTimeLabel(time, yoff));
   });

model/src/ProtoVoices/RenderSVG.purs

@@ -79,8 +79,9 @@ foreign import drawGraph
      , select :: Nullable (Nullable SelectionInfo -> Effect Unit)
      , styles :: StylesJSON
      }
-  -> Number
-  -> Number
+  -> Number -- | total width
+  -> Number -- | scaling
+  -> Boolean -- | show score?
   -> DOMScore
 
 renderGraph
@@ -93,6 +94,7 @@ renderGraph
   -> (Number -> Number)
   -> Number
   -> Number
+  -> Boolean
   -> DOMScore
 renderGraph graph piece surface styles selection selectCallback toX = drawGraph
   { slices: A.fromFoldable $ mkGraphSlice <$> M.values graph.slices

viewer/src/Common.purs

@@ -32,6 +32,7 @@ data ViewerAction
   | ToggleInner
   | ToggleOuter
   | ToggleScore
+  | ToggleSurface
   | SetXScale String
   | SetYScale String
 
@@ -43,6 +44,7 @@ type AppSettings =
   , showInner :: Boolean
   , showOuter :: Boolean
   , showScore :: Boolean
+  , showSurface :: Boolean
   }
 
 defaultSettings :: AppSettings
@@ -54,6 +56,7 @@ defaultSettings =
   , showInner: false
   , showOuter: false
   , showScore: true
+  , showSurface: true
   }
 
 readOptions :: F.Foreign -> AppSettings
@@ -65,6 +68,7 @@ readOptions obj =
   , showInner: fromRight defaultSettings.showInner $ runExcept $ obj FI.! "showInner" >>= F.readBoolean
   , showOuter: fromRight defaultSettings.showOuter $ runExcept $ obj FI.! "showOuter" >>= F.readBoolean
   , showScore: fromRight defaultSettings.showScore $ runExcept $ obj FI.! "showScore" >>= F.readBoolean
+  , showSurface: fromRight defaultSettings.showSurface $ runExcept $ obj FI.! "showSurface" >>= F.readBoolean
   }
 
 type Selection = Maybe { note :: Note, expl :: NoteExplanation }

viewer/src/Main.purs

@@ -202,14 +202,26 @@ viewerComponent prefix { listener, emitter } =
                           ]
                       , HH.label [ HP.for $ prefix <> "showInnerGraph" ] [ HH.text "show inner graph" ]
                       ]
-                  , HH.div [ class_ "pv-control-box" ]
-                      [ HH.input
-                          [ HP.type_ $ HP.InputCheckbox
-                          , HP.checked st.settings.showScore
-                          , HE.onChange \_ -> ToggleScore
-                          , HP.id $ prefix <> "showScore"
+                  , HH.div [ class_ "pure-g" ]
+                      [ HH.div [ class_ "pure-u-1-2 pv-control-box" ]
+                          [ HH.input
+                              [ HP.type_ $ HP.InputCheckbox
+                              , HP.checked st.settings.showScore
+                              , HE.onChange \_ -> ToggleScore
+                              , HP.id $ prefix <> "showScore"
+                              ]
+                          , HH.label [ HP.for $ prefix <> "showScore" ] [ HH.text "show score" ]
+                          ]
+                      , HH.div [ class_ "pure-u-1-2 pv-control-box" ]
+                          [ HH.input
+                              [ HP.type_ $ HP.InputCheckbox
+                              , HP.checked st.settings.showSurface
+                              , HP.enabled st.settings.showScore
+                              , HE.onChange \_ -> ToggleSurface
+                              , HP.id $ prefix <> "showSurface"
+                              ]
+                          , HH.label [ HP.for $ prefix <> "showSurface" ] [ HH.text "show surface below graph" ]
                           ]
-                      , HH.label [ HP.for $ prefix <> "showScore" ] [ HH.text "show score" ]
                       ]
                   , HH.div [ class_ "pv-control-box" ]
                       [ HH.input
@@ -280,6 +292,9 @@ viewerComponent prefix { listener, emitter } =
     ToggleInner -> H.modify_ \st -> st { settings { showInner = not st.settings.showInner } }
     ToggleOuter -> H.modify_ \st -> st { settings { showOuter = not st.settings.showOuter } }
     ToggleScore -> H.modify_ \st -> st { settings { showScore = not st.settings.showScore } }
+    ToggleSurface -> do
+      H.modify_ \st -> st { settings { showSurface = not st.settings.showSurface } }
+      redrawScore
     SetXScale s -> case fromString s of
       Nothing -> pure unit
       Just n -> do
@@ -304,5 +319,5 @@ redrawScore = do
           HS.notify st.eventListener $ Select sel
         toX x = scalex st.settings x -- - (noteSize / 2.0)
       pure $ H.liftEffect $ do
-        insertScore scoreElt $ renderGraph graph model.piece surface model.styles st.selected (Just select) toX totalWidth scoreScale
+        insertScore scoreElt $ renderGraph graph model.piece surface model.styles st.selected (Just select) toX totalWidth scoreScale st.settings.showSurface
   fromMaybe (pure unit) update

viewer/src/Render.purs

@@ -455,14 +455,11 @@ renderScoreSVG sett graph isComplete staffType =
     -- <> (A.mapWithIndex (renderTime sett ((graph.maxd + 1.0 + extraRows) * systemHeight)) piece)
     ]
   where
-
   width = scalex sett (graph.maxx + 1.0) + sliceWidth / 2.0
-
   systemHeight = if staffType == GrandStaff then scoreHeightGrand else scoreHeightSingle
-
   extraRows = if isComplete then 0.0 else 1.0
-
-  height = systemHeight * (graph.maxd + 1.0 + extraRows) + axisHeight
+  surfaceRows = if sett.showSurface then 1.0 else 0.0
+  height = systemHeight * (graph.maxd + surfaceRows + extraRows) + axisHeight
 
 renderReduction :: forall p. AppSettings -> Graph -> Selection -> HH.HTML p ViewerAction
 renderReduction sett graph selection =