Add rotation support for SSAA in SVG; switch to Material Design icons

servo · Nov 20, 2017 · 529a3ea · 529a3ea
1 parent b005e6d
commit 529a3ea
Show file tree

Hide file tree

Showing 13 changed files with 357 additions and 87 deletions.
diff --git a/demo/client/css/pathfinder.css b/demo/client/css/pathfinder.css
@@ -28,6 +28,15 @@
     src: url("/woff2/inter-ui/Inter-UI-BoldItalic.woff2") format('woff2');
 }
 
+@font-face {
+  font-family: "Material Icons";
+  font-style: normal;
+  font-weight: 400;
+  src: local('Material Icons'),
+    local('MaterialIcons-Regular'),
+    url("/woff2/material-icons/MaterialIcons-Regular.woff2") format('woff2');
+}
+
 /*
  * Core
  */
@@ -51,7 +60,7 @@ nav {
     left: 1em;
     margin: 0;
 }
-#pf-settings-container {
+#pf-settings-container, #pf-rotate-slider-container {
     position: absolute;
     right: 1rem;
     bottom: 2rem;
@@ -61,15 +70,15 @@ nav {
 #pf-toolbar {
     margin-right: 1rem;
 }
-#pf-settings {
+#pf-settings, #pf-rotate-slider-card {
     text-align: initial;
     user-select: none;
     -moz-user-select: none;
     opacity: 1.0;
     transition: opacity 300ms, transform 300ms, visibility 300ms;
     transform: translateY(0);
 }
-#pf-settings:not(.pf-invisible) {
+#pf-settings:not(.pf-invisible), #pf-rotate-slider-card:not(.pf-invisible) {
     pointer-events: auto;
 }
 .pf-toolbar-button {
@@ -85,7 +94,7 @@ nav {
     position: absolute;
     visibility: hidden;
 }
-#pf-settings.pf-invisible {
+#pf-settings.pf-invisible, #pf-rotate-slider-card.pf-invisible {
     opacity: 0.0;
     transform: translateY(1em);
     visibility: hidden;
@@ -162,16 +171,32 @@ button > svg path {
 .pf-benchmark-results-label {
     font-weight: bold;
 }
+.pf-material-icons {
+    font-family: "Material Icons";
+    display: block;
+    font-size: 18px;
+    margin: -3px 0 -3px;
+}
+#pf-rotate-slider {
+    margin: 2px 0 0;
+}
 
 /*
  * Arrow
  *
  * http://www.cssarrowplease.com/
  */
 
+#pf-settings > .pf-arrow-box:after, #pf-settings .pf-arrow-box:before {
+    right: 22px;
+}
+
+#pf-rotate-slider-card > .pf-arrow-box:after, #pf-rotate-slider-card .pf-arrow-box:before {
+    right: 166px;
+}
+
 .pf-arrow-box:after, .pf-arrow-box:before {
 	top: 100%;
-	right: 22px;
 	border: solid transparent;
 	content: " ";
 	height: 0;
@@ -192,22 +217,6 @@ button > svg path {
 	margin-right: -15px;
 }
 
-#pf-zoom-pulse-button {
-    padding: 16px 30px 16px 14px;
-}
-
-/* https://www.h3xed.com/web-development/how-to-make-css-play-pause-icons-with-a-single-div */
-#pf-play-icon {
-    position: absolute;
-    display: block;
-    width: 0;
-    height: 0;
-    margin: -6px 3px 0;
-    border-top: 6px solid transparent;
-    border-left: 12px solid currentColor;
-    border-bottom: 6px solid transparent;
-}
-
 .github-corner {
     display: block;
     position: absolute;

diff --git a/demo/client/html/3d-demo.html.hbs b/demo/client/html/3d-demo.html.hbs
@@ -14,7 +14,7 @@
             <div id="pf-toolbar">
                 <button id="pf-screenshot-button" type="button"
                  class="btn btn-outline-secondary pf-toolbar-button">
-                    {{octicon "device-camera"}}
+                    <span class="pf-material-icons">photo_camera</span>
                 </button>
                 <div id="pf-settings-container">
                     <div id="pf-settings" class="card mb-4 pf-invisible">
@@ -40,7 +40,7 @@
                 <button id="pf-settings-button" type="button"
                  class="btn btn-outline-secondary pf-toolbar-button"
                  aria-expanded="false" aria-controls="#pf-settings">
-                    {{octicon "gear"}}
+                    <span class="pf-material-icons">settings</span>
                 </button>
             </div>
         </div>

diff --git a/demo/client/html/partials/header.html.hbs b/demo/client/html/partials/header.html.hbs
@@ -1,6 +1,5 @@
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <link rel="stylesheet" href="/css/bootstrap/bootstrap.css">
-<link rel="stylesheet" href="/css/octicons/octicons.css">
 <link rel="stylesheet" href="/css/pathfinder.css">
 <script type="text/javascript" src="/js/jquery/jquery.js"></script>
 <script type="text/javascript" src="/js/popper.js/popper.js"></script>

diff --git a/demo/client/html/svg-demo.html.hbs b/demo/client/html/svg-demo.html.hbs
@@ -17,20 +17,39 @@
                 <div class="btn-group" role="group" aria-label="Zoom">
                     <button id="pf-zoom-out-button" type="button"
                      class="btn btn-outline-secondary pf-toolbar-button">
-                        {{octicon "dash"}}
+                        <span class="pf-material-icons">remove</span>
                     </button>
                     <button id="pf-zoom-in-button" type="button"
                      class="btn btn-outline-secondary pf-toolbar-button">
-                        {{octicon "plus"}}
+                        <span class="pf-material-icons">add</span>
                     </button>
                 </div>
+                <div id="pf-rotate-slider-container">
+                    <div id="pf-rotate-slider-card" class="card mb-4 pf-invisible">
+                        <div class="card-body">
+                            <form class="d-inline mr-3">
+                                <input id="pf-rotate-slider" type="range" min="-3.14159"
+                                 max="3.14159" step="0.006136" value="0.0" autocomplete="off">
+                            </form>
+                            <button id="pf-rotate-close-button" type="button" class="close"
+                            aria-label="Close">
+                                <span aria-hidden="true">&times;</span>
+                            </button>
+                        </div>
+                        <div class="pf-arrow-box"></div>
+                    </div>
+                </div>
+                <button id="pf-rotate-button" type="button" title="Rotate"
+                 class="btn btn-outline-secondary pf-toolbar-button">
+                    <span class="pf-material-icons">rotate_left</span>
+                </button>
                 <button id="pf-zoom-pulse-button" type="button" title="Pulse Zoom"
                  class="btn btn-outline-secondary pf-toolbar-button">
-                    <span id="pf-play-icon"></span>
+                    <span class="pf-material-icons">play_arrow</span>
                 </button>
                 <button id="pf-screenshot-button" type="button"
                  class="btn btn-outline-secondary pf-toolbar-button">
-                    {{octicon "device-camera"}}
+                    <span class="pf-material-icons">photo_camera</span>
                 </button>
                 <div id="pf-settings-container">
                     <div id="pf-settings" class="card mb-4 pf-invisible">
@@ -64,7 +83,9 @@
                 </div>
                 <button id="pf-settings-button" type="button"
                 class="btn btn-outline-secondary pf-toolbar-button" aria-expanded="false"
-                aria-controls="#pf-settings">{{octicon "gear"}}</button>
+                aria-controls="#pf-settings">
+                    <span class="pf-material-icons">settings</span>
+                </button>
             </div>
         </div>
         {{>partials/spinner.html}}

diff --git a/demo/client/html/text-demo.html.hbs b/demo/client/html/text-demo.html.hbs
@@ -16,20 +16,20 @@
                 <div class="btn-group" role="group" aria-label="Zoom">
                     <button id="pf-zoom-out-button" type="button"
                      class="btn btn-outline-secondary pf-toolbar-button">
-                        {{octicon "dash"}}
+                        <span class="pf-material-icons">remove</span>
                     </button>
                     <button id="pf-zoom-in-button" type="button"
                      class="btn btn-outline-secondary pf-toolbar-button">
-                        {{octicon "plus"}}
+                        <span class="pf-material-icons">add</span>
                     </button>
                 </div>
                 <button id="pf-zoom-pulse-button" type="button" title="Pulse Zoom"
                  class="btn btn-outline-secondary pf-toolbar-button">
-                    <span id="pf-play-icon"></span>
+                    <span class="pf-material-icons">play_arrow</span>
                 </button>
                 <button id="pf-screenshot-button" type="button"
                  class="btn btn-outline-secondary pf-toolbar-button">
-                    {{octicon "device-camera"}}
+                    <span class="pf-material-icons">photo_camera</span>
                 </button>
                 <div id="pf-settings-container">
                     <div id="pf-settings" class="card mb-4 pf-invisible">
@@ -86,7 +86,9 @@
                 </div>
                 <button id="pf-settings-button" type="button"
                  class="btn btn-outline-secondary pf-toolbar-button" aria-expanded="false"
-                 aria-controls="#pf-settings">{{octicon "gear"}}</button>
+                 aria-controls="#pf-settings">
+                    <span class="pf-material-icons">settings</span>
+                </button>
             </div>
         </div>
         <div class="modal fade" id="pf-edit-text-modal" tabindex="-1" role="dialog"

diff --git a/demo/client/package.json b/demo/client/package.json
@@ -27,7 +27,6 @@
     "image-ssim": "^0.2.0",
     "jquery": "^3.2.1",
     "lodash": "^4.17.4",
-    "octicons": "^6.0.1",
     "opentype.js": "^0.7.3",
     "papaparse": "^4.3.6",
     "parse-color": "^1.0.0",

diff --git a/demo/client/src/app-controller.ts b/demo/client/src/app-controller.ts
@@ -131,35 +131,8 @@ export abstract class DemoAppController<View extends DemoView> extends AppContro
     start() {
         super.start();
 
-        const settingsCard = document.getElementById('pf-settings') as (HTMLElement | null);
-        const settingsButton = document.getElementById('pf-settings-button') as
-            (HTMLButtonElement | null);
-        const settingsCloseButton = document.getElementById('pf-settings-close-button') as
-            (HTMLButtonElement | null);
-
-        if (settingsButton != null) {
-            settingsButton.addEventListener('click', event => {
-                event.stopPropagation();
-                unwrapNull(settingsCard).classList.toggle('pf-invisible');
-            }, false);
-        }
-        if (settingsCloseButton != null) {
-            settingsCloseButton.addEventListener('click', () => {
-                unwrapNull(settingsCard).classList.add('pf-invisible');
-            }, false);
-        }
-        if (settingsCard != null) {
-            document.body.addEventListener('click', event => {
-                let element = event.target as Element | null;
-                while (element != null) {
-                    if (element === settingsCard)
-                        return;
-                    element = element.parentElement;
-                }
-
-                settingsCard.classList.add('pf-invisible');
-            }, false);
-        }
+        this.initPopup('pf-settings', 'pf-settings-button', 'pf-settings-close-button');
+        this.initPopup('pf-rotate-slider-card', 'pf-rotate-button', 'pf-rotate-close-button');
 
         const screenshotButton = document.getElementById('pf-screenshot-button') as
             HTMLButtonElement | null;
@@ -193,6 +166,16 @@ export abstract class DemoAppController<View extends DemoView> extends AppContro
             }, false);
         }
 
+        const rotateSlider = document.getElementById('pf-rotate-slider') as HTMLInputElement |
+            null;
+        if (rotateSlider != null) {
+            rotateSlider.addEventListener('input', event => {
+                this.view.then(view => {
+                    view.rotate((event.target as HTMLInputElement).valueAsNumber);
+                });
+            }, false);
+        }
+
         this.filePickerView = FilePickerView.create();
         if (this.filePickerView != null) {
             this.filePickerView.onFileLoaded = fileData => this.fileLoaded(fileData, null);
@@ -301,6 +284,38 @@ export abstract class DemoAppController<View extends DemoView> extends AppContro
         });
     }
 
+    private initPopup(cardID: string, popupButtonID: string, closeButtonID: string): void {
+        const card = document.getElementById(cardID) as HTMLElement | null;
+        const button = document.getElementById(popupButtonID) as HTMLButtonElement | null;
+        const closeButton = document.getElementById(closeButtonID) as HTMLButtonElement | null;
+
+        if (button != null) {
+            button.addEventListener('click', event => {
+                event.stopPropagation();
+                unwrapNull(card).classList.toggle('pf-invisible');
+            }, false);
+        }
+        if (closeButton != null) {
+            closeButton.addEventListener('click', () => {
+                unwrapNull(card).classList.add('pf-invisible');
+            }, false);
+        }
+
+        if (card == null)
+            return;
+
+        document.body.addEventListener('click', event => {
+            let element = event.target as Element | null;
+            while (element != null) {
+                if (element === card)
+                    return;
+                element = element.parentElement;
+            }
+
+            card.classList.add('pf-invisible');
+        }, false);
+    }
+
     private loadGammaLUT(): Promise<HTMLImageElement> {
         return window.fetch(GAMMA_LUT_URI)
                      .then(response => response.blob())