Clip! Clip! Clip!

src/classes/Canvas.py

@@ -92,5 +92,5 @@ def add_def(self, other: Union[Font, Shape, Text]):
             elif isinstance(other, Text):
                 # get font from text and add to defs
                 self.defs_map[other.font.family] = other.font.defs()
-            elif isinstance(other, Shape) and other.clipped == True:
+            elif isinstance(other, Shape) and other.clip != None:
                 self.defs_map[id(other)] = other.defs()

src/classes/Clip.py

@@ -0,0 +1,9 @@
+class Clip(object):
+    def __init__(self, clipped_in : bool=True):
+        self.clipped_in = clipped_in
+
+    def is_inner(self):
+        return self.clipped_in
+
+    def is_outer(self):
+        return not self.clipped_in

src/classes/Item.py

@@ -32,12 +32,15 @@ def add_child(self, other) -> None:
     def render(self) -> str:
         raise NotImplementedError
 
-    def render_children(self) -> str:
+    def render_children(self, mask=False) -> str:
         # Start group for children
         s = ('\t' * self.depth) + f'<g transform="translate({self.position.x}, {self.position.y})"'
         # Check if clipped
-        if self.clipped == True:
-            s += f' style="clip-path: url(#{id(self)});"'
+        if self.clip != None:
+            if not mask:
+                s += f' style="clip-path: url(#{id(self)});"'
+            else:
+                s += f' style="mask: url(#{id(self)});"'
         s += '>\n'
         for child in self.children:
             s += ('\t' * (self.depth + 1)) + child.render() + '\n'

src/classes/parser/Generators.py

@@ -10,6 +10,7 @@
 
 from ..Fill import Fill
 from ..Stroke import Stroke
+from ..Clip import Clip
 
 from ..parser.Expressions import *
 
@@ -152,14 +153,17 @@ def rotate_from_tree_modifier(tree, defs):
         return 0
 
     @staticmethod
-    def clipped_from_tree_modifier(tree, defs):
+    def clip_from_tree_modifier(tree, defs):
         for modifier in tree.children[0].children:
             M = modifier.children[0]
             Mname = M.data if type(M) == Tree else M.value
-            if type(M) == Token:
+            if type(M) == Tree:
                 if Mname == "clipped":
-                    return True
-        return False
+                    if len(M.children) > 0 and M.children[0].children[0].value == "out":
+                        return Clip(False)
+                    else:
+                        return Clip(True)
+        return None
 
     @staticmethod
     def outline_from_tree_modifier(tree, defs):
@@ -228,22 +232,22 @@ def exception(line, col, msg):
 
 
 class RectGenerator(Generator):
-    def __init__(self, x, y, width_expr, height_expr, fill=None, stroke=None, rotate=0, clipped=False, children=[]):
+    def __init__(self, x, y, width_expr, height_expr, fill=None, stroke=None, rotate=0, clip=None, children=[]):
         self.x, self.y = x, y
         self.width_expr = width_expr
         self.height_expr = height_expr
         self.fill = fill
         self.stroke = stroke
         self.rotate = rotate
-        self.clipped = clipped
+        self.clip = clip
         self.children = children
 
     def generate(self, pw, ph):
         width = self.width_expr.eval(pw, ph)
         height = self.height_expr.eval(pw, ph)
         pos = Vector2(self.x.eval(pw, ph), self.y.eval(pw, ph))
         children = self.generate_children(width, height)
-        return Rect(self.clipped, pos, width, height, self.stroke, self.fill, children, self.rotate)
+        return Rect(self.clip, pos, width, height, self.stroke, self.fill, children, self.rotate)
 
     @staticmethod
     def from_parse_tree(tree, defs):
@@ -260,27 +264,27 @@ def from_parse_tree(tree, defs):
         Generator.validate_modifiers(tree, ("rotated", "clipped", "outlined"))
 
         rotate = Generator.rotate_from_tree_modifier(tree, defs)
-        clipped = Generator.clipped_from_tree_modifier(tree, defs)
+        clip = Generator.clip_from_tree_modifier(tree, defs)
         stroke = Generator.outline_from_tree_modifier(tree, defs)
 
