Skip to content

Commit

Permalink
Merge pull request #113 from Jesus89/params
Browse files Browse the repository at this point in the history 
Add Constant blocks and Block parameters
  • Loading branch information
@Jesus89
Jesus89 committed Dec 8, 2016
2 parents e381137 + 0bd65a7 commit 5300804
Show file tree
Hide file tree
Showing 20 changed files with 2,420 additions and 384 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,3 +18,4 @@ app/profile.json
app/_cache
app/_build
app/resources/locale/**/*.json
demo/*.v
4 changes: 2 additions & 2 deletions app/scripts/plugins/routers/joint.routers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,10 @@ joint.routers.ice = (function(g, _, joint) {
maximumLoops: 2000,

// possible starting directions from an element
startDirections: ['right'],
startDirections: ['right', 'top', 'bottom'],

// possible ending directions to an element
endDirections: ['left'],
endDirections: ['left', 'top', 'bottom'],

// specify directions above
directionMap: {
Expand Down
233 changes: 184 additions & 49 deletions app/scripts/plugins/shapes/joint.shapes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@ else {
// Model element

joint.shapes.ice = {};
joint.shapes.ice.Model = joint.shapes.basic.Generic.extend(_.extend({}, joint.shapes.basic.PortsModelInterface, {
joint.shapes.ice.Model = joint.shapes.basic.Generic.extend({

markup: '<g class="rotatable"><g class="scalable"><rect class="body"/></g><g class="inPorts"/><g class="outPorts"/></g>',
markup: '<g class="rotatable"><g class="scalable"><rect class="body"/></g><g class="leftPorts"/><g class="rightPorts"/><g class="topPorts"/><g class="bottomPorts"/></g>',
portMarkup: '<g class="port port<%= id %>"><path class="port-wire"/><circle class="port-body"/><text class="port-label"/></g>',

defaults: joint.util.deepSupplement({
Expand All @@ -26,8 +26,10 @@ joint.shapes.ice.Model = joint.shapes.basic.Generic.extend(_.extend({}, joint.sh
width: 1,
height: 1
},
inPorts: [],
outPorts: [],
leftPorts: [],
rightPorts: [],
topPorts: [],
bottomPorts: [],
attrs: {
gridUnits: 1,
'.': {
Expand All @@ -43,24 +45,27 @@ joint.shapes.ice.Model = joint.shapes.basic.Generic.extend(_.extend({}, joint.sh
r: 16,
opacity: 0
},
'.inPorts .port-body': {
'.leftPorts .port-body': {
pos: 'left',
type: 'input',
magnet: false
},
'.outPorts .port-body': {
'.rightPorts .port-body': {
pos: 'right',
type: 'output',
magnet: true
},
'.inPorts .port-label': {
x: 12,
y: -10,
'text-anchor': 'end',
fill: '#888'
'.topPorts .port-body': {
pos: 'top',
type: 'input',
magnet: false
},
'.bottomPorts .port-body': {
pos: 'bottom',
type: 'output',
magnet: true
},
'.outPorts .port-label': {
x: -12,
y: -10,
'text-anchor': 'start',
'.port-label': {
fill: '#888'
},
'.port-wire': {
Expand All @@ -70,6 +75,35 @@ joint.shapes.ice.Model = joint.shapes.basic.Generic.extend(_.extend({}, joint.sh
}
}, joint.shapes.basic.Generic.prototype.defaults),


initialize: function() {
this.updatePortsAttrs();
this.on('change:leftPorts change:rightPorts change:topPorts change:bottomPorts', this.updatePortsAttrs, this);
this.constructor.__super__.constructor.__super__.initialize.apply(this, arguments);
},

updatePortsAttrs: function(eventName) {
if (this._portSelectors) {
var newAttrs = _.omit(this.get('attrs'), this._portSelectors);
this.set('attrs', newAttrs, { silent: true });
}
this._portSelectors = [];
var attrs = {};

_.each(['left', 'right', 'top', 'bottom'], function(type) {
var port = type + 'Ports';
_.each(this.get(port), function(portName, index, ports) {
var portAttributes = this.getPortAttrs(portName, index, ports.length, '.' + port, type);
this._portSelectors = this._portSelectors.concat(_.keys(portAttributes));
_.extend(attrs, portAttributes);
}, this);
}, this);

this.attr(attrs, { silent: true });
this.processPorts();
this.trigger('process:ports');
},

getPortAttrs: function(port, index, total, selector, type) {

var attrs = {};
Expand All @@ -80,44 +114,72 @@ joint.shapes.ice.Model = joint.shapes.basic.Generic.extend(_.extend({}, joint.sh
var portWireSelector = portSelector + '>.port-wire';
var portBodySelector = portSelector + '>.port-body';

attrs[portSelector] = {
ref: '.body'
};

attrs[portLabelSelector] = {
text: port.label
};

attrs[portWireSelector] = {};

attrs[portBodySelector] = {
port: {
id: port.id,
type: type
}
};

var portY = (index + 0.5) / total;

portY = Math.round(portY * port.gridUnits) / port.gridUnits;

attrs[portSelector] = {
ref: '.body',
'ref-y': portY
};

attrs[portWireSelector] = {
y: portY
};

if (type === 'in') {
attrs[portSelector]['ref-x'] = -16;
attrs[portWireSelector]['d'] = 'M 0 0 L 32 0';
if ((type === 'leftPorts') || (type === 'topPorts')) {
attrs[portSelector]['pointer-events'] = 'none';
attrs[portWireSelector]['pointer-events'] = 'none';
}
else {
attrs[portSelector]['ref-dx'] = 16;
attrs[portWireSelector]['d'] = 'M 0 0 L -32 0';

var pos = Math.round((index + 0.5) / total * port.gridUnits) / port.gridUnits;

switch (type) {
case 'left':
attrs[portSelector]['ref-x'] = -16;
attrs[portSelector]['ref-y'] = pos;
attrs[portLabelSelector]['dx'] = 10;
attrs[portLabelSelector]['y'] = -10;
attrs[portLabelSelector]['text-anchor'] = 'end';
attrs[portWireSelector]['y'] = pos;
attrs[portWireSelector]['d'] = 'M 0 0 L 32 0';
break;
case 'right':
attrs[portSelector]['ref-dx'] = 16;
attrs[portSelector]['ref-y'] = pos;
attrs[portLabelSelector]['dx'] = -10;
attrs[portLabelSelector]['y'] = -10;
attrs[portLabelSelector]['text-anchor'] = 'start';
attrs[portWireSelector]['y'] = pos;
attrs[portWireSelector]['d'] = 'M 0 0 L -32 0';
break;
case 'top':
attrs[portSelector]['ref-y'] = -16;
attrs[portSelector]['ref-x'] = pos;
attrs[portLabelSelector]['dx'] = 10;
attrs[portLabelSelector]['dy'] = 0;
attrs[portLabelSelector]['text-anchor'] = 'start';
attrs[portWireSelector]['x'] = pos;
attrs[portWireSelector]['d'] = 'M 0 0 L 0 32';
break;
case 'bottom':
attrs[portSelector]['ref-dy'] = 16;
attrs[portSelector]['ref-x'] = pos;
attrs[portLabelSelector]['dx'] = 10;
attrs[portLabelSelector]['y'] = 0;
attrs[portLabelSelector]['text-anchor'] = 'start';
attrs[portWireSelector]['x'] = pos;
attrs[portWireSelector]['d'] = 'M 0 0 L 0 -32';
break;
}

return attrs;
}
}));
});

joint.shapes.ice.ModelView = joint.dia.ElementView.extend({

Expand All @@ -137,28 +199,40 @@ joint.shapes.ice.ModelView = joint.dia.ElementView.extend({
this.listenTo(this.model, 'process:ports', this.update);
joint.dia.ElementView.prototype.initialize.apply(this, arguments);
},

render: function() {
joint.dia.ElementView.prototype.render.apply(this, arguments);
this.paper.$el.append(this.$box);
this.updateBox();
return this;
},

renderPorts: function() {
var $inPorts = this.$('.inPorts').empty();
var $outPorts = this.$('.outPorts').empty();
var $leftPorts = this.$('.leftPorts').empty();
var $rightPorts = this.$('.rightPorts').empty();
var $topPorts = this.$('.topPorts').empty();
var $bottomPorts = this.$('.bottomPorts').empty();
var portTemplate = _.template(this.model.portMarkup);

_.each(_.filter(this.model.ports, function (p) { return p.type === 'in' }), function (port, index) {
$inPorts.append(V(portTemplate({ id: index, port: port })).node);
_.each(_.filter(this.model.ports, function (p) { return p.type === 'left' }), function (port, index) {
$leftPorts.append(V(portTemplate({ id: index, port: port })).node);
});
_.each(_.filter(this.model.ports, function (p) { return p.type === 'right' }), function (port, index) {
$rightPorts.append(V(portTemplate({ id: index, port: port })).node);
});
_.each(_.filter(this.model.ports, function (p) { return p.type === 'out' }), function (port, index) {
$outPorts.append(V(portTemplate({ id: index, port: port })).node);
_.each(_.filter(this.model.ports, function (p) { return p.type === 'top' }), function (port, index) {
$topPorts.append(V(portTemplate({ id: index, port: port })).node);
});
_.each(_.filter(this.model.ports, function (p) { return p.type === 'bottom' }), function (port, index) {
$bottomPorts.append(V(portTemplate({ id: index, port: port })).node);
});
},

update: function() {
this.renderPorts();
joint.dia.ElementView.prototype.update.apply(this, arguments);
},

updateBox: function() {
var bbox = this.model.getBBox();
var state = this.model.attributes.state;
Expand All @@ -173,6 +247,7 @@ joint.shapes.ice.ModelView = joint.dia.ElementView.extend({
transform: 'scale(' + state.zoom + ')'
});
},

removeBox: function(evt) {
this.$box.remove();
}
Expand Down Expand Up @@ -221,9 +296,9 @@ joint.shapes.ice.Input = joint.shapes.ice.Model.extend({
defaults: joint.util.deepSupplement({
type: 'ice.Input',
choices: [],
outPorts: [{
id: "out",
label: "",
rightPorts: [{
id: 'out',
label: '',
gridUnits: 8
}],
size: {
Expand All @@ -237,9 +312,9 @@ joint.shapes.ice.Output = joint.shapes.ice.Model.extend({
defaults: joint.util.deepSupplement({
type: 'ice.Output',
choices: [],
inPorts: [{
id: "in",
label: "",
leftPorts: [{
id: 'in',
label: '',
gridUnits: 8
}],
size: {
Expand Down Expand Up @@ -313,18 +388,78 @@ joint.shapes.ice.InputView = joint.shapes.ice.IOView;
joint.shapes.ice.OutputView = joint.shapes.ice.IOView;


// Constant blocks

joint.shapes.ice.Constant = joint.shapes.ice.Model.extend({
defaults: joint.util.deepSupplement({
type: 'ice.Constant',
bottomPorts: [{
id: 'constant-out',
label: '',
gridUnits: 8
}],
size: {
width: 96,
height: 64
}
}, joint.shapes.ice.Model.prototype.defaults)
});


joint.shapes.ice.ConstantView = joint.shapes.ice.ModelView.extend({

template: '\
<div class="constant-block">\
<label></label>\
<input class="constant-input"></input>\
</div>\
',

initialize: function() {
joint.shapes.ice.ModelView.prototype.initialize.apply(this, arguments);

// Prevent paper from handling pointerdown.
this.$box.find('.constant-input').on('mousedown click', function(evt) { evt.stopPropagation(); });

this.$box.find('.constant-input').on('input', _.bind(function(evt) {
this.model.attributes.data.value = $(evt.target).val();
}, this));
},
renderLabel: function () {
var name = this.model.attributes.data.label;
this.$box.find('label').text(name);
},
renderValue: function() {
if (this.model.get('disabled')) {
this.$box.find('.constant-input').css({'pointer-events': 'none'});
}
this.$box.find('.constant-input').val(this.model.get('data').value);
},
clearValue: function () {
this.$box.find('.constant-input').val('');
},
update: function () {
this.renderLabel();
this.renderPorts();
this.renderValue();
joint.dia.ElementView.prototype.update.apply(this, arguments);
}
});


// Code block
// Size: 64 * x

joint.shapes.ice.Code = joint.shapes.ice.Model.extend({
defaults: joint.util.deepSupplement({
type: 'ice.Code',
size: {
width: 400,
width: 384,
height: 256
},
attrs: {
'.body': {
width: 400,
width: 384,
height: 256
}
}
Expand Down
3 changes: 2 additions & 1 deletion app/scripts/services/common.service.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,8 @@ angular.module('icestudio')
cell.type == 'ice.Input' ||
cell.type == 'ice.Output' ||
cell.type == 'ice.Code' ||
cell.type == 'ice.Info') {
cell.type == 'ice.Info' ||
cell.type == 'ice.Constant') {
var block = {};
block.id = cell.id;
block.type = cell.blockType;
Expand Down

0 comments on commit 5300804

Please sign in to comment.