Shape DSL

The Shape DSL can consist of edge elements, node elements or a combination of both.

A node is described with:

<node> <identifier> for <conceptElement> { [<style>] [<sizeMin>] [<sizeMax>] [<resizing>] [<geoModels>] [<anchors>] }

An edge is described with:

<edge> <identifier> for <conceptConnection> { [<style>] <target> [...<placing>] }

The identifier is a string without a whitespace.

Example node with edge (all attributes are described later):

node classNode for Klasse {
  edges {
    aggregation
  }
  sizeMin(width: 200, height: 400)
  sizeMax(width: 200, height: 400)
  resizing(horizontal: false, vertical: false, proportional: true)
  rectangle {
    size(width: 200, height: 50)
    position(x: 0, y: 50)
    textfield {
      position(x: 0, y: 0)
      identifier: text1
      size(width: 10, height: 40)
      editable: true
    }
  }
}

edge aggregation for Klasse.Aggregation {
  target: Klasse
  placing {
    offset: 1.0
    polygon {
      point(x: 0, y: 0)
      point(x: -20, y: 10)
      point(x: -40, y: 0)
      point(x: -20, y: -10)
    }
  }
}

Attributes

Point

point(x: <integer>, y: <integer>)

Size

sizeMin(width: <integer>, height: <integer>)

sizeMax(width: <integer>, height: <integer>)

size(width: <integer>, height: <integer>)

Position

Absolute: position(x: <integer>, y: <integer>)

Relative: position(xoffset: <integer>, y: <integer>)

Predefined: position(predefined: corner|center|edges)

Anchors

anchors { <position> [...<position>] }

The position element could be absolute, relative or predefined in this context.

Example with all attributes:

anchors {
  position(x: 3, y: 4)
  position(xoffset: 3, y: 10)
  position(predefined: (corner))
}

Resizing

resizing(horizontal: <boolean>, vertical: <boolean>, proportional: <boolean>)

Curve

curve(width: <integer>, height: <integer>)

Align

align(horizontal: <right|center|left>, vertical: <top|middle|bottom>)

Geometric Models

Line

A line has two points.

line { [<style>] <point> <point> }

Example with all attributes:

line {
  point(x: 1, y: 4)
  point(x: 3, y: 5)
}

Polyline

A polyline has two or more points.

polyline { [<style>] <point> <point> [...<point>] }

Example with all attributes:

polyline {
  point(x: 1, y: 4)
  point(x: 2, y: 4)
  point(x: 1, y: 6)
}

Polygon

A polygon must have two or more points (and can contain other elements).

polygon { [<style>] <point> <point> [...<point>] }

Example with all attributes:

polygon {
  point(x: 1, y: 4)
  point(x: 4, y: 3)
  point(x: 1, y: 2)
}

Rectangle

The curve attribute gives rounded corners to this rectangle. All corners have the same curve (see curve attribute).

rectangle { [<style>] [<position>] <size> [<curve>] [<compartment>] [<geometricFigure>] }

Example with all attributes:

rectangle {
  style: None
  position(x: 3, y: 4)
  size(width: 10, height: 15)
  line {
    point(x: 1, y: 4)
    point(x: 3, y: 5)
  }
}

Ellipse

ellipse { [<style>] [<position>] <size> [<compartment>] [<geometricFigure>] }

Example with all attributes:

ellipse {
  position(x: 3, y: 4)
  size(width: 10, height: 15)
  line {
    point(x: 1, y: 4)
    point(x: 3, y: 5)
  }
}

Textfield

textfield { [<style>] identifier: <string> [<position>] <size> [<align>] }

Example with all attributes:

textfield {
  identifier: id
  position(x: 3, y: 4)
  size(width: 10, height: 15)
  editable: true
  align(horizontal: right, vertical: middle)
}

A non "editable" textfield does not look like a text input but like a label.

RepeatingBox

A repeating box can repeat geomodels.

repeatingBox { <editable> <for> [<geometricFigure>] }

Attention: This geomodel is fully implemented, but not supported by the currently used JointJS version.

Example with all attributes:

repeatingBox {
  editable: true
  for(each: hasMap, as: keyValuePair)
  rectangle {
    ...
    textfield {
      ...
      identifier: keyValuePair.key
    }
    statictext {
      textBody: “=”
    }
    textfield {
      ...
      identifier: keyValuePair.value
    }
  }
}