-        return RectGenerator(x, y, width, height, fill, stroke, rotate, clipped, children)
+        return RectGenerator(x, y, width, height, fill, stroke, rotate, clip, children)
 
 
 class CircleGenerator(Generator):
-    def __init__(self, x, y, radius_expr, fill=None, stroke=None, rotate=0, clipped=False, children=[]):
+    def __init__(self, x, y, radius_expr, fill=None, stroke=None, rotate=0, clip=None, children=[]):
         self.x, self.y = x, y
         self.radius_expr = radius_expr
         self.fill = fill
         self.stroke = stroke
         self.rotate = rotate
-        self.clipped = clipped
+        self.clip = clip
         self.children = children
 
     def generate(self, pw, ph):
         radius = self.radius_expr.eval(pw, ph)
         pos = Vector2(self.x.eval(pw, ph), self.y.eval(pw, ph))
         children = self.generate_children(radius*2, radius*2)
-        return Circle(self.clipped, pos, radius, self.stroke, self.fill, children, self.rotate)
+        return Circle(self.clip, pos, radius, self.stroke, self.fill, children, self.rotate)
 
     @staticmethod
     def from_parse_tree(tree, defs):
@@ -295,28 +299,28 @@ def from_parse_tree(tree, defs):
         Generator.validate_modifiers(tree, ("rotated", "clipped", "outlined"))
 
         rotate = Generator.rotate_from_tree_modifier(tree, defs)
-        clipped = Generator.clipped_from_tree_modifier(tree, defs)
+        clip = Generator.clip_from_tree_modifier(tree, defs)
         stroke = Generator.outline_from_tree_modifier(tree, defs)
 
-        return CircleGenerator(x, y, rad, fill, stroke, rotate, clipped, children)
+        return CircleGenerator(x, y, rad, fill, stroke, rotate, clip, children)
 
 class EllipseGenerator(Generator):
-    def __init__(self, x, y, xrad_expr, yrad_expr, fill=None, stroke=None, rotate=0, clipped=False, children=[]):
+    def __init__(self, x, y, xrad_expr, yrad_expr, fill=None, stroke=None, rotate=0, clip=None, children=[]):
         self.x, self.y = x, y
         self.xrad_expr = xrad_expr
         self.yrad_expr = yrad_expr
         self.fill = fill
         self.stroke = stroke
         self.rotate = rotate
-        self.clipped = clipped
+        self.clip = clip
         self.children = children
 
     def generate(self, pw, ph):
         xrad = self.xrad_expr.eval(pw, ph)
         yrad = self.yrad_expr.eval(pw, ph)
         pos = Vector2(self.x.eval(pw, ph), self.y.eval(pw, ph))
         children = self.generate_children(xrad*2, yrad*2)
-        return Ellipse(self.clipped, pos, xrad, yrad, self.stroke, self.fill, children, self.rotate)
+        return Ellipse(self.clip, pos, xrad, yrad, self.stroke, self.fill, children, self.rotate)
 
     @staticmethod
     def from_parse_tree(tree, defs):
@@ -332,10 +336,10 @@ def from_parse_tree(tree, defs):
         Generator.validate_modifiers(tree, ("rotated", "clipped", "outlined"))
 
         rotate = Generator.rotate_from_tree_modifier(tree, defs)
-        clipped = Generator.clipped_from_tree_modifier(tree, defs)
+        clip = Generator.clip_from_tree_modifier(tree, defs)
         stroke = Generator.outline_from_tree_modifier(tree, defs)
 
-        return EllipseGenerator(x, y, xrad, yrad, fill, stroke, rotate, clipped, children)
+        return EllipseGenerator(x, y, xrad, yrad, fill, stroke, rotate, clip, children)
 
 class LineGenerator(Generator):
     def __init__(self, x1, y1, x2, y2, stroke=None):
@@ -360,20 +364,20 @@ def from_parse_tree(tree, defs):
         return LineGenerator(x1, y1, x2, y2, stroke)
 
 class PolygonGenerator(Generator):
