Css pseudo states

.pre-commit-config.yaml

@@ -17,12 +17,8 @@ repos:
   hooks:
   - id: check-toml
   - id: check-yaml
-- repo: https://github.com/asottile/seed-isort-config
-  rev: v1.9.3
-  hooks:
-  -   id: seed-isort-config
 - repo: https://github.com/pre-commit/mirrors-isort
-  rev: v4.3.21
+  rev: v5.0.7
   hooks:
   - id: isort
     additional_dependencies: [toml]

docs/conf.py

@@ -50,7 +50,7 @@
     "recommonmark",  # Markdown Support
 ]
 
-autodoc_mock_imports = ["generic", "gi"]
+autodoc_mock_imports = ["gaphas", "generic", "gi"]
 # Prefix document path to section labels, otherwise autogenerated labels would look like 'heading'
 # rather than 'path/to/file:heading'
 autosectionlabel_prefix_document = True

docs/index.rst

@@ -32,6 +32,7 @@ platforms:
    service_oriented
    event_system
    modeling_language
+   style_sheets
    transaction
    items
 

docs/style_sheets.md

@@ -0,0 +1,155 @@
+# Style Sheets
+
+Since Gaphor 2.0, Gaphor diagrams can have a different look by means of style
+sheets. Style sheets use CSS syntax. Since we're dealing with a diagram, and
+not a HTML document, some CSS features have been left out.
+
+The style is part of the model, so everyone working on a model will have the
+same style.
+
+Here is a simple example of how to change the background color of a class:
+
+``` css
+class {
+    background-color: beige
+}
+```
+
+Or change the color of a component, only when it's nested in a node:
+
+``` css
+node component {
+    background-color: ...
+}
+```
+
+It's pretty easy to define a "dark" style:
+
+``` css
+diagram {
+    background-color: black;
+}
+
+* {
+    color: white
+    text-color: white
+}
+```
+
+Here you already see the first custom attribute: `text-color`. This property
+allows you to control the color of the text drawn in an item. `color` is used
+for the lines (strokes) that make the layout of a diagram item.
+
+## Supported selectors
+
+We're dealing with diagrams, models. Therefore we do not need all features of
+CSS. For example: we do not provide ID's for diagram items, so the CSS syntax
+for id's (`#some-id`) is not used. Same for the class syntax (`.some-class`).
+
+```eval_rst
+=========================== ============================
+``node component``          Any component item which is a decendant of a node.
+``node > component``        A component item which is a child of a node.
+``generaliation[subject]``  A generalization item with a subject present.
+``class[name=Foo]``         A class with name "Foo".
+``diagram[name^=draft]``    A diagram with a name starting with "draft".
+
+                            Other operators include ``~=``, ``$=``, ``\|=`` and ``\*=``.
+``\*:focus``                The focused item. Other pseudo classes are:
+
+                            - ``:active`` selected items;
+                            - ``:hover`` for the item under the mouse;
+                            - ``:drop`` if an item is draggen and can be dropped on this item.
+``node:empty``              A node containing no child nodes in the diagram.
+``:root``                   An item is at the top level of the diagram (most items are).
+``:has()``                  ...
+``:is()``                   ...
+``:not()``                  ...
+=========================== ============================
+```
+
+## Style properties
+
+Gaphor supports a subset of CSS properties and some Gaphor specific properties.
+The style sheet interpreter is relatively straight forward.
+All widths, heights and sizes are measured in pixels.
+No complex style declarations are supported,
+like the `font` property in HTML/CSS which can contain font family, size, weight.
+
+### Colors
+
+```eval_rst
+.. |br| raw:: html
+
+   <br />
+
+======================= =======================================
+``background-color``    Examples: |br|
+                        ``background-color: azure;`` |br|
+                        ``background-color: rgb(255, 255, 255);`` |br|
+                        ``background-color: hsl(130, 95%, 10%);``
+``color``               Color used for lines
+``highlight-color``     Color used for highlight, e.g. when dragging
+                        an item over another item.
+``text-color``          Color for text
+======================= =======================================
+```
+
+* A color can be any [CSS3 color code](https://www.w3.org/TR/2018/REC-css-color-3-20180619/),
+  as described in the CSS documentation. Be it `rgb()`, `rgba()`, Hex code
+  (`#ffffff`) or color names.
+
+### Text and fonts
+
+```eval_rst
+======================= =======================================
+``font-family``         A single font name (e.g. ``sans``, ``serif``, ``courier``)
+``font-size``           Font size: ``font-size: 14``.
+``font-style``          Either ``normal`` or ``italic``
+``font-weight``         Either ``normal`` or ``bold``
+``text-align``          Either ``left``, ``center``, ``right``
+``text-decoration``     Either ``none`` or ``underline``
+``vertical-align``      Vertical alignment for text.
+
+                        Either ``top``, ``middle`` or ``bottom``.
+``vertical-spacing``    Set vertical spacing for icon-like items (actors, start state).
+
+                        Example: ``vertical-spacing: 4``
+======================= =======================================
+```
+
+* `font-family` can be only one font name, not a list of (fallback) names, as
+  is used for HTML.
+
+### Drawing and spacing
+
+```eval_rst
+======================= =======================================
+``border-radius``       Radius for rectangles: ``border-radius: 4``.
+``dash-style``          Style for dashed lines: ``dash-style: 7 5``.
+``line-style``          Either ``normal`` or ``sloppy [factor]``.
+``line-width``          Set the width for lines: ``line-width: 2``.
+``min-height``          Set minimal height for an item: ``min-height: 50``.
+``min-width``           Set minimal width for an item: ``min-width: 100``.
+``padding``             CSS style padding (top, right, bottom, left).
+
+                        Example: ``padding: 3 4``
+======================= =======================================
+```
+
+* `padding` is defined by 1 to 4 numbers. No unit (px, pt, em) needs to be
+  used. All values are in pixel distance.
+* `dash-style` is a list of numbers (line, gap)
+* `line-style` has only effect when defined on a `diagram`. A sloppiness factor
+  can be provided, somewhere between -2 and 2.
+
+### Diagram styles
+
+Only a few properties can be defined on a diagram, namely `background-color`
+and `line-style`. The diagram style is defined separately from the diagram item
+styles. That way it's possible to set the background color for diagrams
+specifically. The line style can be normal, straight, lines or a more playful
+"sloppy" style. For the sloppy style an optional factor can be provided. This
+factor determines the level of wobblyness of the lines. 0.5 is default, 0.0 is
+a straight line. The value should be between -2.0 and 2.0. Values between 0.0
+and 0.5 make for a subtle effect.

examples/list_classes.py

@@ -7,7 +7,7 @@
 import optparse
 import sys
 
-import gaphor.UML as UML
+from gaphor import UML
 from gaphor.application import Session
 
 # Setup command line options.

gaphor/SysML/blocks/property.py

@@ -4,10 +4,10 @@
 
 from gaphor import UML
 from gaphor.core.modeling.properties import attribute
+from gaphor.core.styling import FontWeight, VerticalAlign
 from gaphor.diagram.presentation import ElementPresentation, Named
 from gaphor.diagram.shapes import Box, EditableText, Text, draw_border
 from gaphor.diagram.support import represents
-from gaphor.diagram.text import FontWeight, VerticalAlign
 from gaphor.UML.classes.stereotype import stereotype_compartments
 
 

gaphor/SysML/blocks/proxyport.py

@@ -9,10 +9,8 @@
 from gaphor.diagram.presentation import Named, postload_connect
 from gaphor.diagram.shapes import (
     Box,
-    DrawContext,
     EditableText,
     IconBox,
-    SizeContext,
     Text,
     TextAlign,
     VerticalAlign,
@@ -111,9 +109,7 @@ def pre_update(self, context):
             self._last_connected_side = side
             self.update_shapes()
 
-        self.shape.size(SizeContext.from_context(context, self.style))
+        self.shape.size(context)
 
     def draw(self, context):
-        self.shape.draw(
-            DrawContext.from_context(context, self.style), self.dimensions()
-        )
+        self.shape.draw(context, self.dimensions())

gaphor/SysML/modelinglanguage.py

@@ -3,11 +3,10 @@
 SysML related assets.
 """
 
-import gaphor.SysML.diagramitems as diagramitems
-import gaphor.SysML.sysml as sysml
 from gaphor.abc import ModelingLanguage
 from gaphor.core import gettext
 from gaphor.diagram.diagramtoolbox import ToolboxDefinition
+from gaphor.SysML import diagramitems, sysml
 from gaphor.SysML.toolbox import sysml_toolbox_actions
 
 

gaphor/SysML/toolbox.py

@@ -4,13 +4,13 @@
 
 from gaphas.item import SE
 
-import gaphor.SysML.diagramitems as sysml_items
-import gaphor.UML.diagramitems as uml_items
 from gaphor import UML, diagram
 from gaphor.core import gettext
 from gaphor.diagram.diagramtoolbox import ToolboxDefinition, ToolDef
 from gaphor.diagram.diagramtools import PlacementTool
+from gaphor.SysML import diagramitems as sysml_items
 from gaphor.SysML import sysml
+from gaphor.UML import diagramitems as uml_items
 from gaphor.UML.toolbox import namespace_config
 
 

gaphor/UML/__init__.py

@@ -1,8 +1,6 @@
 # Here, order matters
-from gaphor.UML.uml import *
+import gaphor.UML.umloverrides
 from gaphor.UML import modelfactory as model
-
+from gaphor.UML.uml import *
 from gaphor.UML.umlfmt import format
 from gaphor.UML.umllex import parse
-
-import gaphor.UML.umloverrides

gaphor/UML/actions/__init__.py

@@ -1,3 +1,10 @@
+from gaphor.UML.actions import (
+    actionseditors,
+    actionsgrouping,
+    actionspropertypages,
+    flowconnect,
+    partitionpage,
+)
 from gaphor.UML.actions.action import (
     AcceptEventActionItem,
     ActionItem,
@@ -15,15 +22,6 @@
 from gaphor.UML.actions.objectnode import ObjectNodeItem
 from gaphor.UML.actions.partition import PartitionItem
 
-
-from gaphor.UML.actions import (
-    actionsgrouping,
-    flowconnect,
-    partitionpage,
-    actionseditors,
-    actionspropertypages,
-)
-
 __all__ = [
     "AcceptEventActionItem",
     "ActionItem",

gaphor/UML/actions/activitynodes.py

@@ -13,7 +13,7 @@
 from gaphor import UML
 from gaphor.core.modeling import Presentation
 from gaphor.diagram.presentation import ElementPresentation, Named
-from gaphor.diagram.shapes import Box, DrawContext, EditableText, IconBox, Text, stroke
+from gaphor.diagram.shapes import Box, EditableText, IconBox, Text, stroke
 from gaphor.diagram.support import represents
 from gaphor.UML.modelfactory import stereotypes_str
 
@@ -267,9 +267,7 @@ def _set_combined(self, value):
     def draw(self, context):
         h1, h2 = self.handles()
         height = h2.pos.y - h1.pos.y
-        self.shape.draw(
-            DrawContext.from_context(context, self.style), Rectangle(0, 0, 1, height)
-        )
+        self.shape.draw(context, Rectangle(0, 0, 1, height))
 
     def draw_fork_node(self, _box, context, _bounding_box):
         """

gaphor/UML/actions/partition.py

@@ -10,17 +10,10 @@
 from typing import List
 
 from gaphor import UML
+from gaphor.core.styling import VerticalAlign
 from gaphor.diagram.presentation import ElementPresentation, Named
-from gaphor.diagram.shapes import (
-    Box,
-    SizeContext,
-    Text,
-    cairo_state,
-    draw_highlight,
-    stroke,
-)
+from gaphor.diagram.shapes import Box, Text, cairo_state, draw_highlight, stroke
 from gaphor.diagram.support import represents
-from gaphor.diagram.text import VerticalAlign
 from gaphor.UML.modelfactory import stereotypes_str
 
 
@@ -63,9 +56,7 @@ def toplevel(self):
     def pre_update(self, context):
         assert self.canvas
 
-        self._header_size = self.shape.size(
-            SizeContext.from_context(context, self.style)
-        )
+        self._header_size = self.shape.size(context)
 
         # get subpartitions
         children: List[PartitionItem] = [

gaphor/UML/actions/tests/test_activitynodes.py

@@ -1,4 +1,4 @@
-import gaphor.UML as UML
+from gaphor import UML
 from gaphor.tests.testcase import TestCase
 from gaphor.UML.actions.activitynodes import DecisionNodeItem, ForkNodeItem
 

gaphor/UML/actions/tests/test_flow.py

@@ -1,7 +1,8 @@
 from gaphas.canvas import instant_cairo_context
 
-import gaphor.UML as UML
-from gaphor.diagram.shapes import DrawContext
+from gaphor import UML
+from gaphor.core.modeling import DrawContext
+from gaphor.core.modeling.diagram import FALLBACK_STYLE
 from gaphor.tests.testcase import TestCase
 from gaphor.UML.actions.flow import FlowItem
 
@@ -41,11 +42,11 @@ def test_draw(self):
         flow = self.create(FlowItem, UML.ControlFlow)
         context = DrawContext(
             cairo=instant_cairo_context(),
+            style=FALLBACK_STYLE,
             hovered=True,
             focused=True,
             selected=True,
             dropzone=False,
-            style={},
         )
 
         flow.draw(context)

gaphor/UML/actions/tests/test_objectnode.py

@@ -1,4 +1,4 @@
-import gaphor.UML as UML
+from gaphor import UML
 from gaphor.tests.testcase import TestCase
 from gaphor.UML.actions.objectnode import ObjectNodeItem