♻️ Add CardSize model

frontend/src/elm/Api/Graphql/Selection.elm

@@ -16,9 +16,11 @@ import Graphql.SelectionSet as SelectionSet exposing (SelectionSet, hardcoded, w
 import Graphql.Union
 import Graphql.Union.DiagramItem
 import Models.Color as Color
+import Models.Diagram.CardSize as CardSize
 import Models.Diagram.Id as DiagramId
 import Models.Diagram.Item as DiagramItem exposing (DiagramItem)
 import Models.Diagram.Location as DiagramLocation
+import Models.Diagram.Scale as Scale
 import Models.Diagram.Settings as DiagramSettings
 import Models.Diagram.Type as DiagramType
 import Models.Text as Text
@@ -90,7 +92,7 @@ settingsSelection : SelectionSet DiagramSettings.Settings Graphql.Object.Setting
 settingsSelection =
     SelectionSet.succeed DiagramSettings.Settings
         |> with Graphql.Object.Settings.font
-        |> with (SelectionSet.map2 (\w h -> { width = w, height = h }) Graphql.Object.Settings.width Graphql.Object.Settings.height)
+        |> with (SelectionSet.map2 (\w h -> { width = CardSize.fromInt w, height = CardSize.fromInt h }) Graphql.Object.Settings.width Graphql.Object.Settings.height)
         |> with
             (SelectionSet.succeed DiagramSettings.ColorSettings
                 |> with (Graphql.Object.Settings.activityColor colorSelection)
@@ -102,7 +104,7 @@ settingsSelection =
             )
         |> with (SelectionSet.map Color.fromString Graphql.Object.Settings.backgroundColor)
         |> with Graphql.Object.Settings.zoomControl
-        |> with Graphql.Object.Settings.scale
+        |> with (SelectionSet.map (Maybe.map Scale.fromFloat) Graphql.Object.Settings.scale)
         |> with Graphql.Object.Settings.toolbar
 
 

frontend/src/elm/Components/Diagram.elm

@@ -53,6 +53,7 @@ import Models.Color as Color
 import Models.Diagram as Diagram exposing (DragStatus(..), Model, Msg(..), SelectedItem, dragStart)
 import Models.Diagram.BackgroundImage as BackgroundImage
 import Models.Diagram.BusinessModelCanvas as BusinessModelCanvasModel
+import Models.Diagram.CardSize as CardSize
 import Models.Diagram.Data as DiagramData
 import Models.Diagram.ER as ErDiagramModel
 import Models.Diagram.EmpathyMap as EmpathyMapModel
@@ -122,7 +123,7 @@ init settings =
         , windowSize = Size.zero
         , diagram =
             { size = Size.zero
-            , scale = Scale.fromFloat <| Maybe.withDefault 1.0 settings.scale
+            , scale = Maybe.withDefault Scale.default settings.scale
             , position = ( 0, 20 )
             , isFullscreen = False
             }
@@ -1406,7 +1407,7 @@ svgView model centerPosition (( svgWidth, svgHeight ) as svgSize) mainSvg =
                             )
 
                     ( _, h ) =
-                        Item.getSize item_ ( model.settings.size.width, model.settings.size.height )
+                        Item.getSize item_ ( CardSize.toInt model.settings.size.width, CardSize.toInt model.settings.size.height )
 
                     pos : Position
                     pos =
@@ -1701,33 +1702,25 @@ zoomControl isFullscreen scale =
 
 zoomIn : Scale -> Model -> Return Msg Model
 zoomIn step model =
