drawio_dsl 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6af520857fe09be7e990c254d75364ae3c4f145e77beb8aaf1850c7e99954666
-  data.tar.gz: ed9f9debe4437765f426cb873cc226eb8721a89b2be257a30345122d59a25217
+  metadata.gz: 96f9176e2e3f9b37f0a02f462d075835aae641a43d14dc45c747a1434fcb17df
+  data.tar.gz: 07ef19170c1721bb9ebe7a58d9cc6d20ca000d620b555941c2e396d83a8b27e0
 SHA512:
-  metadata.gz: 13a320ccac8daefe68036dafe8982451e28cb1ba56dd0be1b22694106fee82aa4625e8eee214a8a0cecdff476a5b2b56b90b45a6bbf8df82c1a315d36ea18a57
-  data.tar.gz: 912a578341300d29b610fb053b5d4d98a161e7be9c1decd65b72af0398305a216d785245572b020b7463ad708ed74d6f7ddf936708175337eb6834f92611dcd8
+  metadata.gz: ccb338c21e1a14d55e0fb7965c05c014714e37081a1b2f365ea01168017d15327043255a23346dde6c7674419c5458ea9516411240108e5e5c4cb688b9210a9f
+  data.tar.gz: ab033223b347fa65e1e6e2ddb91d93085276052dd21685d5bd76db0c9cc0f92c1c0a2e5cade339f4e1f7a67569ee42153249d61ec6f15bdb8401e7b52d25d57b

data/.builders/generators/10-layout.rb

@@ -5,9 +5,22 @@ KManager.action :bootstrap do
         on_exist:                   :skip,                      # %i[skip write compare]
         on_action:                  :queue                      # %i[queue execute]
       )
+      .diagram(theme: :style_01)
+      .page('Grid-Right', page_shadow: 1) do
+        grid_layout(wrap_at: 3)
+        square(title: 'Square')
+        rectangle(title: 'Rectangle')
+        rectangle(title: 'Rectangle (Rounded)', rounded: 1)
+        circle(title: 'Circle')
+        process(title: 'Process')
+        ellipse(title: 'Ellipse')
+      end
 
-    File.write('spec/.samples/drawio/10-layout.xml', director.build)
-    File.write('spec/.samples/drawio/10-layout.drawio', director.build)
+    diagram = DrawioDsl::XmlBuilder.new(director.builder.diagram)
+
+
+    File.write('../spec/.samples/drawio/10-layout.xml', diagram.build)
+    File.write('../spec/.samples/drawio/10-layout.drawio', diagram.build)
   end
 end
 

data/.rubocop.yml

@@ -67,6 +67,10 @@ Naming/VariableNumber:
 Naming/MethodParameterName:
   AllowedNames:
     - as
+    - x
+    - y
+    - w
+    - h
 Style/EmptyMethod:    
   Exclude:
     - "**/spec/**/*"

data/CHANGELOG.md

