From 7bf91fe1a38b26fa5e0932c3816627f233b9a4e4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= Date: Sat, 19 May 2018 10:34:53 +0200 Subject: [PATCH 01/19] Improve size of virtual port blocks --- app/scripts/graphics/joint.shapes.js | 33 ++++++++++++-------------- app/styles/design.css | 35 ++++++++++++++-------------- 2 files changed, 32 insertions(+), 36 deletions(-) diff --git a/app/scripts/graphics/joint.shapes.js b/app/scripts/graphics/joint.shapes.js index c5e5dc6c0..a1fe55f65 100644 --- a/app/scripts/graphics/joint.shapes.js +++ b/app/scripts/graphics/joint.shapes.js @@ -704,17 +704,25 @@ joint.shapes.ice.IOView = joint.shapes.ice.ModelView.extend({ if (virtual) { // Virtual port (green) + if ($(virtualPortId).hasClass('hidden')) { + // If comes from fpgaPort update the position + this.model.attributes.position.y += 12; + } + this.model.attributes.size.height = 40; $(fpgaPortId).addClass('hidden'); $(virtualPortId).removeClass('hidden'); - this.model.attributes.size.height = 64; } else { // FPGA I/O port (yellow) - $(virtualPortId).addClass('hidden'); - $(fpgaPortId).removeClass('hidden'); if (data.pins) { + if ($(fpgaPortId).hasClass('hidden')) { + // If comes from virtualPort update the position + this.model.attributes.position.y -= 12; + } this.model.attributes.size.height = 32 + 32 * data.pins.length; } + $(virtualPortId).addClass('hidden'); + $(fpgaPortId).removeClass('hidden'); } }, @@ -1097,11 +1105,8 @@ joint.shapes.ice.MemoryView = joint.shapes.ice.ModelView.extend({ this.prevZoom = state.zoom; // Scale editor this.editorSelector.css({ - top: 22 * state.zoom, - left: -2 * state.zoom, - right: -2 * state.zoom, - bottom: -2 * state.zoom, - margin: 8 * state.zoom, + top: 24 * state.zoom, + margin: 6 * state.zoom, 'border-radius': 5 * state.zoom, 'border-width': state.zoom + 0.5 }); @@ -1395,11 +1400,7 @@ joint.shapes.ice.CodeView = joint.shapes.ice.ModelView.extend({ this.prevZoom = state.zoom; // Scale editor this.editorSelector.css({ - top: -2 * state.zoom, - left: -2 * state.zoom, - right: -2 * state.zoom, - bottom: -2 * state.zoom, - margin: 8 * state.zoom, + margin: 6 * state.zoom, 'border-radius': 5 * state.zoom, 'border-width': state.zoom + 0.5 }); @@ -1759,11 +1760,7 @@ joint.shapes.ice.InfoView = joint.shapes.ice.ModelView.extend({ else if (this.editor) { // Scale editor this.editorSelector.css({ - top: -2 * state.zoom, - left: -2 * state.zoom, - right: -2 * state.zoom, - bottom: -2 * state.zoom, - margin: 8 * state.zoom, + margin: 6 * state.zoom, 'border-radius': 5 * state.zoom, 'border-width': state.zoom + 0.5 }); diff --git a/app/styles/design.css b/app/styles/design.css index 891eef6d6..d9681a160 100644 --- a/app/styles/design.css +++ b/app/styles/design.css @@ -212,16 +212,15 @@ g { top: 0; right: 5px; font-size: 13px; - color: #555; + color: #444; } .virtual-port label { display: block; - margin-top: 22px; + margin-top: 8px; text-align: center; font-size: 14px; font-weight: normal; - height: 18px; color: #222; text-overflow: ellipsis; overflow: hidden; @@ -394,11 +393,11 @@ g { .memory-block .memory-editor { position: absolute; - top: 22px; - left: -2px; - right: -2px; - bottom: -2px; - margin: 8px; + top: 24px; + left: 0; + right: 0; + bottom: 0; + margin: 6px; border-radius: 5px; border: 1px solid #AAA; pointer-events: auto; @@ -420,11 +419,11 @@ g { .code-block .code-editor { position: absolute; - top: -2px; - left: -2px; - right: -2px; - bottom: -2px; - margin: 8px; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: 6px; border-radius: 5px; border: 1px solid #AAA; pointer-events: auto; @@ -446,11 +445,11 @@ g { .info-block .info-editor { position: absolute; - top: -2px; - left: -2px; - right: -2px; - bottom: -2px; - margin: 8px; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: 6px; border-radius: 5px; border: 1px solid #AAA; pointer-events: auto; From 813c62c5c3ec87425ee13eae75f2e786ae16bb59 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= Date: Sat, 19 May 2018 11:26:39 +0200 Subject: [PATCH 02/19] Optimize size for Memory blocks --- app/scripts/graphics/joint.shapes.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/app/scripts/graphics/joint.shapes.js b/app/scripts/graphics/joint.shapes.js index a1fe55f65..02c33b936 100644 --- a/app/scripts/graphics/joint.shapes.js +++ b/app/scripts/graphics/joint.shapes.js @@ -313,10 +313,13 @@ joint.shapes.ice.ModelView = joint.dia.ElementView.extend({ var size = self.model.get('size'); var state = self.model.get('state'); var gridstep = 8 * 2; - var minSize = { - width: type === 'ice.Code' ? 96 : 64, - height: type === 'ice.Code' ? 64 : 32 - }; + var minSize = { width: 64, height: 32 }; + if (type === 'ice.Code') { + minSize = { width: 96, height: 64 }; + } + if (type === 'ice.Memory') { + minSize = { width: 96, height: 64 }; + } var clientCoords = snapToGrid({ x: event.clientX, y: event.clientY }); var oldClientCoords = snapToGrid({ x: self._clientX, y: self._clientY }); @@ -1159,11 +1162,12 @@ joint.shapes.ice.MemoryView = joint.shapes.ice.ModelView.extend({ } // Render content + var nameOffset = data.name ? 0 : 24; this.contentSelector.css({ left: bbox.width / 2.0 * (state.zoom - 1), - top: bbox.height / 2.0 * (state.zoom - 1), + top: (bbox.height + nameOffset ) / 2.0 * (state.zoom - 1) + nameOffset, width: bbox.width, - height: bbox.height, + height: bbox.height - nameOffset, transform: 'scale(' + state.zoom + ')' }); From eeba6b9d950662c958432564ffbe3b466abd90c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= Date: Sat, 19 May 2018 11:51:21 +0200 Subject: [PATCH 03/19] Create Memory block with empty name --- app/scripts/services/blocks.js | 20 +++++++------------- 1 file changed, 7 insertions(+), 13 deletions(-) diff --git a/app/scripts/services/blocks.js b/app/scripts/services/blocks.js index 8334919f2..961fdee14 100644 --- a/app/scripts/services/blocks.js +++ b/app/scripts/services/blocks.js @@ -254,7 +254,7 @@ angular.module('icestudio') gettextCatalog.getString('Enter the memory blocks'), gettextCatalog.getString('Local parameter') ], [ - 'M', + '', false ], function(evt, values) { @@ -266,21 +266,15 @@ angular.module('icestudio') // Validate values var paramInfo, paramInfos = []; for (var l in labels) { - if (labels[l]) { - paramInfo = utils.parseParamLabel(labels[l], common.PATTERN_GLOBAL_PARAM_LABEL); - if (paramInfo) { - evt.cancel = false; - paramInfos.push(paramInfo); - } - else { - evt.cancel = true; - resultAlert = alertify.warning(gettextCatalog.getString('Wrong block name {{name}}', { name: labels[l] })); - return; - } + paramInfo = utils.parseParamLabel(labels[l], common.PATTERN_GLOBAL_PARAM_LABEL); + if (paramInfo) { + evt.cancel = false; + paramInfos.push(paramInfo); } else { evt.cancel = true; - //return; + resultAlert = alertify.warning(gettextCatalog.getString('Wrong block name {{name}}', { name: labels[l] })); + return; } } // Create blocks From c18907d6bd54d1df2b2f1b2488336da8b154e721 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= Date: Sat, 19 May 2018 12:14:48 +0200 Subject: [PATCH 04/19] Improve memory block style --- app/scripts/graphics/joint.shapes.js | 6 +++--- app/scripts/services/blocks.js | 2 +- app/styles/design.css | 9 ++++----- 3 files changed, 8 insertions(+), 9 deletions(-) diff --git a/app/scripts/graphics/joint.shapes.js b/app/scripts/graphics/joint.shapes.js index 02c33b936..4c11f3c95 100644 --- a/app/scripts/graphics/joint.shapes.js +++ b/app/scripts/graphics/joint.shapes.js @@ -1162,12 +1162,12 @@ joint.shapes.ice.MemoryView = joint.shapes.ice.ModelView.extend({ } // Render content - var nameOffset = data.name ? 0 : 24; + var topOffset = data.name ? 0 : (data.local ? 9 : 23); this.contentSelector.css({ left: bbox.width / 2.0 * (state.zoom - 1), - top: (bbox.height + nameOffset ) / 2.0 * (state.zoom - 1) + nameOffset, + top: (bbox.height + topOffset ) / 2.0 * (state.zoom - 1) + topOffset, width: bbox.width, - height: bbox.height - nameOffset, + height: bbox.height - topOffset, transform: 'scale(' + state.zoom + ')' }); diff --git a/app/scripts/services/blocks.js b/app/scripts/services/blocks.js index 961fdee14..68116dbae 100644 --- a/app/scripts/services/blocks.js +++ b/app/scripts/services/blocks.js @@ -287,7 +287,7 @@ angular.module('icestudio') local: local }; cells.push(loadBasicMemory(blockInstance)); - blockInstance.position.x += 19 * gridsize; + blockInstance.position.x += 15 * gridsize; } if (callback) { callback(cells); diff --git a/app/styles/design.css b/app/styles/design.css index d9681a160..d84491a2c 100644 --- a/app/styles/design.css +++ b/app/styles/design.css @@ -243,7 +243,7 @@ g { top: 0; right: 5px; font-size: 13px; - color: #555; + color: #444; } .fpga-port label { @@ -375,17 +375,16 @@ g { right: 0; margin: 4px; width: 8px; - fill: #444; + fill: #555; } .memory-block .memory-content label { display: block; - margin-top: 5px; - margin-bottom: 7px; + margin-top: 4px; + padding: 0 6px; text-align: center; font-size: 14px; font-weight: normal; - height: 18px; color: #222; text-overflow: ellipsis; overflow: hidden; From 243251b180891e4243a824460ff1120c585b7c57 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= Date: Sat, 19 May 2018 12:44:05 +0200 Subject: [PATCH 05/19] Add verilog mode for Memory blocks --- app/scripts/graphics/joint.shapes.js | 1 + 1 file changed, 1 insertion(+) diff --git a/app/scripts/graphics/joint.shapes.js b/app/scripts/graphics/joint.shapes.js index 4c11f3c95..a7a164bb5 100644 --- a/app/scripts/graphics/joint.shapes.js +++ b/app/scripts/graphics/joint.shapes.js @@ -927,6 +927,7 @@ joint.shapes.ice.MemoryView = joint.shapes.ice.ModelView.extend({ ' + editorLabel + '.setHighlightGutterLine(false);\ ' + editorLabel + '.setOption("firstLineNumber", 0);\ ' + editorLabel + '.setAutoScrollEditorIntoView(true);\ + ' + editorLabel + '.session.setMode("ace/mode/verilog");\ ' + editorLabel + '.renderer.$cursorLayer.element.style.opacity = 0;\ ' + editorLabel + '.renderer.$gutter.style.background = "#F0F0F0";\ \ From adc6fc22cfa5be547b532e0c5f6ffa08875aebf7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= Date: Sat, 19 May 2018 13:03:52 +0200 Subject: [PATCH 06/19] Simplify dblClick logic. Only select/unselect individual blocks with Shift+Click --- app/scripts/services/graph.js | 66 +++++++++++------------------------ 1 file changed, 21 insertions(+), 45 deletions(-) diff --git a/app/scripts/services/graph.js b/app/scripts/services/graph.js index 1cd1ca32a..c4e4f9c41 100644 --- a/app/scripts/services/graph.js +++ b/app/scripts/services/graph.js @@ -338,34 +338,15 @@ angular.module('icestudio') }); var pointerDown = false; - var dblClickCell = false; paper.on('cell:pointerclick', function(cellView, evt/*, x, y*/) { if (utils.hasShift(evt)) { // If Shift is pressed process the click (no Shift+dblClick allowed) - processCellClick(cellView, evt); - } - else { - // If not, wait 200ms to ensure that it's not a dblclick - var ensureTime = 200; - pointerDown = false; - setTimeout(function() { - if (!dblClickCell && !pointerDown) { - processCellClick(cellView, evt); - } - }, ensureTime); - } - - function processCellClick(cellView, evt) { if (paper.options.enabled) { if (!cellView.model.isLink()) { // Disable current focus document.activeElement.blur(); if (utils.hasLeftButton(evt)) { - if (!utils.hasShift(evt)) { - // Cancel previous selection - disableSelected(); - } // Add cell to selection selection.add(cellView.model); selectionView.createSelectionBox(cellView.model); @@ -390,35 +371,30 @@ angular.module('icestudio') paper.on('cell:pointerdblclick', function(cellView, evt/*, x, y*/) { if (!utils.hasShift(evt)) { // Allow dblClick if Shift is not pressed - dblClickCell = true; - processDblClick(cellView); - // Enable click event - setTimeout(function() { dblClickCell = false; }, 200); - } - }); - - function processDblClick(cellView) { - var type = cellView.model.get('blockType'); - if (type.indexOf('basic.') !== -1) { - if (paper.options.enabled) { - blocks.editBasic(type, cellView, function(cell) { - addCell(cell); - selectionView.cancelSelection(); + var type = cellView.model.get('blockType'); + if (type.indexOf('basic.') !== -1) { + // Edit basic blocks + if (paper.options.enabled) { + blocks.editBasic(type, cellView, function(cell) { + addCell(cell); + selectionView.cancelSelection(); + }); + } + } + else if (common.allDependencies[type]) { + // Navigate inside generic blocks + z.index = 1; + var project = common.allDependencies[type]; + var breadcrumbsLength = self.breadcrumbs.length; + $rootScope.$broadcast('navigateProject', { + update: breadcrumbsLength === 1, + project: project }); + self.breadcrumbs.push({ name: project.package.name || '#', type: type }); + utils.rootScopeSafeApply(); } } - else if (common.allDependencies[type]) { - z.index = 1; - var project = common.allDependencies[type]; - var breadcrumbsLength = self.breadcrumbs.length; - $rootScope.$broadcast('navigateProject', { - update: breadcrumbsLength === 1, - project: project - }); - self.breadcrumbs.push({ name: project.package.name || '#', type: type }); - utils.rootScopeSafeApply(); - } - } + }); paper.on('blank:pointerdown', function(evt, x, y) { // Disable current focus From a0daf4f59faebb12f91db3d5fe2917cac4437454 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= Date: Sat, 19 May 2018 13:20:06 +0200 Subject: [PATCH 07/19] Fix disabling selection when shift is pressed --- app/scripts/services/graph.js | 39 +++++++++++++++++++++-------------- 1 file changed, 23 insertions(+), 16 deletions(-) diff --git a/app/scripts/services/graph.js b/app/scripts/services/graph.js index c4e4f9c41..bc1cdae74 100644 --- a/app/scripts/services/graph.js +++ b/app/scripts/services/graph.js @@ -297,6 +297,25 @@ angular.module('icestudio') // Events + var shiftPressed = false; + + $(document).on('keydown', function(evt) { + if (utils.hasShift(evt)) { + shiftPressed = true; + } + }); + $(document).on('keyup', function(evt) { + if (!utils.hasShift(evt)) { + shiftPressed = false; + } + }); + + $(document).on('disableSelected', function() { + if (!shiftPressed) { + disableSelected(); + } + }); + $('body').mousemove(function(event) { mousePosition = { x: event.pageX, @@ -329,7 +348,7 @@ angular.module('icestudio') } else { // Toggle selected cell - if (utils.hasShift(evt)) { + if (shiftPressed) { var cell = selection.get($(evt.target).data('model')); selection.reset(selection.without(cell)); selectionView.destroySelectionBox(cell); @@ -337,10 +356,8 @@ angular.module('icestudio') } }); - var pointerDown = false; - paper.on('cell:pointerclick', function(cellView, evt/*, x, y*/) { - if (utils.hasShift(evt)) { + if (shiftPressed) { // If Shift is pressed process the click (no Shift+dblClick allowed) if (paper.options.enabled) { if (!cellView.model.isLink()) { @@ -356,20 +373,14 @@ angular.module('icestudio') } }); - paper.on('cell:pointerdown', function(/*cellView, evt, x, y*/) { - if (paper.options.enabled) { - pointerDown = true; - } - }); - paper.on('cell:pointerup', function(/*cellView, evt, x, y*/) { if (paper.options.enabled) { updateWiresOnObstacles(); } }); - paper.on('cell:pointerdblclick', function(cellView, evt/*, x, y*/) { - if (!utils.hasShift(evt)) { + paper.on('cell:pointerdblclick', function(cellView/*, evt, x, y*/) { + if (!shiftPressed) { // Allow dblClick if Shift is not pressed var type = cellView.model.get('blockType'); if (type.indexOf('basic.') !== -1) { @@ -960,10 +971,6 @@ angular.module('icestudio') } }; - $(document).on('disableSelected', function() { - disableSelected(); - }); - function disableSelected() { if (hasSelection()) { selectionView.cancelSelection(); From ed65148d83ea4492e0444bf6f6eff788f39d70fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= Date: Sat, 19 May 2018 14:04:24 +0200 Subject: [PATCH 08/19] Optimize size for Constant blocks --- app/scripts/graphics/joint.shapes.js | 149 ++++++++++++++------------- app/styles/design.css | 28 ++--- 2 files changed, 96 insertions(+), 81 deletions(-) diff --git a/app/scripts/graphics/joint.shapes.js b/app/scripts/graphics/joint.shapes.js index a7a164bb5..dc95a954f 100644 --- a/app/scripts/graphics/joint.shapes.js +++ b/app/scripts/graphics/joint.shapes.js @@ -802,7 +802,7 @@ joint.shapes.ice.InputView = joint.shapes.ice.IOView; joint.shapes.ice.OutputView = joint.shapes.ice.IOView; -// Constant blocks +// Constant block joint.shapes.ice.Constant = joint.shapes.ice.Model.extend({ defaults: joint.util.deepSupplement({ @@ -817,24 +817,40 @@ joint.shapes.ice.Constant = joint.shapes.ice.Model.extend({ joint.shapes.ice.ConstantView = joint.shapes.ice.ModelView.extend({ - template: '\ -
\ - \ - \ - \ -
\ - ', - initialize: function() { - joint.shapes.ice.ModelView.prototype.initialize.apply(this, arguments); + _.bindAll(this, 'updateBox'); + joint.dia.ElementView.prototype.initialize.apply(this, arguments); - this.updating = false; + this.$box = $(joint.util.template( + '\ +
\ +
\ + \ + \ + \ +
\ +
\ + ' + )()); + + this.inputSelector = this.$box.find('.constant-input'); + this.contentSelector = this.$box.find('.constant-content'); + + this.model.on('change', this.updateBox, this); + this.model.on('remove', this.removeBox, this); + + this.listenTo(this.model, 'process:ports', this.update); + joint.dia.ElementView.prototype.initialize.apply(this, arguments); // Prevent paper from handling pointerdown. + this.inputSelector.on('mousedown click', function(event) { event.stopPropagation(); }); + + this.updateBox(); + + this.updating = false; + var self = this; - var selector = this.$box.find('.constant-input'); - selector.on('mousedown click', function(event) { event.stopPropagation(); }); - selector.on('input', function(event) { + this.inputSelector.on('input', function(event) { if (!self.updating) { var target = $(event.target); var data = JSON.parse(JSON.stringify(self.model.get('data'))); @@ -842,7 +858,7 @@ joint.shapes.ice.ConstantView = joint.shapes.ice.ModelView.extend({ self.model.set('data', data); } }); - selector.on('paste', function(event) { + this.inputSelector.on('paste', function(event) { var data = event.originalEvent.clipboardData.getData('text'); if (data.startsWith('{"icestudio":')) { // Prevent paste blocks @@ -854,21 +870,17 @@ joint.shapes.ice.ConstantView = joint.shapes.ice.ModelView.extend({ this.apply(); }, + apply: function() { + this.applyName(); + this.applyLocal(); + this.applyValue(); + }, + applyName: function() { var name = this.model.get('data').name; this.$box.find('label').text(name); }, - applyValue: function() { - this.updating = true; - if (this.model.get('disabled')) { - this.$box.find('.constant-input').css({'pointer-events': 'none'}); - } - var value = this.model.get('data').value; - this.$box.find('.constant-input').val(value); - this.updating = false; - }, - applyLocal: function() { if (this.model.get('data').local) { this.$box.find('svg').removeClass('hidden'); @@ -878,15 +890,47 @@ joint.shapes.ice.ConstantView = joint.shapes.ice.ModelView.extend({ } }, - apply: function() { - this.applyName(); - this.applyLocal(); - this.applyValue(); + applyValue: function() { + this.updating = true; + if (this.model.get('disabled')) { + this.inputSelector.css({'pointer-events': 'none'}); + } + var value = this.model.get('data').value; + this.inputSelector.val(value); + this.updating = false; }, update: function() { this.renderPorts(); joint.dia.ElementView.prototype.update.apply(this, arguments); + }, + + updateBox: function() { + var bbox = this.model.getBBox(); + var data = this.model.get('data'); + var state = this.model.get('state'); + + // Set wire width + var width = WIRE_WIDTH * state.zoom; + this.$('.port-wire').css('stroke-width', width); + + // Render content + var topOffset = data.name ? 0 : (data.local ? 9 : 23); + this.contentSelector.css({ + left: bbox.width / 2.0 * (state.zoom - 1), + top: (bbox.height + topOffset ) / 2.0 * (state.zoom - 1) + topOffset, + width: bbox.width, + height: bbox.height - topOffset, + transform: 'scale(' + state.zoom + ')' + }); + + // Render block + this.$box.css({ + left: bbox.x * state.zoom + state.pan.x, + top: bbox.y * state.zoom + state.pan.y, + width: bbox.width * state.zoom, + height: bbox.height * state.zoom + }); } }); @@ -1026,6 +1070,12 @@ joint.shapes.ice.MemoryView = joint.shapes.ice.ModelView.extend({ this.apply({ ini: true }); }, + apply: function(opt) { + this.applyName(); + this.applyLocal(); + this.applyValue(opt); + }, + applyName: function() { var name = this.model.get('data').name; this.$box.find('label').text(name); @@ -1081,12 +1131,6 @@ joint.shapes.ice.MemoryView = joint.shapes.ice.ModelView.extend({ }, 10, this); }, - apply: function(opt) { - this.applyName(); - this.applyLocal(); - this.applyValue(opt); - }, - update: function() { this.renderPorts(); this.editor.setReadOnly(this.model.get('disabled')); @@ -1094,14 +1138,9 @@ joint.shapes.ice.MemoryView = joint.shapes.ice.ModelView.extend({ }, updateBox: function() { - var i, port; var bbox = this.model.getBBox(); var data = this.model.get('data'); var state = this.model.get('state'); - var rules = this.model.get('rules'); - var leftPorts = this.model.get('leftPorts'); - var rightPorts = this.model.get('rightPorts'); - var modelId = this.model.id; // Set font size if (this.editor) { @@ -1130,37 +1169,9 @@ joint.shapes.ice.MemoryView = joint.shapes.ice.ModelView.extend({ this.editor.resize(); } - // Set ports width + // Set wire width var width = WIRE_WIDTH * state.zoom; this.$('.port-wire').css('stroke-width', width); - // Set buses - for (i in leftPorts) { - port = leftPorts[i]; - if (port.size > 1) { - this.$('#port-wire-' + modelId + '-' + port.id).css('stroke-width', width * 3); - } - } - for (i in rightPorts) { - port = rightPorts[i]; - if (port.size > 1) { - this.$('#port-wire-' + modelId + '-' + port.id).css('stroke-width', width * 3); - } - } - // Render rules - if (data && data.ports && data.ports.in) { - for (i in data.ports.in) { - port = data.ports.in[i]; - var portDefault = this.$('#port-default-' + modelId + '-' + port.name); - if (rules && port.default && port.default.apply) { - portDefault.css('display', 'inline'); - portDefault.find('path').css('stroke-width', width); - portDefault.find('rect').css('stroke-width', state.zoom); - } - else { - portDefault.css('display', 'none'); - } - } - } // Render content var topOffset = data.name ? 0 : (data.local ? 9 : 23); diff --git a/app/styles/design.css b/app/styles/design.css index d84491a2c..a43449581 100644 --- a/app/styles/design.css +++ b/app/styles/design.css @@ -308,27 +308,30 @@ g { .constant-block { position: absolute; - background: #FBF0C9; - border-radius: 5px; - border: 1px solid #777; pointer-events: none; - -webkit-user-select: none; - user-select: none; z-index: 0; transition: opacity 0.2s; } -.constant-block svg { +.constant-block .constant-content { + position: absolute; + background: #FBF0C9; + border-radius: 5px; + border: 1px solid #777; +} + +.constant-block .constant-content svg { position: absolute; right: 0; margin: 4px; width: 8px; - fill: #444; + fill: #555; } -.constant-block label { +.constant-block .constant-content label { display: block; - margin-top: 5px; + margin-top: 4px; + padding: 0 6px; margin-bottom: 7px; text-align: center; font-size: 14px; @@ -339,10 +342,11 @@ g { overflow: hidden; } -.constant-block input { +.constant-block .constant-content input { position: absolute; text-align: center; left: 5px; + bottom: 6px; width: 84px; height: 26px; font-size: 14px; @@ -352,7 +356,7 @@ g { pointer-events: auto; } -.constant-block input:focus { +.constant-block .constant-content input:focus { outline: none; } @@ -392,7 +396,7 @@ g { .memory-block .memory-editor { position: absolute; - top: 24px; + top: 23px; left: 0; right: 0; bottom: 0; From 7e6c0a3eca59f52e7b772f4aedf9874a32c568f8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= Date: Sat, 19 May 2018 14:06:23 +0200 Subject: [PATCH 09/19] Create Constant block with empty name --- app/scripts/services/blocks.js | 20 +++++++------------- 1 file changed, 7 insertions(+), 13 deletions(-) diff --git a/app/scripts/services/blocks.js b/app/scripts/services/blocks.js index 68116dbae..ed92a2ca2 100644 --- a/app/scripts/services/blocks.js +++ b/app/scripts/services/blocks.js @@ -195,7 +195,7 @@ angular.module('icestudio') gettextCatalog.getString('Enter the constant blocks'), gettextCatalog.getString('Local parameter') ], [ - 'C', + '', false ], function(evt, values) { @@ -207,21 +207,15 @@ angular.module('icestudio') // Validate values var paramInfo, paramInfos = []; for (var l in labels) { - if (labels[l]) { - paramInfo = utils.parseParamLabel(labels[l], common.PATTERN_GLOBAL_PARAM_LABEL); - if (paramInfo) { - evt.cancel = false; - paramInfos.push(paramInfo); - } - else { - evt.cancel = true; - resultAlert = alertify.warning(gettextCatalog.getString('Wrong block name {{name}}', { name: labels[l] })); - return; - } + paramInfo = utils.parseParamLabel(labels[l], common.PATTERN_GLOBAL_PARAM_LABEL); + if (paramInfo) { + evt.cancel = false; + paramInfos.push(paramInfo); } else { evt.cancel = true; - //return; + resultAlert = alertify.warning(gettextCatalog.getString('Wrong block name {{name}}', { name: labels[l] })); + return; } } // Create blocks From 46d69203b6a7af187c3de93240b4c24bb59bb26f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= Date: Sat, 19 May 2018 14:13:40 +0200 Subject: [PATCH 10/19] Empty defaults to create a Code block --- app/scripts/services/blocks.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/scripts/services/blocks.js b/app/scripts/services/blocks.js index ed92a2ca2..bc6c261a4 100644 --- a/app/scripts/services/blocks.js +++ b/app/scripts/services/blocks.js @@ -302,8 +302,8 @@ angular.module('icestudio') size: { width: 192, height: 128 } }; var defaultValues = [ - 'a , b', - 'c , d', + '', + '', '' ]; if (block) { From f8f8a438b97c2e28a5c7fffd9c67f04e25eb5bb1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= Date: Sat, 19 May 2018 17:10:45 +0200 Subject: [PATCH 11/19] Improve replacement for Constant/Memory blocks: keep bottom position --- app/scripts/graphics/joint.shapes.js | 2 +- app/scripts/services/blocks.js | 2 +- app/scripts/services/graph.js | 19 ++++++++++++++----- 3 files changed, 16 insertions(+), 7 deletions(-) diff --git a/app/scripts/graphics/joint.shapes.js b/app/scripts/graphics/joint.shapes.js index dc95a954f..0bf3f84c7 100644 --- a/app/scripts/graphics/joint.shapes.js +++ b/app/scripts/graphics/joint.shapes.js @@ -942,7 +942,7 @@ joint.shapes.ice.Memory = joint.shapes.ice.Model.extend({ type: 'ice.Memory', size: { width: 96, - height: 112 + height: 96 } }, joint.shapes.ice.Model.prototype.defaults) }); diff --git a/app/scripts/services/blocks.js b/app/scripts/services/blocks.js index bc6c261a4..64455ee77 100644 --- a/app/scripts/services/blocks.js +++ b/app/scripts/services/blocks.js @@ -242,7 +242,7 @@ angular.module('icestudio') data: {}, type: 'basic.memory', position: { x: 0, y: 0 }, - size: { width: 96, height: 112 } + size: { width: 96, height: 96 } }; utils.inputcheckboxprompt([ gettextCatalog.getString('Enter the memory blocks'), diff --git a/app/scripts/services/graph.js b/app/scripts/services/graph.js index bc1cdae74..4e957df75 100644 --- a/app/scripts/services/graph.js +++ b/app/scripts/services/graph.js @@ -508,14 +508,23 @@ angular.module('icestudio') // Replace wire's target replaceWireConnection(wire, 'target'); }); - // 3. Move the upperModel to be centerd with the lowerModel + // 3. Move the upperModel to be centered with the lowerModel + var upperBlockType = upperBlock.get('type'); var lowerBlockSize = lowerBlock.get('size'); var upperBlockSize = upperBlock.get('size'); var lowerBlockPosition = lowerBlock.get('position'); - upperBlock.set('position', { - x: lowerBlockPosition.x + (lowerBlockSize.width - upperBlockSize.width) / 2, - y: lowerBlockPosition.y + (lowerBlockSize.height - upperBlockSize.height) / 2 - }); + if (upperBlockType === 'ice.Constant' || upperBlockType === 'ice.Memory') { + upperBlock.set('position', { + x: lowerBlockPosition.x + (lowerBlockSize.width - upperBlockSize.width) / 2, + y: lowerBlockPosition.y + lowerBlockSize.height - upperBlockSize.height + }); + } + else { + upperBlock.set('position', { + x: lowerBlockPosition.x + (lowerBlockSize.width - upperBlockSize.width) / 2, + y: lowerBlockPosition.y + (lowerBlockSize.height - upperBlockSize.height) / 2 + }); + } // 4. Remove the lowerModel lowerBlock.remove(); prevLowerBlock = null; From dbd96c9f2482bb8abfe4700734013fe3a5e0db90 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= Date: Sat, 19 May 2018 17:16:38 +0200 Subject: [PATCH 12/19] Improve replacement for Generic/I/O/Code blocks: keep right position --- app/scripts/services/graph.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/scripts/services/graph.js b/app/scripts/services/graph.js index 4e957df75..028ac1708 100644 --- a/app/scripts/services/graph.js +++ b/app/scripts/services/graph.js @@ -521,7 +521,7 @@ angular.module('icestudio') } else { upperBlock.set('position', { - x: lowerBlockPosition.x + (lowerBlockSize.width - upperBlockSize.width) / 2, + x: lowerBlockPosition.x + lowerBlockSize.width - upperBlockSize.width, y: lowerBlockPosition.y + (lowerBlockSize.height - upperBlockSize.height) / 2 }); } From 67e810d92ccb7d0cf3c3cd320d0cacdfd3bec32a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= Date: Sun, 20 May 2018 12:15:50 +0200 Subject: [PATCH 13/19] Improve virtual port block size --- app/scripts/graphics/joint.shapes.js | 66 +++++++++++++--------------- app/styles/design.css | 20 ++++++--- 2 files changed, 43 insertions(+), 43 deletions(-) diff --git a/app/scripts/graphics/joint.shapes.js b/app/scripts/graphics/joint.shapes.js index 0bf3f84c7..4b6aab827 100644 --- a/app/scripts/graphics/joint.shapes.js +++ b/app/scripts/graphics/joint.shapes.js @@ -654,8 +654,10 @@ joint.shapes.ice.IOView = joint.shapes.ice.ModelView.extend({ this.$box = $(joint.util.template( '\
\ -

>

\ - \ +
\ +

>

\ + \ +
\
\
\

>

\ @@ -696,39 +698,6 @@ joint.shapes.ice.IOView = joint.shapes.ice.ModelView.extend({ this.applyClock(); }, - applyShape: function() { - var virtualPortId = '#virtualPort' + this.id; - var fpgaPortId = '#fpgaPort' + this.id; - var data = this.model.get('data'); - var name = data.name + (data.range || ''); - var virtual = data.virtual || this.model.get('disabled'); - - this.$box.find('label').text(name || ''); - - if (virtual) { - // Virtual port (green) - if ($(virtualPortId).hasClass('hidden')) { - // If comes from fpgaPort update the position - this.model.attributes.position.y += 12; - } - this.model.attributes.size.height = 40; - $(fpgaPortId).addClass('hidden'); - $(virtualPortId).removeClass('hidden'); - } - else { - // FPGA I/O port (yellow) - if (data.pins) { - if ($(fpgaPortId).hasClass('hidden')) { - // If comes from virtualPort update the position - this.model.attributes.position.y -= 12; - } - this.model.attributes.size.height = 32 + 32 * data.pins.length; - } - $(virtualPortId).addClass('hidden'); - $(fpgaPortId).removeClass('hidden'); - } - }, - applyChoices: function() { var data = this.model.get('data'); if (data.pins) { @@ -751,6 +720,31 @@ joint.shapes.ice.IOView = joint.shapes.ice.ModelView.extend({ this.updating = false; }, + applyShape: function() { + var virtualPortId = '#virtualPort' + this.id; + var fpgaPortId = '#fpgaPort' + this.id; + var data = this.model.get('data'); + var name = data.name + (data.range || ''); + var virtual = data.virtual || this.model.get('disabled'); + + this.$box.find('label').text(name || ''); + + if (virtual) { + // Virtual port (green) + $(fpgaPortId).addClass('hidden'); + $(virtualPortId).removeClass('hidden'); + this.model.attributes.size.height = 64; + } + else { + // FPGA I/O port (yellow) + $(virtualPortId).addClass('hidden'); + $(fpgaPortId).removeClass('hidden'); + if (data.pins) { + this.model.attributes.size.height = 32 + 32 * data.pins.length; + } + } + }, + applyClock: function() { if (this.model.get('data').clock) { this.$box.find('p').removeClass('hidden'); @@ -780,8 +774,8 @@ joint.shapes.ice.IOView = joint.shapes.ice.ModelView.extend({ apply: function() { this.applyChoices(); this.applyValues(); - this.applyClock(); this.applyShape(); + this.applyClock(); this.render(); }, diff --git a/app/styles/design.css b/app/styles/design.css index a43449581..dd534a8f6 100644 --- a/app/styles/design.css +++ b/app/styles/design.css @@ -197,17 +197,22 @@ g { .virtual-port { position: absolute; - background: #E2FBC9; - border-radius: 5px; - border: 1px solid #777; pointer-events: none; - -webkit-user-select: none; - user-select: none; z-index: 0; transition: opacity 0.2s; } -.virtual-port p { +.virtual-port .virtual-content { + position: absolute; + top: 12px; + width: 100%; + height: 40px; + background: #E2FBC9; + border-radius: 5px; + border: 1px solid #777; +} + +.virtual-port .virtual-content p { position: absolute; top: 0; right: 5px; @@ -215,9 +220,10 @@ g { color: #444; } -.virtual-port label { +.virtual-port .virtual-content label { display: block; margin-top: 8px; + padding: 0 6px; text-align: center; font-size: 14px; font-weight: normal; From 20c3280a6d6bb909d0f551c9b927ce6351888811 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= Date: Sun, 20 May 2018 16:58:05 +0200 Subject: [PATCH 14/19] Refactor I/O blocks rendering --- app/scripts/graphics/joint.shapes.js | 127 ++++++++++++++++++++++----- app/styles/design.css | 35 ++++---- app/styles/main.css | 2 +- 3 files changed, 122 insertions(+), 42 deletions(-) diff --git a/app/scripts/graphics/joint.shapes.js b/app/scripts/graphics/joint.shapes.js index 4b6aab827..e4e68966c 100644 --- a/app/scripts/graphics/joint.shapes.js +++ b/app/scripts/graphics/joint.shapes.js @@ -621,11 +621,10 @@ joint.shapes.ice.Output = joint.shapes.ice.Model.extend({ joint.shapes.ice.IOView = joint.shapes.ice.ModelView.extend({ initialize: function() { - joint.shapes.ice.ModelView.prototype.initialize.apply(this, arguments); + _.bindAll(this, 'updateBox'); + joint.dia.ElementView.prototype.initialize.apply(this, arguments); this.id = sha1(this.model.get('id')).toString().substring(0, 6); - var virtualPortId = 'virtualPort' + this.id; - var fpgaPortId = 'fpgaPort' + this.id; var comboId = 'combo' + this.id; var virtual = this.model.get('data').virtual || this.model.get('disabled'); @@ -653,22 +652,29 @@ joint.shapes.ice.IOView = joint.shapes.ice.ModelView.extend({ this.$box = $(joint.util.template( '\ -
\ -
\ +
\ +
\

>

\ \
\ -
\ -
\ -

>

\ - \ -
' + selectCode + '
\ - \ +
\ +

>

\ + \ +
' + selectCode + '
\ + \ +
\
\ ' )()); - this.updating = false; + this.virtualContentSelector = this.$box.find('.io-virtual-content'); + this.fpgaContentSelector = this.$box.find('.io-fpga-content'); + + this.model.on('change', this.updateBox, this); + this.model.on('remove', this.removeBox, this); + + this.listenTo(this.model, 'process:ports', this.update); + joint.dia.ElementView.prototype.initialize.apply(this, arguments); // Prevent paper from handling pointerdown. var self = this; @@ -689,6 +695,10 @@ joint.shapes.ice.IOView = joint.shapes.ice.ModelView.extend({ } }); + this.updateBox(); + + this.updating = false; + // Apply data if (!this.model.get('disabled')) { this.applyChoices(); @@ -721,24 +731,29 @@ joint.shapes.ice.IOView = joint.shapes.ice.ModelView.extend({ }, applyShape: function() { - var virtualPortId = '#virtualPort' + this.id; - var fpgaPortId = '#fpgaPort' + this.id; var data = this.model.get('data'); var name = data.name + (data.range || ''); var virtual = data.virtual || this.model.get('disabled'); - this.$box.find('label').text(name || ''); + var $label = this.$box.find('label'); + $label.text(name || ''); + if (name) { + $label.removeClass('hidden'); + } + else { + $label.addClass('hidden'); + } if (virtual) { // Virtual port (green) - $(fpgaPortId).addClass('hidden'); - $(virtualPortId).removeClass('hidden'); + this.fpgaContentSelector.addClass('hidden'); + this.virtualContentSelector.removeClass('hidden'); this.model.attributes.size.height = 64; } else { // FPGA I/O port (yellow) - $(virtualPortId).addClass('hidden'); - $(fpgaPortId).removeClass('hidden'); + this.virtualContentSelector.addClass('hidden'); + this.fpgaContentSelector.removeClass('hidden'); if (data.pins) { this.model.attributes.size.height = 32 + 32 * data.pins.length; } @@ -784,12 +799,82 @@ joint.shapes.ice.IOView = joint.shapes.ice.ModelView.extend({ joint.dia.ElementView.prototype.update.apply(this, arguments); }, + updateBox: function() { + var i, port; + var bbox = this.model.getBBox(); + var data = this.model.get('data'); + var state = this.model.get('state'); + var rules = this.model.get('rules'); + var leftPorts = this.model.get('leftPorts'); + var rightPorts = this.model.get('rightPorts'); + var modelId = this.model.id; + + // Render ports width + var width = WIRE_WIDTH * state.zoom; + this.$('.port-wire').css('stroke-width', width); + // Set buses + for (i in leftPorts) { + port = leftPorts[i]; + if (port.size > 1) { + this.$('#port-wire-' + modelId + '-' + port.id).css('stroke-width', width * 3); + } + } + for (i in rightPorts) { + port = rightPorts[i]; + if (port.size > 1) { + this.$('#port-wire-' + modelId + '-' + port.id).css('stroke-width', width * 3); + } + } + // Render rules + if (data && data.ports && data.ports.in) { + for (i in data.ports.in) { + port = data.ports.in[i]; + var portDefault = this.$('#port-default-' + modelId + '-' + port.name); + if (rules && port.default && port.default.apply) { + portDefault.css('display', 'inline'); + portDefault.find('path').css('stroke-width', width); + portDefault.find('rect').css('stroke-width', state.zoom); + } + else { + portDefault.css('display', 'none'); + } + } + } + + // Render io virtual content + var virtualtopOffset = 24; + this.virtualContentSelector.css({ + left: bbox.width / 2.0 * (state.zoom - 1), + top: (bbox.height - virtualtopOffset) / 2.0 * (state.zoom - 1) + virtualtopOffset / 2.0 * state.zoom, + width: bbox.width, + height: bbox.height - virtualtopOffset, + transform: 'scale(' + state.zoom + ')' + }); + + // Render io FPGA content + var fpgaTopOffset = data.name ? 0 : 24; + this.fpgaContentSelector.css({ + left: bbox.width / 2.0 * (state.zoom - 1), + top: (bbox.height - fpgaTopOffset) / 2.0 * (state.zoom - 1) + fpgaTopOffset / 2.0 * state.zoom, + width: bbox.width, + height: bbox.height - fpgaTopOffset, + transform: 'scale(' + state.zoom + ')' + }); + + // Render block + this.$box.css({ + left: bbox.x * state.zoom + state.pan.x, + top: bbox.y * state.zoom + state.pan.y, + width: bbox.width * state.zoom, + height: bbox.height * state.zoom + }); + }, + removeBox: function() { // Close select options on remove this.$box.find('select').select2('close'); this.$box.remove(); } - }); joint.shapes.ice.InputView = joint.shapes.ice.IOView; @@ -1168,7 +1253,7 @@ joint.shapes.ice.MemoryView = joint.shapes.ice.ModelView.extend({ this.$('.port-wire').css('stroke-width', width); // Render content - var topOffset = data.name ? 0 : (data.local ? 9 : 23); + var topOffset = data.name ? 0 : (data.local ? 10 : 24); this.contentSelector.css({ left: bbox.width / 2.0 * (state.zoom - 1), top: (bbox.height + topOffset ) / 2.0 * (state.zoom - 1) + topOffset, diff --git a/app/styles/design.css b/app/styles/design.css index dd534a8f6..86a3b3806 100644 --- a/app/styles/design.css +++ b/app/styles/design.css @@ -195,24 +195,21 @@ g { white-space: nowrap; } -.virtual-port { +.io-block { position: absolute; pointer-events: none; z-index: 0; transition: opacity 0.2s; } -.virtual-port .virtual-content { +.io-block .io-virtual-content { position: absolute; - top: 12px; - width: 100%; - height: 40px; background: #E2FBC9; border-radius: 5px; border: 1px solid #777; } -.virtual-port .virtual-content p { +.io-block .io-virtual-content p { position: absolute; top: 0; right: 5px; @@ -220,7 +217,7 @@ g { color: #444; } -.virtual-port .virtual-content label { +.io-block .io-virtual-content label { display: block; margin-top: 8px; padding: 0 6px; @@ -232,19 +229,15 @@ g { overflow: hidden; } -.fpga-port { +.io-block .io-fpga-content { position: absolute; + width: 100%; background: #FBFBC9; border-radius: 5px; border: 1px solid #777; - pointer-events: none; - -webkit-user-select: none; - user-select: none; - z-index: 0; - transition: opacity 0.2s; } -.fpga-port p { +.io-block .io-fpga-content p { position: absolute; top: 0; right: 5px; @@ -252,10 +245,11 @@ g { color: #444; } -.fpga-port label { +.io-block .io-fpga-content label { display: block; margin-top: 5px; - margin-bottom: 7px; + margin-bottom: 1px; + padding: 0 6px; text-align: center; font-size: 14px; font-weight: normal; @@ -265,16 +259,17 @@ g { overflow: hidden; } -.fpga-port div p { +.io-block .io-fpga-content div p { position: relative; top: 0px; left: -20px; float: left; } -.fpga-port div .select2 { +.io-block .io-fpga-content div .select2 { position: relative; width: 84px; + top: 6px; left: 5px; margin-bottom: 6px; pointer-events: auto; @@ -336,7 +331,7 @@ g { .constant-block .constant-content label { display: block; - margin-top: 4px; + margin-top: 5px; padding: 0 6px; margin-bottom: 7px; text-align: center; @@ -390,7 +385,7 @@ g { .memory-block .memory-content label { display: block; - margin-top: 4px; + margin-top: 5px; padding: 0 6px; text-align: center; font-size: 14px; diff --git a/app/styles/main.css b/app/styles/main.css index 6f050f2dc..61dc7c2e1 100644 --- a/app/styles/main.css +++ b/app/styles/main.css @@ -18,7 +18,7 @@ body { } .hidden { - visibility: hidden; + display: none; } .ice-bar { From fd667834c9cb6ac4bb7a5dd55f763eb34957efd7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= Date: Sun, 20 May 2018 22:01:44 +0200 Subject: [PATCH 15/19] Improve constant block header --- app/scripts/graphics/joint.shapes.js | 19 +++++++++++------ app/styles/design.css | 32 ++++++++++++++++------------ 2 files changed, 31 insertions(+), 20 deletions(-) diff --git a/app/scripts/graphics/joint.shapes.js b/app/scripts/graphics/joint.shapes.js index e4e68966c..62495a758 100644 --- a/app/scripts/graphics/joint.shapes.js +++ b/app/scripts/graphics/joint.shapes.js @@ -852,7 +852,7 @@ joint.shapes.ice.IOView = joint.shapes.ice.ModelView.extend({ }); // Render io FPGA content - var fpgaTopOffset = data.name ? 0 : 24; + var fpgaTopOffset = data.name ? 0 : (data.clock ? 10 : 24); this.fpgaContentSelector.css({ left: bbox.width / 2.0 * (state.zoom - 1), top: (bbox.height - fpgaTopOffset) / 2.0 * (state.zoom - 1) + fpgaTopOffset / 2.0 * state.zoom, @@ -904,8 +904,10 @@ joint.shapes.ice.ConstantView = joint.shapes.ice.ModelView.extend({ '\
\
\ - \ - \ +
\ + \ + \ +
\ \
\
\ @@ -963,8 +965,7 @@ joint.shapes.ice.ConstantView = joint.shapes.ice.ModelView.extend({ applyLocal: function() { if (this.model.get('data').local) { this.$box.find('svg').removeClass('hidden'); - } - else { + } else { this.$box.find('svg').addClass('hidden'); } }, @@ -994,7 +995,7 @@ joint.shapes.ice.ConstantView = joint.shapes.ice.ModelView.extend({ this.$('.port-wire').css('stroke-width', width); // Render content - var topOffset = data.name ? 0 : (data.local ? 9 : 23); + var topOffset = (data.name || data.local) ? 0 : 24; this.contentSelector.css({ left: bbox.width / 2.0 * (state.zoom - 1), top: (bbox.height + topOffset ) / 2.0 * (state.zoom - 1) + topOffset, @@ -1003,6 +1004,12 @@ joint.shapes.ice.ConstantView = joint.shapes.ice.ModelView.extend({ transform: 'scale(' + state.zoom + ')' }); + if (data.name || data.local) { + this.$box.find('.header').removeClass('hidden'); + } else { + this.$box.find('.header').addClass('hidden'); + } + // Render block this.$box.css({ left: bbox.x * state.zoom + state.pan.x, diff --git a/app/styles/design.css b/app/styles/design.css index 86a3b3806..315d1c57b 100644 --- a/app/styles/design.css +++ b/app/styles/design.css @@ -238,9 +238,10 @@ g { } .io-block .io-fpga-content p { - position: absolute; + position: relative; top: 0; - right: 5px; + left: 82px; + margin-bottom: -4px; font-size: 13px; color: #444; } @@ -321,28 +322,31 @@ g { border: 1px solid #777; } -.constant-block .constant-content svg { - position: absolute; - right: 0; - margin: 4px; - width: 8px; - fill: #555; -} - -.constant-block .constant-content label { - display: block; - margin-top: 5px; +.constant-block .constant-content .header { + display: flex; padding: 0 6px; + margin-top: 5px; margin-bottom: 7px; + height: 18px; +} + +.constant-block .constant-content .header label { + flex-grow: 1; + height: 100%; text-align: center; font-size: 14px; font-weight: normal; - height: 18px; color: #222; text-overflow: ellipsis; overflow: hidden; } +.constant-block .constant-content .header svg { + padding-left: 2px; + width: 8px; + fill: #444; +} + .constant-block .constant-content input { position: absolute; text-align: center; From cfe6a44de8233eeae0cd0a97e36f54bd37996e34 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= Date: Mon, 21 May 2018 02:03:17 +0200 Subject: [PATCH 16/19] Update blocks border size: 6px --- app/scripts/graphics/joint.shapes.js | 33 ++++++++++------ app/scripts/services/blocks.js | 2 +- app/styles/design.css | 58 ++++++++++++++++------------ 3 files changed, 55 insertions(+), 38 deletions(-) diff --git a/app/scripts/graphics/joint.shapes.js b/app/scripts/graphics/joint.shapes.js index 62495a758..dfaacd7ec 100644 --- a/app/scripts/graphics/joint.shapes.js +++ b/app/scripts/graphics/joint.shapes.js @@ -312,7 +312,7 @@ joint.shapes.ice.ModelView = joint.dia.ElementView.extend({ var type = self.model.get('type'); var size = self.model.get('size'); var state = self.model.get('state'); - var gridstep = 8 * 2; + var gridstep = 8; var minSize = { width: 64, height: 32 }; if (type === 'ice.Code') { minSize = { width: 96, height: 64 }; @@ -916,6 +916,7 @@ joint.shapes.ice.ConstantView = joint.shapes.ice.ModelView.extend({ this.inputSelector = this.$box.find('.constant-input'); this.contentSelector = this.$box.find('.constant-content'); + this.headerSelector = this.$box.find('.header'); this.model.on('change', this.updateBox, this); this.model.on('remove', this.removeBox, this); @@ -1005,9 +1006,9 @@ joint.shapes.ice.ConstantView = joint.shapes.ice.ModelView.extend({ }); if (data.name || data.local) { - this.$box.find('.header').removeClass('hidden'); + this.headerSelector.removeClass('hidden'); } else { - this.$box.find('.header').addClass('hidden'); + this.headerSelector.addClass('hidden'); } // Render block @@ -1028,7 +1029,7 @@ joint.shapes.ice.Memory = joint.shapes.ice.Model.extend({ type: 'ice.Memory', size: { width: 96, - height: 96 + height: 104 } }, joint.shapes.ice.Model.prototype.defaults) }); @@ -1045,8 +1046,10 @@ joint.shapes.ice.MemoryView = joint.shapes.ice.ModelView.extend({ '\
\
\ - \ - \ +
\ + \ + \ +
\
\
\ \
\ @@ -669,6 +673,7 @@ joint.shapes.ice.IOView = joint.shapes.ice.ModelView.extend({ this.virtualContentSelector = this.$box.find('.io-virtual-content'); this.fpgaContentSelector = this.$box.find('.io-fpga-content'); + this.headerSelector = this.$box.find('.header'); this.model.on('change', this.updateBox, this); this.model.on('remove', this.removeBox, this); @@ -737,12 +742,6 @@ joint.shapes.ice.IOView = joint.shapes.ice.ModelView.extend({ var $label = this.$box.find('label'); $label.text(name || ''); - if (name) { - $label.removeClass('hidden'); - } - else { - $label.addClass('hidden'); - } if (virtual) { // Virtual port (green) @@ -762,10 +761,9 @@ joint.shapes.ice.IOView = joint.shapes.ice.ModelView.extend({ applyClock: function() { if (this.model.get('data').clock) { - this.$box.find('p').removeClass('hidden'); - } - else { - this.$box.find('p').addClass('hidden'); + this.$box.find('svg').removeClass('hidden'); + } else { + this.$box.find('svg').addClass('hidden'); } }, @@ -852,7 +850,7 @@ joint.shapes.ice.IOView = joint.shapes.ice.ModelView.extend({ }); // Render io FPGA content - var fpgaTopOffset = data.name ? 0 : (data.clock ? 10 : 24); + var fpgaTopOffset = (data.name || data.range || data.clock) ? 0 : 24; this.fpgaContentSelector.css({ left: bbox.width / 2.0 * (state.zoom - 1), top: (bbox.height - fpgaTopOffset) / 2.0 * (state.zoom - 1) + fpgaTopOffset / 2.0 * state.zoom, @@ -861,6 +859,12 @@ joint.shapes.ice.IOView = joint.shapes.ice.ModelView.extend({ transform: 'scale(' + state.zoom + ')' }); + if (data.name || data.range || data.clock) { + this.headerSelector.removeClass('hidden'); + } else { + this.headerSelector.addClass('hidden'); + } + // Render block this.$box.css({ left: bbox.x * state.zoom + state.pan.x, diff --git a/app/styles/design.css b/app/styles/design.css index f8fd3fa55..e080c09b1 100644 --- a/app/styles/design.css +++ b/app/styles/design.css @@ -209,26 +209,31 @@ g { border: 1px solid #777; } -.io-block .io-virtual-content p { - position: absolute; - top: 0; - right: 5px; - font-size: 13px; - color: #444; +.io-block .io-virtual-content .header { + display: flex; + padding: 0 6px; + margin-top: 10px; + height: 18px; } -.io-block .io-virtual-content label { - display: block; - margin-top: 8px; - padding: 0 6px; +.io-block .io-virtual-content .header label { + flex-grow: 1; + height: 100%; text-align: center; font-size: 14px; font-weight: normal; + line-height: 18px; color: #222; text-overflow: ellipsis; overflow: hidden; } +.io-block .io-virtual-content .header svg { + padding-left: 2px; + width: 10px; + stroke: #444; +} + .io-block .io-fpga-content { position: absolute; width: 100%; @@ -237,34 +242,29 @@ g { border: 1px solid #777; } -.io-block .io-fpga-content p { - position: relative; - top: 0; - left: 82px; - margin-bottom: -4px; - font-size: 13px; - color: #444; +.io-block .io-fpga-content .header { + display: flex; + padding: 0 6px; + margin-top: 6px; + height: 18px; } -.io-block .io-fpga-content label { - display: block; - margin-top: 5px; - margin-bottom: 1px; - padding: 0 6px; +.io-block .io-fpga-content .header label { + flex-grow: 1; + height: 100%; text-align: center; font-size: 14px; font-weight: normal; - height: 18px; + line-height: 18px; color: #222; text-overflow: ellipsis; overflow: hidden; } -.io-block .io-fpga-content div p { - position: relative; - top: 0px; - left: -20px; - float: left; +.io-block .io-fpga-content .header svg { + padding-left: 2px; + width: 10px; + stroke: #444; } .io-block .io-fpga-content div .select2 { @@ -335,7 +335,7 @@ g { text-align: center; font-size: 14px; font-weight: normal; - line-height: 16px; + line-height: 18px; color: #222; text-overflow: ellipsis; overflow: hidden; @@ -394,7 +394,7 @@ g { text-align: center; font-size: 14px; font-weight: normal; - line-height: 16px; + line-height: 18px; color: #222; text-overflow: ellipsis; overflow: hidden; From 03c1eef7775e33116705cf37acb1aa4ab9380867 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= Date: Mon, 21 May 2018 03:06:57 +0200 Subject: [PATCH 18/19] Create I/O blocks with empty names. Avoid clock with buses --- app/scripts/services/blocks.js | 50 ++++++++++++++++------------------ app/styles/design.css | 2 ++ 2 files changed, 26 insertions(+), 26 deletions(-) diff --git a/app/scripts/services/blocks.js b/app/scripts/services/blocks.js index 9f4bba2be..243923e4e 100644 --- a/app/scripts/services/blocks.js +++ b/app/scripts/services/blocks.js @@ -57,7 +57,7 @@ angular.module('icestudio') gettextCatalog.getString('FPGA pin'), gettextCatalog.getString('Show clock') ], [ - 'in', + '', true, false ], @@ -71,27 +71,26 @@ angular.module('icestudio') // Validate values var portInfo, portInfos = []; for (var l in labels) { - if (labels[l]) { - portInfo = utils.parsePortLabel(labels[l], common.PATTERN_GLOBAL_PORT_LABEL); - if (portInfo) { - evt.cancel = false; - portInfos.push(portInfo); - } - else { - evt.cancel = true; - resultAlert = alertify.warning(gettextCatalog.getString('Wrong block name {{name}}', { name: labels[l] })); - return; - } + portInfo = utils.parsePortLabel(labels[l], common.PATTERN_GLOBAL_PORT_LABEL); + if (portInfo) { + evt.cancel = false; + portInfos.push(portInfo); } else { evt.cancel = true; - //return; + resultAlert = alertify.warning(gettextCatalog.getString('Wrong block name {{name}}', { name: labels[l] })); + return; } } // Create blocks var cells = []; for (var p in portInfos) { portInfo = portInfos[p]; + if (portInfo.rangestr && clock) { + evt.cancel = true; + resultAlert = alertify.warning(gettextCatalog.getString('Clock not allowed for data buses')); + return; + } var pins = getPins(portInfo); blockInstance.data = { name: portInfo.name, @@ -121,7 +120,7 @@ angular.module('icestudio') gettextCatalog.getString('Enter the output blocks'), gettextCatalog.getString('FPGA pin') ], [ - 'out', + '', true ], function(evt, values) { @@ -133,21 +132,15 @@ angular.module('icestudio') // Validate values var portInfo, portInfos = []; for (var l in labels) { - if (labels[l]) { - portInfo = utils.parsePortLabel(labels[l], common.PATTERN_GLOBAL_PORT_LABEL); - if (portInfo) { - evt.cancel = false; - portInfos.push(portInfo); - } - else { - evt.cancel = true; - resultAlert = alertify.warning(gettextCatalog.getString('Wrong block name {{name}}', { name: labels[l] })); - return; - } + portInfo = utils.parsePortLabel(labels[l], common.PATTERN_GLOBAL_PORT_LABEL); + if (portInfo) { + evt.cancel = false; + portInfos.push(portInfo); } else { evt.cancel = true; - //return; + resultAlert = alertify.warning(gettextCatalog.getString('Wrong block name {{name}}', { name: labels[l] })); + return; } } // Create blocks @@ -818,6 +811,11 @@ angular.module('icestudio') var portInfo = utils.parsePortLabel(label, common.PATTERN_GLOBAL_PORT_LABEL); if (portInfo) { evt.cancel = false; + if (portInfo.rangestr && clock) { + evt.cancel = true; + resultAlert = alertify.warning(gettextCatalog.getString('Clock not allowed for data buses')); + return; + } if ((block.data.range || '') !== (portInfo.rangestr || '')) { var pins = getPins(portInfo); diff --git a/app/styles/design.css b/app/styles/design.css index e080c09b1..718920d87 100644 --- a/app/styles/design.css +++ b/app/styles/design.css @@ -230,6 +230,7 @@ g { .io-block .io-virtual-content .header svg { padding-left: 2px; + padding-right: 2px; width: 10px; stroke: #444; } @@ -263,6 +264,7 @@ g { .io-block .io-fpga-content .header svg { padding-left: 2px; + padding-right: 2px; width: 10px; stroke: #444; } From a49a1b0a1502d0a6d3fcd773ba64c480b850393d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= Date: Mon, 21 May 2018 03:10:04 +0200 Subject: [PATCH 19/19] Fix Info block render font size --- app/scripts/graphics/joint.shapes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/scripts/graphics/joint.shapes.js b/app/scripts/graphics/joint.shapes.js index af1d93b0b..039fc0412 100644 --- a/app/scripts/graphics/joint.shapes.js +++ b/app/scripts/graphics/joint.shapes.js @@ -1869,7 +1869,7 @@ joint.shapes.ice.InfoView = joint.shapes.ice.ModelView.extend({ width: bbox.width - 14, height: bbox.height - 14, transform: 'scale(' + state.zoom + ')', - 'font-size': Math.round(aceFontSize * state.zoom) + 'px' + 'font-size': aceFontSize + 'px' }); } else if (this.editor) {