-    if Scale.toFloat model.diagram.scale <= 10.0 then
-        Return.singleton
-            { model
-                | diagram =
-                    { size = ( Size.getWidth model.diagram.size, Size.getHeight model.diagram.size )
-                    , scale = Scale.add model.diagram.scale step
-                    , position = model.diagram.position
-                    , isFullscreen = model.diagram.isFullscreen
-                    }
-            }
-
-    else
-        Return.singleton model
+    Return.singleton
+        { model
+            | diagram =
+                { size = ( Size.getWidth model.diagram.size, Size.getHeight model.diagram.size )
+                , scale = Scale.add model.diagram.scale step
+                , position = model.diagram.position
+                , isFullscreen = model.diagram.isFullscreen
+                }
+        }
 
 
 zoomOut : Scale -> Model -> Return Msg Model
 zoomOut step model =
-    if Scale.toFloat model.diagram.scale > 0.03 then
-        Return.singleton
-            { model
-                | diagram =
-                    { size = ( Size.getWidth model.diagram.size, Size.getHeight model.diagram.size )
-                    , scale = Scale.sub model.diagram.scale step
-                    , position = model.diagram.position
-                    , isFullscreen = model.diagram.isFullscreen
-                    }
-            }
-
-    else
-        Return.singleton model
+    Return.singleton
+        { model
+            | diagram =
+                { size = ( Size.getWidth model.diagram.size, Size.getHeight model.diagram.size )
+                , scale = Scale.sub model.diagram.scale step
+                , position = model.diagram.position
+                , isFullscreen = model.diagram.isFullscreen
+                }
+        }

frontend/src/elm/Effect/Diagram.elm

@@ -19,9 +19,11 @@ import Api.Request as Request
 import Api.RequestError exposing (RequestError)
 import Graphql.OptionalArgument as OptionalArgument
 import Models.Color as Color
+import Models.Diagram.CardSize as CardSize
 import Models.Diagram.Id as DiagramId exposing (DiagramId)
 import Models.Diagram.Item as DiagramItem exposing (DiagramItem)
 import Models.Diagram.Location as DiagramLocation
+import Models.Diagram.Scale as Scale
 import Models.Diagram.Settings as DiagramSettings
 import Models.Diagram.Type as DiagramType exposing (DiagramType)
 import Models.LoginProvider as LoginProvider