-    def __init__(self, points, fill=None, stroke=None, rotate=0, clipped=False, children=[]):
+    def __init__(self, points, fill=None, stroke=None, rotate=0, clip=None, children=[]):
         self.points = points
         self.fill = fill
         self.stroke = stroke
         self.rotate = rotate
-        self.clipped = clipped
+        self.clip = clip
         self.children = children
 
     def generate(self, pw, ph):
         points = [Vector2(P[0].eval(pw, ph), P[1].eval(pw, ph)) for P in self.points]
         xs = [p.x for p in points]
         ys = [p.y for p in points]
         children = self.generate_children(abs(min(xs)-max(xs)), abs(min(ys)-max(ys)))
-        return Polygon(self.clipped, points, self.stroke, self.fill, children, self.rotate)
+        return Polygon(self.clip, points, self.stroke, self.fill, children, self.rotate)
 
     @staticmethod
     def from_parse_tree(tree, defs):
@@ -388,10 +392,10 @@ def from_parse_tree(tree, defs):
         Generator.validate_modifiers(tree, ("rotated", "clipped", "outlined"))
 
         rotate = Generator.rotate_from_tree_modifier(tree, defs)
-        clipped = Generator.clipped_from_tree_modifier(tree, defs)
+        clip = Generator.clip_from_tree_modifier(tree, defs)
         stroke = Generator.outline_from_tree_modifier(tree, defs)
 
-        return PolygonGenerator(points, fill, stroke, rotate, clipped, children)
+        return PolygonGenerator(points, fill, stroke, rotate, clip, children)
 
 class ImageGenerator(Generator):
     def __init__(self, x, y, width_expr, height_expr=None, path="", rotate=0):

src/classes/primitives/Circle.py

@@ -1,6 +1,7 @@
 from typing import Union, Optional, Iterable
 from ..Stroke import Stroke
 from ..Fill import Fill
+from ..Clip import Clip
 from ..Item import Item
 from .Shape import Shape
 from ..util.Vector2 import Vector2
