From 132aab9da0aa9660a3ce134a123e4039a50bed5e Mon Sep 17 00:00:00 2001
From: yyc12345 <yyc12321@outlook.com>
Date: Fri, 17 Apr 2020 23:31:27 +0800
Subject: [PATCH] enhance web viewer?

---
 SuperScriptViewer/SuperScriptViewer.py  |   2 +-
 SuperScriptViewer/static/site.css       |  26 +++++
 SuperScriptViewer/static/site.js        |  42 +++++--
 SuperScriptViewer/templates/viewer.html | 145 ++++++++++++++----------
 4 files changed, 147 insertions(+), 68 deletions(-)

diff --git a/SuperScriptViewer/SuperScriptViewer.py b/SuperScriptViewer/SuperScriptViewer.py
index 07388bc..bd898c7 100644
--- a/SuperScriptViewer/SuperScriptViewer.py
+++ b/SuperScriptViewer/SuperScriptViewer.py
@@ -4,7 +4,7 @@ import os
 import sys
 
 # debug use
-os.remove('decorate.db')
+# os.remove('decorate.db')
 
 print('Super Script View')
 if not os.path.isfile("decorate.db"):
diff --git a/SuperScriptViewer/static/site.css b/SuperScriptViewer/static/site.css
index 63b0e3e..f6d117f 100644
--- a/SuperScriptViewer/static/site.css
+++ b/SuperScriptViewer/static/site.css
@@ -1,8 +1,10 @@
+/*navigation style*/
 p.hamburger {
     margin: 0 5px 0 5px; 
     padding: 0;
 }
 
