Xholon with interact.js 1.9.19

xholonWorkbook.xml

<?xml version="1.0" encoding="UTF-8"?>
<!--Xholon Workbook http://www.primordion.com/Xholon/gwt/ MIT License, Copyright (C) Ken Webb, Mon Jun 15 2020 07:44:20 GMT-0400 (Eastern Daylight Time)-->
<XholonWorkbook>

<Notes><![CDATA[
Xholon
------
Title: Xholon with interact.js 1.9.19
Description: 
Url: 
InternalName: e86ec1b3e77ea793b68c04253beb4fe7  based on 6901ef51d5fcb2d86a21
Keywords: 

My Notes
--------
2014
The interact.js library is "JavaScript drag and drop, resizing and multi-touch gestures
with inertia and snapping for modern browsers (and also IE8+)"[1]

In this workbook I'll experiment with it, starting with drag and drop.
Use the mouse to move nodes around in the D3 CirclePack SVG image.
If you move a node into a new parent node, then the underlying Xholon model will also change.
Select the "out" tab to see a trace of what's happening.

This workbook requires XholonInteract.html instead of Xholon.html .

June 14, 2020
-------------
Testing interact.js release 1.9.19

http://127.0.0.1:8080/war/XholonInteract.html?app=Xholon+with+interact.js+1.9.19&src=lstr&gui=none&jslib=FreeformText2XmlString


References
----------
(1) http://interactjs.io/
(2) https://github.com/taye/interact.js
(3) https://hacks.mozilla.org/2014/11/interact-js-for-drag-and-drop-resizing-and-multi-touch-gestures/

]]></Notes>  

<_-.XholonClass>

  <!-- domain objects -->
  <TheSystem/>
  <BlocksAndBricks/>
  <Block/>
  <Brick/>
  
  <!-- quantities -->
  <Height superClass="Quantity"/>
  
  <!-- dropzones -->
  <Dropzones>
    <Annotations/>
    <Attribute_Strings/>
    <Cats/>
    <Notes/>
    <References/>
  </Dropzones>
  
  <Note superClass="Attribute_String"/>
  <Reference superClass="Attribute_String"/>
  
</_-.XholonClass>

<xholonClassDetails>
  <Block>
    <port name="height" connector="Height"/>
  </Block>
  
  <!-- dropzones -->
  <Dropzones><Color>rgba(255,255,255,1.0)</Color></Dropzones>
  <Annotations><Color>red</Color></Annotations>
  <Attribute_Strings><Color>orange</Color></Attribute_Strings>
  <Cats><Color>yellow</Color></Cats>
  <Notes><Color>green</Color></Notes>
  <References><Color>blue</Color></References>
  
</xholonClassDetails>

<TheSystem>
  <BlocksAndBricks roleName="Quail">
    <Block roleName="Zebra">
      <Height>0.1 m</Height>
    </Block>
    <Brick multiplicity="10"/>
    
    <!-- dropzones -->
    <Dropzones>
      <Annotations/>
      <Attribute_Strings/>
      <Cats/>
      <Notes/>
      <References/>
    </Dropzones>
  </BlocksAndBricks>
  
  <!-- these work
xpath="./TheSystem/BlocksAndBricks"
xpath="../.."
  -->
  <Animate duration="1" selection="#two" xpath="./TheSystem/BlocksAndBricks" cssStyle=".d3cpnode circle {stroke-width: 0.5px;}" efParams="{&quot;selection&quot;:&quot;#two&quot;,&quot;sort&quot;:&quot;disable&quot;,&quot;width&quot;:400,&quot;height&quot;:400,&quot;mode&quot;:&quot;tween&quot;,&quot;labelContainers&quot;:true,&quot;includeClass&quot;:true,&quot;includeId&quot;:true,&quot;shape&quot;:&quot;circle&quot;}"/>
  
  <Animate duration="1" selection="#one" xpath="../.." cssStyle=".d3cpnode circle {stroke-width: 0.5px;}" efParams="{&quot;selection&quot;:&quot;#one&quot;,&quot;sort&quot;:&quot;disable&quot;,&quot;width&quot;:800,&quot;height&quot;:800,&quot;mode&quot;:&quot;tween&quot;,&quot;labelContainers&quot;:true,&quot;includeClass&quot;:true,&quot;includeId&quot;:true,&quot;shape&quot;:&quot;circle&quot;}"/>
  
</TheSystem>

<Chameleonbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
var selection = '#xhanim>#two>svg g.d3cpnode,#one>svg g.d3cpnode'; //'#xhgraph>svg g.d3cpnode';

