add highlight link feature

SuperScriptViewer/DecoratorCore.py

@@ -36,7 +36,7 @@ def initDecorateDb(db):
 
     cur.execute("CREATE TABLE block([belong_to_graph] INETGER, [thisobj] INTEGER, [name] TEXT, [assist_text] TEXT, [pin-ptarget] TEXT, [pin-pin] TEXT, [pin-pout] TEXT, [pin-bin] TEXT, [pin-bout] TEXT, [x] REAL, [y] REAL, [width] REAL, [height] REAL, [expandable] INTEGER);")
     cur.execute("CREATE TABLE cell([belong_to_graph] INETGER, [thisobj] INTEGER, [name] TEXT, [assist_text] TEXT, [x] REAL, [y] REAL, [type] INTEGER);")
-    cur.execute("CREATE TABLE link([belong_to_graph] INETGER, [delay] INTEGER, [startobj] INTEGER, [endobj] INTEGER, [start_type] INTEGER, [end_type] INTEGER, [start_index] INTEGER, [end_index] INTEGER, [x1] REAL, [y1] REAL, [x2] REAL, [y2] REAL);")
+    cur.execute("CREATE TABLE link([belong_to_graph] INETGER, [delay] INTEGER, [start_interface] INTEGER, [end_interface] INTEGER, [startobj] INTEGER, [endobj] INTEGER, [start_type] INTEGER, [end_type] INTEGER, [start_index] INTEGER, [end_index] INTEGER, [x1] REAL, [y1] REAL, [x2] REAL, [y2] REAL);")
 
 def decorateGraph(exDb, deDb, graph):
     exCur = exDb.cursor()
@@ -519,8 +519,8 @@ def buildLink(exDb, deDb, target, currentGraphBlockCell, gWidth, gHeight):
     for i in exCur.fetchall():
         (x1, y1) = computLinkBTerminal(i[3], i[4], i[5], currentGraphBlockCell, target, gWidth)
         (x2, y2) = computLinkBTerminal(i[6], i[7], i[8], currentGraphBlockCell, target, gWidth)
-        deCur.execute("INSERT INTO link VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?);",
+        deCur.execute("INSERT INTO link VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?);",
-                      (target, i[2], i[3], i[6], i[4], i[7], i[5], i[6], x1, y1, x2, y2))
+                      (target, i[2], i[3], i[0], i[1], i[6], i[4], i[7], i[5], i[6], x1, y1, x2, y2))
 
 def computLinkBTerminal(obj, type, index, currentGraphBlockCell, target, maxWidth):
     if (obj == target):

SuperScriptViewer/static/site.js

@@ -0,0 +1,31 @@
+previousHighlight = ""
+
+function highlightLink(target) {
+    realTarget = ".target" + target
+
+    if (previousHighlight != "") {
+        //need restore
+        $(previousHighlight).each(function() {
+            if ($(this).hasClass("link-blink")) {
+                $(this).attr("stroke", "black")
+            }
+            if ($(this).hasClass("link-blinkDelay")) {
+                $(this).attr("fill", "black")
+            }
+        });
+    }
+
+    //apply new highlight
+    $(realTarget).each(function() {
+        if ($(this).hasClass("link-blink")) {
+            $(this).attr("stroke", "yellow")
+        }
+        if ($(this).hasClass("link-blinkDelay")) {
+            $(this).attr("fill", "yellow")
+        }
+    });
+
+    previousHighlight = realTarget
+    //cancel event seperate
+    event.stopPropagation();
+}

SuperScriptViewer/templates/viewer.html

@@ -5,6 +5,7 @@
     <meta charset="utf-8">
     <title>Script Viewer</title>
     <link rel="stylesheet" href="{{static_css}}">
+    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.0/dist/jquery.min.js"></script>
     <script src="{{static_js}}"></script>
 </head>
 