@@ -1,3 +1,13 @@
+# [0.1.0](https://github.com/klueless-io/drawio_dsl/compare/v0.0.1...v0.1.0) (2022-03-02)
+
+
+### Features
+
+* initial draw-io dsl ([ac197c8](https://github.com/klueless-io/drawio_dsl/commit/ac197c88b66b883b5fcce93090c285bc9ccdb7a3))
+* initial draw-io dsl ([12c8b98](https://github.com/klueless-io/drawio_dsl/commit/12c8b98392e5f7da598cf2f9c375f1ca7041533b))
+* initial draw-io dsl ([6ef32ad](https://github.com/klueless-io/drawio_dsl/commit/6ef32adcb1287d9993ebe30c437326716357a08e))
+* initial draw-io dsl ([16827b5](https://github.com/klueless-io/drawio_dsl/commit/16827b57767d12c387167b86f17b33115d1d0378))
+
 ## [Unreleased]
 
 ## [0.1.0] - 2022-02-25

data/lib/drawio_dsl/configuration.rb

@@ -17,16 +17,16 @@ module DrawioDsl
 
     BaseStyle = Struct.new(:white_space, :html, :rounded, :shadow, :sketch, :glass, keyword_init: true)
 
-    ElementDefaults   = Struct.new(:type, :x, :y, :w, :h, :style_modifiers)
-    ElementThemeStyle = Struct.new(:fill_color, :stroke_color, :font_color, :gradient, keyword_init: true)
+    ShapeDefaults   = Struct.new(:type, :x, :y, :w, :h, :style_modifiers)
+    ShapeThemeStyle = Struct.new(:fill_color, :stroke_color, :font_color, :gradient, keyword_init: true)
 
     attr_accessor :base_style
 
     # Theme colors
     attr_accessor :themes
 
-    # Element shapes
-    attr_accessor :element
+    # Shape shapes
+    attr_accessor :shape
     attr_accessor :square
     attr_accessor :rectangle
     attr_accessor :circle
@@ -39,13 +39,13 @@ module DrawioDsl
     def initialize
       @base_style = BaseStyle.new(white_space: :wrap, html: 1, rounded: nil, shadow: nil, sketch: nil, glass: nil)
 
-      @element    = ElementDefaults.new(:element   , 0, 0, 20, 20, '')
-      @square     = ElementDefaults.new(:square    , 0, 0, 160, 160, '')
-      @rectangle  = ElementDefaults.new(:rectangle , 0, 0, 240, 120, '')
-      @circle     = ElementDefaults.new(:circle    , 0, 0, 160, 160, 'ellipse')
-      @process    = ElementDefaults.new(:process   , 0, 0, 240, 120, 'shape=process')
-      @ellipse    = ElementDefaults.new(:ellipse   , 0, 0, 240, 120, 'ellipse')
-      @triangle   = ElementDefaults.new(:triangle  , 0, 0, 160, 160, 'rhombus')
+      @shape      = ShapeDefaults.new(:shape   , 0, 0, 20, 20, '')
+      @square     = ShapeDefaults.new(:square    , 0, 0, 160, 160, '')
+      @rectangle  = ShapeDefaults.new(:rectangle , 0, 0, 200, 120, '')
+      @circle     = ShapeDefaults.new(:circle    , 0, 0, 160, 160, 'ellipse')
+      @process    = ShapeDefaults.new(:process   , 0, 0, 200, 120, 'shape=process')
+      @ellipse    = ShapeDefaults.new(:ellipse   , 0, 0, 200, 120, 'ellipse')
+      @triangle   = ShapeDefaults.new(:triangle  , 0, 0, 160, 160, 'rhombus')
 
       @themes     = {}
       add_themes
@@ -62,7 +62,7 @@ module DrawioDsl
     private
 
     def add_theme(name, **opts)
-      @themes[name] = ElementThemeStyle.new(**opts)
+      @themes[name] = ShapeThemeStyle.new(**opts)
     end
 
     # rubocop:disable Metrics/AbcSize, Metrics/MethodLength

data/lib/drawio_dsl/dom_builder.rb

@@ -7,7 +7,8 @@ module DrawioDsl
     attr_reader :last_action
 
     attr_reader :current_page
-    attr_reader :current_element
+    attr_reader :current_layout_rule
+    attr_reader :current_shape
 
     def initialize
       @actions = []
@@ -18,7 +19,7 @@ module DrawioDsl
       @actions = []
       @last_action = {}
       set_diagram
-      set_layout_engine
+      # set_layout_engine
     end
 
     def queue_action(action)
@@ -26,16 +27,6 @@ module DrawioDsl
       @last_action = action
     end
 
-    def set_layout_engine(**opts)
-      @layout_engine = DrawioDsl::LayoutEngine.new(**opts)
-    end
-
-    def layout_engine
-      return @layout_engine if defined? @layout_engine
-
-      set_layout_engine
-    end
-
     def set_diagram(**opts)
       @diagram = DrawioDsl::Schema::Diagram.new(**opts)
     end
@@ -55,40 +46,67 @@ module DrawioDsl
       @current_page
     end
 
-    def add_element(element)
-      @current_element = element
+    # ----------------------------------------------------------------------
+    # Layout provides rules for positioning components
+    # ----------------------------------------------------------------------
+
+    def add_grid_layout(**opts)
+      rule = DrawioDsl::Schema::GridLayout.new(current_page, **opts)
+      add_layout_rule(rule)
+    end
+
+    def add_flex_layout(**opts)
+      rule = DrawioDsl::Schema::FlexLayout.new(current_page, **opts)
+      add_layout_rule(rule)
+    end
+
+    def add_layout_rule(rule)
+      @current_layout_rule = rule
+
+      rule.id = "rule-#{current_page.nodes.length + 1}" unless rule.id
+
+      current_page.nodes << rule
+
+      rule
+    end
+
+    # ----------------------------------------------------------------------
+    # Shapes represent visual components
+    # ----------------------------------------------------------------------
+
+    def add_shape(shape)
+      @current_shape = shape
 
-      element.id = "#{current_page.id}-#{current_page.elements.length + 1}" unless element.id
+      shape.id = "#{current_page.id}-#{current_page.nodes.length + 1}" unless shape.id
 
-      layout_engine.container.place_element(element)
+      current_page.nodes << shape
 
-      current_page.elements << element
-      @current_element
+      shape
     end
 
     def add_square(**opts)
       square = DrawioDsl::Schema::Square.new(current_page, **opts)
-      add_element(square)
+      add_shape(square)
     end
 
     def add_rectangle(**opts)
       rectangle = DrawioDsl::Schema::Rectangle.new(current_page, **opts)
-      add_element(rectangle)
+      add_shape(rectangle)
     end
 
     def add_circle(**opts)
       circle = DrawioDsl::Schema::Circle.new(current_page, **opts)
-      add_element(circle)
+      add_shape(circle)
     end
 
     def add_process(**opts)
       process = DrawioDsl::Schema::Process.new(current_page, **opts)
-      add_element(process)
+      add_shape(process)
     end
 
     def add_ellipse(**opts)
       ellipse = DrawioDsl::Schema::Ellipse.new(current_page, **opts)
-      add_element(ellipse)
+      add_shape(ellipse)
     end
 
     def debug

data/lib/drawio_dsl/drawio.rb

@@ -5,12 +5,6 @@ module DrawioDsl
   class Drawio < KDirector::Directors::BaseDirector
     default_builder_type(DrawioDsl::DomBuilder)
 
-    def layout(**opts)
-      builder.set_layout_engine(**opts)
-
-      self
-    end
-
     def diagram(**opts)
       builder.set_diagram(**opts)
 
@@ -23,6 +17,13 @@ module DrawioDsl
 
       self
     end
+
+    def apply_layout
+      engine = DrawioDsl::LayoutEngine.new(builder.diagram)
+      engine.call
+
+      self
+    end
   end
 
   # DrawioDsl::DrawioPage is created when you call .page on the draw-io DSL.
@@ -41,63 +42,42 @@ module DrawioDsl
       builder.add_page(**opts)
     end
 
+    def layout_rule(**opts)
+      builder.add_layout_rule(**opts)
+    end
+
+    def grid_layout(**opts)
+      builder.add_grid_layout(**opts)
+    end
+
+    def flex_layout(**opts)
+      builder.add_flex_layout(**opts)
+    end
+
     def square(**opts)
-      opts = attach_xy(**opts)
       builder.add_square(**opts)
-      update_layout
     end
 
     def rectangle(**opts)
-      opts = attach_xy(**opts)
       builder.add_rectangle(**opts)
-      update_layout
     end
 
     def circle(**opts)
-      opts = attach_xy(**opts)
       builder.add_circle(**opts)
-      update_layout
     end
 
     def process(**opts)
-      opts = attach_xy(**opts)
       builder.add_process(**opts)
-      update_layout
     end
 
     def ellipse(**opts)
-      opts = attach_xy(**opts)
       builder.add_ellipse(**opts)
-      update_layout
     end
 
     private
 
-    def current_element
-      builder.current_element
-    end
-
-    # attr_reader :layout_engine
-    # set_layout
-
-    # layout.container.place_element(element)
-
-    def update_layout
-      return unless auto_layout
-
-      # puts current_element.page.x
-      # puts current_element.page.y
-      # puts current_element.page.w
-      # puts current_element.page.h
-
-      @current_x += current_element.w + 20
-      @current_y += current_element.h + 20
-    end
-
-    def attach_xy(**opts)
-      opts[:x] ||= current_x
-      opts[:y] ||= current_y
-      opts
+    def current_shape
+      builder.current_shape
     end
   end
 end

data/lib/drawio_dsl/layout_engine.rb

@@ -9,39 +9,51 @@ module DrawioDsl
   # Elements will be placed on the page in the order they are added.
   # Row/column flow objects will hold information about horizontal and vertical element padding
   class LayoutEngine
-    attr_accessor :margin_left
-    attr_accessor :margin_top
-    attr_accessor :x
-    attr_accessor :y
-
-    def initialize(**opts)
-      @margin_left = opts[:margin_left] || 20
-      @margin_top  = opts[:margin_top]  || 20
-      @x           = opts[:x]           || @margin_left
-      @y           = opts[:y]           || @margin_top
+    attr_reader :diagram
+
+    attr_reader :current_page
+    attr_reader :current_layout
+    attr_reader :page_margin_top
+    attr_reader :page_margin_left
+    attr_reader :x
+    attr_reader :y
+
+    def initialize(diagram)
+      @diagram = diagram
+      @x = 0
+      @y = 0
     end
 
-    def container
-      @container ||= LayoutContainer.new(self)
-    end
-
-    def go_vertical(**opts)
-      @container = LayoutContainer.new(self, direction: :vertical, **opts)
-    end
+    def call
+      diagram.pages.each do |page|
+        focus_on_page(page)
 
-    def go_horizontal(**opts)
-      @container = LayoutContainer.new(self, direction: :horizontal, **opts)
+        apply_layout_to_page(page)
+      end
     end
 
-    # # Position the incoming element by altering it's x, y coordinates based on the rules engine
-    # def position_element(element)
-    #   container.horizontal?
-    # end
+    private
 
-    # private
+    def focus_on_page(page)
+      @current_page   = page
+      page.position_x = page.margin_left
+      page.position_y = page.margin_top
+    end
 
-    # def position_horizontally(element)
+    def apply_layout_to_page(page)
+      page.nodes.each do |node|
+        case node.classification
+        when :layout_rule
+          @current_layout = node
+        when :shape
+          current_layout.position_shape(node)
+        end
+        node.debug(format: :row)
+      end
+    end
 
-    # end
+    def define_layout_rule(layout_rule)
+      layout_rule.debug
+    end
   end
 end

data/lib/drawio_dsl/schema.rb

@@ -2,12 +2,12 @@
 
 module DrawioDsl
   module Schema
-    # Common Style is the reused on Diagram, Page and Element
+    # Common Style is the reused on Diagram, Page and Shape
     #
     # When styles are not provided at each level, then they will inherit from
     # the parent common style.
     #
-    # Elements will use the common style of their page
+    # Shapes will use the common style of their page
     class CommonStyle
       attr_accessor :theme
       attr_accessor :white_space
@@ -76,7 +76,7 @@ module DrawioDsl
 
       # rubocop:disable Metrics/AbcSize, Metrics/CyclomaticComplexity, Metrics/PerceivedComplexity
       def initialize(**args)
-        @host = args[:host] || SecureRandom.alphanumeric(3)
+        @host = args[:host]   || SecureRandom.alphanumeric(3)
 
         # Apply a random theme to the diagram if none is specified.
         @theme = args[:theme] || KConfig.configuration.drawio.random_theme
@@ -85,22 +85,22 @@ module DrawioDsl
           default_style = KConfig.configuration.drawio.base_style
 
           # Inherit from configured style when specific style not specified.
-          @white_space ||= default_style.white_space
-          @html ||= default_style.html
-          @rounded ||= default_style.rounded
-          @shadow ||= default_style.shadow
-          @sketch ||= default_style.sketch
-          @glass ||= default_style.glass
+          @white_space  ||= default_style.white_space
+          @html         ||= default_style.html
+          @rounded      ||= default_style.rounded
+          @shadow       ||= default_style.shadow
+          @sketch       ||= default_style.sketch
+          @glass        ||= default_style.glass
         end
 
         @palette = DrawioDsl::Schema::DefaultPalette.new(self, **args) do |diagram|
           theme_palette = KConfig.configuration.drawio.palette(diagram.theme)
 
           # Inherit from theme when specific palette options are not specified.
-          @fill_color ||= theme_palette.fill_color
+          @fill_color   ||= theme_palette.fill_color
           @stroke_color ||= theme_palette.stroke_color
-          @font_color ||= theme_palette.font_color
-          @gradient ||= theme_palette.gradient
+          @font_color   ||= theme_palette.font_color
+          @gradient     ||= theme_palette.gradient
         end
 
         @pages = args[:pages] || []
@@ -118,16 +118,22 @@ module DrawioDsl
       end
     end
 
-    # Page is a container for elements
+    # Page is a container for nodes
     class Page
       attr_accessor :diagram
 
+      # These transient attributes hold the current x, y location for the last element added to the page
+      attr_accessor :position_x
+      attr_accessor :position_y
+
       attr_accessor :id
       attr_accessor :name
       attr_accessor :theme
       attr_accessor :style
       attr_accessor :palette
-      attr_accessor :elements
+      attr_accessor :margin_left
+      attr_accessor :margin_top
+      attr_accessor :nodes
 
       # attr_accessor :dx              # dx         = "2636"
       # attr_accessor :dy              # dy         = "2332"
@@ -150,9 +156,14 @@ module DrawioDsl
       def initialize(diagram, **args)
         @diagram = diagram
 
+        @position_x   = 0
+        @position_y   = 0
+
         @id           = args[:id]
         @name         = args[:name]
         @theme        = args[:theme]        || diagram.theme
+        @margin_left  = args[:margin_left]  || 50
+        @margin_top   = args[:margin_top]   || 50
 
         @grid         = args[:grid]         || 0
         @grid_size    = args[:grid_size]    || 10
@@ -171,25 +182,25 @@ module DrawioDsl
 
         @style = DrawioDsl::Schema::CommonStyle.new(**args) do
           # Inherit from the diagram style when specific style not specified.
-          @white_space ||= diagram.style.white_space
-          @html ||= diagram.style.html
-          @rounded ||= diagram.style.rounded
-          @shadow ||= diagram.style.shadow
-          @sketch ||= diagram.style.sketch
-          @glass ||= diagram.style.glass
+          @white_space  ||= diagram.style.white_space
+          @html         ||= diagram.style.html
+          @rounded      ||= diagram.style.rounded
+          @shadow       ||= diagram.style.shadow
+          @sketch       ||= diagram.style.sketch
+          @glass        ||= diagram.style.glass
         end
 
         @palette = DrawioDsl::Schema::DefaultPalette.new(self, **args) do |page|
           theme_palette = KConfig.configuration.drawio.palette(page.theme)
 
           # Inherit from theme when specific palette options are not specified.
-          @fill_color ||= theme_palette.fill_color
+          @fill_color   ||= theme_palette.fill_color
           @stroke_color ||= theme_palette.stroke_color
-          @font_color ||= theme_palette.font_color
-          @gradient ||= theme_palette.gradient
+          @font_color   ||= theme_palette.font_color
+          @gradient     ||= theme_palette.gradient
         end
 
-        @elements = args[:elements] || []
+        @nodes = args[:nodes] || []
       end
       # rubocop:enable Metrics/AbcSize, Metrics/CyclomaticComplexity, Metrics/PerceivedComplexity, Metrics/MethodLength
 
@@ -200,15 +211,254 @@ module DrawioDsl
           theme: theme,
           palette: palette.to_h,
           style: style.to_h,
-          elements: elements.map(&:to_h)
+          margin_left: margin_left,
+          margin_top: margin_top,
+          position_x: position_x,
+          position_y: position_y,
+          nodes: nodes.map(&:to_h)
         }
       end
     end
 
-    # Element is a graphical element, it can be a shape, a text, or a group (todo)
-    class Element
+    # Node is a base for shapes, connections, positioners and layout rules
+    class Node
+      attr_accessor :id
       attr_accessor :page
+      attr_accessor :classification
+
+      def initialize(page, **args)
+        @page = page
+        @id = args[:id]
+        @classification = args[:classification] || :unknown
+      end
+
+      def to_h
+        {
+          id: id,
+          classification: classification
+        }
+      end
+
+      def debug(format: :detail)
+        if format == :detail
+          debug_detail(to_h)
+        else
+          debug_row(classification, id)
+        end
+      end
+
+      def debug_detail(**key_values)
+        key_values.each do |key, value|
+          puts "#{key.to_s.ljust(15)}: #{value}"
+        end
+      end
+
+      # rubocop:disable Metrics/AbcSize, Metrics/ParameterLists
+      def debug_row(classification, id, type = nil, x = nil, y = nil, width = nil, height = nil)
+        row = []
+        row << classification.to_s.ljust(11)
+        row << id.to_s.ljust(6)
+        row << (type.nil? ? '' : type).to_s.ljust(15)
+        row << (x.nil? ? '' : x).to_s.rjust(5)
+        row << (y.nil? ? '' : y).to_s.rjust(5)
+        row << (width.nil? ? '' : width).to_s.rjust(5)
+        row << (height.nil? ? '' : height).to_s.rjust(5)
+        puts row.join(' | ')
+      end
+      # rubocop:enable Metrics/AbcSize, Metrics/ParameterLists
+    end
+
+    # Provides base configuration for automatic layouts
+    class LayoutRule < Node
+      attr_accessor :type
+
+      # represents the x coordinate of the top left corner layout area
+      # this coordinate is based on the current location of the page
+      attr_accessor :anchor_x
+      attr_accessor :anchor_y
+
+      def initialize(page, **args)
+        @after_init_fired = false
+
+        super(page, **args.merge(classification: :layout_rule))
+      end
+
+      def fire_after_init
+        return if @after_init_fired
+
+        @after_init_fired = true
+        after_init
+      end
+
+      def after_init
+        @anchor_x ||= page.position_x
+        @anchor_y ||= page.position_y
+      end
+
+      def to_h
+        super.merge(
+          type: type,
+          anchor_x: anchor_x,
+          anchor_y: anchor_y
+        )
+      end
+    end
+
+    # Provides grid style layouts
+    class GridLayout < LayoutRule
+      attr_accessor :direction
+      attr_accessor :wrap_at
+      attr_accessor :grid_size
+      attr_accessor :cell_no
+      attr_accessor :h_align
+      attr_accessor :v_align
+
+      def initialize(page, **args)
+        @type       = :grid_layout
+        @direction  = args[:direction]  || :horizontal
+        @wrap_at    = args[:wrap_at]    || 5
+        @grid_size  = args[:grid_size]  || 220
+        @h_align    = args[:h_align]    || :center
+        @v_align    = args[:v_align]    || :center
+        @cell_no    = 1
+
+        super(page, **args)
+      end
+
+      def position_shape(shape)
+        fire_after_init
 
+        shape.x = horizontal_shape_alignment(shape)
+        shape.y = vertical_shape_alignment(shape)
+
+        # puts '------------------'
+        # puts "cell: #{cell_no}"
+        # puts "wrap_at: #{wrap_at}"
+        # puts "shape-x: #{shape.x}"
+        # puts "shape-y: #{shape.y}"
+        # puts "page-x: #{page.position_x}"
+        # puts "page-y: #{page.position_y}"
+        # puts "anchor-x: #{anchor_x}"
+        # puts "anchor-y: #{anchor_y}"
+
+        move_cell_horizontally if direction == :horizontal
+        move_cell_vertically if direction == :vertical
+      end
+
+      def to_h
+        super.merge(
+          direction: direction,
+          wrap_at: wrap_at,
+          grid_size: grid_size,
+          cell_no: cell_no
+        )
+      end
+
+      private
+
+      # rubocop:disable Metrics/AbcSize
+      def horizontal_shape_alignment(shape)
+        return page.position_x + ((grid_size - shape.w) / 2)    if h_align == :left
+        return page.position_x + (grid_size - shape.x)          if v_align == :right
+
+        page.position_x
+      end
+      # rubocop:enable Metrics/AbcSize
+
+      # rubocop:disable Metrics/AbcSize
+      def vertical_shape_alignment(shape)
+        return page.position_y + ((grid_size - shape.h) / 2)    if v_align == :middle
+        return page.position_y + (grid_size - shape.h)          if v_align == :bottom
+
+        page.position_y
+      end
+      # rubocop:enable Metrics/AbcSize
+
+      def move_cell_horizontally
+        if cell_no >= wrap_at
+          # Flow down to the next row
+          page.position_x = anchor_x
+          page.position_y += grid_size
+          @cell_no = 1
+        else
+          page.position_x += grid_size
+          @cell_no += 1
+        end
+      end
+
+      def move_cell_vertically
+        if cell_no >= wrap_at
+          # Flow right to the next column
+          page.position_y = anchor_y
+          page.position_x += grid_size
+          @cell_no = 0
+        else
+          page.position_y += grid_size
+          @cell_no += 1
+        end
+      end
+    end
+
+    # Provides flex style layouts
+    class FlexLayout < LayoutRule
+      attr_accessor :direction
+      attr_accessor :wrap_at
+
+      def initialize(page, **args)
+        @type = :flex_layout
+        @direction = args[:direction] || :horizontal
+        @wrap_at = args[:wrap_at] || (direction == :horizontal ? 1000 : 800)
+
+        super(page, **args)
+      end
+
+      # rubocop:disable Metrics/AbcSize, Style/GuardClause
+      def position_shape(shape)
+        fire_after_init
+
+        shape.x = page.position_x
+        shape.y = page.position_y
+
+        # Flow down to the next row
+        if direction == :horizontal
+          if page.position_x + shape.w > boundary
+            page.position_x = anchor_x
+            page.position_y += grid_size
+            @cell_no = 0
+          else
+            page.position_x += grid_size
+          end
+        end
+
+        # Flow right to the next column
+        if direction == :vertical
+          if page.position_y + shape.h > boundary
+            page.position_y = anchor_y
+            page.position_x += grid_size
+            @cell_no = 0
+          else
+            page.position_y += grid_size
+          end
+        end
+      end
+      # rubocop:enable Metrics/AbcSize, Style/GuardClause
+
+      private
+
+      def boundary
+        return @boundary if defined? @boundary
+
+        bounds = grid_size * wrap_at
+        @boundary = bounds + (direction == :horizontal ? anchor_x : anchor_y)
+      end
+
+      def to_h
+        super.merge(direction: direction, wrap_at: wrap_at)
+      end
+    end
+
+    # Shape is a graphical element, it can be a shape, a text, or a group (todo)
+    class Shape < Node
       attr_accessor :theme
       attr_accessor :title
 
@@ -225,7 +475,6 @@ module DrawioDsl
       attr_accessor :font_color
       attr_accessor :gradient
 
-      attr_accessor :id
       attr_accessor :type
       attr_accessor :x
       attr_accessor :y
@@ -234,14 +483,14 @@ module DrawioDsl
       attr_accessor :style_modifiers
 
       def initialize(page, **args)
-        @page = page
-        @id = args[:id]
+        args[:classification] = :shape
+        super(page, **args)
 
-        apply_defaults(args, KConfig.configuration.drawio.element)
+        apply_defaults(args, KConfig.configuration.drawio.shape)
       end
 
       # rubocop:disable Metrics/AbcSize, Metrics/CyclomaticComplexity, Metrics/PerceivedComplexity
-      def apply_defaults(args, element_defaults)
+      def apply_defaults(args, shape_defaults)
         @theme            = args[:theme] || page.theme # KConfig.configuration.drawio.themes.sample
         theme_palette     = KConfig.configuration.drawio.palette(page.theme)
         @title            = args[:title]            || ''
@@ -253,12 +502,12 @@ module DrawioDsl
         @sketch           = args[:sketch]           || page.style.sketch
         @glass            = args[:glass]            || page.style.glass
 
-        @type             = args[:type]             || element_defaults.type
-        @x                = args[:x]                || element_defaults.x
-        @y                = args[:y]                || element_defaults.y
-        @w                = args[:w]                || element_defaults.w
-        @h                = args[:h]                || element_defaults.h
-        @style_modifiers  = args[:style_modifiers]  || element_defaults.style_modifiers
+        @type             = args[:type]             || shape_defaults.type
+        @x                = args[:x]                || shape_defaults.x
+        @y                = args[:y]                || shape_defaults.y
+        @w                = args[:w]                || shape_defaults.w
+        @h                = args[:h]                || shape_defaults.h
+        @style_modifiers  = args[:style_modifiers]  || shape_defaults.style_modifiers
 
         @fill_color       = args[:fill_color]       || theme_palette.fill_color
         @stroke_color     = args[:stroke_color]     || theme_palette.stroke_color
@@ -287,6 +536,7 @@ module DrawioDsl
       def to_h
         {
           id: id,
+          classification: classification,
           type: type,
           x: x,
           y: y,
@@ -295,10 +545,18 @@ module DrawioDsl
           style: style
         }
       end
+
+      def debug(format: :detail)
+        if format == :detail
+          debug_detail({ id: id, classification: classification, type: type })
+        else
+          debug_row(classification, id, type, x, y, w, h)
+        end
+      end
     end
 
-    # Graphical element in the shape of a square
-    class Square < Element
+    # Graphical shape in the form of a square
+    class Square < Shape
       def initialize(page, **args)
         super(page, **args)
 
@@ -306,8 +564,8 @@ module DrawioDsl
       end
     end
 
-    # Graphical element in the shape of a rectangle
-    class Rectangle < Element
+    # Graphical shape in the form of a rectangle
+    class Rectangle < Shape
       def initialize(page, **args)
         super(page, **args)
 
@@ -315,8 +573,8 @@ module DrawioDsl
       end
     end
 
-    # Graphical element in the shape of a circle
-    class Circle < Element
+    # Graphical shape in the form of a circle
+    class Circle < Shape
       def initialize(page, **args)
         super(page, **args)
 
@@ -324,8 +582,8 @@ module DrawioDsl
       end
     end
 
-    # Graphical element in the shape of an rectangle with to vertical lines
-    class Process < Element
+    # Graphical shape in the form of an rectangle with to vertical lines
+    class Process < Shape
       def initialize(page, **args)
         super(page, **args)
 
@@ -333,8 +591,8 @@ module DrawioDsl
       end
     end
 
-    # Graphical element in the shape of an ellipse
-    class Ellipse < Element
+    # Graphical shape in the form of an ellipse
+    class Ellipse < Shape
       def initialize(page, **args)
         super(page, **args)
 

data/lib/drawio_dsl/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module DrawioDsl
-  VERSION = '0.1.0'
+  VERSION = '0.2.0'
 end

data/lib/drawio_dsl/xml_builder.rb

@@ -52,8 +52,8 @@ module DrawioDsl
           xml.root do
             xml.mxCell(id: "#{page.id}-A")
             xml.mxCell(id: "#{page.id}-B", parent: "#{page.id}-A")
-            page.elements.each do |element|
-              build_element(xml, element)
+            page.nodes.each do |node|
+              build_shape(xml, node) if node.classification == :shape
             end
           end
         end
@@ -61,13 +61,13 @@ module DrawioDsl
     end
     # rubocop:enable  Metrics/MethodLength, Metrics/AbcSize, Metrics/BlockLength
 
-    def build_element(xml, element)
+    def build_shape(xml, shape)
       # puts "opts: #{opts}"
-      puts element.x
-      puts element.y
+      # puts shape.x
+      # puts shape.y
 
-      xml.mxCell(id: element.id, value: element.title, style: element.style, vertex: 1, parent: "#{element.page.id}-B") do
-        xml.mxGeometry(x: element.x, y: element.y, width: element.w, height: element.h, as: 'geometry')
+      xml.mxCell(id: shape.id, value: shape.title, style: shape.style, vertex: 1, parent: "#{shape.page.id}-B") do
+        xml.mxGeometry(x: shape.x, y: shape.y, width: shape.w, height: shape.h, as: 'geometry')
       end
     end
   end

data/lib/drawio_dsl.rb

@@ -12,7 +12,6 @@ require_relative 'drawio_dsl/version'
 require_relative 'drawio_dsl/schema'
 require_relative 'drawio_dsl/dom_builder'
 require_relative 'drawio_dsl/xml_builder'
-require_relative 'drawio_dsl/layout_container'
 require_relative 'drawio_dsl/layout_engine'
 require_relative 'drawio_dsl/drawio'
 

data/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "drawio_dsl",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "drawio_dsl",
-      "version": "0.1.0",
+      "version": "0.2.0",
       "devDependencies": {
         "@klueless-js/semantic-release-rubygem": "github:klueless-js/semantic-release-rubygem",
         "@semantic-release/changelog": "^6.0.1",

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "drawio_dsl",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "DrawIO DSL can build DrawIO diagrams using a Domain Specific Language",
   "scripts": {
     "release": "semantic-release"

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: drawio_dsl
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.0
 platform: ruby
 authors:
 - David Cruwys
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2022-03-02 00:00:00.000000000 Z
+date: 2022-03-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: k_config
@@ -95,7 +95,6 @@ files:
 - lib/drawio_dsl/dom_builder.rb
 - lib/drawio_dsl/drawio.rb
 - lib/drawio_dsl/drawio_dsl-OLD.x
-- lib/drawio_dsl/layout_container.rb
 - lib/drawio_dsl/layout_engine.rb
 - lib/drawio_dsl/schema.rb
 - lib/drawio_dsl/version.rb

data/lib/drawio_dsl/layout_container.rb

@@ -1,54 +0,0 @@
-# frozen_string_literal: true
-
-module DrawioDsl
-  # The layout engine is responsible for laying out the elements on the page.
-  #
-  # The layout engine can automatically place elements on the page.
-  #
-  # It will keep track of layout boundaries, current position and flow direction.
-  # Elements are positioned on the page in the order they are added.
-  # Row/column flow objects will hold information about horizontal and vertical element padding
-  class LayoutContainer
-    DEFAULT_DIRECTION       = :vertical
-    DEFAULT_PADDING         = 20
-    DEFAULT_BOUNDARY_HEIGHT = 800
-    DEFAULT_BOUNDARY_WIDTH  = 1000
-
-    attr_reader :engine
-    attr_accessor :direction
-    attr_accessor :padding
-
-    def initialize(engine, **opts)
-      @engine     = engine
-      @direction  = opts[:direction] || DEFAULT_DIRECTION
-      @padding    = opts[:padding]   || DEFAULT_PADDING
-      @boundary   = opts[:boundary]
-    end
-
-    def vertical?
-      @direction == :vertical
-    end
-
-    def horizontal?
-      @direction == :horizontal
-    end
-
-    attr_writer :boundary
-
-    def boundary
-      @boundary ||= (vertical? ? DEFAULT_BOUNDARY_HEIGHT : DEFAULT_BOUNDARY_WIDTH)
-    end
-
-    # Place the incoming element by altering it's x, y coordinates based on the rules engine
-    def place_element(element)
-      place_vertical(element) if vertical?
-    end
-
-    def place_vertical(element)
-      element.x = engine.x
-      element.y = engine.y
-
-      engine.y += (element.h + padding)
-    end
-  end
-end