// Drag
var drag = $wnd.interact(selection).draggable({
 onstart: function (event) {
  var target = event.target;
  if (!target.getAttribute('data-x') && target.transform) {
   target.setAttribute('data-x', target.transform.baseVal[0].matrix.e);
   target.setAttribute('data-y', target.transform.baseVal[0].matrix.f);
   //target.transform = "";
  }
 },
 
 // call this function on every dragmove event
 onmove: function (event) {
  var target = event.target,
   // keep the dragged position in the data-x/data-y attributes
   x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
   y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

  // translate the element
  target.style.webkitTransform = target.style.transform =
    'translate(' + x + 'px, ' + y + 'px)';

  // update the position attributes
  target.setAttribute('data-x', x);
  target.setAttribute('data-y', y);
 },
 
 // call this function on every dragend event
 onend: function (event) {
  //var textEl = event.target.querySelector('p');
  //textEl && (textEl.textContent = 'moved a distance of '
  // + (Math.sqrt(event.dx * event.dx + event.dy * event.dy)|0) + 'px');
 }
}).draggable({ inertia: true }); //.inertia(true); // changed 2020

// Drop
// drop works with the above drag, when I drag from a leaf node to another node
var drop = $wnd.interact(selection).dropzone({
 ondropactivate: function (event) {
  // add active dropzone feedback
  //$wnd.console.log("ondropactivate");
  event.target.classList.add('drop-active');
 },
 
 ondragenter: function (event) {
  var draggableElement = event.relatedTarget,
   dropzoneElement = event.target;
  //$wnd.console.log("ondragenter");
  
  // feedback the possibility of a drop
  dropzoneElement.classList.add('drop-target');
  draggableElement.classList.add('can-drop');
  //draggableElement.querySelector("text").textContent = 'N';
 },
 
 ondragleave: function (event) {
  // remove the drop feedback style
  //$wnd.console.log("ondragleave");
  event.target.classList.remove('drop-target');
  event.relatedTarget.classList.remove('can-drop');
  //event.relatedTarget.querySelector("text").textContent = 'T';
 },
 
 ondrop: function (event) {
   var xhroot = $wnd.xh.root();
   var svgchld = event.relatedTarget;
   var svgprnt = event.target;
   var xhchld = xhroot.xpath("descendant-or-self::*[@name='" + svgchld.id + "']");
   var xhprnt = xhroot.xpath("descendant-or-self::*[@name='" + svgprnt.id + "']");
   if (xhchld && xhprnt) {
     if (xhchld.parent() != xhprnt) {
       xhprnt.append(xhchld.remove());
       xhroot.println(xhchld.name() + " has moved to " + xhprnt.name());
     }
     else {
       xhroot.println(xhchld.name() + " has stayed inside " + xhprnt.name());
     }
   }
   else {
     xhroot.println(svgchld.id + " has unknown location");
   }
 },
 
 ondropdeactivate: function (event) {
  // remove active dropzone feedback
  //$wnd.console.log("ondropdeactivate");
  event.target.classList.remove('drop-active');
  event.target.classList.remove('drop-target');
 }
});
//# sourceURL=Chameleonbehavior.js
]]></Chameleonbehavior>

<TheSystembehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
var me, beh = {
postConfigure: function() {
  me = this.cnode.parent();
  
  // SVG caption
  $wnd.xh.svg = {};
  $wnd.xh.svg.caption = $doc.createElement("p");
  $wnd.xh.svg.caption.textContent = $wnd.xh.param("ModelName");
  
  var div = $doc.querySelector("#xhanim");
  
  // create a new div for this animation
  var one = $doc.createElement("div");
  one.setAttribute("id", "one");
  div.appendChild(one);
  
  var two = $doc.createElement("div");
  two.setAttribute("id", "two");
  div.appendChild(two);
  
  one.appendChild($wnd.xh.svg.caption);
  $wnd.xh.root().append(this.cnode.remove());
}
}
]]></TheSystembehavior>

<XHeightbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
  var myHeight, testing;
  var beh = {
    postConfigure: function() {
      testing = Math.floor(Math.random() * 10);
      myHeight = this.cnode.parent();
    },
    act: function() {
      myHeight.println(this.toString());
    },
    toString: function() {
      return "testing:" + testing;
    }
  }
]]></XHeightbehavior>

<XBrickbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
  $wnd.xh.Brickbehavior = function Brickbehavior() {}

  $wnd.xh.Brickbehavior.prototype.postConfigure = function() {
    this.brick = this.cnode.parent();
    this.iam = " red brick";
  };

  $wnd.xh.Brickbehavior.prototype.act = function() {
    this.brick.println("I am a" + this.iam);
  };
]]></XBrickbehavior>

<SvgClient><Attribute_String roleName="svgUri"><![CDATA[data:image/svg+xml,

]]></Attribute_String><Attribute_String roleName="setup">${MODELNAME_DEFAULT},${SVGURI_DEFAULT}</Attribute_String></SvgClient>

</XholonWorkbook>