Skip to content

Commit

Permalink
prettier touch
Browse files Browse the repository at this point in the history
  • Loading branch information
@forresto
forresto committed Dec 24, 2024
1 parent 05008b4 commit 6f69edd
Show file tree
Hide file tree
Showing 104 changed files with 5,871 additions and 5,311 deletions.
18 changes: 9 additions & 9 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<!DOCTYPE html>
<html>

<!--
<!--
Thanks for viewing source!
Thanks for viewing source!
Try debug.html if you want to poke the insides.
_________________
Expand Down Expand Up @@ -32,13 +32,13 @@
<title>meemoo: use, build, share, and hack creative apps in the browser</title>

<script type="text/javascript">

// Force HTTPS
if (window.location.host === 'app.meemoo.org' && window.location.protocol === 'http:') {
window.location.href = window.location.href.replace('http:', 'https:');
}


(function(){
"use strict";

Expand Down Expand Up @@ -97,14 +97,14 @@
}

})();
</script>
</script>

</head>
<body>

<footer style="font-size: 10px; font-family: Monaco, monospace;">
<span id="debug-info"></span>
<a href="http://meemoo.org/" target="_blank">meemoo</a> &raquo;
<a href="http://meemoo.org/" target="_blank">meemoo</a> &raquo;
<a href="https://github.com/meemoo/iframework" target="_blank">source</a>
<span id="iframework-info"></span>
<noscript>&raquo; This web app uses JavaScript (and plenty of it).</noscript>
Expand All @@ -129,4 +129,4 @@
<link href="iframework.css" rel="stylesheet" type="text/css"></link>

