playground:test_3js

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision		 Previous revision
playground:test_3js [2020/08/19 17:59] – hnagelplayground:test_3js [2020/08/20 10:17] (current) – hnagel
Line 3: Line 3:
 </code> </code>
 <HTML> <HTML>
-<div class="threejs_output"><!--+<!--
 polymake for knusper polymake for knusper
-Wed Aug 19 21:27:01 2020+Thu Aug 20 14:10:19 2020
 unnamed unnamed
 --> -->
Line 25: Line 25:
          .group{padding-bottom: 15px;}          .group{padding-bottom: 15px;}
          .settings * {z-index: 11; }          .settings * {z-index: 11; }
-         .settings{z-index: 10; font-family: Arial, Helvetica, sans-serif; margin-left: 30px; visibility: hidden; width: 14em; height: 90%; border: solid 1px silver; padding: 2px; overflow-y: scroll; background-color: white; position: absolute }+         .settings{z-index: 10; font-family: Arial, Helvetica, sans-serif; margin-left: 30px; visibility: hidden; width: 14em; height: 96%; border: solid 1px silver; padding: 2px; overflow-y: scroll; box-sizing: border-box; background-color: white; position: absolute;}
          .indented{margin-left: 20px; margin-top: 10px; padding-bottom: 0px;}           .indented{margin-left: 20px; margin-top: 10px; padding-bottom: 0px;} 
          .shownObjectsList{overflow: auto; max-width: 150px; max-height: 150px;}          .shownObjectsList{overflow: auto; max-width: 150px; max-height: 150px;}
          .showSettingsButton{visibility: visible; z-index: 12; position: absolute }          .showSettingsButton{visibility: visible; z-index: 12; position: absolute }
          .hideSettingsButton{visibility: hidden; z-index: 12; position: absolute; opacity: 0.5}          .hideSettingsButton{visibility: hidden; z-index: 12; position: absolute; opacity: 0.5}
-         .resetButton{margin-top: 10px;} +         button{margin-left: 0; margin-top: 10px}
-         button{margin-left: 0;}+
          img{cursor: pointer;}          img{cursor: pointer;}
          .suboption{padding-top: 15px;}          .suboption{padding-top: 15px;}
-         #model95738212468 { position: relative;  width: 100%; height: 70vh; }+         #model47529851256 { width: 100%; height: 100%; } 
 +         .threejs_container { width: 100%; height: 75vh;} 
 +         .settings{max-height: 74vh} 
          input[type=range] {          input[type=range] {
            -webkit-appearance: none;            -webkit-appearance: none;
Line 130: Line 131:
    </head>    </head>
 <body> <body>
 +   <div class='threejs_container'>
  <div id='settings_0' class='settings'>  <div id='settings_0' class='settings'>
  <div class=group id='transparency_0' class='transparency'>  <div class=group id='transparency_0' class='transparency'>
Line 143: Line 144:
  <div><input type='checkbox' id='changeRotationY_0'> y-axis</div>  <div><input type='checkbox' id='changeRotationY_0'> y-axis</div>
  <div><input type='checkbox' id='changeRotationZ_0'> z-axis</div>  <div><input type='checkbox' id='changeRotationZ_0'> z-axis</div>
- <button id='resetButton_0' class='resetButton' >Reset</button>+ <button id='resetButton_0'>Reset</button>
  </div>  </div>
  
Line 155: Line 156:
  <strong>Display</strong>  <strong>Display</strong>
  <div class=indented>  <div class=indented>
- <div><input type='checkbox' id='labelsCheckboxInput_0' checked>Labels</div> + <div id='shownObjectTypesList_0' class='shownObjectsList'></div>
- <div><input type='checkbox' id='pointsCheckboxInput_0' checked>Points</div> +
- <div><input type='checkbox' id='edgesCheckboxInput_0' checked>Edges</div> +
- <div><input type='checkbox' id='facesCheckboxInput_0' checked>Faces</div> +
- <div><input type='checkbox' id='arrowheadsCheckboxInput_0' checked>Arrowheads</div>+
  </div>  </div>
  <div class=suboption>Objects</div>  <div class=suboption>Objects</div>
Line 180: Line 177:
  
  </div> <!-- end of settings -->  </div> <!-- end of settings -->
- <img id='hideSettingsButton_0' class='hideSettingsButton' src='/kernelspecs/polymake/close.svg' width=20px"> + <img id='hideSettingsButton_0' class='hideSettingsButton' src='/kernelspecs/r118/polymake/close.svg' width=20px"> 
- <img id='showSettingsButton_0' class='showSettingsButton' src='/kernelspecs/polymake/menu.svg' width=20px"> + <img id='showSettingsButton_0' class='showSettingsButton' src='/kernelspecs/r118/polymake/menu.svg' width=20px"> 
-   <div id="model95738212468"></div>+<div id="model47529851256"></div> 
 +</div>
    <script>    <script>
     requirejs.config({     requirejs.config({
       paths: {       paths: {
-        three: '/kernelspecs/polymake/three', +        three: '/kernelspecs/r118/polymake/three', 
-        TrackballControls: '/kernelspecs/polymake/TrackballControls', +        TrackballControls: '/kernelspecs/r118/polymake/TrackballControls', 
-        Projector: '/kernelspecs/polymake/Projector', +        Projector: '/kernelspecs/r118/polymake/Projector', 
-        SVGRenderer: '/kernelspecs/polymake/SVGRenderer', +        SVGRenderer: '/kernelspecs/r118/polymake/SVGRenderer', 
-        WEBGL: '/kernelspecs/polymake/WebGL',+        WEBGL: '/kernelspecs/r118/polymake/WebGL',
       },       },
       shim: {       shim: {
Line 208: Line 206:
     THREE.SVGRenderer = SVGRenderer;     THREE.SVGRenderer = SVGRenderer;
     THREE.WEBGL = WEBGL;     THREE.WEBGL = WEBGL;
 +
 +// COMMON_CODE_BLOCK_BEGIN
  
 const intervalLength = 25; // for automatic animations const intervalLength = 25; // for automatic animations
 const explodableModel = false;  const explodableModel = false; 
-var foldables = []; +const modelContains = { points: false, pointlabels: false, lines: false, edgelabels: false, faces: false, arrowheads: false }; 
-var three = document.getElementById("model95738212468");+const foldables = []; 
 + 
 +var three = document.getElementById("model47529851256");
 var scene = new THREE.Scene(); var scene = new THREE.Scene();
  
Line 274: Line 276:
 }; };
 // select the target node // select the target node
-var target = document.querySelector('#model95738212468');+var target = document.querySelector('#model47529851256');
  
 // create an observer instance // create an observer instance
Line 320: Line 322:
 obj0.userData.edgeindices = [0, 1, 0, 2, 1, 3, 2, 3, 0, 4, 1, 5, 4, 5, 2, 6, 4, 6, 3, 7, 5, 7, 6, 7]; obj0.userData.edgeindices = [0, 1, 0, 2, 1, 3, 2, 3, 0, 4, 1, 5, 4, 5, 2, 6, 4, 6, 3, 7, 5, 7, 6, 7];
    <!-- Edge style -->    <!-- Edge style -->
-obj0.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, depthTest: true, transparent: false, linewidth: 1.5 } );+obj0.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, depthTest: true, linewidth: 1.5, transparent: false } );
 obj0.userData.facets = [[0, 4, 6, 2], [7, 5, 1, 3], [5, 4, 0, 1], [2, 6, 7, 3], [0, 2, 3, 1], [6, 4, 5, 7]]; obj0.userData.facets = [[0, 4, 6, 2], [7, 5, 1, 3], [5, 4, 0, 1], [2, 6, 7, 3], [0, 2, 3, 1], [6, 4, 5, 7]];
    <!-- Facet style -->    <!-- Facet style -->
-obj0.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, side: THREE.DoubleSide, depthFunc: THREE.LessDepth, polygonOffsetFactor: 1, polygonOffset: true, depthWrite: true, transparent: true, opacity: 1, polygonOffsetUnits: 1 } );+obj0.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: true, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 1, side: THREE.DoubleSide, transparent: true } );
 init_object(obj0); init_object(obj0);
 scene.add(obj0); scene.add(obj0);
Line 368: Line 370:
  
 function init_object(obj) { function init_object(obj) {
-   if (obj.userData.hasOwnProperty("pointmaterial")) { +    if (obj.userData.hasOwnProperty("pointmaterial")) { 
-      init_points(obj); +        init_points(obj); 
-   } +        modelContains.points = true; 
-   if (obj.userData.hasOwnProperty("pointlabels")) { +    } 
-      init_pointlabels(obj); +    if (obj.userData.hasOwnProperty("pointlabels")) { 
-   } +        init_pointlabels(obj); 
-   if (obj.userData.hasOwnProperty("edgematerial")) { +        modelContains.pointlabels = true; 
-      init_lines(obj); +    } 
-   } +    if (obj.userData.hasOwnProperty("edgematerial")) { 
-   if (obj.userData.hasOwnProperty("edgelabels")) { +        init_lines(obj); 
-      init_edgelabels(obj); +        modelContains.lines = true; 
-   } +    } 
-   if (obj.userData.hasOwnProperty("arrowstyle")) { +    if (obj.userData.hasOwnProperty("edgelabels")) { 
-      init_arrowheads(obj); +        init_edgelabels(obj); 
-   } +        modelContains.edgelabels = true; 
-   if (obj.userData.hasOwnProperty("facetmaterial")) { +    } 
-      init_faces(obj); +    if (obj.userData.hasOwnProperty("arrowstyle")) { 
-   }+        init_arrowheads(obj); 
 +        modelContains.arrowheads = true; 
 +    } 
 +    if (obj.userData.hasOwnProperty("facetmaterial")) { 
 +        init_faces(obj); 
 +        modelContains.faces = true; 
 +    }
 } }
  
Line 586: Line 594:
  
  
-// ------------------------ FOLDING ------------------------------------------------ 
-// --------------------------------------------------------------------------------- 
-// rotate point p around axis defined by points p1 and p2 by given angle 
-function rotate(p, p1, p2, angle ){    
-   angle = -angle; 
-   var x = p.x, y = p.y, z = p.z,  
-   a = p1.x, b = p1.y, c = p1.z,  
-   u = p2.x-p1.x, v = p2.y-p1.y, w = p2.z-p1.z; 
-   var result = []; 
-   var L = u*u + v*v + w*w; 
-   var sqrt = Math.sqrt; 
-   var cos = Math.cos; 
-   var sin = Math.sin; 
- 
-   result[0] = ((a*(v*v+w*w)-u*(b*v+c*w-u*x-v*y-w*z))*(1-cos(angle))+L*x*cos(angle)+sqrt(L)*(-c*v+b*w-w*y+v*z)*sin(angle))/L; 
-   result[1] = ((b*(u*u+w*w)-v*(a*u+c*w-u*x-v*y-w*z))*(1-cos(angle))+L*y*cos(angle)+sqrt(L)*(c*u-a*w+w*x-u*z)*sin(angle))/L; 
-   result[2] = ((c*(u*u+v*v)-w*(a*u+b*v-u*x-v*y-w*z))*(1-cos(angle))+L*z*cos(angle)+sqrt(L)*(-b*u+a*v-v*x+u*y)*sin(angle))/L; 
- 
-   return result; 
-} 
- 
-var fold = function(event){ 
-    var obj = foldables[Number(event.currentTarget.name)]; 
-    var foldvalue = Number(event.currentTarget.value); 
-    var scale = foldvalue - obj.userData.oldscale; 
- 
-    for (var j=0; j<obj.userData.axes.length; j++) { 
-        rotateVertices(obj, j, scale); 
-    } 
-    update(obj); 
-    obj.userData.oldscale += scale; 
-    lookAtBarycenter(obj); 
-} 
- 
-function lookAtBarycenter(obj){ 
-    control.target = barycenter(obj); 
-} 
- 
-function barycenter(obj) { 
-   var center = new THREE.Vector3(0,0,0); 
-   var points = obj.userData.points; 
-   for (var i=0; i<points.length; i++){ 
-      center.add(points[i].vector); 
-   } 
-   center.divideScalar(points.length); 
-   return center; 
-} 
- 
-function rotateVertices(obj, edge, scale) { 
-   var axes = obj.userData.axes; 
-   var subtrees = obj.userData.subtrees; 
-   var points = obj.userData.points; 
-   var angles = obj.userData.angles; 
-   if (edge < axes.length){ 
-      for (var j=0; j<subtrees[edge].length; j++){ 
-         var rotP = rotate(points[subtrees[edge][j]].vector, points[axes[edge][0]].vector,points[axes[edge][1]].vector, scale * (Math.PI - angles[edge])); 
-         points[subtrees[edge][j]].set(rotP[0],rotP[1],rotP[2]); 
-      } 
-   } 
-} 
- 
-function update(obj) { 
-   updateFacesPosition(obj); 
-   updateEdgesPosition(obj); 
-} 
- 
-if (foldables.length) { 
-    var settings = document.getElementById('settings_0'); 
-    var foldDiv = document.createElement('div'); 
-    foldDiv.id = 'fold_0'; 
-    var title = document.createElement('strong'); 
-    title.innerHTML = 'Fold'; 
-    foldDiv.appendChild(title); 
-    foldDiv.className = 'group'; 
-    for (var i=0; i<foldables.length; i++) { 
-        var range = document.createElement('input'); 
-        range.type = 'range'; 
-        range.min = 0; 
-        range.max = 1; 
-        range.value = 0; 
-        range.step = 0.001; 
-        range.name = String(i); 
-        range.oninput = fold; 
-        foldDiv.appendChild(range); 
-    } 
-    lookAtBarycenter(foldables[0]); 
-    settings.insertBefore(foldDiv,settings.childNodes[0]); 
-} 
  
 var xRotationEnabled = false; var xRotationEnabled = false;
Line 712: Line 632:
 }; };
  
- +if ( THREE.WEBGL.isWebGLAvailable() ) { 
-     + render(); 
-render(); +} else { 
- + var warning = WEBGL.getWebGLErrorMessage(); 
-if (explodableModel) { + three.appendChild( warning );
-    for (var i=0; i<scene.children.length; i++) { +
-        obj = scene.children[i]; +
-        if ( obj.userData.explodable ) { +
-            computeCentroid(obj); +
-        } +
-    }+
 } }
-function computeCentroid(obj) { +    
-    centroid = new THREE.Vector3(); +
-    obj.userData.points.forEach(function(pmpoint) { +
-        centroid.add(pmpoint.vector);  +
-    }); +
-    centroid.divideScalar(obj.userData.points.length); +
-    obj.userData.centroid = centroid; +
-} +
 function changeTransparency() { function changeTransparency() {
     var opacity = 1-Number(event.currentTarget.value);     var opacity = 1-Number(event.currentTarget.value);
Line 795: Line 701:
 } }
  
-function takeSvgScreenshot(){ +// ------------------------ FOLDING ------------------------------------------------ 
-    var labelsShown = document.getElementById('labelsCheckboxInput_0').checked; +// --------------------------------------------------------------------------------- 
-    if (labelsShown){ +// rotate point p around axis defined by points p1 and p2 by given angle 
-        setVisibility(false,"pointlabels"); +function rotate(p, p1, p2, angle ){    
-        setVisibility(false,"edgelabels"); +   angle = -angle; 
-    } +   var x = p.x, y = p.y, z = p.z,  
-    svgRenderer.render(scene,camera); +   a = p1.x, b = p1.y, c = p1.z,  
-    svgElement = XMLS.serializeToString(svgRenderer.domElement); +   u = p2.x-p1.x, v = p2.y-p1.y, w = p2.z-p1.z; 
-     +   var result = []; 
-    if (labelsShown){ +   var L = u*u + v*v + w*w; 
-        setVisibility(true,"pointlabels"); +   var sqrt = Math.sqrt; 
-        setVisibility(true,"edgelabels");+   var cos = Math.cos; 
 +   var sin = Math.sin; 
 + 
 +   result[0] = ((a*(v*v+w*w)-u*(b*v+c*w-u*x-v*y-w*z))*(1-cos(angle))+L*x*cos(angle)+sqrt(L)*(-c*v+b*w-w*y+v*z)*sin(angle))/L; 
 +   result[1] = ((b*(u*u+w*w)-v*(a*u+c*w-u*x-v*y-w*z))*(1-cos(angle))+L*y*cos(angle)+sqrt(L)*(c*u-a*w+w*x-u*z)*sin(angle))/L; 
 +   result[2] = ((c*(u*u+v*v)-w*(a*u+b*v-u*x-v*y-w*z))*(1-cos(angle))+L*z*cos(angle)+sqrt(L)*(-b*u+a*v-v*x+u*y)*sin(angle))/L; 
 + 
 +   return result; 
 +} 
 + 
 +var fold = function(event){ 
 +    var obj = foldables[Number(event.currentTarget.name)]; 
 +    var foldvalue = Number(event.currentTarget.value); 
 +    var scale = foldvalue - obj.userData.oldscale; 
 + 
 +    for (var j=0; j<obj.userData.axes.length; j++) { 
 +        rotateVertices(obj, j, scale);
     }     }
 +    update(obj);
 +    obj.userData.oldscale += scale;
 +    lookAtBarycenter(obj);
 +}
  
-    if (document.getElementById('tab_0').checked){ +function lookAtBarycenter(obj){ 
-        //show in new tab +    control.target = barycenter(obj); 
-        var myWindow = window.open("",""); +} 
-        myWindow.document.body.innerHTML = svgElement; + 
-    } else{ +function barycenter(obj) { 
-        // download svg file  +   var center = new THREE.Vector3(0,0,0); 
-        download("screenshot.svg", svgElement);+   var points = obj.userData.points; 
 +   for (var i=0; i<points.length; i++){ 
 +      center.add(points[i].vector); 
 +   } 
 +   center.divideScalar(points.length); 
 +   return center; 
 +} 
 + 
 +function rotateVertices(obj, edge, scale) { 
 +   var axes = obj.userData.axes; 
 +   var subtrees = obj.userData.subtrees; 
 +   var points = obj.userData.points; 
 +   var angles = obj.userData.angles; 
 +   if (edge < axes.length){ 
 +      for (var j=0; j<subtrees[edge].length; j++){ 
 +         var rotP = rotate(points[subtrees[edge][j]].vector, points[axes[edge][0]].vector,points[axes[edge][1]].vector, scale * (Math.PI - angles[edge])); 
 +         points[subtrees[edge][j]].set(rotP[0],rotP[1],rotP[2]); 
 +      } 
 +   } 
 +} 
 + 
 +function update(obj) { 
 +   updateFacesPosition(obj); 
 +   updateEdgesPosition(obj); 
 +} 
 + 
 +if (foldables.length) { 
 +    var settings = document.getElementById('settings_0'); 
 +    var foldDiv = document.createElement('div'); 
 +    foldDiv.id = 'fold_0'; 
 +    var title = document.createElement('strong'); 
 +    title.innerHTML = 'Fold'; 
 +    foldDiv.appendChild(title); 
 +    foldDiv.className = 'group'; 
 +    for (var i=0; i<foldables.length; i++) { 
 +        var range = document.createElement('input'); 
 +        range.type = 'range'; 
 +        range.min = 0; 
 +        range.max = 1; 
 +        range.value = 0; 
 +        range.step = 0.001; 
 +        range.name = String(i); 
 +        range.oninput = fold; 
 +        foldDiv.appendChild(range);
     }     }
 +    lookAtBarycenter(foldables[0]);
 +    settings.insertBefore(foldDiv,settings.childNodes[0]);
 } }
 +
          
 // ---------------------- EXPLOSION ------------------------------------------------ // ---------------------- EXPLOSION ------------------------------------------------
 // --------------------------------------------------------------------------------- // ---------------------------------------------------------------------------------
 +
 +if (explodableModel) {
 +    for (var i=0; i<scene.children.length; i++) {
 +        obj = scene.children[i];
 +        if ( obj.userData.explodable ) {
 +            computeCentroid(obj);
 +        }
 +    }
 +    document.getElementById('explodeRange_0').oninput = triggerExplode;
 +    document.getElementById('explodeCheckbox_0').onchange = triggerAutomaticExplode;
 +    document.getElementById('explodingSpeedRange_0').oninput = setExplodingSpeed;
 +}
 +
 +function computeCentroid(obj) {
 +    centroid = new THREE.Vector3();
 +    obj.userData.points.forEach(function(pmpoint) {
 +        centroid.add(pmpoint.vector);
 +    });
 +    centroid.divideScalar(obj.userData.points.length);
 +    obj.userData.centroid = centroid;
 +}
  
 function explode(factor) { function explode(factor) {
Line 898: Line 891:
 } }
  
-function showOrHideObject(event){ +// ---------------------- DISPLAY -------------------------------------------------- 
-    var nr = Number(event.currentTarget.name); +// ---------------------------------------------------------------------------------
-    scene.children[nr].visible = event.currentTarget.checked; +
-} +
-    +
  