@@ -176,8 +178,8 @@ saveDiagramSettings msg { diagramType, session, settings } =
             (Session.getIdToken session)
             diagramType
             { font = settings.diagramSettings.font
-            , width = settings.diagramSettings.size.width
-            , height = settings.diagramSettings.size.height
+            , width = CardSize.toInt settings.diagramSettings.size.width
+            , height = CardSize.toInt settings.diagramSettings.size.height
             , backgroundColor = Color.toString settings.diagramSettings.backgroundColor
             , activityColor =
                 { foregroundColor = Color.toString settings.diagramSettings.color.activity.color
@@ -210,7 +212,7 @@ saveDiagramSettings msg { diagramType, session, settings } =
             , scale =
                 case settings.diagramSettings.scale of
                     Just s ->
-                        OptionalArgument.Present s
+                        OptionalArgument.Present <| Scale.toFloat s
 
                     Nothing ->
                         OptionalArgument.Absent

frontend/src/elm/Effect/Settings.elm

@@ -8,6 +8,7 @@ import Api.Request as Request
 import Api.RequestError exposing (RequestError)
 import Graphql.OptionalArgument as OptionalArgument
 import Models.Color as Color
+import Models.Diagram.Scale as Scale
 import Models.Diagram.Settings as DiagramSettings
 import Models.Diagram.Type as DiagramType exposing (DiagramType)
 import Models.Session as Session exposing (Session)
@@ -16,6 +17,7 @@ import Models.SettingsCache as SettingCache exposing (SettingsCache)
 import Ports
 import Return
 import Task
+import Models.Diagram.CardSize as CardSize
 
 
 load :
@@ -68,8 +70,8 @@ save msg { diagramType, session, settings } =
             (Session.getIdToken session)
             diagramType
             { font = settings.diagramSettings.font
-            , width = settings.diagramSettings.size.width
-            , height = settings.diagramSettings.size.height
+            , width = CardSize.toInt settings.diagramSettings.size.width
+            , height = CardSize.toInt settings.diagramSettings.size.height
             , backgroundColor = Color.toString settings.diagramSettings.backgroundColor
             , activityColor =
                 { foregroundColor = Color.toString settings.diagramSettings.color.activity.color
@@ -102,7 +104,7 @@ save msg { diagramType, session, settings } =
             , scale =
                 case settings.diagramSettings.scale of
                     Just s ->
-                        OptionalArgument.Present s
+                        OptionalArgument.Present <| Scale.toFloat s
 
                     Nothing ->
                         OptionalArgument.Absent

frontend/src/elm/Main.elm

@@ -1042,13 +1042,7 @@ update model message =
                     { position = Just model.window.position
                     , font = model.settingsModel.settings.font
                     , diagramId = model.currentDiagram.id
-                    , diagramSettings =
-                        DiagramSettings.ofScale.set
-                            (model.diagramModel.diagram.scale
-                                |> Scale.toFloat
-                                |> Just
-                            )
-                            newStoryMap.diagramSettings
+                    , diagramSettings = DiagramSettings.ofScale.set (Just model.diagramModel.diagram.scale) newStoryMap.diagramSettings
                     , text = Just model.diagramModel.text
                     , title = Just model.currentDiagram.title
                     , editor = model.settingsModel.settings.editor

frontend/src/elm/Models/Diagram/CardSize.elm

@@ -0,0 +1,35 @@
+module Models.Diagram.CardSize exposing (CardSize, decoder, encoder, fromInt, toInt)
+
+import Json.Decode as D exposing (Decoder)
+import Json.Encode as E
+
+
+type CardSize
+    = CardSize Int
+
+
+fromInt : Int -> CardSize
+fromInt width =
+    if width > 600 then
+        CardSize 600
+
+    else if width < 50 then
+        CardSize 50
+
+    else
+        CardSize width
+
+
+toInt : CardSize -> Int
+toInt (CardSize w) =
+    w
+
+
+decoder : Decoder CardSize
+decoder =
+    D.map fromInt D.int
+
+
+encoder : CardSize -> E.Value
+encoder width =
+    E.int <| toInt width

frontend/src/elm/Models/Diagram/FreeForm.elm

@@ -11,6 +11,7 @@ import Models.Diagram.Settings as DiagramSettings
 import Models.Item as Item exposing (Item, Items)
 import Models.Item.Settings as ItemSettings
 import Models.Size exposing (Size)
+import Models.Diagram.CardSize as CardSize
 
 
 type FreeForm
@@ -83,8 +84,8 @@ size settings freeForm =
                         ( offsetX, offsetY ) =
                             Item.getOffset item_
                     in
-                    ( 16 + (modBy 4 i + 1) * (settings.size.width + 32)
-                    , (i // 4 + 1) * (settings.size.height + 32)
+                    ( 16 + (modBy 4 i + 1) * (CardSize.toInt settings.size.width + 32)
+                    , (i // 4 + 1) * (CardSize.toInt settings.size.height + 32)
                     )
                         |> Tuple.mapBoth (\x -> x + offsetX) (\y -> y + offsetY)
                 )

frontend/src/elm/Models/Diagram/ImpactMap.elm

@@ -1,16 +1,17 @@
 module Models.Diagram.ImpactMap exposing (size)
 
+import Models.Diagram.CardSize as CardSize
 import Models.Diagram.Settings as DiagramSettings
 import Models.Item as Item exposing (Items)
 import Models.Size exposing (Size)
 
 
 size : DiagramSettings.Settings -> Items -> Int -> Size
 size settings items hierarchy =
-    ( (settings.size.width + 24) * ((hierarchy + 1) * 2) + 100
+    ( (CardSize.toInt settings.size.width + 24) * ((hierarchy + 1) * 2) + 100
     , case Item.head items of
         Just head ->
-            Item.getLeafCount head * (settings.size.height + 24) * 2
+            Item.getLeafCount head * (CardSize.toInt settings.size.height + 24) * 2
 
         Nothing ->
             0

frontend/src/elm/Models/Diagram/Kanban.elm

@@ -9,6 +9,7 @@ module Models.Diagram.Kanban exposing
     )
 
 import Constants
+import Models.Diagram.CardSize as CardSize
 import Models.Diagram.Settings as DiagramSettings
 import Models.Item as Item exposing (Item, Items)
 import Models.Size exposing (Size)
@@ -45,8 +46,8 @@ getCardCount (Kanban lists) =
 
 size : DiagramSettings.Settings -> Kanban -> Size
 size settings kanban =
-    ( getListCount kanban * (settings.size.width + Constants.itemMargin * 3)
-    , getCardCount kanban * (settings.size.height + Constants.itemMargin) + Constants.itemMargin * 2
+    ( getListCount kanban * (CardSize.toInt settings.size.width + Constants.itemMargin * 3)
+    , getCardCount kanban * (CardSize.toInt settings.size.height + Constants.itemMargin) + Constants.itemMargin * 2
     )
 
 

frontend/src/elm/Models/Diagram/MindMap.elm

@@ -1,16 +1,17 @@
 module Models.Diagram.MindMap exposing (size)
 
+import Models.Diagram.CardSize as CardSize
 import Models.Diagram.Settings as DiagramSettings
 import Models.Item as Item exposing (Items)
 import Models.Size exposing (Size)
 
 
 size : DiagramSettings.Settings -> Items -> Int -> Size
 size settings items hierarchy =
-    ( (settings.size.width * 2) * (hierarchy * 2) + (settings.size.width * 2)
+    ( (CardSize.toInt settings.size.width * 2) * (hierarchy * 2) + (CardSize.toInt settings.size.width * 2)
     , case Item.head items of
         Just head ->
-            Item.getLeafCount head * (settings.size.height + 24)
+            Item.getLeafCount head * (CardSize.toInt settings.size.height + 24)
 
         Nothing ->
             0

frontend/src/elm/Models/Diagram/Scale.elm

@@ -1,7 +1,9 @@
 module Models.Diagram.Scale exposing
     ( Scale
     , add
+    , decoder
     , default
+    , encoder
     , fromFloat
     , max
     , min
@@ -10,6 +12,9 @@ module Models.Diagram.Scale exposing
     , toFloat
     )
 
+import Json.Decode as D exposing (Decoder)
+import Json.Encode as E
+
 
 type Scale
     = Scale Float
@@ -66,3 +71,13 @@ sub (Scale a) (Scale b) =
 toFloat : Scale -> Float
 toFloat (Scale s) =
     s
+
+
+decoder : Decoder Scale
+decoder =
+    D.map fromFloat D.float
+
+
+encoder : Scale -> E.Value
+encoder scale =
+    E.float <| toFloat scale

frontend/src/elm/Models/Diagram/SequenceDiagram.elm

@@ -24,6 +24,7 @@ import Dict exposing (Dict)
 import Models.Diagram.Settings as DiagramSettings
 import Models.Item as Item exposing (Item, Items)
 import Models.Size exposing (Size)
+import Models.Diagram.CardSize as CardSize
 
 
 type alias AltMessage =
@@ -186,14 +187,14 @@ size settings sequenceDiagram =
         diagramHeight =
             messageCountAll sequenceDiagram
                 * Constants.messageMargin
-                + settings.size.height
+                + CardSize.toInt settings.size.height
                 * 4
                 + Constants.messageMargin
                 + 8
 
         diagramWidth : Int
         diagramWidth =
-            participantCount sequenceDiagram * (settings.size.width + Constants.participantMargin) + 8
+            participantCount sequenceDiagram * (CardSize.toInt settings.size.width + Constants.participantMargin) + 8
     in
     ( diagramWidth, diagramHeight )