2e:null 2f:["$","title",null,{"children":"X3DOM Inline resizing and switching without reloading | Andreas Plesch | Observable"}] 34:T641c,x3dteapot = ` `35:[{"id":"58445f4a2a18b2b898cf084fedac5f55926d8d070f20c75c66b17f9cc31cb569a40db555decb4fce09aa7c26b9a00955efca4137c7ee70495909f856a4e04a45","href":"https://static.observableusercontent.com/files/58445f4a2a18b2b898cf084fedac5f55926d8d070f20c75c66b17f9cc31cb569a40db555decb4fce09aa7c26b9a00955efca4137c7ee70495909f856a4e04a45","name":"CatiaHubAssemblyCombined.x3d","type":"application/xml","lastModified":1578086610379.684,"size":90772}] 32:{"id":"760f5578e942246c","slug":"x3dom-inline-resizing-and-switching-without-reloading","title":"X3DOM Inline resizing and switching without reloading","thumbnail":"eef464b335411d36be02da29cc88693fa78cfd7d40909f6f31a1017a09596942","access_level":"public","create_time":"$D2020-01-03T20:23:23.321Z","update_time":"$D2021-02-18T17:06:46.805Z","view_time":null,"first_public_time":"$D2020-01-03T22:02:28.159Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"3a7167e5e638bcd0","login":"andreasplesch","name":"Andreas Plesch","avatar_url":"https://avatars-next.observableusercontent.com/4da1ba746a4b25e755d1c9b71ca1c72165a9c40e02aee1f3fcae880584d70c9c","tier":"starter_2024"},"version":655,"publish_version":655,"role":null,"authored":false,"authors":[{"type":"individual","id":"171053d51d09c7fc","login":"andreasplesch","name":"Andreas Plesch","avatar_url":"https://avatars-next.observableusercontent.com/4da1ba746a4b25e755d1c9b71ca1c72165a9c40e02aee1f3fcae880584d70c9c","tier":null}],"members":[{"type":"individual","id":"171053d51d09c7fc","login":"andreasplesch","name":"Andreas Plesch","avatar_url":"https://avatars-next.observableusercontent.com/4da1ba746a4b25e755d1c9b71ca1c72165a9c40e02aee1f3fcae880584d70c9c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"fad18253ee738559","slug":"x3dom","title":"x3dom","owner":{"id":"3a7167e5e638bcd0","login":"andreasplesch","name":"Andreas Plesch"}},"type":"notebook","body":{"title":"X3DOM Inline resizing and switching without reloading","cells":[{"id":0,"value":"md`# X3DOM Inline resizing and switching without reloading`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"md`## The problem\n\nThe default style for the x3d element does not resize the canvas properly if the parent element's size is modified, for example by the css property resize: both. In addition, x3dom internally adjusts the canvas width and height style properties. As a result, it becomes tricky to find working css styles which allow resizing.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"md`### default values (click on left margin to view html)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"x3ddefault = html`\n

\n\n \n \n \n\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"md`Canvas width and height are 100%, of the parent x3d which has auto width and height. The auto height does not match the parent div height.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"md`### x3d height: calc(100% - 10px)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"x3dh100 = html`\n\n

\n\n \n \n \n\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"md`\nCanvas width and height are 100%, of the parent x3d which has auto width and 100% height, of the parent div which resizes. In addition, 10px are subtracted make space for the corner handle which otherwise cannot receive mouse events. This works for dynamic adjustments. But the width is still auto and matches only by coincidence.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"md`### x3d height:100%; width:calc(100% - 10px)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"viewof url = html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"x3d = html`\n\n

\n\n\n \n \n \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"html`\n

👉

drag handle

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":528,"value":"md`Adjust width instead of height since it is more natural to leave vertical space for the handle. Also use an x3dom event to better fit the initial view after loading a model.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"mutable resizer = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"md`adjust internal size, relative to frame:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":" viewof w = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"{\n //\n let c = x3d.querySelector('x3d');\n if ( c == null ) return\n c.style.width = w+\"%\";\n c.style.left = (100 - w) / 2 + \"%\";\n c.style.height = w+\"%\";\n c.style.top = (100 - w) / 2 + \"%\";\n return html`relative size: ${w}%`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"{\n // manipulate dom directly to avoid reparsing\n let inline = x3d.querySelector('inline');\n inline.setAttribute('url', url);\n //inline._x3domNode._runtime.showAll('posZ'); //use event instead since loading is async\n return html`model: ${url}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"{\n let ro = new ResizeObserver(entries => {\n let entry = entries[0];\n let cs = window.getComputedStyle(entry.target);\n mutable resizer = [cs.width, cs.height];\n });\n ro.observe(x3d.querySelector('div'));\n return md`ResizeObserver is now observing x3d - div element.`\n}\n ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"hubassembly = await FileAttachment(\"CatiaHubAssemblyCombined.x3d\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"teapot = `data:text/html;base64,${btoa(x3dteapot)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"x3dom = {\n await require('https://x3dom.org/download/dev/x3dom-full.debug.js').catch(() => window.x3dom);\n //combine with stylesheet into a single cell since they belong together\n return html``\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"reloader = {\n x3dom; // after x3dom loads\n //x3d only changes when width changes; x3d dom changes do not trigger this cell.\n window.x3dom.reload();//reload when x3d changes\n return x3d;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"