-// append checkboxes for displaying or hiding objects +const objectTypeInnerHTMLs = { points: "Points", pointlabels: "Point labels", lines: "Edges", edgelabels: "Edge labels", faces: "Faces", arrowheads: "Arrow heads" }; 
-var shownObjectsList = document.getElementById('shownObjectsList_0'); +const objectTypeVisible = {}; 
-for (var i=0; i<scene.children.length; i++){ +Object.assign(objectTypeVisible,modelContains); 
-    obj = scene.children[i]; +const sortedObjectTypeKeys = Object.keys(objectTypeInnerHTMLs).sort(); 
-    var objNode = document.createElement('span'); +const shownObjectTypesList = document.getElementById('shownObjectTypesList_0');
-    objNode.innerHTML = obj.name + '<br>'; +
-    var checkbox = document.createElement('input'); +
-    checkbox.type = 'checkbox'; +
-    checkbox.checked = true; +
-    checkbox.name = String(i); +
-    checkbox.onchange = showOrHideObject; +
-    shownObjectsList.appendChild(checkbox); +
-    shownObjectsList.appendChild(objNode); +
-}+
  
 function setVisibility(bool,objname) { function setVisibility(bool,objname) {
Line 928: Line 909:
 } }
  
-function toggleLabels(event) { +function toggleObjectTypeVisibility(event){ 
-    setVisibility(event.currentTarget.checked,"pointlabels"); +    var name = event.currentTarget.name; 
-    setVisibility(event.currentTarget.checked,"edgelabels");+    var checked = event.currentTarget.checked; 
 +    objectTypeVisible[name] = checked; 
 +    setVisibility(checked,name);
 } }
  
-function toggleFaces(event) { +for (var i=0; i<sortedObjectTypeKeys.length; i++){ 
-    setVisibility(event.currentTarget.checked,"faces");+    var key = sortedObjectTypeKeys[i]; 
 +    if (modelContains[key]) { 
 +        var objTypeNode = document.createElement('span'); 
 +        objTypeNode.innerHTML = objectTypeInnerHTMLs[key] + '<br>'; 
 +        var checkbox = document.createElement('input'); 
 +        checkbox.type = 'checkbox'; 
 +        checkbox.checked = true; 
 +        checkbox.name = key; 
 +        checkbox.onchange = toggleObjectTypeVisibility; 
 +        shownObjectTypesList.appendChild(checkbox); 
 +        shownObjectTypesList.appendChild(objTypeNode); 
 +    }
 } }
  
-function toggleEdges(event) { +// ------------------------------------------------------
-    setVisibility(event.currentTarget.checked,"lines"); +
-}+
  
-function togglePoints(event) { +function toggleObjectVisibility(event){ 
-    setVisibility(event.currentTarget.checked,"points");+    var nr = Number(event.currentTarget.name); 
 +    scene.children[nr].visible = event.currentTarget.checked;
 } }
  
-function toggleArrowheads(event) { +// append checkboxes for displaying or hiding objects 
-    setVisibility(event.currentTarget.checked,"arrowheads");+var shownObjectsList = document.getElementById('shownObjectsList_0'); 
 +for (var i=0; i<scene.children.length; i++){ 
 +    obj = scene.children[i]; 
 +    var objNode = document.createElement('span'); 
 +    objNode.innerHTML = obj.name + '<br>'; 
 +    var checkbox = document.createElement('input'); 
 +    checkbox.type = 'checkbox'; 
 +    checkbox.checked = true; 
 +    checkbox.name = String(i); 
 +    checkbox.onchange = toggleObjectVisibility; 
 +    shownObjectsList.appendChild(checkbox); 
 +    shownObjectsList.appendChild(objNode);
 } }
  
-document.getElementById('labelsCheckboxInput_0').onchange = toggleLabels; +// ---------------------- SVG ------------------------------------------------------ 
-document.getElementById('pointsCheckboxInput_0').onchange = togglePoints; +// ---------------------------------------------------------------------------------
-document.getElementById('facesCheckboxInput_0').onchange = toggleFaces; +
-document.getElementById('edgesCheckboxInput_0').onchange = toggleEdges; +
-document.getElementById('arrowheadsCheckboxInput_0').onchange = toggleArrowheads;+
  
 +function takeSvgScreenshot() {
 +    if (objectTypeVisible["pointlabels"]) {
 +        setVisibility(false,"pointlabels");
 +    }
 +    if (objectTypeVisible["edgelabels"]) {
 +        setVisibility(false,"edgelabels");
 +    }
 +    svgRenderer.render(scene,camera);
 +    svgElement = XMLS.serializeToString(svgRenderer.domElement);
 +    
 +    if (objectTypeVisible["pointlabels"]) {
 +        setVisibility(true,"pointlabels");
 +    }
 +    if (objectTypeVisible["edgelabels"]) {
 +        setVisibility(true,"edgelabels");
 +    }
  
 +    if (document.getElementById('tab_0').checked){
 +        //show in new tab
 +        var myWindow = window.open("","");
 +        myWindow.document.body.innerHTML = svgElement;
 +    } else{
 +        // download svg file 
 +        download("screenshot.svg", svgElement);
 +    }
 +}
  
 function download(filename, text) { function download(filename, text) {
Line 970: Line 996:
 } }
  
-var tempobj; +
-tempobj = document.getElementById('explodeRange_0'); +
-if (tempobj) { +
-   tempobj.oninput = triggerExplode; +
-   document.getElementById('explodeCheckbox_0').onchange = triggerAutomaticExplode; +
-   document.getElementById('explodingSpeedRange_0').oninput = setExplodingSpeed; +
-} +
-tempobj = document.getElementById('foldRange_0'); +
-if (tempobj) { +
-   tempobj.oninput = fold; +
-}+
 document.getElementById('transparencyRange_0').oninput = changeTransparency; document.getElementById('transparencyRange_0').oninput = changeTransparency;
 document.getElementById('changeRotationX_0').onchange = changeRotationX; document.getElementById('changeRotationX_0').onchange = changeRotationX;
Line 991: Line 1007:
 document.getElementById('hideSettingsButton_0').onclick = hideSettings; document.getElementById('hideSettingsButton_0').onclick = hideSettings;
  
-  
  
 // ------------------ SHORTCUTS -------------------------------------------- // ------------------ SHORTCUTS --------------------------------------------
Line 1224: Line 1239:
  if (settingsShown){  if (settingsShown){
  document.getElementById('hideSettingsButton_0').dispatchEvent(event);  document.getElementById('hideSettingsButton_0').dispatchEvent(event);
- } else{+ } else {
  document.getElementById('showSettingsButton_0').dispatchEvent(event);  document.getElementById('showSettingsButton_0').dispatchEvent(event);
  }  }
Line 1236: Line 1251:
    </body>    </body>
 </html> </html>
-</div> 
 </HTML> </HTML>
 <code perl> <code perl>
Line 1242: Line 1256:
 </code> </code>
 <HTML> <HTML>
-<div class="threejs_output"><!--+<!--
 polymake for knusper polymake for knusper
-Wed Aug 19 21:27:01 2020+Thu Aug 20 14:10:19 2020
 planar_net_ planar_net_
 --> -->
