Skip to content

GitLab

D
diversity-tree-editor
Commit 3690ec57 authored by Matija Obreza's avatar Matija Obreza
Browse files
Options

Using flex layout 

- `npm run serve` starts webpack-dev-server on 3100
parent 9177b6fb
Expand all Show whitespace changes
Inline Side-by-side
Showing with 4050 additions and 364 deletions
config/webpack.config.js
View file @ 3690ec57
......@@ -3,23 +3,39 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
// devserver configuration
const HOST = process.env.HOST || 'localhost';
const PORT = process.env.PORT || 3100;
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.join(process.cwd(), 'target/app')
},
devServer: {
historyApiFallback: true,
hot: false,
inline: true,
contentBase: false,
compress: true,
port: PORT,
host: HOST,
overlay: {
warnings: true,
errors: true,
},
clientLogLevel: "warning",
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract('css-loader')
},
{
}, {
test: /\.json$/,
loader: 'json-loader'
},
{
}, {
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
......@@ -28,19 +44,14 @@ module.exports = {
presets: ['babel-preset-env']
}
}
},
}
]
},
devtool: 'inline-source-map',
plugins: [
new ExtractTextPlugin('styles.css'),
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({ template: './index.html' }),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
d3: "d3",
_: "underscore",
})
new HtmlWebpackPlugin({template: './index.html'}),
new webpack.ProvidePlugin({$: "jquery", jQuery: "jquery", d3: "d3", _: "underscore"})
]
};
index.html
View file @ 3690ec57
<!DOCTYPE html>
<head>
<meta charset="utf-8">
</head>
<body>
<ul class="small-block-grid-2 medium-block-grid-4 large-block-grid-9">
<body>
<div class="flexcontainer">
<div class="menubar">
<ul class="small-block-grid-6 medium-block-grid-4 large-block-grid-2">
<li>
<button id="downloadJsonBtn" type="button">Download JSON</button>
<a id="downloadAnchorElem" style="display:none"></a>
......@@ -13,9 +16,14 @@
<button id="importJsonBtn">Import JSON</button>
<input type="file" id="selectFiles" value="Import" accept=".json" />
</li>
</ul>
</ul>
</div>
<div class="maincontent">
<div id="tree-container"></div>
</div>
</div>
<div id="RenameNodeModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<div id="RenameNodeModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h2 id="modalTitle">Rename Node</h2>
<form id="RenameNodeForm">
<div class="row">
......@@ -36,10 +44,9 @@
</div>
</form>
<a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>
</div>
<div id="CreateNodeModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true"
role="dialog">
<div id="CreateNodeModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h2 id="modalTitle">Create Node</h2>
<form id="CreateNodeForm">
<div class="row">
......@@ -60,8 +67,8 @@
</div>
</form>
<a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>
<div id="tree-container"></div>
</div>
</body>
</html>
package-lock.json
View file @ 3690ec57
This diff is collapsed.
package.json
View file @ 3690ec57
......@@ -4,6 +4,7 @@
"description": "d3js Tree Editor",
"main": "index.js",
"scripts": {
"serve": "webpack-dev-server --config config/webpack.config.js",
"build": "webpack --config config/webpack.config.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
......@@ -15,18 +16,11 @@
"author": "",
"license": "MIT",
"dependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"d3": "^3.5.17",
"exports-loader": "^0.7.0",
"foundation": "^4.2.1-1",
"foundation-sites": "^5.5.2",
"imports-loader": "^0.7.1",
"foundation": "^4.2.1",
"foundation-sites": "^5.5.3",
"jquery": "^2.1.3",
"style-loader": "^0.20.2",
"underscore": "^1.8.3",
"webpack": "^3.11.0"
"underscore": "^1.8.3"
},
"babel": {
"presets": [
......@@ -34,9 +28,17 @@
]
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"imports-loader": "^0.7.1",
"style-loader": "^0.20.2",
"exports-loader": "^0.7.0",
"css-loader": "^0.28.9",
"extract-text-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^2.30.1",
"json-loader": "^0.5.7",
"extract-text-webpack-plugin": "^3.0.0"
"webpack": "^3.11.0",
"webpack-dev-server": "^2.11.1"
}
}
src/d3-context-menu.js
View file @ 3690ec57
'use strict';
export default function contextMenu(menu, openCallback) {
// create the div element that will hold the context menu
......
src/dndTree.js
View file @ 3690ec57
'use strict';
import contextMenu from './d3-context-menu';
d3.contextMenu = contextMenu;
......@@ -61,7 +63,9 @@ export function rename_node() {
let outer_update = null;
export function draw_tree(treeData) {
export function draw_tree(container, treeData) {
// clear the container
$(container).empty();
// Calculate total nodes, max label length
var totalNodes = 0;
......@@ -78,8 +82,8 @@ export function draw_tree(treeData) {
var root;
// size of the diagram
var viewerWidth = $(document).width();
var viewerHeight = $(document).height();
var viewerWidth = $(container).width();
var viewerHeight = $(container).height();
var tree = d3.layout.tree()
.size([viewerHeight, viewerWidth]);
......@@ -261,17 +265,16 @@ export function draw_tree(treeData) {
// define the baseSvg, attaching a class for styling and the zoomListener
var baseSvg = d3.select("#tree-container").append("svg")
.attr("width", viewerWidth)
.attr("height", viewerHeight);
.attr("width", '100%')
.attr("height", '100%');
baseSvg.append("rect")
.attr("width", "100%")
.attr("height", "100%")
.attr("fill", "white")
// baseSvg.append("rect")
// .attr("width", "100%")
// .attr("height", "100%");
// .attr("fill", "white");
baseSvg.call(zoomListener);
// Define the drag listeners for drag/drop behaviour of nodes.
let dragListener = d3.behavior.drag()
.on("dragstart", function(d) {
......@@ -691,4 +694,3 @@ export function draw_tree(treeData) {
centerNode(root);
tree_root = root;
}
src/index.js
View file @ 3690ec57
'use strict';
// css
import '../styles/app.css';
import '../styles/d3-context-menu.css';
......@@ -39,9 +41,6 @@ $('document').ready(function() {
});
$('#importJsonBtn').on('click', () => {
$('#tree-container').remove();
$('body').append($("<div id='tree-container' />"));
let files = document.getElementById('selectFiles').files;
if (files.length <= 0) {
return false;
......@@ -55,7 +54,7 @@ $('document').ready(function() {
fileReader.onload = (e) => {
let result = JSON.parse(e.target.result);
draw_tree(result);
draw_tree($('#tree-container'), result);
};
fileReader.readAsText(files.item(0));
});
......@@ -71,6 +70,5 @@ $('document').ready(function() {
}
]
};
draw_tree(TREE);
draw_tree($('#tree-container'), TREE);
});
styles/app.css
View file @ 3690ec57
......@@ -2,8 +2,8 @@
cursor: pointer;
}
.overlay{
background-color:#EEE;
.overlay {
background-color: #EEE;
}
.node circle {
......@@ -13,8 +13,8 @@
}
.node text {
font-size:10px;
font-family:sans-serif;
font-size: 10px;
font-family: sans-serif;
}
.link {
......@@ -29,11 +29,11 @@
stroke-width: 3px;
}
.ghostCircle.show{
display:block;
.ghostCircle.show {
display: block;
}
.ghostCircle, .activeDrag .ghostCircle{
.ghostCircle, .activeDrag .ghostCircle {
display: none;
}
......@@ -45,3 +45,28 @@
width: auto;
}
.flexcontainer {
display: flex;
flex-direction: column;
align-content: stretch;
flex-grow: 2;
height: 100%;
}
.menubar {
display: flex;
flex: 130px;
}
.maincontent {
display: flex;
flex: 100%;
}
#tree-container {
display: flex;
flex: 100%;
border: solid 1px #79a74a;
padding: .5rem;
background-color: #fafef6;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment