x_ite 8.10.0 → 8.11.0

package/docs/assets/css/style.scss

@@ -17,12 +17,13 @@ $tab-count: {{ site.tabs | size | plus: 1 }}; // plus 1 for home tab
   --h3-color-strong: rgb(232, 201, 133);
   --h4-color: rgb(60, 107, 184);
   --h4-color-strong: rgb(175, 206, 255);
-  --example-background-color: rgba(27, 27, 30, 0.4);
+  --example-background-color: rgba(0, 0, 0, 0.471);
   --button-background-color: black;
   --system-red: rgb(255, 69, 58);
   --system-yellow: rgb(255, 214, 10);
   --system-blue: rgb(10, 132, 255);
   --system-green: rgb(48, 209, 88);
+  --playground-toolbar-color: rgba(48, 17, 78, 0.7);
   --playground-editor-background: rgba(0, 0, 0, 0.2);
 }
 
@@ -32,11 +33,13 @@ $tab-count: {{ site.tabs | size | plus: 1 }}; // plus 1 for home tab
   --h3-color-strong: rgb(173, 81, 0);
   --h4-color: rgb(29, 80, 163);
   --h4-color-strong: rgb(10, 80, 144);
+  --example-background-color: rgba(235, 235, 255, 0.644);
   --button-background-color: white;
   --system-red: rgb(255, 59, 48);
   --system-yellow: rgb(255, 204, 0);
   --system-blue: rgb(0, 122, 255);
   --system-green: rgb(52, 199, 89);
+  --playground-toolbar-color: rgba(182, 143, 219, 0.7);
   --playground-editor-background: rgba(0, 0, 0, 0.03);
 }
 
@@ -228,7 +231,37 @@ small, .small {
 .example p {
   margin-top: 0;
   margin-bottom: 0;
-  text-shadow: 1px 1px 0px var(--button-background-color);
+}
+
+.example .toolbar {
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  background-color: var(--example-background-color);
+}
+
+.example .toolbar span {
+   cursor: pointer;
+   padding: 0 3px;
+}
+
+.example .toolbar span.selected {
+   color: var(--h2-color);
+}
+
+.example .toolbar span.separator {
+   border-left: 1px solid var(--text-color);
+   margin: 0 0 0 5px;
+}
+
+.example .toolbar span.dot::before {
+   content: "·";
+   margin: 0 3px 0 4px;
+}
+
+.example .toolbar span.separator + .separator {
+   display: none;
 }
 
 .example x3d-canvas {

package/docs/assets/js/example.js

@@ -3,6 +3,7 @@ $("table.examples a") .on ("click", function ()
    let
       div      = $("div.example"),
       header   = div .find (".header"),
+      toolbar  = div .find (".toolbar"),
       canvas   = div .find ("x3d-canvas"),
       zip      = div .find ("zip");
 
@@ -13,9 +14,10 @@ $("table.examples a") .on ("click", function ()
    }
    else
    {
-      div    = $("<div></div>") .addClass ("example") .appendTo ("body");
-      header = $("<p></p>") .addClass ("header") .appendTo (div);
-      canvas = $("<x3d-canvas></x3d-canvas>") .appendTo (div);
+      div     = $("<div></div>") .addClass ("example") .appendTo ("body");
+      header  = $("<p></p>") .addClass ("header") .appendTo (div);
+      toolbar = $("<p></p>") .addClass ("toolbar") .appendTo (div);
+      canvas  = $("<x3d-canvas></x3d-canvas>") .appendTo (div);
 
       $("<i></i>") .addClass (["fas", "fa-solid", "fa-circle-xmark", "fa-fw"]) .appendTo (div) .on ("click", function ()
       {
@@ -26,11 +28,101 @@ $("table.examples a") .on ("click", function ()
       zip = $("<a></a>") .addClass ("zip") .text ("Download ZIP Archive") .appendTo ($("<p></p>") .appendTo (div));
    }
 
+   canvas .prop ("browser") .getBrowserOptions () .reset ();
+
    header .text ($(this) .attr ("title"));
    canvas .attr ("src", $(this) .attr ("href"));
    zip    .attr ("href", $(this) .attr ("href") .replace (/\.x3d$/, ".zip"));
 
+   updateToolbar (toolbar, canvas)
+
    console .log (`Loading ${$(this) .attr ("title")} ...`);
 
    return false;
 });
+
+function updateToolbar (toolbar, canvas)
+{
+   const browser = canvas .prop ("browser");
+
+   toolbar .empty ();
+
+   const antialiased = $("<span></span>")
+      .text ("antialiased")
+      .attr ("title", "Toggle antialiasing.")
+      .addClass (browser .getBrowserOption ("Antialiased") ? "selected" : "")
+      .on ("click", () =>
+      {
+         const value = !browser .getBrowserOption ("Antialiased");
+
+         browser .setBrowserOption ("Antialiased", value);
+
+         antialiased .toggleClass ("selected");
+      })
+      .appendTo (toolbar);
+
+   $("<span></span>") .addClass ("dot") .appendTo (toolbar);
+
+   const contentScale = $("<span></span>")
+      .text ("contentScale 1.0")
+      .attr ("title", "Toggle contentScale between 0.1, 1.0 and 2.0.")
+      .on ("click", () =>
+      {
+         const
+            index = ((contentScale .attr ("index") ?? 1) + 1) % 3,
+            value = [0.1, 1, 2][index];
+
+         browser .setBrowserOption ("ContentScale", value);
+
+         contentScale
+            .attr ("index", index)
+            .text ("contentScale " + value .toFixed (1))
+      })
+      .appendTo (toolbar);
+
+   $("<span></span>") .addClass ("dot") .appendTo (toolbar);
+
+   const pixelated = $("<span></span>")
+      .text ("pixelated")
+      .attr ("title", "Set CSS property image-rendering to pixelated.")
+      .addClass (canvas .css ("image-rendering") === "pixelated" ? "selected" : "")
+      .on ("click", () =>
+      {
+         canvas .css ("image-rendering", pixelated .hasClass ("selected") ? "unset" : "pixelated");
+
+         pixelated .toggleClass ("selected");
+      })
+      .appendTo (toolbar);
+
+   $("<span></span>") .addClass ("separator") .appendTo (toolbar);
+
+   const oit = $("<span></span>")
+      .text ("oit")
+      .attr ("title", "Toggle order independent transparency.")
+      .addClass (browser .getBrowserOption ("OrderIndependentTransparency") ? "selected" : "")
+      .on ("click", () =>
+      {
+         const value = !browser .getBrowserOption ("OrderIndependentTransparency");
+
+         browser .setBrowserOption ("OrderIndependentTransparency", value);
+
+         oit .toggleClass ("selected");
+      })
+      .appendTo (toolbar);
+
+   $("<span></span>") .addClass ("dot") .appendTo (toolbar);
+
+   const log = $("<span></span>")
+      .text ("log")
+      .attr ("title", "Toggle logarithmic depth buffer.")
+      .addClass (browser .getBrowserOption ("LogarithmicDepthBuffer") ? "selected" : "")
+      .on ("click", () =>
+      {
+         const value = !browser .getBrowserOption ("LogarithmicDepthBuffer");
+
+         browser .setBrowserOption ("LogarithmicDepthBuffer", value);
+
+         log .toggleClass ("selected");
+      })
+      .appendTo (toolbar);
+}