Skip to content

Instantly share code, notes, and snippets.

@kenwebb

kenwebb/xholonWorkbook.xml

Last active Jun 15, 2020
Embed
What would you like to do?
Xholon with interact.js 1.9.19
<?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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.