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
Last revisionBoth sides next revision
playground:test_3js [2020/08/19 17:59] – hnagelplayground:test_3js [2020/08/20 09:49] – 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 12:35:04 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; }+         #model76216027194 { width: 100%; height: 100%; } 
 +         .threejs_container { width: 100%; height: 75vh; max-height: 75vh} 
 +         .settings{max-height: inherit} 
          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="model76216027194"></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("model76216027194");
 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('#model76216027194');
  
 // 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 12:35:04 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; }+         #model46056522042 { width: 100%; height: 100%; } 
 +         .threejs_container { width: 100%; height: 75vh; max-height: 75vh} 
 +         .settings{max-height: inherit} 
          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="model46056522042"></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("model46056522042");
 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('#model46056522042');
  
 // 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.txt
  • Last modified: 2020/08/20 10:17
  • by hnagel