Line 1264: Line 1278:
          .group{padding-bottom: 15px;}          .group{padding-bottom: 15px;}
          .settings * {z-index: 11; }          .settings * {z-index: 11; }
-         .settings{z-index: 10; font-family: Arial, Helvetica, sans-serif; margin-left: 30px; visibility: hidden; width: 14em; height: 90%; border: solid 1px silver; padding: 2px; overflow-y: scroll; background-color: white; position: absolute }+         .settings{z-index: 10; font-family: Arial, Helvetica, sans-serif; margin-left: 30px; visibility: hidden; width: 14em; height: 96%; border: solid 1px silver; padding: 2px; overflow-y: scroll; box-sizing: border-box; background-color: white; position: absolute;}
          .indented{margin-left: 20px; margin-top: 10px; padding-bottom: 0px;}           .indented{margin-left: 20px; margin-top: 10px; padding-bottom: 0px;} 
          .shownObjectsList{overflow: auto; max-width: 150px; max-height: 150px;}          .shownObjectsList{overflow: auto; max-width: 150px; max-height: 150px;}
          .showSettingsButton{visibility: visible; z-index: 12; position: absolute }          .showSettingsButton{visibility: visible; z-index: 12; position: absolute }
          .hideSettingsButton{visibility: hidden; z-index: 12; position: absolute; opacity: 0.5}          .hideSettingsButton{visibility: hidden; z-index: 12; position: absolute; opacity: 0.5}
-         .resetButton{margin-top: 10px;} +         button{margin-left: 0; margin-top: 10px}
-         button{margin-left: 0;}+
          img{cursor: pointer;}          img{cursor: pointer;}
          .suboption{padding-top: 15px;}          .suboption{padding-top: 15px;}
