mapexplorer-core
Advanced tools
Comparing version 0.2.0 to 0.3.0
@@ -94,6 +94,2 @@ (function (global, factory) { | ||
var polygon = { width: 78, height: 91 }; | ||
var box = { width: polygon.width, height: 25 }; | ||
var arrowLength = polygon.width; | ||
var ChainTree = function () { | ||
@@ -129,2 +125,3 @@ function ChainTree(element) { | ||
var self = this; | ||
var polygon = options.polygon; | ||
var nodes = root ? root.descendants() : []; | ||
@@ -135,3 +132,3 @@ var links = root ? root.links() : []; | ||
}) || 0; | ||
var computedWidth = Math.max(maxDepth * (polygon.width + arrowLength), 500); | ||
var computedWidth = Math.max(maxDepth * (polygon.width + options.arrowLength), 500); | ||
var treeTransition = d3Transition.transition().duration(options.duration).ease(d3Ease.easeLinear); | ||
@@ -145,3 +142,3 @@ | ||
this.tree.size([computedHeight, computedWidth]); | ||
this.svg.attr('width', options.zoomable ? 1200 : computedWidth + margin.right + margin.left + arrowLength).attr('height', (options.zoomable ? height : computedHeight) + margin.top + margin.bottom); | ||
this.svg.attr('width', options.zoomable ? 1200 : computedWidth + margin.right + margin.left + options.arrowLength).attr('height', (options.zoomable ? height : computedHeight) + margin.top + margin.bottom); | ||
@@ -154,3 +151,3 @@ // Compute the new tree layout. | ||
root.each(function (node) { | ||
node.y += arrowLength; | ||
node.y += options.arrowLength; | ||
}); | ||
@@ -173,3 +170,3 @@ } | ||
link.enter().insert('text').attr('dx', polygon.width + 20).attr('dy', '-0.3em').append('textPath').attr('class', 'textpath').attr('xlink:href', function (d) { | ||
link.enter().insert('text').attr('dx', options.polygon.width + 20).attr('dy', '-0.3em').append('textPath').attr('class', 'textpath').attr('xlink:href', function (d) { | ||
return '#link-' + d.target.id; | ||
@@ -215,3 +212,3 @@ }).text(options.getLinkText); | ||
nodeEnter.append('rect').attr('y', -(box.height / 2)).attr('width', polygon.width).attr('height', box.height).style('fill-opacity', 1e-6); | ||
nodeEnter.append('rect').attr('y', -(options.box.height / 2)).attr('width', polygon.width).attr('height', options.box.height).style('fill-opacity', 1e-6); | ||
@@ -295,2 +292,5 @@ nodeEnter.append('text').attr('dx', 12).attr('dy', 4).attr('text-anchor', 'begin').text(options.getSegmentText).style('fill-opacity', 1e-6); | ||
verticalSpacing: 1.2, | ||
polygon: { width: 78, height: 91 }, | ||
box: { width: undefined.polygon.width, height: 25 }, | ||
arrowLength: undefined.polygon.width, | ||
getSegmentText: function getSegmentText(node) { | ||
@@ -297,0 +297,0 @@ return compactHash(node.data.meta.linkHash); |
{ | ||
"name": "mapexplorer-core", | ||
"version": "0.2.0", | ||
"version": "0.3.0", | ||
"description": "Core library for building Map Explorer components", | ||
@@ -5,0 +5,0 @@ "main": "lib/mapexplorer-core.js", |
@@ -77,2 +77,33 @@ # MapExplorer Core | ||
##### polygon | ||
``` | ||
Default: | ||
{ | ||
width: 78, | ||
height: 91 | ||
} | ||
``` | ||
Object with width and height properties that gives the size (in pixels) of the polygon representing | ||
a segment. | ||
##### arrowLength | ||
``` | ||
Default: this.polygon.width | ||
``` | ||
Length (in pixels) of the transition arrow. | ||
#### box | ||
``` | ||
Default: | ||
{ | ||
width: this.polygon.width, | ||
height: 25 | ||
} | ||
``` | ||
Object with width and height properties that gives the size (in pixels) of the box containing the | ||
segment text. | ||
##### getSegmentText(node) | ||
@@ -85,2 +116,4 @@ ``` | ||
##### getLinkText(node) | ||
@@ -87,0 +120,0 @@ ``` |
@@ -23,3 +23,4 @@ var babel = require('rollup-plugin-babel'); | ||
commonjs({ | ||
exclude: ['node_modules/rollup-plugin-node-globals/**'] | ||
exclude: ['node_modules/rollup-plugin-node-globals/**', | ||
'node_modules/process-es6/**', 'node_modules/buffer-es6/**'] | ||
}), | ||
@@ -26,0 +27,0 @@ globals() |
@@ -13,6 +13,2 @@ import { makeLink, finalLink, translate } from './treeUtils'; | ||
const polygon = { width: 78, height: 91 }; | ||
const box = { width: polygon.width, height: 25 }; | ||
const arrowLength = polygon.width; | ||
export default class ChainTree { | ||
@@ -39,6 +35,7 @@ constructor(element) { | ||
const self = this; | ||
const polygon = options.polygon; | ||
const nodes = root ? root.descendants() : []; | ||
const links = root ? root.links() : []; | ||
const maxDepth = max(nodes, x => x.depth) || 0; | ||
const computedWidth = Math.max(maxDepth * (polygon.width + arrowLength), 500); | ||
const computedWidth = Math.max(maxDepth * (polygon.width + options.arrowLength), 500); | ||
const treeTransition = transition() | ||
@@ -57,3 +54,3 @@ .duration(options.duration) | ||
.attr('width', | ||
options.zoomable ? 1200 : computedWidth + margin.right + margin.left + arrowLength) | ||
options.zoomable ? 1200 : computedWidth + margin.right + margin.left + options.arrowLength) | ||
.attr('height', | ||
@@ -67,3 +64,3 @@ (options.zoomable ? height : computedHeight) + margin.top + margin.bottom); | ||
this.tree(root); | ||
root.each(node => { node.y += arrowLength; }); | ||
root.each(node => { node.y += options.arrowLength; }); | ||
} | ||
@@ -83,3 +80,3 @@ | ||
link.enter().insert('text') | ||
.attr('dx', polygon.width + 20) | ||
.attr('dx', options.polygon.width + 20) | ||
.attr('dy', '-0.3em') | ||
@@ -131,5 +128,5 @@ .append('textPath') | ||
nodeEnter.append('rect') | ||
.attr('y', -(box.height / 2)) | ||
.attr('y', -(options.box.height / 2)) | ||
.attr('width', polygon.width) | ||
.attr('height', box.height) | ||
.attr('height', options.box.height) | ||
.style('fill-opacity', 1e-6); | ||
@@ -136,0 +133,0 @@ |
@@ -13,2 +13,5 @@ import ChainTree from './ChainTree'; | ||
verticalSpacing: 1.2, | ||
polygon: { width: 78, height: 91 }, | ||
box: { width: this.polygon.width, height: 25 }, | ||
arrowLength: this.polygon.width, | ||
getSegmentText(node) { | ||
@@ -15,0 +18,0 @@ return compactHash(node.data.meta.linkHash); |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
166452
54
2445
236