Towards curves
Make them work in SVG/HTML
http://lively-kernel.org/repository/webwerkstatt/issues/draft/NewWorld/CurveDrafting_EmbeddableWorld.xhtml
iFrame.remove()
<!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">
<svg xmlns="http://www.w3.org/2000/svg" style="opacity: 1; position: absolute; left: 200px; top: 20px; " width="100" height="100" fill="none" viewBox="0 0 100 100" stroke="black">
<defs>
<marker viewBox="0 0 20 10"
refX="0" refY="0" id="arrowHead"
markerUnits="strokeWidth"
markerWidth="4" markerHeight="3"
orient="auto">
<path d="M0,0 L0,20 L20,10 L0,0 z"/>
</marker>
<marker id="Triangle"
viewBox="0 0 10 10" refX="0" refY="5"
markerUnits="userSpaceOnUse"
markerWidth="4" markerHeight="3"
orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
</defs>
<path d="M0,0 L100,100 " fill="none" stroke="black" stroke-width="2" marker-end="url(#Triangle)"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="position: absolute; left: 0px; top: 20px; " width="100" height="100" viewBox="0 0 100 100" stroke="rgb(0,0,0)">
<defs>
<marker id="Triangle2"
viewBox="0 0 10 10" refX="10" refY="5"
markerUnits="strokeWidth"
markerWidth="10" markerHeight="5"
orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
<marker viewBox="0 0 20 20"
refX="20" refY="10" id="arrowHead"
markerWidth="20" markerHeight="20"
orient="auto">
<path d="M0,0 L0,20 L20,10 z"/>
</marker>
</defs>
<path d="M0,0 L100,100 "
fill="none" stroke="black" stroke-width="1"
marker-end="url(#arrowHead)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" style="opacity: 1; position: absolute; left: 0px; top: 0px; " width="100" height="100" fill="none" viewBox="0 0 100 100" stroke="rgb(0,0,0)">
<defs>
<marker refX="20" refY="10" markerWidth="20" markerHeight="20" id="arrowHead" orient="auto" viewBox="0 0 20 20">
<path d="M0,0 L0,20 L20,10 L0,0 "/>
</marker>
<marker refX="0" refY="10" markerWidth="20" markerHeight="20" id="arrowHead2" orient="auto" viewBox="0 0 20 20">
<path d="M0,0 L0,20 L20,10 L0,0 "/>
</marker>
</defs>
<path d="M0,0 L100,100 " marker-end="url(#arrowHead)" marker-start="url(#arrowHead2)"/>
</svg>
<div xmlns="http://www.w3.org/1999/xhtml" style="position: absolute; left: 0px; top: 200px;width: 100px; height: 200px; ">
<svg xmlns="http://www.w3.org/2000/svg" transform="translate(0,0)" viewBox="0 0 100 200" width="100" height="200" fill="none" style="" stroke="rgb(0,0,0)">
<path d="M0,0 L50,100 L100,-100"/>
</svg>
</div>
<div xmlns="http://www.w3.org/1999/xhtml" style="position: absolute; left: 100px; top: 100px; -webkit-transform: rotate(0deg) scale(1, 1); -webkit-transform-origin-x: 0px; -webkit-transform-origin-y: 0px; overflow-x: visible; overflow-y: visible; width: 100px; height: 200px; ">
<svg xmlns="http://www.w3.org/2000/svg" transform="translate(0,0)" width="100" height="200" fill="none" style="top: 0px; overflow: visible" stroke="rgb(0,0,0)">
<g transform="translate(0,0)">
<path d="M0,100 L50,200 L100,0"/>
</g>
</svg>
</div>
<div xmlns="http://www.w3.org/1999/xhtml" style="position: absolute; left: 200px; top: 100px; width: 100px height: 100px">
<svg xmlns="http://www.w3.org/2000/svg" transform="translate(0,0)" viewBox="0 -100 100 200" width="100" height="200" fill="none" style="" stroke="rgb(0,0,0)">
<path d="M0,0 L50,100 L100,-100"/>
</svg>
</div>
<div xmlns="http://www.w3.org/1999/xhtml" style="width: 100px; height: 100px; position: absolute; left: 600px; top: 50px; ">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100" fill="none" style="opacity: 1;" stroke="red" stroke-width="8">
<path d="M0,0 L100,100 "/>
</svg>
</div>
<div xmlns="http://www.w3.org/1999/xhtml" style="width: 100px; height: 100px; position: absolute; left: 600px; top: 50px; ">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100" fill="none" style="opacity: 1; " stroke="black" stroke-width="2">
<path d="M0,0 L100,100 "/></svg>
</div>
</html>
module('lively.LayerableMorphs').load()
cop.create('OriginDebugLayer')
.refineClass(lively.morphic.Morph, {
setOrigin: function(value) {
// changes the origin / pivot of the morph
// without changing its position on the screen
var
oldOrigin = this.getOrigin(),
delta = value.subPt(oldOrigin),
transform = this.getTransform(),
oldTransformedOrigin = transform.transformPoint(oldOrigin),
newTransformedOrigin = transform.transformPoint(value),
transformedDelta = newTransformedOrigin.subPt(oldTransformedOrigin);
// change the shapes position and own translation
this.shape.setPosition(value.negated());
this.submorphs.forEach(function(ea) {
ea.moveBy(delta.negated());
})
alert('shape pos: ' + value.negated() + ' moveBy ' + transformedDelta)
this.moveBy(transformedDelta);
},
})
var expected = {
tagName: 'svg', childNodes: [ // shape
{tagName: 'defs', childNodes: [
{tagName: 'marker',
childNodes: [{tagName: 'path'}],
attributes: {id: 'simpleArrow'}},
]},
{tagName: 'path',
attributes: {d: /M0,0\s*L100,100\s*/, 'marker-end': 'url(#simpleArrow)'}}
]
};
this.assertNodeMatches(expected, m.renderContext().getShapeNode());
'markers', {
addMarkerHTML: function(ctx, morph) {
if (!morph.isPath) {
alert('can only use path morphs as markers!');
return
}
var pathNode = morph.shape.renderContextDispatch('getPathNode'),
markerNode = NodeFactory.create('marker'),
origin = morph.getOrigin(),
extent = morph.getExtent(),
id = morph.getName() || 'unknown marker';
markerNode.appendChild(pathNode.cloneNode(true));
markerNode.setAttribute('refX', String(origin.x));
markerNode.setAttribute('refY', String(origin.y));
markerNode.setAttribute('markerWidth', String(extent.x));
markerNode.setAttribute('markerHeight', String(extent.y));
markerNode.setAttribute('id', id);
markerNode.setAttribute('orient', 'auto');
markerNode.setAttribute('viewBox', pathNode.parentNode.getAttribute('viewBox'));
if (!this.markersSrc) this.markersSrc = [];
this.markersSrc.push(Exporter.stringify(markerNode));
this.addNodeToDefsHTML(ctx, markerNode, id);
},
addNodeToDefsHTML: function(ctx, node, id) {
if (!ctx.shapeNode) return;
var defNode = ctx.shapeNode.getElementsByTagName('defs')[0];
if (!defNode) {
defNode = NodeFactory.create('defs');
ctx.shapeNode.insertBefore(defNode, ctx.shapeNode.childNodes[0]);
}
var existing = ctx.shapeNode.getElementById(id)
if (existing) existing.parentNode.removeChild(existing)
defNode.appendChild(node);
},
setArrowStartHTML: function(ctx, id) {
var pathNode = this.getPathNodeHTML(ctx);
pathNode && pathNode.setAttribute('marker-start', 'url(#' + id + ')');
},
setArrowEndHTML: function(ctx, id) {
var pathNode = this.getPathNodeHTML(ctx);
pathNode && pathNode.setAttribute('marker-end', 'url(#' + id + ')');
},
}
PartsBin
refresh
Button
load
remove
Simple button. Connect to 'fire' to trigger actions when the button is pressed.
node = this.renderContext().shapeNode
pos = pt(-10,0)
transform = new lively.morphic.Similitude(pos, 0, pt(1,1));
transform.applyTo(node)
this.renderContext().shapeNode.getAttribute('transform')
morph pos: pt(500.0,50.0)
morph origin: pt(50.0,50.0)
bounds: rect(pt(543.4,100.0),pt(720.7,222.9))
shape pos: pt(0.0,0.0)
viewBox: 0 0 171 113
PathElement("M0,0") PathElement("L0.75,53.5") PathElement("L3.5,113") PathElement("L171,109")
debugLine
-----
this.addScript(function run() {
this.isRunning = true;
this.startStepping(200, 'updateInspection')
this.get('runButton').setLabel('stop')
});
this.addScript(function setupConnections() {
connect(this.get('runButton'), 'fire', this, 'toggleRun')
});
this.addScript(function reset() {
this.stop();
this.get('inspectionOutput').setTextString('nothing yet')
});
this.addScript(function stop() {
this.isRunning = false;
this.stopStepping()
this.get('runButton').setLabel('run')
});
this.addScript(function updateInspection() {
var name = this.get('curveName').textString,
m = $morph(name);
if (!m || !m.isPath) {
alert('cannot find ' + name);
this.stop();
}
newShowPt(m.worldPoint(pt(0,0)), 0.1)
var str = ''
str += 'morph pos: ' + m.getPosition() + '\n';
str += 'morph origin: ' + m.getOrigin() + '\n';
str += 'bounds: ' + m.bounds() + '\n';
str += 'shape pos: ' + m.shape.getPosition() + '\n';
str += '\n';
str += 'viewBox: ' + m.renderContext().shapeNode.getAttribute('viewBox') + '\n';
str += m.shape.getPathElements().join(' ');
this.get('inspectionOutput').setTextString(str)
});
this.addScript(function toggleRun() {
if (this.isRunning) this.stop()
else this.run();
});
Scripts
Connections
run
result:[TestResult Tests run: 11 -- Tests failed: 0 -- Time: 0.119s]
lively.morphic.Tests.LineTest
-----
this.controlPoints[0].index
this.controlPoints[1].index
this.controlPoints[2].index
setSVGTransform: function(node, pos, rot, scale) {
var transform = new lively.morphic.Similitude(pos, rot, pt(scale,scale));
transform.applyTo(node)
},
line = new lively.morphic.Path([pt(0,0), pt(100,100)])
line.openInWorld()
line.setPosition(pt(500, 50))
line.shape.vertices()[0]
line.getControlPoint(1).moveControlPointBy(pt(0,-5))
line.getControlPoint(1).moveControlPointBy(pt(0,10))
line.removeHalos()
newShowPt(line. getControlPointHalos()[0].computePositionAtTarget())
newShowPt(line.halos[line.halos.length-2].controlPoint.getGlobalPos())
newShowRect(line.getPosition().extent(line.getExtent()))
newShowRect(line.getPosition().extent(line.getExtent()))
newShowRect(line.getBounds())
newShowRect(line.shape.getBounds().translatedBy(line.getPosition()))
line.halos = null
r = Rectangle.ensure(line.renderContext().shapeNode.getBBox())
newShowRect(r.translatedBy(line.getPosition()))
offset = line.shape.getBounds().topLeft()
line.shape.setPosition(offset.negated())
line.setPosition(offset)
line = new lively.morphic.Path([pt(0,0), pt(100,100)])
line.openInWorld()
line.setPosition(pt(500, 50))
arrowHead.setFill(Color.white)
arrowHead = new lively.morphic.Path([pt(0,0), pt(0,12), pt(16,6), pt(0,0)]);
arrowHead.setOrigin(pt(16,6))
line.addArrowHeadEnd(arrowHead);
arrowHead = new lively.morphic.Path([pt(0,0), pt(0,20), pt(20,10), pt(0,0)]);
arrowHead.setOrigin(pt(20,10))
line.addArrowHeadStart(arrowHead);
Exporter.stringify(line.renderContext().shapeNode)
line.renderContext().shapeNode.childNodes[0].parentNode.removeChild(line.renderContext().shapeNode.childNodes[0])
line.setVertices([pt(0,0), pt(0,20), pt(20,10), pt(0,0)])
line.setVertices([pt(0,0), pt(100,100)])
line.setVertices([pt(0,0), pt(100,10)])
line.setVertices([pt(0,20), pt(100,0)])
line.renderContext().shapeNode.setAttribute('viewBox', '0 0 100 20')
line.shape.setPosition
line.bounds()
line.shape.getBounds().equals(new Rectangle(0,-20, 100, 20))
Rectangle.unionPts([pt(0,0), pt(100,-20)]).topLeft()
line.setOrigin(pt(0,0))
line.getControlPoint(1).remove()
line.renderContext().shapeNode.setAttribute('stroke', 'red')
line.renderContext().shapeNode.setAttribute('stroke-width', '8')
line.renderContext().shapeNode.setAttribute('viewBox', '0 -0 100 20')
line.renderContext().shapeNode.setAttribute('viewBox', '0 -10 100 100')
line.renderContext().shapeNode.setAttribute('viewBox', '0 -10 100 100')
line.renderContext().shapeNode.setAttribute('width', '100')
line.renderContext().shapeNode.setAttribute('height', '20')
line.renderContext().shapeNode.getAttribute('viewBox')
line.renderContext().shapeNode.getAttribute('width')
line.renderContext().shapeNode.getAttribute('height')
line.getOrigin()
line.remove()
Exporter.stringify(line.renderContext().morphNode)
line.shape.setPositionHTML
line.getPosition()
line.moveBy(pt(0,10))
line.moveBy(pt(0,-10))
line.copy().openInWorld()
line.shape.setPosition(line.shape.getPosition().addXY(0, -1))
line.shape.setPosition(pt(0,-10))
line.shape.setPosition(pt(0,0))
line.setOrigin(pt(0,0))
line.shape.getExtent()
line.setOrigin(line.getOrigin().addPt(pt(0,1)))
line.setOrigin(pt(0,0))
line.getOrigin()
line.shape.getPosition()
line.setWithLayers([OriginDebugLayer])
setPositionSVG: function(ctx, value) {
if (ctx.morphNode)
ctx.domInterface.setSVGTransform(ctx.morphNode, value, this.getRotation(), 1);
},