Skip to content

Commit 6d46ad1

Browse files
dtaylor113dtaylor113
committed
pfCanvas & pfCanvasEditor: Contribution from MiQ/SUI
1 parent 437af38 commit 6d46ad1

23 files changed

+3609
-8
lines changed

‎Gruntfile.js‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ module.exports = function (grunt) {
6767
},
6868
img: {
6969
cwd: 'misc/',
70-
src: 'patternfly-orb.svg',
70+
src: ['patternfly-orb.svg', '*.png'],
7171
dest: 'docs/img',
7272
expand: true
7373
},
@@ -76,6 +76,12 @@ module.exports = function (grunt) {
7676
src: ['**'],
7777
dest: 'dist/docs',
7878
expand: true
79+
},
80+
distimg: {
81+
cwd: 'misc',
82+
src: ['canvas-dot-grid.png'],
83+
dest: 'dist/imgs',
84+
expand: true
7985
}
8086
},
8187
less: {
@@ -131,6 +137,7 @@ module.exports = function (grunt) {
131137
image: 'misc/logo-alt.svg',
132138
scripts: [
133139
'node_modules/jquery/dist/jquery.js',
140+
'node_modules/components-jqueryui/jquery-ui.min.js',
134141
'node_modules/datatables.net/js/jquery.dataTables.js',
135142
'node_modules/datatables.net-select/js/dataTables.select.js',
136143
'node_modules/moment/moment.js',
@@ -140,6 +147,7 @@ module.exports = function (grunt) {
140147
'node_modules/patternfly/dist/js/patternfly-settings-colors.js',
141148
'node_modules/patternfly/dist/js/patternfly-settings-charts.js',
142149
'node_modules/angular/angular.js',
150+
'node_modules/angular-dragdrop/src/angular-dragdrop.js',
143151
'node_modules/angular-datatables/dist/angular-datatables.min.js',
144152
'node_modules/angular-datatables/dist/plugins/select/angular-datatables.select.min.js',
145153
'node_modules/angular-sanitize/angular-sanitize.js',
@@ -239,6 +247,11 @@ module.exports = function (grunt) {
239247
cwd: 'src/',
240248
src: ['wizard/**/*.html'],
241249
dest: 'templates/wizard.js'
250+
},
251+
'patternfly.canvas': {
252+
cwd: 'src/',
253+
src: ['canvas-view/**/*.html'],
254+
dest: 'templates/canvas.js'
242255
}
243256
},
244257
// ng-annotate tries to make the code safe for minification automatically
@@ -271,16 +284,12 @@ module.exports = function (grunt) {
271284
files: ['Gruntfile.js'],
272285
tasks: ['eslint']
273286
},
274-
less: {
275-
files: ['**/*.less'],
276-
tasks: ['less']
277-
},
278287
test: {
279288
files: ['test/**/*.js'],
280289
tasks: ['test']
281290
},
282291
all: {
283-
files: ['Gruntfile.js', 'src/**/*.js', 'src/**/*.html', 'styles/**/*.css'],
292+
files: ['Gruntfile.js', 'src/**/*.js', 'src/**/*.html', 'styles/**/*.css', '**/*.less'],
284293
tasks: ['build'],
285294
options: {
286295
livereload: 35722
@@ -289,7 +298,7 @@ module.exports = function (grunt) {
289298
}
290299
});
291300

292-
grunt.registerTask('copymain', ['copy:docdata', 'copy:fa', 'copy:img']);
301+
grunt.registerTask('copymain', ['copy:docdata', 'copy:fa', 'copy:img', 'copy:distimg']);
293302

294303
// You can specify which modules to build as arguments of the build task.
295304
grunt.registerTask('build', 'Create bootstrap build files', function () {

‎README.md‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,38 @@ Note:
112112
<script src="node_modules/angular-datatables/dist/angular-datatables.min.js"></script>
113113
<script src="node_modules/angular-datatables/dist/plugins/select/angular-datatables.select.min.js"></script>
114114

115+
7. (optional) The 'patternfly.canvas' module is not a dependency in the default angular 'patternfly' module.
116+
In order to use pfCanvasEditor or pfCanvas, you must add 'patternfly.canvas' as a dependency in your application:
117+
118+
my-app.module.js:
119+
120+
angular.module('myApp', [
121+
'patternfly',
122+
'patternfly.canvas'
123+
]);
124+
125+
Add the following Javascript includes to your HTML file(s):
126+
127+
<!-- jquery before angular.js -->
128+
<script src="node_modules/jquery/dist/jquery.js"></script>
129+
<script src="node_modules/components-jqueryui/jquery-ui.min.js"></script>
130+
131+
<script src="node_modules/angular/angular.js"></script>
132+
133+
<!-- angular-dragdrop after angular.js -->
134+
<script src="node_modules/angular-dragdrop/src/angular-dragdrop.js"></script>
135+
136+
Also, the canvas background grid image is located in 'node_modules/angular-patternfly/dist/imgs/canvas-dot-grid.png'
137+
please copy this image to your application's main images directory and reference it by overridding the '.canvas' css
138+
class:
139+
140+
<style>
141+
.canvas {
142+
background-image: url('/myapp/imgs/canvas-dot-grid.png');
143+
background-repeat: repeat;
144+
}
145+
</style>
146+
115147
### Using with Webpack
116148

117149
In order to use Angular-Patternfly in a Webpack-bundled application there are some things you need to keep in mind:

‎bower.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
"angular": "1.5.*",
4141
"angular-animate": "1.5.*",
4242
"angular-bootstrap": "2.2.x",
43+
"angular-dragdrop": "1.0.13",
4344
"angular-datatables": "^0.5.6",
4445
"angular-drag-and-drop-lists": "2.0.0",
4546
"angular-sanitize": "1.5.*",

‎misc/canvas-dot-grid.png‎

100 Bytes
Loading

‎misc/examples.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,3 +130,10 @@ hr {
130130
.dropdown-kebab-pf.red .btn-link {
131131
color: red;
132132
}
133+
134+
.canvas-demo-container {
135+
height: 600px;
136+
margin-left: 15px;
137+
overflow: auto;
138+
width: 99%;
139+
}

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,12 @@
1212
"angular-animate": "1.5.*",
1313
"angular-sanitize": "1.5.*",
1414
"angular-ui-bootstrap": "2.3.x",
15+
"angular-svg-base-fix": "2.0.0",
1516
"lodash-amd": "4.x",
1617
"patternfly": "git+https://[email protected]/patternfly/patternfly#list-view-dnd-branch-4.0-dev-dist"
1718
},
1819
"devDependencies": {
20+
"angular-dragdrop": "1.0.13",
1921
"angular-mocks": "1.3.0 - 1.5.*",
2022
"angular-ui-router": "^0.3.2",
2123
"express": "3.4.4",
@@ -53,9 +55,10 @@
5355
"angular-drag-and-drop-lists": "2.0.0",
5456
"bootstrap-select": "~1.10.0",
5557
"c3": "~0.4.11",
58+
"components-jqueryui": "components/jqueryui#1.12.1",
59+
"d3": "~3.5.17",
5660
"datatables.net": "^1.10.11",
5761
"datatables.net-select": "~1.2.0",
58-
"d3": "~3.5.17",
5962
"jquery": "~2.1.4",
6063
"moment": "~2.14.1"
6164
},

‎src/canvas-view/canvas-editor/canvas-editor.component.js‎

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
(function () {
2+
'use strict';
3+
4+
angular.module('patternfly.canvas').component('pfCanvasEditor', {
5+
6+
bindings: {
7+
chartDataModel: "=",
8+
chartViewModel: "=?",
9+
toolboxTabs: "=",
10+
readOnly: '<?'
11+
},
12+
transclude: true,
13+
templateUrl: "canvas-view/canvas-editor/canvas-editor.html",
14+
controller: function ($timeout) {
15+
var ctrl = this;
16+
var newNodeCount = 0;
17+
var prevClickedOnChart, prevInConnectingMode;
18+
19+
ctrl.$onInit = function () {
20+
ctrl.toolboxVisible = false;
21+
ctrl.hideConnectors = false;
22+
ctrl.draggedItem = null;
23+
};
24+
25+
// need to get these in next digest cycle, after pfCanvas sets chartViewModel
26+
$timeout(function () {
27+
prevClickedOnChart = ctrl.chartViewModel.clickedOnChart;
28+
prevInConnectingMode = ctrl.chartViewModel.inConnectingMode;
29+
});
30+
31+
ctrl.$doCheck = function () {
32+
if (angular.isDefined(prevClickedOnChart) && angular.isDefined(prevInConnectingMode)) {
33+
if (!angular.equals(ctrl.chartViewModel.clickedOnChart, prevClickedOnChart)) {
34+
if (ctrl.chartViewModel.clickedOnChart) {
35+
ctrl.chartViewModel.clickedOnChart = false;
36+
ctrl.hideToolbox();
37+
}
38+
prevClickedOnChart = ctrl.chartViewModel.clickedOnChart;
39+
}
40+
if (!angular.equals(ctrl.chartViewModel.inConnectingMode, prevInConnectingMode)) {
41+
if (ctrl.chartViewModel.inConnectingMode) {
42+
ctrl.hideConnectors = false;
43+
ctrl.hideToolbox();
44+
}
45+
prevInConnectingMode = ctrl.chartViewModel.inConnectingMode;
46+
}
47+
}
48+
};
49+
50+
ctrl.addNodeToCanvas = function (newNode) {
51+
ctrl.chartViewModel.addNode(newNode);
52+
};
53+
54+
/*** Toolbox Methods ***/
55+
56+
ctrl.showToolbox = function () {
57+
ctrl.toolboxVisible = true;
58+
// add class to subtabs to apply PF style and
59+
// focus to filter input box
60+
61+
$timeout(function () {
62+
angular.element(".subtabs>ul").addClass('nav-tabs-pf');
63+
angular.element("#filterFld").focus();
64+
});
65+
};
66+
67+
ctrl.hideToolbox = function () {
68+
ctrl.toolboxVisible = false;
69+
};
70+
71+
ctrl.toggleToolbox = function () {
72+
if (!ctrl.readOnly && !ctrl.chartViewModel.inConnectingMode) {
73+
if (ctrl.toolboxVisible === true) {
74+
ctrl.hideToolbox();
75+
} else {
76+
ctrl.showToolbox();
77+
}
78+
}
79+
};
80+
81+
ctrl.tabClicked = function () {
82+
angular.element("#filterFld").focus();
83+
};
84+
85+
/*** Toolbox ***/
86+
87+
ctrl.startCallback = function (event, ui, item) {
88+
ctrl.draggedItem = item;
89+
};
90+
91+
ctrl.dropCallback = function (event, ui) {
92+
var newNode = angular.copy(ctrl.draggedItem);
93+
newNodeCount++;
94+
newNode.x = event.clientX - 600;
95+
newNode.y = event.clientY - 200;
96+
newNode.backgroundColor = newNode.backgroundColor ? newNode.backgroundColor : '#fff';
97+
98+
ctrl.chartViewModel.addNode(newNode);
99+
};
100+
101+
ctrl.addNodeByClick = function (item) {
102+
var newNode = angular.copy(item);
103+
newNodeCount++;
104+
newNode.x = 250 + (newNodeCount * 4 + 160);
105+
newNode.y = 200 + (newNodeCount * 4 + 160);
106+
newNode.backgroundColor = newNode.backgroundColor ? newNode.backgroundColor : '#fff';
107+
108+
ctrl.chartViewModel.addNode(newNode);
109+
};
110+
111+
ctrl.tabClicked = function () {
112+
angular.element("#filterFld").focus();
113+
};
114+
115+
ctrl.activeTab = function () {
116+
return ctrl.toolboxTabs.filter(function (tab) {
117+
return tab.active;
118+
})[0];
119+
};
120+
121+
ctrl.activeSubTab = function () {
122+
var activeTab = ctrl.activeTab();
123+
if (activeTab && activeTab.subtabs) {
124+
return activeTab.subtabs.filter(function (subtab) {
125+
return subtab.active;
126+
})[0];
127+
}
128+
};
129+
130+
ctrl.activeSubSubTab = function () {
131+
var activeSubTab = ctrl.activeSubTab();
132+
if (activeSubTab && activeSubTab.subtabs) {
133+
return activeSubTab.subtabs.filter(function (subsubtab) {
134+
return subsubtab.active;
135+
})[0];
136+
}
137+
};
138+
139+
/*** Zoom ***/
140+
141+
ctrl.maxZoom = function () {
142+
if (ctrl.chartViewModel && ctrl.chartViewModel.zoom) {
143+
return ctrl.chartViewModel.zoom.isMax();
144+
}
145+
146+
return false;
147+
};
148+
149+
ctrl.minZoom = function () {
150+
if (ctrl.chartViewModel && ctrl.chartViewModel.zoom) {
151+
return ctrl.chartViewModel.zoom.isMin();
152+
}
153+
154+
return false;
155+
};
156+
157+
ctrl.zoomIn = function () {
158+
ctrl.chartViewModel.zoom.in();
159+
};
160+
161+
ctrl.zoomOut = function () {
162+
ctrl.chartViewModel.zoom.out();
163+
};
164+
} // controller
165+
}); // module
166+
})();

0 commit comments

Comments
 (0)