@@ -31,21 +32,21 @@
         <div>
             {# blocks content #}
             {% for i in blocks %}
-            <div class="block-body" style="height: {{ i[12] }}px; width: {{ i[11] }}px; top: {{ i[10] }}px; left: {{ i[9] }}px;">
+            <div class="block-body" style="height: {{ i[12] }}px; width: {{ i[11] }}px; top: {{ i[10] }}px; left: {{ i[9] }}px;" onclick="highlightLink({{ i[1] }});">
                 {% if i[4] != '{}' %}
-                <div class="block-target" title="{{ "Name: %s\nType: %s"|format(*pinDecoder2(i[4])) }}" style="height: 6px; width: 6px; top: 0; left: 0;"></div>
+                <div class="block-target" title="{{ "Name: %s\nType: %s"|format(*pinDecoder2(i[4])) }}" style="height: 6px; width: 6px; top: 0; left: 0;" onclick="highlightLink({{ pinDecoder(i[4]).id }});"></div>
                 {% endif %}
                 {% for pin in pinDecoder(i[5]) %}
-                <div class="block-p" title="{{ "Name: %s\nType: %s"|format(pin.name, pin.type) }}" style="height: 6px; width: 6px; top: 0; left: {{ 20 + loop.index0 * ( 6 + 20) }}px;"></div>
+                <div class="block-p" title="{{ "Name: %s\nType: %s"|format(pin.name, pin.type) }}" style="height: 6px; width: 6px; top: 0; left: {{ 20 + loop.index0 * ( 6 + 20) }}px;" onclick="highlightLink({{ pin.id }});"></div>
                 {% endfor %}
                 {% for pout in pinDecoder(i[6]) %}
-                <div class="block-p" title="{{ "Name: %s\nType: %s"|format(pout.name, pout.type) }}" style="height: 6px; width: 6px; bottom: 0; left: {{ 20 + loop.index0 * ( 6 + 20) }}px;"></div>
+                <div class="block-p" title="{{ "Name: %s\nType: %s"|format(pout.name, pout.type) }}" style="height: 6px; width: 6px; bottom: 0; left: {{ 20 + loop.index0 * ( 6 + 20) }}px;" onclick="highlightLink({{ pout.id }});"></div>
                 {% endfor %}
                 {% for bin in pinDecoder(i[7]) %}
-                <div class="block-b" title="{{ "Name: %s\nType: %s"|format(bin.name, bin.type) }}" style="height: 6px; width: 6px; top: {{ 10 + loop.index0 * ( 6 + 20) }}px; left: 0;"></div>
+                <div class="block-b" title="{{ "Name: %s\nType: %s"|format(bin.name, bin.type) }}" style="height: 6px; width: 6px; top: {{ 10 + loop.index0 * ( 6 + 20) }}px; left: 0;" onclick="highlightLink({{ bin.id }});"></div>
                 {% endfor %}
                 {% for bout in pinDecoder(i[8]) %}
-                <div class="block-b" title="{{ "Name: %s\nType: %s"|format(bout.name, bout.type) }}" style="height: 6px; width: 6px; top: {{ 10 + loop.index0 * ( 6 + 20) }}px; right: 0;"></div>
+                <div class="block-b" title="{{ "Name: %s\nType: %s"|format(bout.name, bout.type) }}" style="height: 6px; width: 6px; top: {{ 10 + loop.index0 * ( 6 + 20) }}px; right: 0;" onclick="highlightLink({{ bout.id }});"></div>
                 {% endfor %}
 
                 {% if i[13] != -1 %}
@@ -72,8 +73,8 @@
                 {% elif i[1] == -1 %}
                 {# todo: finish plink #}
                 {% else %}
-                <line x1="{{ i[8] }}" y1="{{ i[9] }}" x2="{{ i[10] }}" y2="{{ i[11] }}" stroke="black" stroke-width="1px"></line>
+                <line class="link-blink target{{ i[2] }} target{{ i[3] }} target{{ i[4] }} target{{ i[5] }}" x1="{{ i[10] }}" y1="{{ i[11] }}" x2="{{ i[12] }}" y2="{{ i[13] }}" stroke="black" stroke-width="1px"></line>
-                <text class="link-delay" x="{{ (i[8] + i[10]) / 2 }}" y="{{ (i[9] + i[11]) / 2 }}" fill="black">{{ i[1] }}</text>
+                <text class="link-blinkDelay target{{ i[2] }} target{{ i[3] }} link-delay target{{ i[4] }} target{{ i[5] }}" x="{{ (i[10] + i[12]) / 2 }}" y="{{ (i[11] + i[13]) / 2 }}" fill="black">{{ i[1] }}</text>
                 {% endif %}
                 {% endfor %}
                 <!-- <line x1="320" y1="200" x2="100" y2="100" stroke="blue" stroke-width="1px" stroke-dasharray="10, 5">