@@ -12,12 +13,12 @@ class Circle(Shape):
     """
     # create circle as an ellipse with same x and y radius
     def __init__(self,
-            clipped: bool, position: Vector2,
+            clip: Clip, position: Vector2,
             radius: Union[int, float],
             stroke: Optional[Stroke] = None, fill: Optional[Fill] = None,
             children: Iterable[Item] = [], rotation: Union[int, float] = 0
         ):
-        super().__init__(clipped, position,
+        super().__init__(clip, position,
                          stroke=stroke, fill=fill,
                          children=children, rotation=rotation)
         self.radius: Union[int, float] = radius
@@ -33,6 +34,8 @@ def render(self) -> str:
             s += ' ' + self.stroke.render()
         if self.fill != None:
             s += ' ' + self.fill.render()
+        else:
+            s += ' ' + 'fill="#000000" fill-opacity="0.0"'
         s += ' />'
         # Render Children
         if len(self.children) > 0:
@@ -43,7 +46,11 @@ def render(self) -> str:
     def defs(self) -> str:
         # Create defs
         s = super().defs()
-        s += f'<circle cx="-{self.position.x}" cy="-{self.position.y}" r="{self.radius}"'
+        stroke_width = 0 if self.stroke == None else self.stroke.width
+        if self.clip != None and self.clip.is_inner():
+            s += f'<circle cx="0" cy="0" r="{self.radius}"'
+        elif self.clip != None and self.clip.is_outer():
+            s += f'<circle cx="0" cy="0" r="{self.radius+stroke_width//2+1}"'
         # Apply rotation if needed
         if abs(self.rotation) > 1e-6:
             s += f' transform="rotate({self.rotation})"'

src/classes/primitives/Ellipse.py

@@ -2,6 +2,7 @@
 from ..Stroke import Stroke
 from ..Fill import Fill
 from ..Item import Item
+from ..Clip import Clip
 from .Shape import Shape
 from ..util.Vector2 import Vector2
 
@@ -14,12 +15,12 @@ class Ellipse(Shape):
     # create circle as an ellipse with same x and y radius
 
     def __init__(self,
-                 clipped: bool, position: Vector2,
+                 clip: Clip, position: Vector2,
                  rx: Union[int, float], ry: Union[int, float],
                  stroke: Optional[Stroke] = None, fill: Optional[Fill] = None,
                  children: Iterable[Item] = [], rotation: Union[int, float] = 0
                  ):
-        super().__init__(clipped, position,
+        super().__init__(clip, position,
                          stroke=stroke, fill=fill,
                          children=children, rotation=rotation)
         self.rx: Union[int, float] = rx
@@ -36,6 +37,8 @@ def render(self) -> str:
             s += ' ' + self.stroke.render()
         if self.fill != None:
             s += ' ' + self.fill.render()
+        else:
+            s += ' ' + 'fill="#000000" fill-opacity="0.0"'
         s += ' />'
         # Render Children
         if len(self.children) > 0:
@@ -46,7 +49,11 @@ def render(self) -> str:
     def defs(self) -> str:
         # Create defs
         s = super().defs()
-        s += f'<ellipse cx="-{self.position.x}" cy="-{self.position.y}" rx="{self.rx}" ry="{self.ry}"'
+        stroke_width = 0 if self.stroke == None else self.stroke.width
+        if self.clip != None and self.clip.is_inner():
+            s += f'<ellipse cx="0" cy="0" rx="{self.rx}" ry="{self.ry}"'
+        elif self.clip != None and self.clip.is_outer():
+            s += f'<ellipse cx="0" cy="0" rx="{self.rx+stroke_width//2+1}" ry="{self.ry+stroke_width//2+1}"'
         # Apply rotation if needed
         if abs(self.rotation) > 1e-6:
             s += f' transform="rotate({self.rotation})"'

src/classes/primitives/Line.py

@@ -2,18 +2,19 @@
 from ..Stroke import Stroke
 from ..Fill import Fill
 from ..Item import Item
+from ..Clip import Clip
 from .Shape import Shape
 from ..util.Vector2 import Vector2
 
 class Line(Shape):
     def __init__(self,
-            clipped: bool,
+            clip: Clip,
             start: Vector2, end: Vector2,
             stroke: Stroke,
             children: Iterable[Item] = [], rotation: Union[int, float] = 0
         ):
         position = (end - start) * 2 + start
-        super().__init__(clipped, position,
+        super().__init__(clip, position,
                          stroke=stroke, fill=None,
                          children=children, rotation=rotation)
         self.start: Vector2 = start

src/classes/primitives/Polygon.py

@@ -2,6 +2,7 @@
 from ..Stroke import Stroke
 from ..Fill import Fill
 from ..Item import Item
+from ..Clip import Clip
 from .Shape import Shape
 from ..util.Vector2 import Vector2
 
@@ -14,7 +15,7 @@ class Polygon(Shape):
     # create circle as an ellipse with same x and y radius
 
     def __init__(self,
-                 clipped: bool,
+                 clip: Clip,
                  points: Iterable[Vector2],
                  stroke: Optional[Stroke] = None, fill: Optional[Fill] = None,
                  children: Iterable[Item] = [], rotation: Union[int, float] = 0
@@ -27,7 +28,7 @@ def __init__(self,
         center.x /= len(points)
         center.y /= len(points)
         # set position to center
-        super().__init__(clipped, center,
+        super().__init__(clip, center,
                         stroke=stroke, fill=fill,
                         children=children, rotation=rotation)
         self.points = points
@@ -50,6 +51,8 @@ def render(self) -> str:
             s += ' ' + self.stroke.render()
         if self.fill != None:
             s += ' ' + self.fill.render()
+        else:
+            s += ' ' + 'fill="#000000" fill-opacity="0.0"'
         s += ' />'
         # Render Children
         if len(self.children) > 0:
@@ -66,6 +69,7 @@ def defs(self) -> str:
             if index != len(self.points) - 1:
                 s += ' '
         s += '" '
+
         # Apply translation for map since it is relative to parent:
         s += f' transform="translate(-{self.position.x}, -{self.position.y})"'
         # Apply rotation if needed