<div dir="ltr"><div>Following up, here are equivalent web components which use now a shared base class:</div><div><br></div><a href="https://x3dom-webprotos-3.glitch.me/">https://x3dom-webprotos-3.glitch.me/</a><div><a href="https://glitch.com/edit/#!/x3dom-webprotos-3?path=x3dProtoClass.js:1:0">https://glitch.com/edit/#!/x3dom-webprotos-3?path=x3dProtoClass.js:1:0</a><br></div><div><br></div><div>It would be nice to be able to route to fields of these web components, so I am thinking about that.</div><div><br></div><div>Andreas<br><div class="gmail_extra"><br><div class="gmail_quote">On Mon, Aug 28, 2017 at 12:07 PM, Andreas Plesch <span dir="ltr"><<a href="mailto:andreasplesch@gmail.com" target="_blank">andreasplesch@gmail.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="auto"><div dir="ltr"><div>Ok, I could adapt the Rotor prototype example as a x3dom web component here:</div><div><br></div><div><a href="https://glitch.com/edit/#!/x3dom-webprotos-2?path=index.html:26:4" target="_blank">https://glitch.com/edit/#!/x3d<wbr>om-webprotos-2?path=index.html<wbr>:26:4</a><br></div><div><br></div><a href="https://x3dom-webprotos-2.glitch.me" target="_blank">https://x3dom-webprotos-2.glit<wbr>ch.me</a><br><div><br></div><div>Since the rotor prototype internally uses DEF node names for routing, I had to add name scoping per proto instance. Ideally, if x3d would work in a shadowdom, the shadowdom would provide the encapsulation of name scopes but since x3dom does not 'see' a shadowdom I needed to add unique suffixes to all occurrences of node names in a proto (template) instance. </div><div><br></div><div>But this was the only necessary addition to template processing.</div><div><br></div><div>The example also exercises DEF/USE of nodes used as field values and nesting of proto instances which both seem to work.</div><div><br></div><div>To take further advantage of web components, it may be possible to use a x3dproto base class for shared methods which extended custom proto elements would use.</div><div dir="auto"><br></div><div dir="auto">There are severe limitations such as no MFNode type fields or only indirect routing. x3d scripting needs to be substituted by component methods.</div><div dir="auto"><br></div><div dir="auto">But overall using web components could be a HTML integrated, standards based approach to prototyping and instancing. </div><div dir="auto"><br></div><div dir="auto">Andreas</div></div></div><div class="gmail_extra"><br><div class="gmail_quote">On Mon, Aug 28, 2017 at 1:38 AM, Andreas Plesch <span dir="ltr"><<a href="mailto:andreasplesch@gmail.com" target="_blank">andreasplesch@gmail.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr"><div>Trying to realize a x3d prototype style instancing for x3dom, I added use of html5 custom elements in addition to html5 templates and shadowdom here:</div><div><br></div><div><a href="https://x3dom-webprotos.glitch.me/" target="_blank">https://x3dom-webprotos.glitch<wbr>.me/</a><br></div><div><a href="https://glitch.com/edit/#!/x3dom-webprotos?path=index.html:24:7" target="_blank">https://glitch.com/edit/#!/x3d<wbr>om-webprotos?path=index.html:2<wbr>4:7</a><br></div><div><br></div><div>The main work happens in processTemplate() which takes the template, populates it with instance values and brings the instance out of the shadowdom into the lightdom so x3dom can 'see' it.</div><div><br></div><div><a href="https://glitch.com/edit/#!/x3dom-webprotos?path=table_proto.html:81:2" target="_blank">https://glitch.com/edit/#!/x3d<wbr>om-webprotos?path=table_proto.<wbr>html:81:2</a><br></div><div><br></div><div>processTemplate() is fairly generic and may work for other templates (proto declarations) such as the rotor proto:</div><div><br></div><a href="http://www.web3d.org/x3d/content/examples/Basic/X3dSpecifications/RotorIndex.html" target="_blank">http://www.web3d.org/x3d/conte<wbr>nt/examples/Basic/X3dSpecifica<wbr>tions/RotorIndex.html</a><br><div><br></div><div>I may try this next.</div><div><br></div><div>-Andreas</div></div><div class="gmail_extra"><br><div class="gmail_quote">On Wed, Jul 26, 2017 at 12:27 PM, Andreas Plesch <span dir="ltr"><<a href="mailto:andreasplesch@gmail.com" target="_blank">andreasplesch@gmail.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr"><div class="gmail_extra"><div class="gmail_quote">On Sun, Jul 23, 2017 at 12:32 PM, Andreas Plesch <span dir="ltr"><<a href="mailto:andreasplesch@gmail.com" target="_blank">andreasplesch@gmail.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr"><br><div class="gmail_extra"><br><div class="gmail_quote">On Sat, Jul 22, 2017 at 4:01 PM, Andreas Plesch <span dir="ltr"><<a href="mailto:andreasplesch@gmail.com" target="_blank">andreasplesch@gmail.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr"><br><div class="gmail_extra"><br><div class="gmail_quote">On Fri, Jul 21, 2017 at 10:24 AM, Andreas Plesch <span dir="ltr"><<a href="mailto:andreasplesch@gmail.com" target="_blank">andreasplesch@gmail.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><br><div dir="ltr">...<div>It could also be fruitful to investigate how custom elements with templates compare with protos in detail. There seems to be match in purpose and ability.</div></div></blockquote><div><br></div>...<div>It may be possible to process the attached and populated template to replace slot elements with their corresponding assigned nodes. This leaves the first problem or parenting (a universal one !). One solution may be to move the shadow root nodes out and into the light dom under the shadow host. ..<br clear="all"></div></div></div></div></blockquote><div><br></div><div>After writing this, I went ahead and tested this idea. It turns out that it actually works (only for chrome):<br><br><a href="https://glitch.com/edit/#!/tiny-fact?path=index.html:70:5" target="_blank">https://glitch.com/edit/#!/tin<wbr>y-fact?path=index.html:70:5</a> and Show Live.<br><br></div><div>I added a slotted template using this web3d example:<br><a href="http://www.web3d.org/x3d/content/examples/Basic/X3dSpecifications/PrototypeIndex.html" target="_blank">http://www.web3d.org/x3d/conte<wbr>nt/examples/Basic/X3dSpecifica<wbr>tions/PrototypeIndex.html</a><br></div><div><br></div><div>The template has slots for a color field(attribute) and a material field(element):<br><a href="https://glitch.com/edit/#!/tiny-fact?path=table_template.html:12:7" target="_blank">https://glitch.com/edit/#!/tin<wbr>y-fact?path=table_template.htm<wbr>l:12:7</a><br><a href="https://glitch.com/edit/#!/tiny-fact?path=table_template.html:27:15" target="_blank">https://glitch.com/edit/#!/tin<wbr>y-fact?path=table_template.htm<wbr>l:27:15</a><br><br></div><div>Cloning the template then into the root of shadow dom (attached to a group node) causes assignment of values to the named slots now in the shadow dom. One can then process these values to become actual x3dom field values. This does not require a lot of processing:<br><br><a href="https://glitch.com/edit/#!/tiny-fact?path=index.html:70:14" target="_blank">https://glitch.com/edit/#!/tin<wbr>y-fact?path=index.html:70:14</a><br><br></div><div>But it took a while to pin down the details.<br></div><div><br></div><div>It is interesting that it was natural to keep Prototype's nodeField and fieldValue semantics.<br></div><div><br></div><div>For the instance: <a href="https://glitch.com/edit/#!/tiny-fact?path=index.html:30:1" target="_blank">https://glitch.com/edit/#!/tin<wbr>y-fact?path=index.html:30:1</a><br><br><x3d-Group id="tablehost"><br> <fieldValue slot="tableTopMaterialColor" value="1 1 1"></fieldValue><br> </x3d-Group><br></div><div><br></div><div>and for the template (prototype): <a href="https://glitch.com/edit/#!/tiny-fact?path=table_template.html:12:0" target="_blank">https://glitch.com/edit/#!/tin<wbr>y-fact?path=table_template.htm<wbr>l:12:0</a><br><br><Material DEF='TableTopMaterial' diffuseColor='.6 .6 .1'><br> <slot name='tableTopMaterialColor' nodeField='diffuseColor'><br> <fieldValue value='.6 .6 .1'></fieldValue> <!-- default --><br> </slot> <br> <br></div><div>Since x3dom does not know how to deal with shadow dom, it is necessary to move the processed shadow dom into the light dom. But this requires only one line:<br><br><a href="https://glitch.com/edit/#!/tiny-fact?path=index.html:81:1" target="_blank">https://glitch.com/edit/#!/tin<wbr>y-fact?path=index.html:81:1</a><br><br></div><div>The example is just for testing the process and does not make an attempt to generalize or wrap the process to be applied easily to any template. I do think wrapping this into a general ProtoInstance like web component/custom element is quite doable.<br></div><div><br></div></div><div class="gmail_quote">So perhaps I was too pessimistic and in fact it may be possible to rely on web components for prototype like functionality.<br><br><div class="gmail_quote">First, I want to check if modifying the slot value in a template instance gets picked up by x3dom. Probably not for attribute fields. hm.<br></div><br></div></div></div></blockquote><div><br></div><div>Obliterating the line number references above, I updated</div><div><br></div><div><a href="https://glitch.com/edit/#!/tiny-fact?path=index.html:94:1" target="_blank">https://glitch.com/edit/#!/tin<wbr>y-fact?path=index.html:94:1</a> and show Live<br></div><div><br></div><div>to enable updates to the fieldValues in template instances. It was only necessary to observe the mutations of the values and then update the field in the actual node accordingly.<br></div><div><br></div><div>The change color button sets the value attribute of the fieldValue element which is linked to the template by a named slot. The nodeField attribute (here 'diffuseColor') of the slot links the slot to a field of the parent of the slot. Using these relations it does not take much to transmit a changed fieldValue value of the instance to the actual node in the template clone.</div><div><br></div><div>To enable updates to SFNode type fields of a template instance, no additional code was necessary since the instance's node (linked by a slot) is directly used in the template clone by moving it into the template clone. This is what the change material button tests. It changes both the color and the shininess of the material node in the instance.</div><div>What was interesting is that it is possible to use a USE material node in the instance and put the corresponding DEF material outside somewhere else. Since the DEF node does not get moved, it can be more easily selected. However, direct selection by id or other attributes of the moved node should also be very straightforward. It should also be possible x3d route to it directly.</div><div><br></div><div>Routing to nodeField defined 'fields' of a cloned, slotted template is currently not possible. Hm, it may perhaps be possible to define an actual fieldValue x3dom node with a 'value' field (of flexible type) which can receive routed values and does nothing but update the value attribute of its dom node.</div><div><br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr"><div class="gmail_extra"><div class="gmail_quote"></div><div class="gmail_quote">The next step would be to see how to include scripts in templates. Script tags can be part of templates. They get executed when the template is instanced by cloning. Another place for scripting is in a custom element. Templates are often used with custom elements. A custom element would be the way to wrap the js in the example.<span class="gmail-m_8273390086928518629m_-2317593855433219437m_6957722750545597878m_-1148836844838865654gmail-HOEnZb"><font color="#888888"><br><br></font></span></div><span class="gmail-m_8273390086928518629m_-2317593855433219437m_6957722750545597878m_-1148836844838865654gmail-HOEnZb"><font color="#888888">-Andreas<span class="gmail-m_8273390086928518629m_-2317593855433219437m_6957722750545597878HOEnZb"><font color="#888888"><br></font></span></font></span></div><span class="gmail-m_8273390086928518629m_-2317593855433219437m_6957722750545597878HOEnZb"><font color="#888888"><span class="gmail-m_8273390086928518629m_-2317593855433219437m_6957722750545597878m_-1148836844838865654gmail-HOEnZb"><font color="#888888"><div class="gmail_extra"><div class="gmail_quote"><br></div>-- <br><div class="gmail-m_8273390086928518629m_-2317593855433219437m_6957722750545597878m_-1148836844838865654gmail-m_4322043332685367710gmail_signature">Andreas Plesch<br>39 Barbara Rd.<br>Waltham, MA 02453</div>
</div></font></span></font></span></div><span class="gmail-m_8273390086928518629m_-2317593855433219437m_6957722750545597878HOEnZb"><font color="#888888">
</font></span></blockquote></div><span class="gmail-m_8273390086928518629m_-2317593855433219437m_6957722750545597878HOEnZb"><font color="#888888"><br><br clear="all"><span class="gmail-m_8273390086928518629m_-2317593855433219437HOEnZb"><font color="#888888"><div><br></div>-- <br><div class="gmail-m_8273390086928518629m_-2317593855433219437m_6957722750545597878m_-1148836844838865654gmail_signature">Andreas Plesch<br>39 Barbara Rd.<br>Waltham, MA 02453</div>
</font></span></font></span></div></div><span class="gmail-m_8273390086928518629m_-2317593855433219437HOEnZb"><font color="#888888">
</font></span></blockquote></div><span class="gmail-m_8273390086928518629m_-2317593855433219437HOEnZb"><font color="#888888"><br><br clear="all"><span class="gmail-HOEnZb"><font color="#888888"><div><br></div>-- <br><div class="gmail-m_8273390086928518629m_-2317593855433219437m_6957722750545597878gmail_signature">Andreas Plesch<br>39 Barbara Rd.<br>Waltham, MA 02453</div>
</font></span></font></span></div><span class="gmail-HOEnZb"><font color="#888888">
</font></span></blockquote></div><span class="gmail-HOEnZb"><font color="#888888"><br><br clear="all"><div><br></div>-- <br><div class="gmail-m_8273390086928518629m_-2317593855433219437gmail_signature">Andreas Plesch<br>39 Barbara Rd.<br>Waltham, MA 02453</div>
</font></span></div>
</blockquote></div><br><br clear="all"><div><br></div>-- <br><div class="gmail_signature">Andreas Plesch<br>39 Barbara Rd.<br>Waltham, MA 02453</div>
</div></div></div>