ranger-compiler 3.5.0 → 3.5.2

package/dist/lib/evg/EVGConnectorTest.rgr

@@ -0,0 +1,306 @@
+; SPDX-License-Identifier: MIT
+
+; ==============================================================================
+; EVGConnectorTest — out-of-flow boxes in a grid, and connectors
+; ==============================================================================
+;
+; Two features, one test, because the second was found while chasing the first.
+;
+; THE BUG. An arrow on a dashboard was written the only way it could be —
+; `position: absolute; left: 171px; top: 148px` — and drew itself in the page's
+; top-left corner with its offsets dropped. It looked like a `path` fault. It
+; was not: the same `path` under a flex or block parent lands correctly. The
+; parent was a `display: grid`, and `layoutGrid` skipped its out-of-flow
+; children when collecting grid items — rightly, an absolute box takes no
+; track — and then nothing laid them out at all. So the box kept zero size at
+; (0,0), a `div` vanished and a `path` drew its own coordinates at the origin.
+; `testAbsoluteInGrid` is that document, asserting a `div` and a `path` written
+; the same way come out in the same place under all three parents.
+;
+; THE FEATURE. Even fixed, `left: 171px` is the wrong tool for "an arrow from
+; this card to that one": it is measured against one width and wrong at every
+; other. A `connector` says which two boxes it joins; the layout writes its `d`
+; on every pass. `testResponsiveSides` is the whole argument — the same
+; document laid out two columns wide and one column wide, and the connector
+; leaving the right edge in one and the bottom edge in the other.
+; ==============================================================================
+
+Import "EVGElement.rgr"
+Import "EVGUnit.rgr"
+Import "EVGLayout.rgr"
+Import "EVGConnector.rgr"
+
+class ConnCheck {
+    def passed:int 0
+    def failed:int 0
+
+    fn ok:void (name:string cond:boolean) {
+        if cond {
+            passed = (passed + 1)
+            print ("  PASS " + name)
+        } {
+            failed = (failed + 1)
+            print ("  FAIL " + name)
+        }
+    }
+
+    fn eqInt:void (name:string got:int want:int) {
+        def good:boolean (got == want)
+        if (good == false) {
+            print ("       got " + (to_string got) + " want " + (to_string want))
+        }
+        this.ok(name good)
+    }
+
+    fn eqStr:void (name:string got:string want:string) {
+        def good:boolean (got == want)
+        if (good == false) {
+            print ("       got \"" + got + "\"")
+            print ("      want \"" + want + "\"")
+        }
+        this.ok(name good)
+    }
+}
+
+class EVGConnectorTest {
+
+    sfn box:EVGElement (id:string w:double h:double) {
+        def el (EVGElement.createDiv())
+        el.id = id
+        el.setAttribute("width" ((to_string (to_int w)) + "px"))
+        el.setAttribute("height" ((to_string (to_int h)) + "px"))
+        return el
+    }
+
+    sfn laidOut:EVGLayout (root:EVGElement w:double h:double) {
+        def lay (new EVGLayout())
+        lay.setPageSize(w h)
+        lay.layout(root)
+        return lay
+    }
+
+    ; ---------------------------------------------------------------------
+    ; An absolute box, and an absolute path, under each kind of parent.
+    ; ---------------------------------------------------------------------
+
+    sfn buildAbs:EVGElement (display:string) {
+        def page:EVGElement (EVGConnectorTest.box("page" 400.0 300.0))
+        page.setAttribute("display" display)
+        page.setAttribute("grid-template-columns" "1fr 1fr")
+        page.setAttribute("padding-left" "20px")
+        page.setAttribute("padding-top" "20px")
+        page.addChild((EVGConnectorTest.box("a" 100.0 60.0)))
+        page.addChild((EVGConnectorTest.box("b" 100.0 60.0)))
+
+        def absDiv:EVGElement (EVGConnectorTest.box("absdiv" 48.0 44.0))
+        absDiv.setAttribute("position" "absolute")
+        absDiv.setAttribute("left" "171px")
+        absDiv.setAttribute("top" "148px")
+        page.addChild(absDiv)
+
+        def absPath (EVGElement.createPath())
+        absPath.id = "abspath"
+        absPath.setAttribute("position" "absolute")
+        absPath.setAttribute("left" "171px")
+        absPath.setAttribute("top" "148px")
+        absPath.setAttribute("width" "48px")
+        absPath.setAttribute("height" "44px")
+        absPath.setAttribute("d" "M 2 22 L 42 22 L 34 14 M 42 22 L 34 30")
+        page.addChild(absPath)
+        return page
+    }
+
+    sfn checkAbs:void (c:ConnCheck display:string) {
+        def page:EVGElement (EVGConnectorTest.buildAbs(display))
+        def lay:EVGLayout (EVGConnectorTest.laidOut(page 400.0 300.0))
+        def absDiv:EVGElement (page.getChild(2))
+        def absPath:EVGElement (page.getChild(3))
+        c.eqInt((display + ": the absolute div's left is its parent's content edge + 171") (to_int absDiv.calculatedX) 191)
+        c.eqInt((display + ": …and its top the same way") (to_int absDiv.calculatedY) 168)
+        c.eqInt((display + ": it kept the size it was given") (to_int absDiv.calculatedWidth) 48)
+        c.eqInt((display + ": the path is in the same place as the div") (to_int absPath.calculatedX) 191)
+        c.eqInt((display + ": …on both axes") (to_int absPath.calculatedY) 168)
+        c.eqInt((display + ": …and the same size") (to_int absPath.calculatedHeight) 44)
+    }
+
+    sfn testAbsoluteInGrid:void (c:ConnCheck) {
+        print ""
+        print "--- position: absolute, under every kind of parent ---"
+        EVGConnectorTest.checkAbs(c "block")
+        EVGConnectorTest.checkAbs(c "flex")
+        EVGConnectorTest.checkAbs(c "grid")
+    }
+
+    ; ---------------------------------------------------------------------
+    ; Connectors
+    ; ---------------------------------------------------------------------
+
+    ; Two cards in a grid and a line between them. `columns` is what the test
+    ; changes to reflow the page.
+    sfn buildCards:EVGElement (width:double columns:string) {
+        def page:EVGElement (EVGConnectorTest.box("page" width 320.0))
+        page.setAttribute("display" "grid")
+        page.setAttribute("grid-template-columns" columns)
+        page.setAttribute("gap" "48px")
+        page.setAttribute("padding-left" "24px")
+        page.setAttribute("padding-top" "24px")
+        page.setAttribute("padding-right" "24px")
+
+        ; No width: a grid item stretches to its track, which is what makes
+        ; this document reflow at all.
+        def orders (EVGElement.createDiv())
+        orders.id = "orders"
+        orders.setAttribute("height" "120px")
+        orders.setAttribute("anchor-name" "--orders")
+        page.addChild(orders)
+        def revenue (EVGElement.createDiv())
+        revenue.id = "revenue"
+        revenue.setAttribute("height" "120px")
+        revenue.setAttribute("anchor-name" "--revenue")
+        page.addChild(revenue)
+
+        def conn (EVGElement.createPath())
+        conn.tagName = "connector"
+        conn.setAttribute("from" "--orders")
+        conn.setAttribute("to" "--revenue")
+        conn.setAttribute("stroke" "rgb(17,24,39)")
+        conn.setAttribute("stroke-width" "3")
+        conn.setAttribute("arrow-end" "triangle")
+        conn.setAttribute("arrow-size" "10px")
+        page.addChild(conn)
+        return page
+    }
+
+    sfn testStraight:void (c:ConnCheck) {
+        print ""
+        print "--- a straight connector between two grid cells ---"
+        def page:EVGElement (EVGConnectorTest.buildCards(600.0 "1fr 1fr"))
+        def lay:EVGLayout (EVGConnectorTest.laidOut(page 600.0 320.0))
+        def conn:EVGElement (page.getChild(2))
+        c.ok("it resolved" conn.connectorResolved)
+        ; The cells are 252 wide: 600 less two 24 paddings and one 48 gap,
+        ; halved. So the line runs from x=276 to x=324 at the cells' middle.
+        c.eqStr("the shaft joins the facing edges" conn.svgPath "M 276 84 L 324 84")
+        c.eqStr("the head is a filled triangle on the target" conn.arrowPath "M 324 84 L 315.34 89 L 315.34 79 Z")
+        c.ok("…and the shaft is not filled with it" ((strlen conn.svgPath) > 0))
+        ; The box is the geometry grown by what the stroke and the head put
+        ; outside it, and the viewBox is the same rectangle — a 1:1 fit.
+        c.eqInt("its box starts left of the shaft" (to_int conn.calculatedX) 263)
+        c.eqInt("…and is as wide as the shaft plus both pads" (to_int conn.calculatedWidth) 73)
+        c.eqStr("the viewBox is the box" conn.viewBox "263.5 71.5 73 25")
+    }
+
+    sfn testResponsiveSides:void (c:ConnCheck) {
+        print ""
+        print "--- the same connector, reflowed to one column ---"
+        def page:EVGElement (EVGConnectorTest.buildCards(320.0 "1fr"))
+        def lay:EVGLayout (EVGConnectorTest.laidOut(page 320.0 420.0))
+        def conn:EVGElement (page.getChild(2))
+        c.ok("it resolved" conn.connectorResolved)
+        ; Stacked, `auto` picks the bottom of the first card and the top of
+        ; the second — the whole reason the sides are not written down.
+        c.eqStr("it leaves the bottom edge and arrives at the top" conn.svgPath "M 160 144 L 160 192")
+        c.eqStr("and the head turned with it" conn.arrowPath "M 160 192 L 155 183.34 L 165 183.34 Z")
+    }
+
+    sfn testRouting:void (c:ConnCheck) {
+        print ""
+        print "--- orthogonal and bezier ---"
+        def page:EVGElement (EVGConnectorTest.box("page" 600.0 400.0))
+        page.setAttribute("flex-direction" "column")
+        page.setAttribute("gap" "40px")
+        def a:EVGElement (EVGConnectorTest.box("a" 120.0 60.0))
+        page.addChild(a)
+        def b:EVGElement (EVGConnectorTest.box("b" 120.0 60.0))
+        b.setAttribute("margin-left" "360px")
+        page.addChild(b)
+
+        def ortho (EVGElement.createPath())
+        ortho.tagName = "connector"
+        ortho.setAttribute("from" "#a")
+        ortho.setAttribute("to" "#b")
+        ortho.setAttribute("routing" "orthogonal")
+        ortho.setAttribute("stroke" "rgb(220,38,38)")
+        ortho.setAttribute("arrow-end" "open")
+        ortho.setAttribute("arrow-size" "9px")
+        page.addChild(ortho)
+
+        def curve (EVGElement.createPath())
+        curve.tagName = "connector"
+        curve.setAttribute("from" "#a")
+        curve.setAttribute("to" "#b")
+        curve.setAttribute("routing" "bezier")
+        curve.setAttribute("stroke" "rgb(37,99,235)")
+        page.addChild(curve)
+
+        def lay:EVGLayout (EVGConnectorTest.laidOut(page 600.0 400.0))
+        ; a is (0,0,120,60); b is (360,100,120,60) — the gap is 40.
+        c.eqStr("orthogonal turns halfway between the two edges, and an open head is stroked with the shaft" ortho.svgPath "M 120 30 L 240 30 L 240 130 L 360 130 M 352.21 134.5 L 360 130 L 352.21 125.5")
+        c.eqStr("…so it has nothing to fill" ortho.arrowPath "")
+        c.eqStr("bezier leaves and arrives along the sides it touches" curve.svgPath "M 120 30 C 269.45 30 210.55 130 360 130")
+        c.eqStr("…and asks for no head it was not given" curve.arrowPath "")
+    }
+
+    sfn testUnresolved:void (c:ConnCheck) {
+        print ""
+        print "--- a connector pointed at nothing ---"
+        def page:EVGElement (EVGConnectorTest.box("page" 400.0 200.0))
+        page.addChild((EVGConnectorTest.box("a" 100.0 60.0)))
+        def conn (EVGElement.createPath())
+        conn.tagName = "connector"
+        conn.setAttribute("from" "#a")
+        conn.setAttribute("to" "--nowhere")
+        conn.setAttribute("stroke" "rgb(0,0,0)")
+        page.addChild(conn)
+        def lay:EVGLayout (EVGConnectorTest.laidOut(page 400.0 200.0))
+        c.ok("it did not resolve" (conn.connectorResolved == false))
+        c.eqStr("and drew nothing rather than a line to the origin" conn.svgPath "")
+        def said:boolean false
+        def i:int 0
+        while (i < (lay.warningCount())) {
+            def w:string (lay.warningAt(i))
+            if ((indexOf w "--nowhere") >= 0) {
+                said = true
+            }
+            i = (i + 1)
+        }
+        c.ok("…and the layout said so by name" said)
+    }
+
+    sfn testAnchorById:void (c:ConnCheck) {
+        print ""
+        print "--- an id is an anchor too ---"
+        def page:EVGElement (EVGConnectorTest.box("page" 400.0 200.0))
+        page.setAttribute("flex-direction" "row")
+        page.setAttribute("gap" "40px")
+        page.addChild((EVGConnectorTest.box("left" 100.0 60.0)))
+        page.addChild((EVGConnectorTest.box("right" 100.0 60.0)))
+        def conn (EVGElement.createPath())
+        conn.tagName = "connector"
+        conn.setAttribute("from" "#left")
+        conn.setAttribute("to" "#right")
+        conn.setAttribute("stroke" "rgb(0,0,0)")
+        page.addChild(conn)
+        def lay:EVGLayout (EVGConnectorTest.laidOut(page 400.0 200.0))
+        c.ok("resolved by id" conn.connectorResolved)
+        c.eqStr("across the gap between them" conn.svgPath "M 100 30 L 140 30")
+    }
+
+    sfn main:void () {
+        def c (new ConnCheck())
+        print "=== EVG connectors and out-of-flow boxes ==="
+        EVGConnectorTest.testAbsoluteInGrid(c)
+        EVGConnectorTest.testStraight(c)
+        EVGConnectorTest.testResponsiveSides(c)
+        EVGConnectorTest.testRouting(c)
+        EVGConnectorTest.testUnresolved(c)
+        EVGConnectorTest.testAnchorById(c)
+        print ""
+        print ("passed=" + (to_string c.passed) + " failed=" + (to_string c.failed))
+        if (c.failed > 0) {
+            print "FAILURES"
+        } {
+            print "ALL PASS"
+        }
+    }
+}