+/*graph style*/
 div.block-target {
     position: absolute;
     background: green;
@@ -81,4 +83,28 @@ div.cell-bio {
 text.link-delay {
     font-size: 12px;
     color: black;
+}
+
+/*side panel style*/
+div.tabitem-activated {
+    background: #0000ff;
+}
+b.tabitem-activated {
+    color: white;
+}
+
+div.tabitem-deactivated {
+    background: #ffffff00;
+}
+b.tabitem-deactivated {
+    color: black;
+}
+
+pre {
+    border: 1px solid black;
+    border-radius: 2px;
+    padding: 5px;
+    margin: 5px;
+    background: #3f3f3f;
+    color: white;
 }
\ No newline at end of file
diff --git a/SuperScriptViewer/static/site.js b/SuperScriptViewer/static/site.js
index 38f39b6..61840c1 100644
--- a/SuperScriptViewer/static/site.js
+++ b/SuperScriptViewer/static/site.js
@@ -1,4 +1,4 @@
-previousHighlight = ""
+previousHighlight = "";
 
 function highlightLink(target) {
     realTarget = ".target" + target
@@ -56,18 +56,44 @@ function queryInfo(obj) {
         },
         function(data, status) {
             //set id
-            $("#propertyWindow-id").text(obj);
+            $("#sidepanel-properties-id").text(obj);
 
             //set data
-            $("#propertyWindow-container").empty()
+            $("#sidepanel-properties-container").empty()
             for (var key in data) {
-                $("#propertyWindow-container").append("<p><b>" + key + ":</b><br />" + data[key] +"</p>")
+                $("#sidepanel-properties-container").append("<p><b>" + key + ":</b><br /><pre>" + data[key] +"</pre></p>")
             }
-
-            $("#propertyWindow-main").show();
         });
 }
 
-function closePropertyWindow() {
-    $("#propertyWindow-main").hide();
+function sidePanelSwitcher(target) {
+    // 0->property; 1->display; 2->tools
+    //disable all
+    $("#sidepanel-properties").hide();
+    $("#sidepanel-display").hide();
+    $("#sidepanel-tools").hide();
+    $(".tabitem").each(function() {
+        $(this).removeClass("tabitem-activated").addClass("tabitem-deactivated");
+    });
+
+    switch (target) {
+        case 0:
+            $("#sidepanel-properties").show();
+            $(".tabitem1").each(function() {
+                $(this).removeClass("tabitem-deactivated").addClass("tabitem-activated");
+            });
+            break;
+        case 1:
+            $("#sidepanel-display").show();
+            $(".tabitem2").each(function() {
+                $(this).removeClass("tabitem-deactivated").addClass("tabitem-activated");
+            });
+            break;
+        case 2:
+            $("#sidepanel-tools").show();
+            $(".tabitem3").each(function() {
+                $(this).removeClass("tabitem-deactivated").addClass("tabitem-activated");
+            });
+            break;
+    }
 }
diff --git a/SuperScriptViewer/templates/viewer.html b/SuperScriptViewer/templates/viewer.html
index 3603054..9f4a43e 100644
--- a/SuperScriptViewer/templates/viewer.html
+++ b/SuperScriptViewer/templates/viewer.html
@@ -9,9 +9,9 @@
     <script src="{{static_js}}"></script>
 </head>
 
-<body style="display: flex; flex-flow: column; height: 100%; width: 100%; margin: 0; padding: 0;">
-    <div style="display: flex; background: #cfcfcf; flex-flow: row; width: 100%; height: 50px;">
-        <div style="display: flex; flex-flow: row; width: 100%; height: 100%; overflow: scroll;">
+<body style="display: flex; flex-flow: row; height: 100%; width: 100%; margin: 0; padding: 0;">
+    <div style="display: flex; flex-flow: column; height: 100%; width: 80%; margin: 0; padding: 0;">
+        <div style="display: flex; background: #cfcfcf; flex-flow: row; width: 100%; height: 50px; overflow: scroll;">
 
             <p class="hamburger"><a href="/"><b>Script Hierarchy</b></a></p>
 
@@ -24,70 +24,97 @@
             <p class="hamburger"><b>{{ hamburgerCurrent|e  }}</b></p>
 
         </div>
-        <div style="width: 100px;">
-            <button style="width: 100px; height: 50px;">Help</button>
-        </div>
-    </div>
-    <div style="background: #7f7f7f; width: 100%; height: 100%; overflow: scroll; position: relative;">
-        <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;" 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;" 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;" 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;" 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;" 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;" onclick="highlightLink({{ bout.id }});"></div>
+
+        <div style="background: #7f7f7f; width: 100%; height: 100%; overflow: scroll; position: relative;">
+            <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;" 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;" 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;" 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;" 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;" 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;" onclick="highlightLink({{ bout.id }});"></div>
+                    {% endfor %}
+
+                    {% if i[13] != -1 %}
+                    <p class="block-expandable-text" style="top: 10px; left: 20px;"><a href="{{ "/%s/%s"|format(currentPath, i[13]) }}">{{ i[2]|e }}</a></p>
+                    {% else %}
+                    <p class="block-text" style="top: 10px; left: 20px;">{{ i[2]|e }}</p>
+                    {% endif %}
+                    <p class="block-asstext" style="top: 24px; left: 20px;">{{ i[3]|e }}</p>
+                </div>
                 {% endfor %}
 
-                {% if i[13] != -1 %}
-                <p class="block-expandable-text" style="top: 10px; left: 20px;"><a href="{{ "/%s/%s"|format(currentPath, i[13]) }}">{{ i[2]|e }}</a></p>
-                {% else %}
-                <p class="block-text" style="top: 10px; left: 20px;">{{ i[2]|e }}</p>
-                {% endif %}
-                <p class="block-asstext" style="top: 24px; left: 20px;">{{ i[3]|e }}</p>
+                {# cells content #}
+                {% for i in cells %}
+                <div class="{% if i[6] == 0 %}cell-plocal{% elif i[6] == 1 %}cell-shortcut{% elif i[6] == 2 %}cell-pio{% elif i[6] == 3 %}cell-bio{% else %}cell-ptarget{% endif %}"
+                style="height: {% if i[6] == 2 or i[6] == 3 %}6{% else %}5{% endif %}px; width: {% if i[6] == 2 or i[6] == 3 %}6{% else %}15{% endif %}px; top: {{ i[5] }}px; left: {{ i[4] }}px;"
+                title="{{ "Name: %s\nType: %s"|format(i[2], i[3]) }}" ondblclick="queryInfo({{ i[1] }});" onclick="highlightLink({{ i[1] }});"></div>
+                {% endfor %}
+
+                <svg version="1.1" width="{{ gWidth }}px" height="{{ gHeight }}px" style="position: absolute; top: 0; left: 0;pointer-events: none;">
+                    {# links content #}
+                    {% for i in links %}
+                    {% if i[1] == -2 %}
+                    <line class="link-elink 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="cyan" stroke-width="1px" stroke-dasharray="5, 1"></line>
+                    {% elif i[1] == -1 %}
+                    <line class="link-plink 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="blue" stroke-width="1px" stroke-dasharray="5, 1"></line>
+                    {% else %}
+                    <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-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 %}           
+                </svg>
             </div>
-            {% endfor %}
-
-            {# cells content #}
-            {% for i in cells %}
-            <div class="{% if i[6] == 0 %}cell-plocal{% elif i[6] == 1 %}cell-shortcut{% elif i[6] == 2 %}cell-pio{% elif i[6] == 3 %}cell-bio{% else %}cell-ptarget{% endif %}"
-            style="height: {% if i[6] == 2 or i[6] == 3 %}6{% else %}5{% endif %}px; width: {% if i[6] == 2 or i[6] == 3 %}6{% else %}15{% endif %}px; top: {{ i[5] }}px; left: {{ i[4] }}px;"
-            title="{{ "Name: %s\nType: %s"|format(i[2], i[3]) }}" ondblclick="queryInfo({{ i[1] }});"></div>
-            {% endfor %}
-
-            <svg version="1.1" width="{{ gWidth }}px" height="{{ gHeight }}px" style="position: absolute; top: 0; left: 0;pointer-events: none;">
-                {# links content #}
-                {% for i in links %}
-                {% if i[1] == -2 %}
-                <line class="link-elink 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="cyan" stroke-width="1px" stroke-dasharray="5, 1"></line>
-                {% elif i[1] == -1 %}
-                <line class="link-plink 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="blue" stroke-width="1px" stroke-dasharray="5, 1"></line>
-                {% else %}
-                <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-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 %}           
-            </svg>
         </div>
     </div>
-    <div id="propertyWindow-main" style="position: absolute; background: #0000007f; width: 100%; height: 100%; top: 0; left: 0; display: none;">
-        <div style="position: absolute; background: white; width: 50%; height: 50%; top: 25%; left: 25%; display: flex; flex-flow: column;">
-            <p style="margin: 5px;">Properties of <b id="propertyWindow-id"></b></p>
-            <div id="propertyWindow-container" style="width: 100%; height: 100%; overflow: scroll;">
+
+    <div style="display: flex; flex-flow: column; background: #cfcfcf; height: 100%; width: 20%; margin: 0; padding: 0; border-left: 1px solid black;">
+        <div style="display: flex; flex-flow: row; height: 30px; width: 100%; margin: 0; padding: 0; border-bottom: 1px solid black;">
+            <div class="tabitem tabitem1 tabitem-activated" style="height: 100%; width: 33.33%; text-align: center;" onclick="sidePanelSwitcher(0);"><b style="margin: 0;" class="tabitem tabitem1 tabitem-activated">Properties</b></div>
+            <div class="tabitem tabitem2 tabitem-deactivated" style="height: 100%; width: 33.33%; text-align: center;" onclick="sidePanelSwitcher(1);"><b style="margin: 0;" class="tabitem tabitem2 tabitem-deactivated">Display</b></div>
+            <div class="tabitem tabitem3 tabitem-deactivated" style="height: 100%; width: 33.33%; text-align: center;" onclick="sidePanelSwitcher(2);"><b style="margin: 0;" class="tabitem tabitem3 tabitem-deactivated">Tools</b></div>
+        </div>
+
+        <div id="sidepanel-properties" style="display: flex; flex-flow: column;width: 100%; height: 100%; display: flex; flex-flow: column;">
+            <p style="margin: 5px;">Properties of <b id="sidepanel-properties-id">---</b></p>
+            <div id="sidepanel-properties-container" style="width: 100%; height: 100%; overflow: scroll;">
             </div>
-            <button style="width: 100px; height: 25px; margin: 5px;" onclick="closePropertyWindow();">Close</button>
+        </div>
+
+        <div id="sidepanel-display" style="width: 100%; height: 100%; display: flex; flex-flow: column; overflow: scroll; display: none;">
+            <p style="margin: 5px;">Render:<br />
+                <input type="checkbox" id="sidepanel-display-plink" value="1">Show pLink and eLink</input>
+            </p>
+            <p style="margin: 5px;">Action:<br />
+                <input type="checkbox" id="sidepanel-display-property" value="1">Interactive property inspector</input><br />
+                <input type="checkbox" id="sidepanel-display-highlight" value="1">Highlight focused object</input><br />
+                <input type="checkbox" id="sidepanel-display-move" value="1">Move objects</input>
+            </p>
+        </div>
+
+        <div id="sidepanel-tools" style="width: 100%; height: 100%; display: flex; flex-flow: column; overflow: scroll; display: none;">
+            <p style="margin: 5px;">Object finder:<br />
+                <input type="text" id="sidepanel-tools-objfinder"></input><br />
+                <button style="height: 30px; margin: 10px 0 10px 0;">Find</button>
+            </p>
+            <p style="margin: 5px;">Misc:<br />
+                <button style="height: 30px; margin: 10px 0 10px 0;">Help</button><br />
+                <button style="height: 30px; margin: 10px 0 10px 0;">About</button>
+            </p>
         </div>
     </div>
+
 </body>
 
 </html>
\ No newline at end of file