Code Monkey home page Code Monkey logo

x_ite_dom's Introduction

x_ite_dom

Development moved to https://github.com/create3000/x_ite/

x_ite_dom has been adopted by the main x_ite.js library (#40). Therefore all development shifted to

https://github.com/create3000/x_ite/blob/main/src/x_ite/Browser/DOMIntegration.js

This repo will remain, for documentation purposes.

Summary

x_ite_dom.js is intended to be used with the X3D browser x_ite.js (https://github.com/create3000/x_ite), up to version 7.0.0. x_ite_dom links the X3D DOM nodes to the X3D scene graph and thereby allows for control of the X3D scene using regular DOM manipulation methods. Please be aware that X3D requires a well defined organisation of the scene. If modifying the DOM results in an invalid scene graph, errors result.

Design

The design is based around the idea that x_ite_dom.js is an optional, thin bridge layer which only requires minimal or no modification to x_ite as a X3D browser. To a large extent it tries to use the external SAI as it is defined for standard conforming X3D browsers.

The overall idea is to use the DOM mutation observer facility to relay changes in the DOM to the X3D scene graph which is internal to x_ite. After creating an initial X3D scene from X3D XML under the X3DCanvas tag, the bridge code installs a mutation observer to catch all changes within a Scene element. Depending on what was changed, then X3D SAI as well as some internal x_ite.js methods are invoked to realize these changes within the parallel scene graph.

A design goal is to keep the code lines count small enough to keep all code in a single file. If the code base grows larger, I would not be able to support development, and it would indicate that there are too many features.

Usage

See index.xhtml and the examples in tests/ and tests/html5 for usage of the code.

Capabilities and Limitations

Since X3D uses an XML encoding, xhtml encoded web pages are preferred. Regular html case-insensitive encoding can be used as well but is less well tested.

  • Most attributes of X3D elements should be controllable.
  • ProtoDeclarations cannot be modified, added or removed.
  • Most other X3D nodes can be modified, added or removed, including ProtoInstances.
  • Routes can be added and removed.
  • Modifying Route attributes does not have the desired or any effect. Remove and add Routes instead.
  • Manipulation of USE and DEF attributes do not have the desired or any effect.
  • Inline: X3D nodes added to the scene graph via a inline node are appended to the inline element and can be manipulated there. internal attribute manipulations work, adding internal root nodes and one level child nodes work, but adding deeper level nodes does not. Adding and removing routes inside Inlines may not work.
  • Script: X3D script nodes require a type='application/x-myscript' attribute. See tests/x3d_script.xhtml. Otherwise they are interpreted by the web browser as dom script nodes.
  • Script node content is interpreted as XML even in HTML documents. This means that a cdata section declaration should be used.
  • Multiple scenes on a web page can coexist and can be controlled.
  • Each attribute mutation leads to a complete x3d event cascade to preserve sequencing. This avoids unexpected behavior but may impact performance slightly.
  • Events: see below
  • on demand loading of required components if profile is given in X3D element; otherwise 'Full' profile is loaded: for faster loading specify correct profile (or components) such as 'Interactive', 'Full' is rarely needed.

Events

Event handling currently covers all inputOutput and outputOnly fields, which includes all sensor and interpolator events.

Mouse events originate from x3d sensor nodes. This means that the x3d scene has to have such a sensor node (TouchSensor) for any mouse events to be dispatched.

See tests/interactiveTransformations.xhtml and other for examples.

Event type names parallel x3d field names. The name construction is "x3d" + "_" + x3d event name.

This means the usual events such as 'click' or 'mouseover' are not available. However, there are similar events for x3d sensors albeit with other names (for example x3d_isOver).

The onevent attributes or properties are not available. Use element.addEventListener() instead.

The event parameter provided to the callback function has these properties:

  • detail.value: the value of the x3d field
  • detail.name: The DEF name of the dispatching node; empty if there is no DEF name.
  • detail.fields: an array of all fields of the x3d node with current values
  • detail.x3dnode: the x3d node object which originated the event (for advanced use)

The dispatched events do not bubble back up, eg. usually there should be no need to stop propagation. The event listeners should be attached to the specific DOM elements which is the dispatch target of the event.

To help with attaching listeners to sensors within inlines, a new 'x3dload' event is dispatched on the document target to signal when all inlines per scene are appended to the document.

To help with debugging x3d event flow, a 'trace' attribute for the X3DCanvas element enables detailed logging of output events to the console. This is particularly helpful for ROUTE, Interpolator and event utility debugging. Since all output events are logged, tracing impacts performance. Remove the trace attribute to switch off.

TODO

  • Prototype handling: ProtoInstances work, ProtoDeclarations undecided
  • allow hook into render loop ?
  • allow mutated attributes to be parsed objects, eg. skip parsing; useful if X3D math function are used on native types
  • perhaps add onevent properties to DOM nodes.
  • clean up and organise tests: updated all to latest, added proto tests

Releases

  • 1.3 : updates: inline dom and x_ite parser changes
  • 1.1 : updates for x_ite >= 4.4.4: async loading of required components, X3D tag now required
  • 1.0 : small updates for x_ite >= 4.4.3
  • 0.9x: renamed to x_ite_dom
  • 0.9 : no functional changes, works with cobweb 3.3; jekyll generation of example list
  • 0.8 : full html support, preserve mutation sequencing, requires cobweb 2.5 or 2.6, does not work with cobweb dev (master)
  • 0.75: internal improvements: parser reuse, no penalty for trace when off
  • 0.7 : modification and addition of ProtoInstances, basic event trace functionality, requires cobweb > v2.3
  • 0.6 : many more events, eg. all output fields, shortened event names to x3d_fieldname
  • 0.5 : major internal restructuring, route removal support, requires cobweb >= v2.2
  • 0.4 : support for inline access, multiple scenes, adding child nodes, x3dload event, cobweb > v2.1

x_ite_dom's People

Contributors

andreasplesch avatar create3000 avatar

Stargazers

avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar

x_ite_dom's Issues

Integrating x_ite_dom into X_ITE

Hello Andreas,

I have integrated x_ite_dom directly into X_ITE now, because it is much easier to maintain this file this way, and there is now no more need to include and extra file. I have already fixed some new issues, like #38, and also fixed dispose of nodes in X_ITE, which was broken. Also some things in the parser have changed since start of this project, and the new preferred element is <x3d-canvas>. It also solves the problem if a x3d-canvas element is created programmatically via X3D.createBrowser and added later to the HTML document.

I would very appreciate it if you would continue to maintain the file, and also continue to add ideas to it.

DOMIntegration.js is now located here https://github.com/create3000/x_ite/blob/main/src/x_ite/Browser/DOMIntegration.js.

Adding nodes

Parser.pushParent(elparent.x3dnode)

Should suffice to parse new node into parent with Parser.statement()

If no parent, eg root node just skip push parent

Then perhaps necessary to popParent

but new Parser is created with empty parents [] for each mutation. but it is possible to have multiple added nodes in one mutation.

DOM injected in X3DCanvas after x_ite_dom is load is not processed

I came along this bug while I checked the D3 examples, but https://raw.githack.com/jamesleesaunders/d3-x3d/master/examples/X_ITE/chart/ParticlePlot.html does sometimes not load. This happens especially in Chrome. If it takes to long to load the CSV then x_ite_dom is already loaded and first then d3 adds X3D DOM elements to the X3DCanvas, but these are not processed.

The script in the HTML page outputs a 'done' to the console when finished. If that 'done' comes after 'X_ITE XHTML DOM integration enabled' output from x_ite_dom, then the canvas left black.

think about mutation observer dealing with sub inlines

The observer will add the x3d node to the x3d scene graph when a new Inline element is added.

In addition it will have to append the new inline dom to the inline as a child. Again, async loading problem, eg. dom not available when inline el. available. create new loadsensor ? keep using browser loadsensor ?

In turn this would trigger more mutation events which should be ignored. How ?
Probably by checking if mutations are inside an inline. el.ancestor or so.

Should be possible to simplify initial inline handling: Just call processInline as used in observer ?

New URLs for cobweb

There are new URLs for cobweb.

Tagged version:

<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/create3000/cobweb/3.3/dist/cobweb.css"/> <script type="text/javascript" src="https://cdn.rawgit.com/create3000/cobweb/3.3/dist/cobweb.min.js"></script>

Latest version:

<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/create3000/cobweb/latest/dist/cobweb.css"/> <script type="text/javascript" src="https://cdn.rawgit.com/create3000/cobweb/latest/dist/cobweb.min.js"></script>

For testing purposes you could use just 'rawgit.com' as host name.

Maybe this is interesting for cobweb_dom too.

  1. You could create such version for cobweb_dom under https://github.com/andreasplesch/cobweb_dom.
  2. Go to releases.
  3. Draft a new release.

used cobweb methods

a list of cobweb methods in case they change:

SAI

  • X3D .getBrowser (element)
  • browser .importDocument (dom)
  • browser .replaceWorld (importedScene)
  • field .addFieldCallback
  • isLoaded .removeFieldCallback ("loaded" + node .getId ())
  • loadSensor .getField ("watchList")
  • watchList .getValue ()
  • watchList .setValue (wListUpdate)

others

  • X3D()
  • field. isOutput()
  • parser .pushExecutionContext (nodeScene)
  • parser .pushParent (node)
  • parser .childElement (element)
  • parser .popParent ()
  • parser .popExecutionContext ()
  • nodeScene .setup ()
  • browser .currentScene .setup ()
  • parser .nodeAttribute (attribute, element .x3d)
  • parser .attributeToCamelCase (attributeName)
  • field .addEvent ()
  • browser .processEvents()

typo in release name

The release name for x_ite_dom.1.1,js has a typo. There is a comma before 'js' instead of a point.

Inline.dom could be undefined.

In the function appendInlineDOM the property node.dom could be undefined and will cause an exception:

x_ite_dom/src/x_ite_dom.js

Line 333 in 332b41c

element .appendChild (node .dom .querySelector ('Scene')) ; // XXX: or root nodes? HO: Think, Scene is better.

TypeError: node.dom is undefined;
when the Inline cannot load the url given, for instance the url field is empty or when the url is wrong.

There should be a check if the .dom property exists.

html5

X3DCaseFixer approach could be used to 'normalize' x3d: in js such big map
{
lowercasenode: RealCaseNode,
...
}
but need to check browser mangling again.

Ready event

Consider dispatching a Cobweb_dom ready event after all inlines are added to dom.

Could be used to attach callbacks to sensor events in inlines.

Event tracing

Consider second callback for tracing instead of using Cb for dispatching.

JavaScript files not ending in .js? Possibly issue on my web server with Content-Type?

I am getting this error in x_ite_dom with latest X_ITE: https://create3000.github.io/code/x_ite/latest/dist/x_ite.min.js

x_ite_dom.1.3.js:93 Error importing document: Error: Script error for "lib/ammojs/ammo", needed by: lib/ammojs/AmmoJS
https://requirejs.org/docs/errors.html#scripterror
at makeError (x_ite.min.js:3)
at HTMLScriptElement.onScriptError (x_ite.min.js:3)

Let me know what i need to install, please! Or do I need to adapt my web server to download files without a .js at the end?

Searching for the ammojs folder reveals that it's not on my server!

$ find . -type f -print0| xargs -0 grep -i ammojs

[ no output ]

--- --- at start in index.xhtml prevents page to work.

Hi,
in index.xhtml there are two lines of '---' at start which results in an error and prevents the page to work in a normal browser (firefox, chromium).
Is that intended?

---
---
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>dom access for x_ite</title>

Also there are a lot of not/no longer working examples in tests.

Canvas texture

One of the many great x3dom features is to use a canvas as a live texture since webgl allows that.

Cobweb_dom could look for a canvas, convert it to an image and use that as texture?

It would be much better if CobWeb would use it directly.

inline

How to make inlined nodes DOM nodes in the main document so they can be manipulated ?

http://examples.x3dom.org/example/x3dom_inlineReflection.xhtml
http://doc.x3dom.org/tutorials/models/inline/index.html

inline elements are directly added as children to and the ids are prefixed with a namespacename.

cobweb may ignore any xml children in inline. So with some changes it may be possible to do the same. Then cobweb_dom could check for mutations in inlines, find the corresponding x3dnode and do the same as for the regular nodes.

Use a shadow root below inline ? Advantage would be scoping of IDs . But the EXPORT/IMPORT rules are for this.

Or simply not allow any inline mods and advocate use HTML DOM way of inlining ?

interpolator events

dispatch event for each value_changed x3d event ? x3dom has onoutputchanged

more generally for all nodes with fields = out ?

multiple browsers

Have tested the master version of cobwe_dom with the example from http://www.create3000.de/titania/download/ which uses multple X3DCanvas elements within the dom, but it does not work.

I get the following error on line 27:

TypeError: this.browser is undefined cobweb_dom.js:21:27

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.