Commit 3690ec57 authored by Matija Obreza's avatar Matija Obreza

Using flex layout

- `npm run serve` starts webpack-dev-server on 3100
parent 9177b6fb
...@@ -3,23 +3,39 @@ const HtmlWebpackPlugin = require('html-webpack-plugin'); ...@@ -3,23 +3,39 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin"); const ExtractTextPlugin = require("extract-text-webpack-plugin");
// devserver configuration
const HOST = process.env.HOST || 'localhost';
const PORT = process.env.PORT || 3100;
module.exports = { module.exports = {
entry: './src/index.js', entry: './src/index.js',
output: { output: {
filename: 'bundle.js', filename: 'bundle.js',
path: path.join(process.cwd(), 'target/app') 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: { module: {
rules: [ rules: [
{ {
test: /\.css$/, test: /\.css$/,
use: ExtractTextPlugin.extract('css-loader') use: ExtractTextPlugin.extract('css-loader')
}, }, {
{
test: /\.json$/, test: /\.json$/,
loader: 'json-loader' loader: 'json-loader'
}, }, {
{
test: /\.js$/, test: /\.js$/,
exclude: /(node_modules|bower_components)/, exclude: /(node_modules|bower_components)/,
use: { use: {
...@@ -28,19 +44,14 @@ module.exports = { ...@@ -28,19 +44,14 @@ module.exports = {
presets: ['babel-preset-env'] presets: ['babel-preset-env']
} }
} }
}, }
] ]
}, },
devtool: 'inline-source-map', devtool: 'inline-source-map',
plugins: [ plugins: [
new ExtractTextPlugin('styles.css'), new ExtractTextPlugin('styles.css'),
new webpack.optimize.UglifyJsPlugin(), new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({ template: './index.html' }), new HtmlWebpackPlugin({template: './index.html'}),
new webpack.ProvidePlugin({ new webpack.ProvidePlugin({$: "jquery", jQuery: "jquery", d3: "d3", _: "underscore"})
$: "jquery",
jQuery: "jquery",
d3: "d3",
_: "underscore",
})
] ]
}; };
<!DOCTYPE html> <!DOCTYPE html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
</head> </head>
<body>
<ul class="small-block-grid-2 medium-block-grid-4 large-block-grid-9"> <body>
<li> <div class="flexcontainer">
<button id="downloadJsonBtn" type="button">Download JSON</button> <div class="menubar">
<a id="downloadAnchorElem" style="display:none"></a> <ul class="small-block-grid-6 medium-block-grid-4 large-block-grid-2">
</li> <li>
<li> <button id="downloadJsonBtn" type="button">Download JSON</button>
<button id="importJsonBtn">Import JSON</button> <a id="downloadAnchorElem" style="display:none"></a>
<input type="file" id="selectFiles" value="Import" accept=".json" /> </li>
</li> <li>
</ul> <button id="importJsonBtn">Import JSON</button>
<input type="file" id="selectFiles" value="Import" accept=".json" />
</li>
</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> <h2 id="modalTitle">Rename Node</h2>
<form id="RenameNodeForm"> <form id="RenameNodeForm">
<div class="row"> <div class="row">
<div class="large-12 columns"> <div class="large-12 columns">
<label>Node name <label>Node name
<input type="text" class="inputName" id='RenameNodeName' placeholder="node name"/> <input type="text" class="inputName" id='RenameNodeName' placeholder="node name"/>
</label> </label>
</div>
</div> </div>
<div class="row"> </div>
<div class="large-8 columns"> <div class="row">
&nbsp; <div class="large-8 columns">
</div> &nbsp;
<div class="large-4 columns">
<a href="#" class="button info closeModal">Cancel</a>
<a href="#" class="button success">Rename</a>
</div>
</div> </div>
<div class="large-4 columns">
<a href="#" class="button info closeModal">Cancel</a>
<a href="#" class="button success">Rename</a>
</div>
</div>
</form> </form>
<a class="close-reveal-modal" aria-label="Close">&#215;</a> <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" <div id="CreateNodeModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
role="dialog">
<h2 id="modalTitle">Create Node</h2> <h2 id="modalTitle">Create Node</h2>
<form id="CreateNodeForm"> <form id="CreateNodeForm">
<div class="row"> <div class="row">
<div class="large-12 columns"> <div class="large-12 columns">
<label>Node name <label>Node name
<input type="text" class="inputName" id='CreateNodeName' placeholder="node name"/> <input type="text" class="inputName" id='CreateNodeName' placeholder="node name"/>
</label> </label>
</div>
</div> </div>
<div class="row"> </div>
<div class="large-8 columns"> <div class="row">
&nbsp; <div class="large-8 columns">
</div> &nbsp;
<div class="large-4 columns"> </div>
<a href="#" class="button info closeModal">Cancel</a> <div class="large-4 columns">
<a href="#" class="button success">Create</a> <a href="#" class="button info closeModal">Cancel</a>
</div> <a href="#" class="button success">Create</a>
</div> </div>
</div>
</form> </form>
<a class="close-reveal-modal" aria-label="Close">&#215;</a> <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div> </div>
<div id="tree-container"></div>
</body> </body>
</html> </html>
This diff is collapsed.
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
"description": "d3js Tree Editor", "description": "d3js Tree Editor",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"serve": "webpack-dev-server --config config/webpack.config.js",
"build": "webpack --config config/webpack.config.js", "build": "webpack --config config/webpack.config.js",
"test": "echo \"Error: no test specified\" && exit 1" "test": "echo \"Error: no test specified\" && exit 1"
}, },
...@@ -15,18 +16,11 @@ ...@@ -15,18 +16,11 @@
"author": "", "author": "",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"d3": "^3.5.17", "d3": "^3.5.17",
"exports-loader": "^0.7.0", "foundation": "^4.2.1",
"foundation": "^4.2.1-1", "foundation-sites": "^5.5.3",
"foundation-sites": "^5.5.2",
"imports-loader": "^0.7.1",
"jquery": "^2.1.3", "jquery": "^2.1.3",
"style-loader": "^0.20.2", "underscore": "^1.8.3"
"underscore": "^1.8.3",
"webpack": "^3.11.0"
}, },
"babel": { "babel": {
"presets": [ "presets": [
...@@ -34,9 +28,17 @@ ...@@ -34,9 +28,17 @@
] ]
}, },
"devDependencies": { "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", "css-loader": "^0.28.9",
"extract-text-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^2.30.1", "html-webpack-plugin": "^2.30.1",
"json-loader": "^0.5.7", "json-loader": "^0.5.7",
"extract-text-webpack-plugin": "^3.0.0" "webpack": "^3.11.0",
"webpack-dev-server": "^2.11.1"
} }
} }
'use strict';
export default function contextMenu(menu, openCallback) { export default function contextMenu(menu, openCallback) {
// create the div element that will hold the context menu // create the div element that will hold the context menu
......
'use strict';
import contextMenu from './d3-context-menu'; import contextMenu from './d3-context-menu';
d3.contextMenu = contextMenu; d3.contextMenu = contextMenu;
...@@ -61,7 +63,9 @@ export function rename_node() { ...@@ -61,7 +63,9 @@ export function rename_node() {
let outer_update = null; 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 // Calculate total nodes, max label length
var totalNodes = 0; var totalNodes = 0;
...@@ -78,8 +82,8 @@ export function draw_tree(treeData) { ...@@ -78,8 +82,8 @@ export function draw_tree(treeData) {
var root; var root;
// size of the diagram // size of the diagram
var viewerWidth = $(document).width(); var viewerWidth = $(container).width();
var viewerHeight = $(document).height(); var viewerHeight = $(container).height();
var tree = d3.layout.tree() var tree = d3.layout.tree()
.size([viewerHeight, viewerWidth]); .size([viewerHeight, viewerWidth]);
...@@ -261,17 +265,16 @@ export function draw_tree(treeData) { ...@@ -261,17 +265,16 @@ export function draw_tree(treeData) {
// define the baseSvg, attaching a class for styling and the zoomListener // define the baseSvg, attaching a class for styling and the zoomListener
var baseSvg = d3.select("#tree-container").append("svg") var baseSvg = d3.select("#tree-container").append("svg")
.attr("width", viewerWidth) .attr("width", '100%')
.attr("height", viewerHeight); .attr("height", '100%');
baseSvg.append("rect") // baseSvg.append("rect")
.attr("width", "100%") // .attr("width", "100%")
.attr("height", "100%") // .attr("height", "100%");
.attr("fill", "white") // .attr("fill", "white");
baseSvg.call(zoomListener); baseSvg.call(zoomListener);
// Define the drag listeners for drag/drop behaviour of nodes. // Define the drag listeners for drag/drop behaviour of nodes.
let dragListener = d3.behavior.drag() let dragListener = d3.behavior.drag()
.on("dragstart", function(d) { .on("dragstart", function(d) {
...@@ -691,4 +694,3 @@ export function draw_tree(treeData) { ...@@ -691,4 +694,3 @@ export function draw_tree(treeData) {
centerNode(root); centerNode(root);
tree_root = root; tree_root = root;
} }
'use strict';
// css // css
import '../styles/app.css'; import '../styles/app.css';
import '../styles/d3-context-menu.css'; import '../styles/d3-context-menu.css';
...@@ -39,9 +41,6 @@ $('document').ready(function() { ...@@ -39,9 +41,6 @@ $('document').ready(function() {
}); });
$('#importJsonBtn').on('click', () => { $('#importJsonBtn').on('click', () => {
$('#tree-container').remove();
$('body').append($("<div id='tree-container' />"));
let files = document.getElementById('selectFiles').files; let files = document.getElementById('selectFiles').files;
if (files.length <= 0) { if (files.length <= 0) {
return false; return false;
...@@ -55,7 +54,7 @@ $('document').ready(function() { ...@@ -55,7 +54,7 @@ $('document').ready(function() {
fileReader.onload = (e) => { fileReader.onload = (e) => {
let result = JSON.parse(e.target.result); let result = JSON.parse(e.target.result);
draw_tree(result); draw_tree($('#tree-container'), result);
}; };
fileReader.readAsText(files.item(0)); fileReader.readAsText(files.item(0));
}); });
...@@ -71,6 +70,5 @@ $('document').ready(function() { ...@@ -71,6 +70,5 @@ $('document').ready(function() {
} }
] ]
}; };
draw_tree(TREE); draw_tree($('#tree-container'), TREE);
}); });
...@@ -2,21 +2,21 @@ ...@@ -2,21 +2,21 @@
cursor: pointer; cursor: pointer;
} }
.overlay{ .overlay {
background-color:#EEE; background-color: #EEE;
} }
.node circle { .node circle {
fill: #fff; fill: #fff;
stroke: steelblue; stroke: steelblue;
stroke-width: 1.5px; stroke-width: 1.5px;
} }
.node text { .node text {
font-size:10px; font-size: 10px;
font-family:sans-serif; font-family: sans-serif;
} }
.link { .link {
fill: none; fill: none;
stroke: #ccc; stroke: #ccc;
...@@ -29,19 +29,44 @@ ...@@ -29,19 +29,44 @@
stroke-width: 3px; stroke-width: 3px;
} }
.ghostCircle.show{ .ghostCircle.show {
display:block; display: block;
} }
.ghostCircle, .activeDrag .ghostCircle{ .ghostCircle, .activeDrag .ghostCircle {
display: none; display: none;
} }
.hidden { .hidden {
display: none; display: none;
} }
#selectFiles { #selectFiles {
width: auto; 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