From 08ce8b07c4a6766ad007fcfaf0ae6afe65911faf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= Date: Wed, 2 May 2018 14:47:26 +0200 Subject: [PATCH 1/2] Increase ports interactive zone --- README.md | 2 +- app/scripts/graphics/joint.connectors.js | 4 +-- app/scripts/graphics/joint.routers.js | 16 +++++++++-- app/scripts/graphics/joint.shapes.js | 36 ++++++------------------ 4 files changed, 25 insertions(+), 33 deletions(-) diff --git a/README.md b/README.md index 3c1d7318f..559149dd6 100644 --- a/README.md +++ b/README.md @@ -93,8 +93,8 @@ npm start | French | ![Progress](http://progressed.io/bar/100) | | Chinese | ![Progress](http://progressed.io/bar/100) | | Catalan | ![Progress](http://progressed.io/bar/100) | +| Basque | ![Progress](http://progressed.io/bar/100) | | Galician | ![Progress](http://progressed.io/bar/97) | -| Basque | ![Progress](http://progressed.io/bar/95) | **Contribute!** diff --git a/app/scripts/graphics/joint.connectors.js b/app/scripts/graphics/joint.connectors.js index 5bf4871c8..15a3e6631 100644 --- a/app/scripts/graphics/joint.connectors.js +++ b/app/scripts/graphics/joint.connectors.js @@ -27,13 +27,13 @@ joint.connectors.ice = function(sourcePoint, targetPoint, vertices) { var dVertices = []; _.each(vertices, function(vertex) { dVertices.push(vertex.x, vertex.y); }); - full.push(sourcePoint.x + sx, sourcePoint.y + sy); + full.push(sourcePoint.x, sourcePoint.y); wrap.push(sourcePoint.x - sx, sourcePoint.y - sy); full = full.concat(dVertices); wrap = wrap.concat(dVertices); - full.push(targetPoint.x + tx, targetPoint.y + ty); + full.push(targetPoint.x, targetPoint.y); wrap.push(targetPoint.x - tx, targetPoint.y - ty); return { diff --git a/app/scripts/graphics/joint.routers.js b/app/scripts/graphics/joint.routers.js index 93f40599b..c3e8f67fa 100644 --- a/app/scripts/graphics/joint.routers.js +++ b/app/scripts/graphics/joint.routers.js @@ -455,9 +455,21 @@ joint.routers.ice = (function(g, _, joint) { // enable/disable linkView perpendicular option this.options.perpendicular = !!opt.perpendicular; + // Force source/target BBoxes to be points + + this.sourceBBox.x += this.sourceBBox.width / 2; + this.sourceBBox.y += this.sourceBBox.height / 2; + this.sourceBBox.width = 0; + this.sourceBBox.height = 0; + + this.targetBBox.x += this.targetBBox.width / 2; + this.targetBBox.y += this.targetBBox.height / 2; + this.targetBBox.width = 0; + this.targetBBox.height = 0; + // expand boxes by specific padding - var sourceBBox = g.rect(this.sourceBBox).moveAndExpand(opt.paddingBox); - var targetBBox = g.rect(this.targetBBox).moveAndExpand(opt.paddingBox); + var sourceBBox = g.rect(this.sourceBBox); + var targetBBox = g.rect(this.targetBBox); // pathfinding var map = (new ObstacleMap(opt)).build(this.paper.model, this.model); diff --git a/app/scripts/graphics/joint.shapes.js b/app/scripts/graphics/joint.shapes.js index c1a79c989..6669dbca5 100644 --- a/app/scripts/graphics/joint.shapes.js +++ b/app/scripts/graphics/joint.shapes.js @@ -49,7 +49,7 @@ joint.shapes.ice.Model = joint.shapes.basic.Generic.extend({ stroke: 'none' }, '.port-body': { - r: 8, + r: 16, opacity: 0 }, '.leftPorts .port-body': { @@ -1487,14 +1487,14 @@ joint.shapes.ice.Wire = joint.dia.Link.extend({ arrowheadMarkup: [ '', - '', + '', '' ].join(''), toolMarkup: [ '', '', - '', + '', '', 'Remove link.', '', @@ -1536,7 +1536,7 @@ joint.shapes.ice.Wire = joint.dia.Link.extend({ }, router: { name: 'ice' }, - connector: { name: 'ice'}, + connector: { name: 'ice' } }, joint.dia.Link.prototype.defaults) @@ -1682,30 +1682,10 @@ joint.shapes.ice.WireView = joint.dia.LinkView.extend({ updateConnection: function(opt) { opt = opt || {}; - var model = this.model; - var route; - - if (opt.translateBy && model.isRelationshipEmbeddedIn(opt.translateBy)) { - // The link is being translated by an ancestor that will - // shift source point, target point and all vertices - // by an equal distance. - var tx = opt.tx || 0; - var ty = opt.ty || 0; - - route = this.route = _.map(this.route, function(point) { - // translate point by point by delta translation - return g.point(point).offset(tx, ty); - }); - - // translate source and target connection and marker points. - this._translateConnectionPoints(tx, ty); - - } else { - // Necessary path finding - route = this.route = this.findRoute(model.get('vertices') || [], opt); - // finds all the connection points taking new vertices into account - this._findConnectionPoints(route); - } + // Necessary path finding + var route = this.route = this.findRoute(this.model.get('vertices') || [], opt); + // finds all the connection points taking new vertices into account + this._findConnectionPoints(route); var pathData = this.getPathData(route); From 4d585345369fe677514e8876f506eb7b307e2e3a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= Date: Wed, 2 May 2018 15:32:35 +0200 Subject: [PATCH 2/2] Improve wires style --- app/scripts/graphics/joint.shapes.js | 8 ++-- app/styles/design.css | 55 ++++++++++++---------------- 2 files changed, 28 insertions(+), 35 deletions(-) diff --git a/app/scripts/graphics/joint.shapes.js b/app/scripts/graphics/joint.shapes.js index 6669dbca5..d6f78b84f 100644 --- a/app/scripts/graphics/joint.shapes.js +++ b/app/scripts/graphics/joint.shapes.js @@ -1496,7 +1496,7 @@ joint.shapes.ice.Wire = joint.dia.Link.extend({ '', '', '', - 'Remove link.', + 'Remove link', '', '' ].join(''), @@ -1506,7 +1506,7 @@ joint.shapes.ice.Wire = joint.dia.Link.extend({ '', '', '', - 'Remove vertex.', + 'Remove vertex', '', '' ].join(''), @@ -1545,9 +1545,9 @@ joint.shapes.ice.Wire = joint.dia.Link.extend({ joint.shapes.ice.WireView = joint.dia.LinkView.extend({ options: { - shortLinkLength: 100, + shortLinkLength: 64, longLinkLength: 160, - linkToolsOffset: 40, + linkToolsOffset: 40 }, initialize: function() { diff --git a/app/styles/design.css b/app/styles/design.css index 6badec6d0..ad00a6834 100644 --- a/app/styles/design.css +++ b/app/styles/design.css @@ -492,50 +492,43 @@ g { /* Wires makers */ -.joint-link.joint-theme-default .connection-wrap { - stroke: #000000; - stroke-width: 15; - stroke-linecap: butt; - stroke-linejoin: butt; - opacity: 0; +.link.joint-theme-default .connection-wrap { + stroke: #777; + stroke-width: 14; cursor: pointer; + opacity: 0; } -.joint-link.joint-theme-default .connection-wrap:hover { - opacity: .4; - stroke-opacity: .4; + +.link.joint-theme-default .link-tools .tool-remove circle { + fill: #ff333a; } -.joint-link.joint-theme-default .connection { - stroke-linejoin: butt; +.link.joint-theme-default .link-tools .tool-remove path { + fill: #FFF; } -.joint-link.joint-theme-default .link-tools .tool-remove circle { - fill: #EB2222; + +.link.joint-theme-default .marker-arrowhead { + fill: #AAA; } -.joint-link.joint-theme-default .link-tools .tool-remove path { - fill: #FFFFFF; +.link.joint-theme-default .marker-arrowhead:hover { + fill: #888; } -/* element inside .marker-vertex-group element */ -.joint-link.joint-theme-default .marker-vertex { - fill: #64b0ce; +.link.joint-theme-default .marker-vertex { + fill: #AAA; } -.joint-link.joint-theme-default .marker-vertex:hover { - fill: #317d9b; - stroke: none; +.link.joint-theme-default .marker-vertex:hover { + fill: #888; } -.joint-link.joint-theme-default .marker-arrowhead { - fill: #64b0ce; +.link.joint-theme-default .marker-vertex-remove { + fill: #FFF; + transition: opacity 0.4s; } -.joint-link.joint-theme-default .marker-arrowhead:hover { - fill: #317d9b; - stroke: none; +.link.joint-theme-default .marker-vertex-remove-area { + fill: #333; + transition: opacity 0.4s; } -/* element used to remove a vertex */ -.joint-link.joint-theme-default .marker-vertex-remove { - fill: #FFFFFF; - -} /* Resizer */ .resizer {