drawio_dsl 0.7.0 → 0.8.2

data/.builders/.templates/basic/configuration_shapes.rb

@@ -5,7 +5,7 @@
 module DrawioDsl
   # Used to attach configuration to KConfig module
   module ConfigurationShapes
-    ShapeDefaults   = Struct.new(:type, :text_only, :x, :y, :w, :h, :style_modifiers, keyword_init: true)
+    ShapeDefaults   = Struct.new(:type, :category, :x, :y, :w, :h, :style_modifiers, keyword_init: true)
     Shapes = Struct.new(
       :shape,
       {{#each shapes}}
@@ -16,9 +16,9 @@ module DrawioDsl
 
     def add_shapes
       @shapes = Shapes.new(
-        shape: ShapeDefaults.new(type: :shape, text_only: false, x: 0, y: 0, w: 20, h: 20, style_modifiers: ''),
+        shape: ShapeDefaults.new(type: :shape, category: :element, x: 0, y: 0, w: 20, h: 20, style_modifiers: ''),
         {{#each shapes}}
-        {{snake ./type}}: ShapeDefaults.new(type: :{{snake ./type}}, x: {{./x}}, text_only: {{./text_only}}, y: {{./y}}, w: {{./w}}, h: {{./h}}, style_modifiers: '{{{./style_modifiers}}}'){{#if @last}}{{^}},{{/if}}
+        {{snake ./type}}: ShapeDefaults.new(type: :{{snake ./type}}, x: {{./x}}, category: :{{./category}}, y: {{./y}}, w: {{./w}}, h: {{./h}}, style_modifiers: '{{{./style_modifiers}}}'){{#if @last}}{{^}},{{/if}}
         {{/each}}
       )
     end

data/.builders/.templates/basic/dom_builder_shapes.rb

@@ -6,7 +6,8 @@ module DrawioDsl
   module DomBuilderShapes
     {{#each shapes}}
 
-    def add_{{snake ./type}}(**opts, &block)
+    def add_{{snake ./type}}(id = nil, **opts, &block)
+      opts = { id: id }.merge(opts) if id
       {{snake ./type}} = DrawioDsl::Schema::{{camel ./type}}.new(current_page, **opts, &block)
       add_shape({{snake ./type}})
     end

data/.builders/.templates/basic/drawio_shapes.rb

@@ -14,8 +14,8 @@ module DrawioDsl
     end
     {{#each shapes}}
 
-    def {{snake ./type}}(**opts, &block)
-      builder.add_{{snake ./type}}(**opts, &block)
+    def {{snake ./type}}(id = nil, **opts, &block)
+      builder.add_{{snake ./type}}(id, **opts, &block)
     end
     {{/each}}
   end

data/.builders/blueprint/shapes.rb

@@ -1,65 +1,87 @@
 m = KManager.model :shapes, namespace: %i[domain] do
   # microapp = import(:handlebars_helpers, :microapp)
 
+  table :strokes do
+    fields [:name, :style]
+
+    row :dashed               , 'dashed=1;fixDash=1'
+    row :dotted               , 'dashed=1;fixDash=1;dashPattern=1 4'
+    row :dashdot              , 'dashed=1;fixDash=1;dashPattern=10 5 1 5'
+    row :dashdotdot           , 'dashed=1;fixDash=1;dashPattern=10 5 1 5 1 5'
+    row :dotdotdot            , 'dashed=1;fixDash=1;dashPattern=1 2'
+    row :longdash             , 'dashed=1;fixDash=1;dashPattern=16 6'
+    row :dashlongdash         , 'dashed=1;fixDash=1;dashPattern=10 6 16 6'
+    row :dashed24             , 'dashed=1;fixDash=1;dashPattern=3 8'
+    row :dashed32             , 'dashed=1;fixDash=1;dashPattern=6 5'
+    row :dashed44             , 'dashed=1;fixDash=1;dashPattern=8 8'
+  end
+
   table :shapes do
-    fields [:type, :text_only, :x, :y, :w, :h, :style_modifiers]
+    fields [:type, :category, :x, :y, :w, :h, :style_modifiers]
 
     # shape is a custom object
     # row :shape      , 0, 0,  20,  20, ''
 
     # configuration for general purpose shapes
-    row :h1                   ,  true, 0, 0, 100,  50, 'text;fontSize=89;fontColor=#ffffff;fontStyle=1;fillColor=none'
-    row :h2                   ,  true, 0, 0, 100,  50, 'text;fontSize=67;fontColor=#ffffff;fontStyle=1;fillColor=none'
-    row :h3                   ,  true, 0, 0, 100,  50, 'text;fontSize=50;fontColor=#ffffff;fontStyle=1;fillColor=none'
-    row :h4                   ,  true, 0, 0, 100,  50, 'text;fontSize=37;fontColor=#ffffff;fontStyle=1;fillColor=none'
-    row :h5                   ,  true, 0, 0, 100,  50, 'text;fontSize=28;fontColor=#ffffff;fontStyle=1;fillColor=none'
-    row :h6                   ,  true, 0, 0, 100,  50, 'text;fontSize=21;fontColor=#ffffff;fontStyle=1;fillColor=none'
-    row :p                    ,  true, 0, 0, 100,  50, 'text;fontSize=16;fontColor=#ffffff;fontStyle=1;fillColor=none'
+    row :h1                   , :text   , 0, 0, 100,  50, 'text;fontSize=89;fontColor=#ffffff;fontStyle=1;fillColor=none'
+    row :h2                   , :text   , 0, 0, 100,  50, 'text;fontSize=67;fontColor=#ffffff;fontStyle=1;fillColor=none'
+    row :h3                   , :text   , 0, 0, 100,  50, 'text;fontSize=50;fontColor=#ffffff;fontStyle=1;fillColor=none'
+    row :h4                   , :text   , 0, 0, 100,  50, 'text;fontSize=37;fontColor=#ffffff;fontStyle=1;fillColor=none'
+    row :h5                   , :text   , 0, 0, 100,  50, 'text;fontSize=28;fontColor=#ffffff;fontStyle=1;fillColor=none'
+    row :h6                   , :text   , 0, 0, 100,  50, 'text;fontSize=21;fontColor=#ffffff;fontStyle=1;fillColor=none'
+    row :p                    , :text   , 0, 0, 100,  50, 'text;fontSize=16;fontColor=#ffffff;fontStyle=1;fillColor=none'
+
+    row :actor                , :element, 0, 0,  40,  50, 'shape=actor'
+    row :actor2               , :element, 0, 0,  30,  50, 'shape=umlActor;verticalLabelPosition=bottom;outlineConnect=1'
+    row :callout              , :element, 0, 0, 160, 120, 'shape=callout'
+    row :callout2             , :element, 0, 0, 160, 160, 'shape=mxgraph.basic.oval_callout'
+    row :callout3             , :element, 0, 0, 160, 160, 'shape=mxgraph.basic.cloud_callout'
+    row :callout4             , :element, 0, 0, 160, 120, 'shape=mxgraph.basic.roundRectCallout;dx=30;dy=15;size=5;boundedLbl=1;'
+    row :circle               , :element, 0, 0, 160, 160, 'ellipse'
+    row :cloud                , :element, 0, 0, 160, 160, 'shape=cloud'
+    row :container            , :element, 0, 0, 160, 160, 'swimlane'
+    row :container2           , :element, 0, 0, 160, 160, 'swimlane;horizontal=0'
+    row :container3           , :element, 0, 0, 160, 160, 'swimlane;startSize=50'
+    row :container4           , :element, 0, 0, 160, 160, 'swimlane;resizable=0'
+    row :cross                , :element, 0, 0,  50,  50, 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.x'
+    row :envelop              , :element, 0, 0, 160, 100, 'shape=message'
+    row :diamond              , :element, 0, 0, 100, 100, 'rhombus'
+    row :document             , :element, 0, 0, 160, 160, 'shape=mxgraph.basic.document'
+    row :ellipse              , :element, 0, 0, 200, 120, 'ellipse'
+    row :hexagon              , :element, 0, 0, 200, 120, 'shape=hexagon'
+    row :interface            , :element, 0, 0, 160, 160, 'align=left;overflow=fill;fontSize=12;fontFamily=Helvetica'
+    row :klass                , :element, 0, 0, 160, 160, 'align=left;overflow=fill;fontSize=12;fontFamily=Helvetica'
+    row :note                 , :element, 0, 0, 160, 160, 'shape=note'
+    row :process              , :element, 0, 0, 200, 120, 'shape=process'
+    row :rectangle            , :element, 0, 0, 200, 120, ''
+    row :rectangle2           , :element, 0, 0, 200, 120, 'shape=mxgraph.basic.cloud_rect'
+    row :square               , :element, 0, 0, 160, 160, ''
+    row :step                 , :element, 0, 0, 120,  80, 'shape=step;perimeter=stepPerimeter;fixedSize=1'
+    row :tick                 , :element, 0, 0,  50,  50, 'verticalLabelPosition=bottom;verticalAlign=top;shape=mxgraph.basic.tick'
+    row :todo                 , :element, 0, 0, 300,  60, ''
+    row :face                 , :element, 0, 0, 100, 100, 'verticalLabelPosition=bottom;verticalAlign=top;shape=mxgraph.basic.smiley'
+    row :triangle             , :element, 0, 0, 100, 100, 'triangle'
 
-    row :actor                , false, 0, 0,  40,  50, 'shape=actor'
-    row :actor2               , false, 0, 0,  30,  50, 'shape=umlActor;verticalLabelPosition=bottom;outlineConnect=1'
-    row :callout              , false, 0, 0, 160, 120, 'shape=callout'
-    row :callout2             , false, 0, 0, 160, 160, 'shape=mxgraph.basic.oval_callout'
-    row :callout3             , false, 0, 0, 160, 160, 'shape=mxgraph.basic.cloud_callout'
-    row :callout4             , false, 0, 0, 160, 120, 'shape=mxgraph.basic.roundRectCallout;dx=30;dy=15;size=5;boundedLbl=1;'
-    row :circle               , false, 0, 0, 160, 160, 'ellipse'
-    row :cloud                , false, 0, 0, 160, 160, 'shape=cloud'
-    row :container            , false, 0, 0, 160, 160, 'swimlane'
-    row :container2           , false, 0, 0, 160, 160, 'swimlane;horizontal=0'
-    row :container3           , false, 0, 0, 160, 160, 'swimlane;startSize=50'
-    row :container4           , false, 0, 0, 160, 160, 'swimlane;resizable=0'
-    row :cross                , false, 0, 0,  50,  50, 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.x'
-    row :envelop              , false, 0, 0, 160, 100, 'shape=message'
-    row :diamond              , false, 0, 0, 100, 100, 'rhombus'
-    row :document             , false, 0, 0, 160, 160, 'shape=mxgraph.basic.document'
-    row :ellipse              , false, 0, 0, 200, 120, 'ellipse'
-    row :hexagon              , false, 0, 0, 200, 120, 'shape=hexagon'
-    row :interface            , false, 0, 0, 200, 120, 'align=left;overflow=fill;fontSize=12;fontFamily=Helvetica'
-    row :klass                , false, 0, 0, 200, 120, 'align=left;overflow=fill;fontSize=12;fontFamily=Helvetica'
-    row :note                 , false, 0, 0, 160, 160, 'shape=note'
-    row :process              , false, 0, 0, 200, 120, 'shape=process'
-    row :rectangle            , false, 0, 0, 200, 120, ''
-    row :rectangle2           , false, 0, 0, 200, 120, 'shape=mxgraph.basic.cloud_rect'
-    row :square               , false, 0, 0, 160, 160, ''
-    row :step                 , false, 0, 0, 120,  80, 'shape=step;perimeter=stepPerimeter;fixedSize=1'
-    row :tick                 , false, 0, 0,  50,  50, 'verticalLabelPosition=bottom;verticalAlign=top;shape=mxgraph.basic.tick'
-    row :face                 , false, 0, 0, 100, 100, 'verticalLabelPosition=bottom;verticalAlign=top;shape=mxgraph.basic.smiley'
-    row :triangle             , false, 0, 0, 100, 100, 'triangle'
+    row :line                 , :line   , 0, 0,  50,  50, 'edgeStyle=entityRelationEdgeStyle;strokeWidth=1;elbow=vertical;startArrow=none;startFill=0;endArrow=block;endFill=0;targetPerimeterSpacing=0;shape=flexArrow;endSize=6;fillStyle=zigzag;'
+    # edge="1" parent="node_root_2T8" source="b" target="c"
 
     # configuration for embedded element shape
     # note that the width / height probably should be driven of parent shape
-    row :embed_row            , false, 0, 0, 200,  40, 'shape=partialRectangle;collapsible=0;dropTarget=0;pointerEvents=0;top=0;left=0;bottom=1;right=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest'
-    row :embed_col50          , false, 0, 0,  50,  40, 'shape=partialRectangle;connectable=0;top=0;left=0;bottom=0;right=0;fontStyle=1;overflow=hidden'
-    row :embed_col200         , false, 0, 0, 150,  40, 'shape=partialRectangle;connectable=0;top=0;left=0;bottom=0;right=0;align=left;spacingLeft=6;overflow=hidden'
+    row :embed_row            , :element, 0, 0, 200,  40, 'shape=partialRectangle;collapsible=0;dropTarget=0;pointerEvents=0;top=0;left=0;bottom=1;right=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest'
+    row :embed_col50          , :element, 0, 0,  50,  40, 'shape=partialRectangle;connectable=0;top=0;left=0;bottom=0;right=0;fontStyle=1;overflow=hidden'
+    row :embed_col200         , :element, 0, 0, 150,  40, 'shape=partialRectangle;connectable=0;top=0;left=0;bottom=0;right=0;align=left;spacingLeft=6;overflow=hidden'
   end
 
   action do
     data = self.raw_data
-    shapes = JSON.pretty_generate(data['shapes'])
+    content = {
+      strokes: data['strokes'],
+      shapes: data['shapes']
+    }
 
     k_builder
       .cd(:data)
-      .add_file('shapes.json', content: shapes, on_exist: :write)
+      .add_file('shapes.json', content: JSON.pretty_generate(content), on_exist: :write)
   end
 end
 

data/.builders/generators/02-generate-app.rb

@@ -2,7 +2,9 @@ KManager.action :requires do
 
   action do
     shapes_file = k_builder.target_folders.get_filename(:data, 'shapes.json')
-    shapes = JSON.parse(File.read(shapes_file))
+    shapes_configuration = JSON.parse(File.read(shapes_file))
+    shapes = shapes_configuration['shapes']
+    # strokes = shapes_configuration['strokes']
 
     KDirector::Dsls::BasicDsl
       .init(k_builder,

data/.builders/generators/project-plan.rb

@@ -0,0 +1,74 @@
+KManager.action :project_plan do
+  action do
+
+    DrawioDsl::Drawio
+      .init(k_builder, on_exist: :write, on_action: :execute)
+      .diagram(rounded: 1, glass: 1)
+      .page('In progress', theme: :style_03, margin_left: 0, margin_top: 0) do
+
+        # h5(x: 300, y: 0, w: 400, h: 80, title: 'DrawIO DSL')
+        # p(x: 350, y: 40, w: 400, h: 80, title: 'Project plan - In progress')
+
+        grid_layout(y:90, direction: :horizontal, grid_h: 80, grid_w: 320, wrap_at: 3, grid: 0)
+
+        todo(title: 'refactor the shape->text_only (boolean) to category (symbol)')
+        todo(title: 'build configuration for line strokes (eg. dashed, dotted)')
+        todo(title: 'add new shapes related to line connectors')
+        todo(title: 'line connectors need to support autolinking using ids')
+      end
+      .page('To Do', theme: :style_02, margin_left: 0, margin_top: 0) do
+
+        # h5(x: 300, y: 0, w: 400, h: 80, title: 'DrawIO DSL')
+        # p(x: 350, y: 40, w: 400, h: 80, title: 'Project plan')
+
+        grid_layout(y:90, direction: :horizontal, grid_h: 80, grid_w: 320, wrap_at: 3, grid: 0)
+
+        todo(title: 'add page background to theme, use it whenever the theme is set at a diagram/page level')
+        todo(title: 'move DrawioDsl::Formatters::Factory::FORMATTERS to resource file')
+        todo(title: 'move DrawioDsl::Formatters::StyleBuilder::MAPPINGS to resource file')
+        todo(title: 'need to setup new project plans')
+        todo(title: 'settings style attributes need to de-duplicate, might be best to utilize the new StyleBuilder class')
+        todo(title: 'write SVG directly into other projects')
+        todo(title: 'add :shape and :text-only to random shape generator')
+        todo(title: 'Nodes need to support child nodes')
+        todo(title: 'Grid layout does not position itself in relation to the last element')
+        todo(title: 'Dynamic sized shapes that expand to the size of their text')
+        todo(title: 'Control of text padding left, right, top and bottom')
+        todo(title: 'Improve the theme control over text-only shapes')
+        todo(title: 'x,y settings do not work for shapes within a grid layout')
+        todo(title: 'page layout so that you drop elements on and they are positioned correctly, e.g centered, left, right, etc, maybe a grid layout with a wrap of 1 and a width of the page is sufficient')
+      end
+      .page('Done', theme: :style_06, margin_left: 0, margin_top: 0) do
+
+        # h5(x: 300, y: 0, w: 400, h: 80, title: 'DrawIO DSL')
+        # p(x: 350, y: 40, w: 400, h: 80, title: 'Done')
+
+        grid_layout(y:90, direction: :horizontal, grid_h: 80, grid_w: 320, wrap_at: 3, grid: 0)
+
+        todo(title: 'ensure that ids are working as expected')
+        todo(title: 'alter the initial parameter of all shapes so that it can be an ID, without named attribute')
+        todo(title: 'move project-plan files')
+        todo(title: 'alter configure_shape so it sets the default shape key and use that for selecting the default HTML formatter')
+        todo(title: 'add todo shape to simplify project plan drawing')
+        todo(title: 'introduce .value property to shape and let it use either formatted HTML or plain text title')
+        todo(title: 'formatter DSL that can render HTML directly into the value property')
+        todo(title: 'formatter DSL for class and interface generation')
+        todo(title: 'generate extension based graphics based on drawio extensions.js')
+        todo(title: 'active? flag on page defaulting to true. set to false to exclude page from diagram.')
+        todo(title: 'first level child nodes need to hang of node 1')
+        todo(title: 'node has child nodes and add_node will set a nodes parent')
+        todo(title: 'nodes can belong to a parent node, the top level node responds with truthy to root?')
+        todo(title: 'add sample diagram for the github readme file')
+        todo(title: 'write samples into docs folder and display in readme')
+        todo(title: 'add export as .PNG, needs to take a page number as the PNG will not support multiple pages')
+        todo(title: 'add export as .SVG, needs to take a page number as the SVG will not support multiple pages')
+        todo(title: 'add save as .drawio')
+
+      end
+      .cd(:docs)
+      .save('project-plan/project.drawio')
+      .export_svg('project-plan/project_in_progress', page: 1)
+      .export_svg('project-plan/project_todo'       , page: 2)
+      .export_svg('project-plan/project_done'       , page: 3)
+  end
+end

data/.builders/generators/sample_diagrams/05-samples.rb

@@ -9,15 +9,28 @@ KManager.action :bootstrap do
       .page('Samples') do
         grid_layout(wrap_at: 5)
 
-        KConfig.configuration.drawio.shapes.select { |shape| shape.type != :shape && !shape.text_only }.each do |shape|
-          # print random number between 0 and 1
-          send(shape.type, theme: KConfig.configuration.drawio.random_theme, title: shape.type.to_s, shape: shape, rounded: rnd(2), gloss: rnd(2), sketch: rnd(8))
+        # KConfig.configuration.drawio.shapes.select { |shape| shape.type != :shape && !shape.text_only }.each do |shape|
+        #   # print random number between 0 and 1
+        #   send(shape.type, theme: KConfig.configuration.drawio.random_theme, title: shape.type.to_s, shape: shape, rounded: rnd(2), gloss: rnd(2), sketch: rnd(8))
+        # end
+
+        for jersy_number in 67..112
+          team_color = :style_02
+          team_color = :style_03 if jersy_number % 3 == 0
+          team_color = :style_04 if jersy_number % 12 == 0
+
+          if jersy_number % 20 == 0
+            cloud(title: jersy_number, theme: team_color)
+          else
+            actor(title: jersy_number, theme: team_color)
+          end
         end
+      
 
       end
       .cd(:spec)
-      .save('.samples/05-samples.drawio')
-      .cd(:docs)
-      .export_svg('samples/samples', page: 1)
+      .osave('.samples/05-samples.drawio')
+      # .cd(:docs)
+      # .export_svg('samples/samples', page: 1)
   end
 end

data/.builders/generators/sample_diagrams/30-html-shapes.rb

@@ -8,61 +8,41 @@ KManager.action :html_shapes do
       .page('Style-Plain', margin_left: 0, margin_top: 0, rounded: 0, background: '#FFEADB') do
         grid_layout(wrap_at: 8)
 
-        html = DrawioDsl::Formatters::InterfaceFormatter.new
-          .header('IPerson')
-          .field(:first_name, type: :string)
-          .field(:last_name, type: :string)
-          .field(:age, type: :integer)
-          .field(:birthday, type: :date)
-          .method(:full_name)
-          .as_html
-
-        square(
-          title: html,
-          style_modifiers: 'align=left;overflow=fill;fontSize=12;fontFamily=Helvetica'
-        )
-
-        square(title: 'xxx', style_modifiers: 'align=left;overflow=fill;fontSize=12;fontFamily=Helvetica') do
-          format(:interface)
+        # html = DrawioDsl::Formatters::KlassFormatter.new
+        #   .header('IPerson')
+        #   .field(:first_name, type: :string)
+        #   .field(:last_name, type: :string)
+        #   .field(:age, type: :integer)
+        #   .field(:birthday, type: :date)
+        #   .method(:full_name)
+        #   .method(:sean)
+        #   .as_html
+
+        # square(title: html,
+        #   style_modifiers: 'align=left;overflow=fill;fontSize=12;fontFamily=Helvetica'
+        # )
+
+        interface(theme: :style_07) do
+          format
             .header('IPerson')
             .field(:field1, type: :string)
             .field(:field2, type: :string)
             .method(:full_name, type: :string)
         end
 
-        html = DrawioDsl::Formatters::KlassFormatter.new
-          .header('Person')
-          .field(:first_name, type: :string)
-          .field(:last_name, type: :string)
-          .field(:age, type: :integer)
-          .method(:full_name)
-          .as_html
-
-        square(
-          title: html,
-          style_modifiers: 'align=left;overflow=fill;fontSize=12;fontFamily=Helvetica'
-        )
-
-        # square do
-        #   formatter(:class)
-        #     .name('Person')
-        #     .field(:field1, type: :string)
-        #     .field(:field2, type: :string)
-        #     .method(:full_name, type: :string)
-        # end
-
-        # dg_interface('IContract') do
-        #   field('first_name', type: 'String')
-        #   field('last_name', type: 'String')
-        #   field('age', type: 'int')
-        #   method('full_name', type: 'String', params: 'String first_name, String last_name')
-        # end
-
+        klass do
+          format(:class)
+            .header('Person')
+            .field(:field1, type: :string)
+            .field(:field2, type: :string)
+            .field(:age, type: :integer)
+            .field(:birthday, type: :date)
+            .method(:full_name, type: :string)
+        end
       end
       .cd(:spec)
-      .save('.samples/30-html-shapes.drawio')
+      .osave('.samples/30-html-shapes.drawio')
       # .cd(:docs)
-      # .export_svg('samples/themes-square', page: 1)
-
+      # .export_svg('samples/html-shapes', page: 1)
   end
 end

data/.builders/generators/sample_diagrams/35-ids-and-arrows.rb

@@ -0,0 +1,20 @@
+KManager.action :bootstrap do
+  action do
+
+    DrawioDsl::Drawio
+      .init(k_builder, on_exist: :write, on_action: :execute)
+      .diagram(theme: :style_06)
+      .page('Style-Plain', margin_left: 0, margin_top: 0) do
+        grid_layout(wrap_at: 2)
+
+        square(:a, title: '01')
+        circle(:b, title: '02')
+        rectangle(:c, title: '03')
+        ellipse(:d, title: '04')
+      end
+      .cd(:spec)
+      .osave('.samples/35-ids-and-arrows.drawio')
+      # .cd(:docs)
+      # .export_svg('samples/styles-plain', page: 1)
+  end
+end

data/CHANGELOG.md

@@ -1,3 +1,25 @@
+## [0.8.1](https://github.com/klueless-io/drawio_dsl/compare/v0.8.0...v0.8.1) (2022-03-16)
+
+
+### Bug Fixes
+
+* alter the initial parameter of all shapes so that it can be an ID, without named attribute ([9c00a63](https://github.com/klueless-io/drawio_dsl/commit/9c00a634f818d25b92042a9cdb81749dbe994cf5))
+
+# [0.8.0](https://github.com/klueless-io/drawio_dsl/compare/v0.7.0...v0.8.0) (2022-03-15)
+
+
+### Features
+
+* alter configure_shape so it sets the default shape key and use that for selecting the default HTML formatter ([f0cde77](https://github.com/klueless-io/drawio_dsl/commit/f0cde7719c7b230147f10e269cbb9f02584b542b))
+
+# [0.7.0](https://github.com/klueless-io/drawio_dsl/compare/v0.6.0...v0.7.0) (2022-03-14)
+
+
+### Features
+
+* add support for HTML formatters to shapes ([14b05e2](https://github.com/klueless-io/drawio_dsl/commit/14b05e2c55ea61ad8f275d678ca4fcff8a43b466))
+* add support for html shapes ([d2d0e72](https://github.com/klueless-io/drawio_dsl/commit/d2d0e72bef8f44c244dd209d191ab29aea0091c1))
+
 # [0.6.0](https://github.com/klueless-io/drawio_dsl/compare/v0.5.7...v0.6.0) (2022-03-13)
 
 

data/docs/project-plan/project.drawio

@@ -0,0 +1,134 @@
+<mxfile host="GEP">
+  <diagram id="OQJ" name="In progress">
+    <mxGraphModel dx="0" dy="0" background="#FFFACD" grid="0" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
+      <root>
+        <mxCell id="page_root_OQJ" parent="OQJ"/>
+        <mxCell id="node_root_OQJ" parent="page_root_OQJ"/>
+        <mxCell id="OQJ-2" value="refactor the shape-&gt;text_only (boolean) to category (symbol)" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#d5e8d4;strokeColor=#82b366;fontColor=#333333" vertex="1" parent="node_root_OQJ">
+          <mxGeometry x="10" y="10" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="OQJ-3" value="build configuration for line strokes (eg. dashed, dotted)" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#d5e8d4;strokeColor=#82b366;fontColor=#333333" vertex="1" parent="node_root_OQJ">
+          <mxGeometry x="330" y="10" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="OQJ-4" value="add new shapes related to line connectors" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#d5e8d4;strokeColor=#82b366;fontColor=#333333" vertex="1" parent="node_root_OQJ">
+          <mxGeometry x="650" y="10" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="OQJ-5" value="line connectors need to support autolinking using ids" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#d5e8d4;strokeColor=#82b366;fontColor=#333333" vertex="1" parent="node_root_OQJ">
+          <mxGeometry x="10" y="90" width="300" height="60" as="geometry"/>
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+  <diagram id="QfI" name="To Do">
+    <mxGraphModel dx="0" dy="0" background="#FFFACD" grid="0" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
+      <root>
+        <mxCell id="page_root_QfI" parent="QfI"/>
+        <mxCell id="node_root_QfI" parent="page_root_QfI"/>
+        <mxCell id="QfI-2" value="add page background to theme, use it whenever the theme is set at a diagram/page level" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontColor=#333333" vertex="1" parent="node_root_QfI">
+          <mxGeometry x="10" y="10" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="QfI-3" value="move DrawioDsl::Formatters::Factory::FORMATTERS to resource file" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontColor=#333333" vertex="1" parent="node_root_QfI">
+          <mxGeometry x="330" y="10" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="QfI-4" value="move DrawioDsl::Formatters::StyleBuilder::MAPPINGS to resource file" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontColor=#333333" vertex="1" parent="node_root_QfI">
+          <mxGeometry x="650" y="10" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="QfI-5" value="need to setup new project plans" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontColor=#333333" vertex="1" parent="node_root_QfI">
+          <mxGeometry x="10" y="90" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="QfI-6" value="settings style attributes need to de-duplicate, might be best to utilize the new StyleBuilder class" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontColor=#333333" vertex="1" parent="node_root_QfI">
+          <mxGeometry x="330" y="90" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="QfI-7" value="write SVG directly into other projects" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontColor=#333333" vertex="1" parent="node_root_QfI">
+          <mxGeometry x="650" y="90" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="QfI-8" value="add :shape and :text-only to random shape generator" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontColor=#333333" vertex="1" parent="node_root_QfI">
+          <mxGeometry x="10" y="170" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="QfI-9" value="Nodes need to support child nodes" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontColor=#333333" vertex="1" parent="node_root_QfI">
+          <mxGeometry x="330" y="170" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="QfI-10" value="Grid layout does not position itself in relation to the last element" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontColor=#333333" vertex="1" parent="node_root_QfI">
+          <mxGeometry x="650" y="170" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="QfI-11" value="Dynamic sized shapes that expand to the size of their text" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontColor=#333333" vertex="1" parent="node_root_QfI">
+          <mxGeometry x="10" y="250" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="QfI-12" value="Control of text padding left, right, top and bottom" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontColor=#333333" vertex="1" parent="node_root_QfI">
+          <mxGeometry x="330" y="250" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="QfI-13" value="Improve the theme control over text-only shapes" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontColor=#333333" vertex="1" parent="node_root_QfI">
+          <mxGeometry x="650" y="250" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="QfI-14" value="x,y settings do not work for shapes within a grid layout" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontColor=#333333" vertex="1" parent="node_root_QfI">
+          <mxGeometry x="10" y="330" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="QfI-15" value="page layout so that you drop elements on and they are positioned correctly, e.g centered, left, right, etc, maybe a grid layout with a wrap of 1 and a width of the page is sufficient" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontColor=#333333" vertex="1" parent="node_root_QfI">
+          <mxGeometry x="330" y="330" width="300" height="60" as="geometry"/>
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+  <diagram id="TcB" name="Done">
+    <mxGraphModel dx="0" dy="0" background="#FFFACD" grid="0" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
+      <root>
+        <mxCell id="page_root_TcB" parent="TcB"/>
+        <mxCell id="node_root_TcB" parent="page_root_TcB"/>
+        <mxCell id="TcB-2" value="ensure that ids are working as expected" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#f8cecc;strokeColor=#b85450;fontColor=#333333" vertex="1" parent="node_root_TcB">
+          <mxGeometry x="10" y="10" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="TcB-3" value="alter the initial parameter of all shapes so that it can be an ID, without named attribute" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#f8cecc;strokeColor=#b85450;fontColor=#333333" vertex="1" parent="node_root_TcB">
+          <mxGeometry x="330" y="10" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="TcB-4" value="move project-plan files" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#f8cecc;strokeColor=#b85450;fontColor=#333333" vertex="1" parent="node_root_TcB">
+          <mxGeometry x="650" y="10" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="TcB-5" value="alter configure_shape so it sets the default shape key and use that for selecting the default HTML formatter" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#f8cecc;strokeColor=#b85450;fontColor=#333333" vertex="1" parent="node_root_TcB">
+          <mxGeometry x="10" y="90" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="TcB-6" value="add todo shape to simplify project plan drawing" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#f8cecc;strokeColor=#b85450;fontColor=#333333" vertex="1" parent="node_root_TcB">
+          <mxGeometry x="330" y="90" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="TcB-7" value="introduce .value property to shape and let it use either formatted HTML or plain text title" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#f8cecc;strokeColor=#b85450;fontColor=#333333" vertex="1" parent="node_root_TcB">
+          <mxGeometry x="650" y="90" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="TcB-8" value="formatter DSL that can render HTML directly into the value property" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#f8cecc;strokeColor=#b85450;fontColor=#333333" vertex="1" parent="node_root_TcB">
+          <mxGeometry x="10" y="170" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="TcB-9" value="formatter DSL for class and interface generation" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#f8cecc;strokeColor=#b85450;fontColor=#333333" vertex="1" parent="node_root_TcB">
+          <mxGeometry x="330" y="170" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="TcB-10" value="generate extension based graphics based on drawio extensions.js" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#f8cecc;strokeColor=#b85450;fontColor=#333333" vertex="1" parent="node_root_TcB">
+          <mxGeometry x="650" y="170" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="TcB-11" value="active? flag on page defaulting to true. set to false to exclude page from diagram." style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#f8cecc;strokeColor=#b85450;fontColor=#333333" vertex="1" parent="node_root_TcB">
+          <mxGeometry x="10" y="250" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="TcB-12" value="first level child nodes need to hang of node 1" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#f8cecc;strokeColor=#b85450;fontColor=#333333" vertex="1" parent="node_root_TcB">
+          <mxGeometry x="330" y="250" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="TcB-13" value="node has child nodes and add_node will set a nodes parent" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#f8cecc;strokeColor=#b85450;fontColor=#333333" vertex="1" parent="node_root_TcB">
+          <mxGeometry x="650" y="250" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="TcB-14" value="nodes can belong to a parent node, the top level node responds with truthy to root?" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#f8cecc;strokeColor=#b85450;fontColor=#333333" vertex="1" parent="node_root_TcB">
+          <mxGeometry x="10" y="330" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="TcB-15" value="add sample diagram for the github readme file" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#f8cecc;strokeColor=#b85450;fontColor=#333333" vertex="1" parent="node_root_TcB">
+          <mxGeometry x="330" y="330" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="TcB-16" value="write samples into docs folder and display in readme" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#f8cecc;strokeColor=#b85450;fontColor=#333333" vertex="1" parent="node_root_TcB">
+          <mxGeometry x="650" y="330" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="TcB-17" value="add export as .PNG, needs to take a page number as the PNG will not support multiple pages" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#f8cecc;strokeColor=#b85450;fontColor=#333333" vertex="1" parent="node_root_TcB">
+          <mxGeometry x="10" y="410" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="TcB-18" value="add export as .SVG, needs to take a page number as the SVG will not support multiple pages" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#f8cecc;strokeColor=#b85450;fontColor=#333333" vertex="1" parent="node_root_TcB">
+          <mxGeometry x="330" y="410" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="TcB-19" value="add save as .drawio" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#f8cecc;strokeColor=#b85450;fontColor=#333333" vertex="1" parent="node_root_TcB">
+          <mxGeometry x="650" y="410" width="300" height="60" as="geometry"/>
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>