</body>
</html>
</html>
187 changes: 129 additions & 58 deletions src/edge-view.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
$(function(){

$(function () {
Iframework.EdgeView = Backbone.View.extend({
tagName: "div",
className: "edge",
tagName: 'div',
className: 'edge',
// template: _.template(template),
positions: null,
graphSVGElement: null,
Expand Down Expand Up @@ -33,37 +32,45 @@ $(function(){

$(this.elementWire)
.data({
"model": this.model
model: this.model,
})
.click( function(event){
$(event.target).data("model").view.click(event);
.click(function (event) {
$(event.target).data('model').view.click(event);
});

// Listen for changes to redraw
if (this.model.Source) {
this.model.Source.parentNode.on("change:x change:y change:w change:h", this.redraw, this);
this.model.Source.parentNode.on(
'change:x change:y change:w change:h',
this.redraw,
this
);
}
if (this.model.Target) {
this.model.Target.parentNode.on("change:x change:y", this.redraw, this);
this.model.Target.parentNode.on(
'change:x change:y',
this.redraw,
this
);
}
}
},
render: function () {
this.calcPositions();

this.elementGroup = this.makeSVG('g', {
"transform": "translate("+this.svgX()+","+this.svgY()+")",
"class": "wire-group"+(this.isPreview ? " preview" : "")
transform: 'translate(' + this.svgX() + ',' + this.svgY() + ')',
class: 'wire-group' + (this.isPreview ? ' preview' : ''),
});

this.elementShadow = this.makeSVG('path', {
"class": "wire-shadow",
"d": this.svgPathShadow()
class: 'wire-shadow',
d: this.svgPathShadow(),
});
this.elementWire = this.makeSVG('path', {
"class": "wire",
"d": this.svgPath(),
"stroke": this.color()
class: 'wire',
d: this.svgPath(),
stroke: this.color(),
});

this.elementGroup.appendChild(this.elementShadow);
Expand All @@ -73,18 +80,21 @@ $(function(){

// Unhide port plugends
if (this.model) {
this.model.Source.view.$(".plugend").show();
this.model.Target.view.$(".plugend").show();
this.model.Source.view.$('.plugend').show();
this.model.Target.view.$('.plugend').show();
this.model.parentGraph.view.resizeEdgeSVG();
}

return this;
},
redraw: function () {
this.calcPositions();
$(this.elementGroup).attr( "transform", "translate("+this.svgX()+", "+this.svgY()+")" );
$(this.elementWire).attr( "d", this.svgPath() );
$(this.elementShadow).attr( "d", this.svgPathShadow() );
$(this.elementGroup).attr(
'transform',
'translate(' + this.svgX() + ', ' + this.svgY() + ')'
);
$(this.elementWire).attr('d', this.svgPath());
$(this.elementShadow).attr('d', this.svgPathShadow());

if (this.model) {
this.model.parentGraph.view.resizeEdgeSVG();
Expand All @@ -101,12 +111,24 @@ $(function(){
calcPositions: function () {
if (this.model) {
// Connected edge
var sourceName = this.model.get("source")[1];
var targetName = this.model.get("target")[1];
this.positions.fromX = this.model.Source.view.portOffsetLeft('out', sourceName);
this.positions.fromY = this.model.Source.view.portOffsetTop('out', sourceName);
this.positions.toX = this.model.Target.view.portOffsetLeft('in', targetName);
this.positions.toY = this.model.Target.view.portOffsetTop('in', targetName);
var sourceName = this.model.get('source')[1];
var targetName = this.model.get('target')[1];
this.positions.fromX = this.model.Source.view.portOffsetLeft(
'out',
sourceName
);
this.positions.fromY = this.model.Source.view.portOffsetTop(
'out',
sourceName
);
this.positions.toX = this.model.Target.view.portOffsetLeft(
'in',
targetName
);
this.positions.toY = this.model.Target.view.portOffsetTop(
'in',
targetName
);
}
},
svgX: function () {
Expand All @@ -128,21 +150,65 @@ $(function(){
var fromY = this.positions.fromY - this.svgY();
var toX = this.positions.toX - this.svgX();
var toY = this.positions.toY - this.svgY();
return "M "+ fromX +" "+ fromY +
" L "+ (fromX+this.pathStraight) +" "+ fromY +
" C "+ (fromX+this.pathCurve) +" "+ fromY +" "+ (toX-this.pathCurve) +" "+ toY +" "+ (toX-this.pathStraight) +" "+ toY +
" L "+ toX +" "+ toY;
return (
'M ' +
fromX +
' ' +
fromY +
' L ' +
(fromX + this.pathStraight) +
' ' +
fromY +
' C ' +
(fromX + this.pathCurve) +
' ' +
fromY +
' ' +
(toX - this.pathCurve) +
' ' +
toY +
' ' +
(toX - this.pathStraight) +
' ' +
toY +
' L ' +
toX +
' ' +
toY
);
},
svgPathShadow: function () {
// Same as svgPath() but y+1
var fromX = this.positions.fromX - this.svgX();
var fromY = this.positions.fromY - this.svgY() + 1;
var toX = this.positions.toX - this.svgX();
var toY = this.positions.toY - this.svgY() + 1;
return "M "+ fromX +" "+ fromY +
" L "+ (fromX+this.pathStraight) +" "+ fromY +
" C "+ (fromX+this.pathCurve) +" "+ fromY +" "+ (toX-this.pathCurve) +" "+ toY +" "+ (toX-this.pathStraight) +" "+ toY +
" L "+ toX +" "+ toY;
return (
'M ' +
fromX +
' ' +
fromY +
' L ' +
(fromX + this.pathStraight) +
' ' +
fromY +
' C ' +
(fromX + this.pathCurve) +
' ' +
fromY +
' ' +
(toX - this.pathCurve) +
' ' +
toY +
' ' +
(toX - this.pathStraight) +
' ' +
toY +
' L ' +
toX +
' ' +
toY
);
},
color: function () {
if (this._color) {
Expand All @@ -157,59 +223,64 @@ $(function(){
return Iframework.wireColors[Iframework.wireColorIndex];
}
},
setColor: function(c) {
setColor: function (c) {
this._color = c;
$(this.elementWire).attr( "stroke", c );
$(this.elementWire).attr('stroke', c);
},
label: function () {
return this.model.get("source")[0] +":"+ this.model.get("source")[1] +
'<span class="wiresymbol" style="color:' + this._color + '">&rarr;</span>' +
this.model.get("target")[0] +":"+ this.model.get("target")[1];
return (
this.model.get('source')[0] +
':' +
this.model.get('source')[1] +
'<span class="wiresymbol" style="color:' +
this._color +
'">&rarr;</span>' +
this.model.get('target')[0] +
':' +
this.model.get('target')[1]
);
},
// Thanks bobince http://stackoverflow.com/a/3642265/592125
makeSVG: function(tag, attrs) {
var el= document.createElementNS('http://www.w3.org/2000/svg', tag);
makeSVG: function (tag, attrs) {
var el = document.createElementNS('http://www.w3.org/2000/svg', tag);
for (var k in attrs) {
if (k === "xlink:href") {
if (k === 'xlink:href') {
// Pssh namespaces...
el.setAttributeNS('http://www.w3.org/1999/xlink','href', attrs[k]);
el.setAttributeNS('http://www.w3.org/1999/xlink', 'href', attrs[k]);
} else {
el.setAttribute(k, attrs[k]);
}
}
return el;
},
dim: function(){
$(this.elementGroup).attr("opacity", 0.2);
dim: function () {
$(this.elementGroup).attr('opacity', 0.2);
},
undim: function(){
$(this.elementGroup).attr("opacity", 1);
undim: function () {
$(this.elementGroup).attr('opacity', 1);
},
click: function(event) {
click: function (event) {
// If not on top already
if (this._z < this.model.parentGraph.edgeCount-1) {
if (this._z < this.model.parentGraph.edgeCount - 1) {
// Bring to top (z-order of SVG can't be done with CSS)
this.graphSVGElement.appendChild(this.elementGroup);
this._z = this.model.parentGraph.edgeCount++;
}
this.highlight();
},
highlight: function() {
highlight: function () {
// Highlight edge and plugends
var shadow = $(this.elementShadow);
shadow.attr("class", "wire-shadow highlight");
setTimeout(function(){
shadow.attr("class", "wire-shadow");
shadow.attr('class', 'wire-shadow highlight');
setTimeout(function () {
shadow.attr('class', 'wire-shadow');
}, 1000);
if (this.model.Source.view) {
this.model.Source.view.highlight();
}
if (this.model.Target.view) {
this.model.Target.view.highlight();
}
}


},
});

});
Loading

0 comments on commit 6f69edd

Please sign in to comment.