-         #model89920187284 { position: relative;  width: 100%; height: 70vh; }+         #model29171150745 { width: 100%; height: 100%; } 
 +         .threejs_container { width: 100%; height: 75vh;} 
 +         .settings{max-height: 74vh} 
          input[type=range] {          input[type=range] {
            -webkit-appearance: none;            -webkit-appearance: none;
Line 1369: Line 1384:
    </head>    </head>
 <body> <body>
 +   <div class='threejs_container'>
  <div id='settings_1' class='settings'>  <div id='settings_1' class='settings'>
  <div class=group id='transparency_1' class='transparency'>  <div class=group id='transparency_1' class='transparency'>
Line 1382: Line 1397:
  <div><input type='checkbox' id='changeRotationY_1'> y-axis</div>  <div><input type='checkbox' id='changeRotationY_1'> y-axis</div>
  <div><input type='checkbox' id='changeRotationZ_1'> z-axis</div>  <div><input type='checkbox' id='changeRotationZ_1'> z-axis</div>
- <button id='resetButton_1' class='resetButton' >Reset</button>+ <button id='resetButton_1'>Reset</button>
  </div>  </div>
  
Line 1394: Line 1409:
  <strong>Display</strong>  <strong>Display</strong>
  <div class=indented>  <div class=indented>
- <div><input type='checkbox' id='labelsCheckboxInput_1' checked>Labels</div> + <div id='shownObjectTypesList_1' class='shownObjectsList'></div>
- <div><input type='checkbox' id='pointsCheckboxInput_1' checked>Points</div> +
- <div><input type='checkbox' id='edgesCheckboxInput_1' checked>Edges</div> +
- <div><input type='checkbox' id='facesCheckboxInput_1' checked>Faces</div> +
- <div><input type='checkbox' id='arrowheadsCheckboxInput_1' checked>Arrowheads</div>+
  </div>  </div>
  <div class=suboption>Objects</div>  <div class=suboption>Objects</div>
Line 1419: Line 1430:
  
  </div> <!-- end of settings -->  </div> <!-- end of settings -->
- <img id='hideSettingsButton_1' class='hideSettingsButton' src='/kernelspecs/polymake/close.svg' width=20px"> + <img id='hideSettingsButton_1' class='hideSettingsButton' src='/kernelspecs/r118/polymake/close.svg' width=20px"> 
- <img id='showSettingsButton_1' class='showSettingsButton' src='/kernelspecs/polymake/menu.svg' width=20px"> + <img id='showSettingsButton_1' class='showSettingsButton' src='/kernelspecs/r118/polymake/menu.svg' width=20px"> 
-   <div id="model89920187284"></div>+<div id="model29171150745"></div> 
 +</div>
    <script>    <script>
     requirejs.config({     requirejs.config({
       paths: {       paths: {
-        three: '/kernelspecs/polymake/three', +        three: '/kernelspecs/r118/polymake/three', 
-        TrackballControls: '/kernelspecs/polymake/TrackballControls', +        TrackballControls: '/kernelspecs/r118/polymake/TrackballControls', 
-        Projector: '/kernelspecs/polymake/Projector', +        Projector: '/kernelspecs/r118/polymake/Projector', 
-        SVGRenderer: '/kernelspecs/polymake/SVGRenderer', +        SVGRenderer: '/kernelspecs/r118/polymake/SVGRenderer', 
-        WEBGL: '/kernelspecs/polymake/WebGL',+        WEBGL: '/kernelspecs/r118/polymake/WebGL',
       },       },
       shim: {       shim: {
Line 1447: Line 1459:
     THREE.SVGRenderer = SVGRenderer;     THREE.SVGRenderer = SVGRenderer;
     THREE.WEBGL = WEBGL;     THREE.WEBGL = WEBGL;
 +
 +// COMMON_CODE_BLOCK_BEGIN
  
 const intervalLength = 25; // for automatic animations const intervalLength = 25; // for automatic animations
 const explodableModel = false;  const explodableModel = false; 
-var foldables = []; +const modelContains = { points: false, pointlabels: false, lines: false, edgelabels: false, faces: false, arrowheads: false }; 
-var three = document.getElementById("model89920187284");+const foldables = []; 
 + 
 +var three = document.getElementById("model29171150745");
 var scene = new THREE.Scene(); var scene = new THREE.Scene();
  
Line 1513: Line 1529:
 }; };
 // select the target node // select the target node
-var target = document.querySelector('#model89920187284');+var target = document.querySelector('#model29171150745');
  
 // create an observer instance // create an observer instance
Line 1565: Line 1581:
 obj0.userData.edgeindices = [0, 1, 1, 2, 0, 3, 2, 3, 0, 4, 1, 5, 4, 5, 2, 6, 3, 7, 6, 7, 3, 8, 0, 9, 8, 9, 1, 10, 2, 11, 10, 11, 4, 12, 5, 13, 12, 13]; obj0.userData.edgeindices = [0, 1, 1, 2, 0, 3, 2, 3, 0, 4, 1, 5, 4, 5, 2, 6, 3, 7, 6, 7, 3, 8, 0, 9, 8, 9, 1, 10, 2, 11, 10, 11, 4, 12, 5, 13, 12, 13];
    <!-- Edge style -->    <!-- Edge style -->
-obj0.userData.edgematerial = new THREE.LineBasicMaterial( { transparent: false, linewidth: 1.5, depthTest: true, color: 0x000000 } );+obj0.userData.edgematerial = new THREE.LineBasicMaterial( { color: 0x000000, depthTest: true, linewidth: 1.5, transparent: false } );
 obj0.userData.facets = [[0, 1, 2, 3], [13, 5, 4, 12], [5, 1, 0, 4], [3, 2, 6, 7], [0, 3, 8, 9], [2, 1, 10, 11]]; obj0.userData.facets = [[0, 1, 2, 3], [13, 5, 4, 12], [5, 1, 0, 4], [3, 2, 6, 7], [0, 3, 8, 9], [2, 1, 10, 11]];
    <!-- Facet style -->    <!-- Facet style -->
-obj0.userData.facetmaterial = new THREE.MeshBasicMaterial( { transparent: true, opacity: 1, polygonOffsetUnits: 1, polygonOffset: true, depthWrite: true, depthFunc: THREE.LessDepth, polygonOffsetFactor: 1, side: THREE.DoubleSide, color: 0x77EC9E } );+obj0.userData.facetmaterial = new THREE.MeshBasicMaterial( { color: 0x77EC9E, depthFunc: THREE.LessDepth, depthWrite: true, opacity: 1, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 1, side: THREE.DoubleSide, transparent: true } );
 obj0.userData.axes = [[5,4], obj0.userData.axes = [[5,4],
       [2,1],       [2,1],
Line 1637: Line 1653:
  
 function init_object(obj) { function init_object(obj) {
-   if (obj.userData.hasOwnProperty("pointmaterial")) { +    if (obj.userData.hasOwnProperty("pointmaterial")) { 
-      init_points(obj); +        init_points(obj); 
-   } +        modelContains.points = true; 
-   if (obj.userData.hasOwnProperty("pointlabels")) { +    } 
-      init_pointlabels(obj); +    if (obj.userData.hasOwnProperty("pointlabels")) { 
-   } +        init_pointlabels(obj); 
-   if (obj.userData.hasOwnProperty("edgematerial")) { +        modelContains.pointlabels = true; 
-      init_lines(obj); +    } 
-   } +    if (obj.userData.hasOwnProperty("edgematerial")) { 
-   if (obj.userData.hasOwnProperty("edgelabels")) { +        init_lines(obj); 
-      init_edgelabels(obj); +        modelContains.lines = true; 
-   } +    } 
-   if (obj.userData.hasOwnProperty("arrowstyle")) { +    if (obj.userData.hasOwnProperty("edgelabels")) { 
-      init_arrowheads(obj); +        init_edgelabels(obj); 
-   } +        modelContains.edgelabels = true; 
-   if (obj.userData.hasOwnProperty("facetmaterial")) { +    } 
-      init_faces(obj); +    if (obj.userData.hasOwnProperty("arrowstyle")) { 
-   }+        init_arrowheads(obj); 
 +        modelContains.arrowheads = true; 
 +    } 
 +    if (obj.userData.hasOwnProperty("facetmaterial")) { 
 +        init_faces(obj); 
 +        modelContains.faces = true; 
 +    }
 } }
  
Line 1855: Line 1877:
  
  
-// ------------------------ FOLDING ------------------------------------------------ 
-// --------------------------------------------------------------------------------- 
-// rotate point p around axis defined by points p1 and p2 by given angle 
-function rotate(p, p1, p2, angle ){    
-   angle = -angle; 
-   var x = p.x, y = p.y, z = p.z,  
-   a = p1.x, b = p1.y, c = p1.z,  
-   u = p2.x-p1.x, v = p2.y-p1.y, w = p2.z-p1.z; 
-   var result = []; 
-   var L = u*u + v*v + w*w; 
-   var sqrt = Math.sqrt; 
-   var cos = Math.cos; 
-   var sin = Math.sin; 
- 
-   result[0] = ((a*(v*v+w*w)-u*(b*v+c*w-u*x-v*y-w*z))*(1-cos(angle))+L*x*cos(angle)+sqrt(L)*(-c*v+b*w-w*y+v*z)*sin(angle))/L; 
-   result[1] = ((b*(u*u+w*w)-v*(a*u+c*w-u*x-v*y-w*z))*(1-cos(angle))+L*y*cos(angle)+sqrt(L)*(c*u-a*w+w*x-u*z)*sin(angle))/L; 
-   result[2] = ((c*(u*u+v*v)-w*(a*u+b*v-u*x-v*y-w*z))*(1-cos(angle))+L*z*cos(angle)+sqrt(L)*(-b*u+a*v-v*x+u*y)*sin(angle))/L; 
- 
-   return result; 
-} 
- 
-var fold = function(event){ 
-    var obj = foldables[Number(event.currentTarget.name)]; 
-    var foldvalue = Number(event.currentTarget.value); 
-    var scale = foldvalue - obj.userData.oldscale; 
- 
-    for (var j=0; j<obj.userData.axes.length; j++) { 
-        rotateVertices(obj, j, scale); 
-    } 
-    update(obj); 
-    obj.userData.oldscale += scale; 
-    lookAtBarycenter(obj); 
-} 
- 
-function lookAtBarycenter(obj){ 
-    control.target = barycenter(obj); 
-} 
- 
-function barycenter(obj) { 
-   var center = new THREE.Vector3(0,0,0); 
-   var points = obj.userData.points; 
-   for (var i=0; i<points.length; i++){ 
-      center.add(points[i].vector); 
-   } 
-   center.divideScalar(points.length); 
-   return center; 
-} 
- 
-function rotateVertices(obj, edge, scale) { 
-   var axes = obj.userData.axes; 
-   var subtrees = obj.userData.subtrees; 
-   var points = obj.userData.points; 
-   var angles = obj.userData.angles; 
-   if (edge < axes.length){ 
-      for (var j=0; j<subtrees[edge].length; j++){ 
-         var rotP = rotate(points[subtrees[edge][j]].vector, points[axes[edge][0]].vector,points[axes[edge][1]].vector, scale * (Math.PI - angles[edge])); 
-         points[subtrees[edge][j]].set(rotP[0],rotP[1],rotP[2]); 
-      } 
-   } 
-} 
- 
-function update(obj) { 
-   updateFacesPosition(obj); 
-   updateEdgesPosition(obj); 
-} 
- 
-if (foldables.length) { 
-    var settings = document.getElementById('settings_1'); 
-    var foldDiv = document.createElement('div'); 
-    foldDiv.id = 'fold_1'; 
-    var title = document.createElement('strong'); 
-    title.innerHTML = 'Fold'; 
-    foldDiv.appendChild(title); 
-    foldDiv.className = 'group'; 
-    for (var i=0; i<foldables.length; i++) { 
-        var range = document.createElement('input'); 
-        range.type = 'range'; 
-        range.min = 0; 
-        range.max = 1; 
-        range.value = 0; 
-        range.step = 0.001; 
-        range.name = String(i); 
-        range.oninput = fold; 
-        foldDiv.appendChild(range); 
-    } 
-    lookAtBarycenter(foldables[0]); 
-    settings.insertBefore(foldDiv,settings.childNodes[0]); 
-} 
  
 var xRotationEnabled = false; var xRotationEnabled = false;
Line 1981: Line 1915:
 }; };
  
- +if ( THREE.WEBGL.isWebGLAvailable() ) { 
-     + render(); 
-render(); +} else { 
- + var warning = WEBGL.getWebGLErrorMessage(); 
-if (explodableModel) { + three.appendChild( warning );
-    for (var i=0; i<scene.children.length; i++) { +
-        obj = scene.children[i]; +
-        if ( obj.userData.explodable ) { +
-            computeCentroid(obj); +
-        } +
-    }+
 } }
-function computeCentroid(obj) { +    
-    centroid = new THREE.Vector3(); +
-    obj.userData.points.forEach(function(pmpoint) { +
-        centroid.add(pmpoint.vector);  +
-    }); +
-    centroid.divideScalar(obj.userData.points.length); +
-    obj.userData.centroid = centroid; +
-} +
 function changeTransparency() { function changeTransparency() {
     var opacity = 1-Number(event.currentTarget.value);     var opacity = 1-Number(event.currentTarget.value);
Line 2064: Line 1984:
 } }
  
-function takeSvgScreenshot(){ +// ------------------------ FOLDING ------------------------------------------------ 
-    var labelsShown = document.getElementById('labelsCheckboxInput_1').checked; +// --------------------------------------------------------------------------------- 
-    if (labelsShown){ +// rotate point p around axis defined by points p1 and p2 by given angle 
-        setVisibility(false,"pointlabels"); +function rotate(p, p1, p2, angle ){    
-        setVisibility(false,"edgelabels"); +   angle = -angle; 
-    } +   var x = p.x, y = p.y, z = p.z,  
-    svgRenderer.render(scene,camera); +   a = p1.x, b = p1.y, c = p1.z,  
-    svgElement = XMLS.serializeToString(svgRenderer.domElement); +   u = p2.x-p1.x, v = p2.y-p1.y, w = p2.z-p1.z; 
-     +   var result = []; 
-    if (labelsShown){ +   var L = u*u + v*v + w*w; 
-        setVisibility(true,"pointlabels"); +   var sqrt = Math.sqrt; 
-        setVisibility(true,"edgelabels");+   var cos = Math.cos; 
 +   var sin = Math.sin; 
 + 
 +   result[0] = ((a*(v*v+w*w)-u*(b*v+c*w-u*x-v*y-w*z))*(1-cos(angle))+L*x*cos(angle)+sqrt(L)*(-c*v+b*w-w*y+v*z)*sin(angle))/L; 
 +   result[1] = ((b*(u*u+w*w)-v*(a*u+c*w-u*x-v*y-w*z))*(1-cos(angle))+L*y*cos(angle)+sqrt(L)*(c*u-a*w+w*x-u*z)*sin(angle))/L; 
 +   result[2] = ((c*(u*u+v*v)-w*(a*u+b*v-u*x-v*y-w*z))*(1-cos(angle))+L*z*cos(angle)+sqrt(L)*(-b*u+a*v-v*x+u*y)*sin(angle))/L; 
 + 
 +   return result; 
 +} 
 + 
 +var fold = function(event){ 
 +    var obj = foldables[Number(event.currentTarget.name)]; 
 +    var foldvalue = Number(event.currentTarget.value); 
 +    var scale = foldvalue - obj.userData.oldscale; 
 + 
 +    for (var j=0; j<obj.userData.axes.length; j++) { 
 +        rotateVertices(obj, j, scale);
     }     }
 +    update(obj);
 +    obj.userData.oldscale += scale;
 +    lookAtBarycenter(obj);
 +}
  
-    if (document.getElementById('tab_1').checked){ +function lookAtBarycenter(obj){ 
-        //show in new tab +    control.target = barycenter(obj); 
-        var myWindow = window.open("",""); +} 
-        myWindow.document.body.innerHTML = svgElement; + 
-    } else{ +function barycenter(obj) { 
-        // download svg file  +   var center = new THREE.Vector3(0,0,0); 
-        download("screenshot.svg", svgElement);+   var points = obj.userData.points; 
 +   for (var i=0; i<points.length; i++){ 
 +      center.add(points[i].vector); 
 +   } 
 +   center.divideScalar(points.length); 
 +   return center; 
 +} 
 + 
 +function rotateVertices(obj, edge, scale) { 
 +   var axes = obj.userData.axes; 
 +   var subtrees = obj.userData.subtrees; 
 +   var points = obj.userData.points; 
 +   var angles = obj.userData.angles; 
 +   if (edge < axes.length){ 
 +      for (var j=0; j<subtrees[edge].length; j++){ 
 +         var rotP = rotate(points[subtrees[edge][j]].vector, points[axes[edge][0]].vector,points[axes[edge][1]].vector, scale * (Math.PI - angles[edge])); 
 +         points[subtrees[edge][j]].set(rotP[0],rotP[1],rotP[2]); 
 +      } 
 +   } 
 +} 
 + 
 +function update(obj) { 
 +   updateFacesPosition(obj); 
 +   updateEdgesPosition(obj); 
 +} 
 + 
 +if (foldables.length) { 
 +    var settings = document.getElementById('settings_1'); 
 +    var foldDiv = document.createElement('div'); 
 +    foldDiv.id = 'fold_1'; 
 +    var title = document.createElement('strong'); 
 +    title.innerHTML = 'Fold'; 
 +    foldDiv.appendChild(title); 
 +    foldDiv.className = 'group'; 
 +    for (var i=0; i<foldables.length; i++) { 
 +        var range = document.createElement('input'); 
 +        range.type = 'range'; 
 +        range.min = 0; 
 +        range.max = 1; 
 +        range.value = 0; 
 +        range.step = 0.001; 
 +        range.name = String(i); 
 +        range.oninput = fold; 
 +        foldDiv.appendChild(range);
     }     }
 +    lookAtBarycenter(foldables[0]);
 +    settings.insertBefore(foldDiv,settings.childNodes[0]);
 } }
 +
          
 // ---------------------- EXPLOSION ------------------------------------------------ // ---------------------- EXPLOSION ------------------------------------------------
 // --------------------------------------------------------------------------------- // ---------------------------------------------------------------------------------
 +
 +if (explodableModel) {
 +    for (var i=0; i<scene.children.length; i++) {
 +        obj = scene.children[i];
 +        if ( obj.userData.explodable ) {
 +            computeCentroid(obj);
 +        }
 +    }
 +    document.getElementById('explodeRange_1').oninput = triggerExplode;
 +    document.getElementById('explodeCheckbox_1').onchange = triggerAutomaticExplode;
 +    document.getElementById('explodingSpeedRange_1').oninput = setExplodingSpeed;
 +}
 +
 +function computeCentroid(obj) {
 +    centroid = new THREE.Vector3();
 +    obj.userData.points.forEach(function(pmpoint) {
 +        centroid.add(pmpoint.vector);
 +    });
 +    centroid.divideScalar(obj.userData.points.length);
 +    obj.userData.centroid = centroid;
 +}
  
 function explode(factor) { function explode(factor) {
Line 2167: Line 2174:
 } }
  
-function showOrHideObject(event){ +// ---------------------- DISPLAY -------------------------------------------------- 
-    var nr = Number(event.currentTarget.name); +// ---------------------------------------------------------------------------------
-    scene.children[nr].visible = event.currentTarget.checked; +
-} +
-    +
  
-// append checkboxes for displaying or hiding objects +const objectTypeInnerHTMLs = { points: "Points", pointlabels: "Point labels", lines: "Edges", edgelabels: "Edge labels", faces: "Faces", arrowheads: "Arrow heads" }; 
-var shownObjectsList = document.getElementById('shownObjectsList_1'); +const objectTypeVisible = {}; 
-for (var i=0; i<scene.children.length; i++){ +Object.assign(objectTypeVisible,modelContains); 
-    obj = scene.children[i]; +const sortedObjectTypeKeys = Object.keys(objectTypeInnerHTMLs).sort(); 
-    var objNode = document.createElement('span'); +const shownObjectTypesList = document.getElementById('shownObjectTypesList_1');
-    objNode.innerHTML = obj.name + '<br>'; +
-    var checkbox = document.createElement('input'); +
-    checkbox.type = 'checkbox'; +
-    checkbox.checked = true; +
-    checkbox.name = String(i); +
-    checkbox.onchange = showOrHideObject; +
-    shownObjectsList.appendChild(checkbox); +
-    shownObjectsList.appendChild(objNode); +
-}+
  
 function setVisibility(bool,objname) { function setVisibility(bool,objname) {
Line 2197: Line 2192:
 } }
  
-function toggleLabels(event) { +function toggleObjectTypeVisibility(event){ 
-    setVisibility(event.currentTarget.checked,"pointlabels"); +    var name = event.currentTarget.name; 
-    setVisibility(event.currentTarget.checked,"edgelabels");+    var checked = event.currentTarget.checked; 
 +    objectTypeVisible[name] = checked; 
 +    setVisibility(checked,name);
 } }
  
-function toggleFaces(event) { +for (var i=0; i<sortedObjectTypeKeys.length; i++){ 
-    setVisibility(event.currentTarget.checked,"faces");+    var key = sortedObjectTypeKeys[i]; 
 +    if (modelContains[key]) { 
 +        var objTypeNode = document.createElement('span'); 
 +        objTypeNode.innerHTML = objectTypeInnerHTMLs[key] + '<br>'; 
 +        var checkbox = document.createElement('input'); 
 +        checkbox.type = 'checkbox'; 
 +        checkbox.checked = true; 
 +        checkbox.name = key; 
 +        checkbox.onchange = toggleObjectTypeVisibility; 
 +        shownObjectTypesList.appendChild(checkbox); 
 +        shownObjectTypesList.appendChild(objTypeNode); 
 +    }
 } }
  
-function toggleEdges(event) { +// ------------------------------------------------------
-    setVisibility(event.currentTarget.checked,"lines"); +
-}+
  
-function togglePoints(event) { +function toggleObjectVisibility(event){ 
-    setVisibility(event.currentTarget.checked,"points");+    var nr = Number(event.currentTarget.name); 
 +    scene.children[nr].visible = event.currentTarget.checked;
 } }
  
-function toggleArrowheads(event) { +// append checkboxes for displaying or hiding objects 
-    setVisibility(event.currentTarget.checked,"arrowheads");+var shownObjectsList = document.getElementById('shownObjectsList_1'); 
 +for (var i=0; i<scene.children.length; i++){ 
 +    obj = scene.children[i]; 
 +    var objNode = document.createElement('span'); 
 +    objNode.innerHTML = obj.name + '<br>'; 
 +    var checkbox = document.createElement('input'); 
 +    checkbox.type = 'checkbox'; 
 +    checkbox.checked = true; 
 +    checkbox.name = String(i); 
 +    checkbox.onchange = toggleObjectVisibility; 
 +    shownObjectsList.appendChild(checkbox); 
 +    shownObjectsList.appendChild(objNode);
 } }
  
-document.getElementById('labelsCheckboxInput_1').onchange = toggleLabels; +// ---------------------- SVG ------------------------------------------------------ 
-document.getElementById('pointsCheckboxInput_1').onchange = togglePoints; +// ---------------------------------------------------------------------------------
-document.getElementById('facesCheckboxInput_1').onchange = toggleFaces; +
-document.getElementById('edgesCheckboxInput_1').onchange = toggleEdges; +
-document.getElementById('arrowheadsCheckboxInput_1').onchange = toggleArrowheads;+
  
 +function takeSvgScreenshot() {
 +    if (objectTypeVisible["pointlabels"]) {
 +        setVisibility(false,"pointlabels");
 +    }
 +    if (objectTypeVisible["edgelabels"]) {
 +        setVisibility(false,"edgelabels");
 +    }
 +    svgRenderer.render(scene,camera);
 +    svgElement = XMLS.serializeToString(svgRenderer.domElement);
 +    
 +    if (objectTypeVisible["pointlabels"]) {
 +        setVisibility(true,"pointlabels");
 +    }
 +    if (objectTypeVisible["edgelabels"]) {
 +        setVisibility(true,"edgelabels");
 +    }
  
 +    if (document.getElementById('tab_1').checked){
 +        //show in new tab
 +        var myWindow = window.open("","");
 +        myWindow.document.body.innerHTML = svgElement;
 +    } else{
 +        // download svg file 
 +        download("screenshot.svg", svgElement);
 +    }
 +}
  
 function download(filename, text) { function download(filename, text) {
Line 2239: Line 2279:
 } }
  
-var tempobj; +
-tempobj = document.getElementById('explodeRange_1'); +
-if (tempobj) { +
-   tempobj.oninput = triggerExplode; +
-   document.getElementById('explodeCheckbox_1').onchange = triggerAutomaticExplode; +
-   document.getElementById('explodingSpeedRange_1').oninput = setExplodingSpeed; +
-} +
-tempobj = document.getElementById('foldRange_1'); +
-if (tempobj) { +
-   tempobj.oninput = fold; +
-}+
 document.getElementById('transparencyRange_1').oninput = changeTransparency; document.getElementById('transparencyRange_1').oninput = changeTransparency;
 document.getElementById('changeRotationX_1').onchange = changeRotationX; document.getElementById('changeRotationX_1').onchange = changeRotationX;
Line 2260: Line 2290:
 document.getElementById('hideSettingsButton_1').onclick = hideSettings; document.getElementById('hideSettingsButton_1').onclick = hideSettings;
  
-  
  
 // ------------------ SHORTCUTS -------------------------------------------- // ------------------ SHORTCUTS --------------------------------------------
Line 2493: Line 2522:
  if (settingsShown){  if (settingsShown){
  document.getElementById('hideSettingsButton_1').dispatchEvent(event);  document.getElementById('hideSettingsButton_1').dispatchEvent(event);
- } else{+ } else {
  document.getElementById('showSettingsButton_1').dispatchEvent(event);  document.getElementById('showSettingsButton_1').dispatchEvent(event);
  }  }
Line 2505: Line 2534:
    </body>    </body>
 </html> </html>
-</div> 
 </HTML> </HTML>
 +
  
  • playground/test_3js.1597859952.txt.gz
  • Last modified: 2020/08/19 17:59
  • by hnagel