';
46 | }
47 |
48 | function CheckmarkFormatter(row, cell, value, columnDef, dataContext) {
49 | return value ? "
" : "";
50 | }
51 |
52 | // exports
53 | $.extend(true, window, {
54 | "Slick": {
55 | "Formatters": {
56 | "PercentComplete": PercentCompleteFormatter,
57 | "PercentCompleteBar": PercentCompleteBarFormatter,
58 | "YesNo": YesNoFormatter,
59 | "Checkmark": CheckmarkFormatter,
60 | "Checkbox": CheckboxFormatter
61 |
62 | }
63 | }
64 | });
65 | })(jQuery);
66 |
--------------------------------------------------------------------------------
/lib/Slickgrid/Plugins/slick.cellrangedecorator.js:
--------------------------------------------------------------------------------
1 | (function ($) {
2 | // register namespace
3 | $.extend(true, window, {
4 | "Slick": {
5 | "CellRangeDecorator": CellRangeDecorator
6 | }
7 | });
8 |
9 | /***
10 | * Displays an overlay on top of a given cell range.
11 | *
12 | * TODO:
13 | * Currently, it blocks mouse events to DOM nodes behind it.
14 | * Use FF and WebKit-specific "pointer-events" CSS style, or some kind of event forwarding.
15 | * Could also construct the borders separately using 4 individual DIVs.
16 | *
17 | * @param {Grid} grid
18 | * @param {Object} options
19 | */
20 | function CellRangeDecorator(grid, options) {
21 | var _elem;
22 | var _defaults = {
23 | selectionCssClass: 'slick-range-decorator',
24 | selectionCss: {
25 | "zIndex": "9999",
26 | "border": "2px dashed red"
27 | },
28 | offset: {
29 | top: -1,
30 | left: -1,
31 | height: -2,
32 | width: -2
33 | }
34 | };
35 |
36 | options = $.extend(true, {}, _defaults, options);
37 |
38 |
39 | function show(range) {
40 | if (!_elem) {
41 | _elem = $("", {css: options.selectionCss})
42 | .addClass(options.selectionCssClass)
43 | .css("position", "absolute")
44 | .appendTo(grid.getActiveCanvasNode());
45 | }
46 |
47 | var from = grid.getCellNodeBox(range.fromRow, range.fromCell);
48 | var to = grid.getCellNodeBox(range.toRow, range.toCell);
49 |
50 | if (from && to && options && options.offset) {
51 | _elem.css({
52 | top: from.top + options.offset.top,
53 | left: from.left + options.offset.left,
54 | height: to.bottom - from.top + options.offset.height,
55 | width: to.right - from.left + options.offset.width
56 | });
57 | }
58 |
59 | return _elem;
60 | }
61 |
62 | function destroy() {
63 | hide();
64 | }
65 |
66 | function hide() {
67 | if (_elem) {
68 | _elem.remove();
69 | _elem = null;
70 | }
71 | }
72 |
73 | $.extend(this, {
74 | "pluginName": "CellRangeDecorator",
75 | "show": show,
76 | "hide": hide,
77 | "destroy": destroy
78 | });
79 | }
80 | })(jQuery);
81 |
--------------------------------------------------------------------------------
/lib/jquery.fancytree.contextMenu.wwwendt.js:
--------------------------------------------------------------------------------
1 | /**!
2 | * jquery.fancytree.contextmenu.js
3 | *
4 | * Integrate the 'jQuery contextMenu' plugin as Fancytree extension:
5 | * https://github.com/swisnl/jQuery-contextMenu
6 | *
7 | * Copyright (c) 2008-2018, Martin Wendt (https://wwWendt.de)
8 | * Released under the MIT license
9 | * https://github.com/mar10/fancytree/wiki/LicenseInfo
10 | */
11 | (function($, document) {
12 | "use strict";
13 |
14 | var initContextMenu = function(tree, selector, menu, actions) {
15 | tree.$container.on("mousedown.contextMenu", function(event) {
16 | var node = $.ui.fancytree.getNode(event);
17 |
18 | if (node) {
19 | $.contextMenu("destroy", "." + selector);
20 |
21 | // node.setFocus(true);
22 | node.setActive(true);
23 |
24 | $.contextMenu({
25 | selector: "." + selector,
26 | events: {
27 | show: function(options) {
28 | options.prevKeyboard = tree.options.keyboard;
29 | tree.options.keyboard = false;
30 | },
31 | hide: function(options) {
32 | tree.options.keyboard = options.prevKeyboard;
33 | node.setFocus(true);
34 | },
35 | },
36 | build: function($trigger, e) {
37 | node = $.ui.fancytree.getNode($trigger);
38 |
39 | var menuItems = {};
40 | if ($.isFunction(menu)) {
41 | menuItems = menu(node);
42 | } else if ($.isPlainObject(menu)) {
43 | menuItems = menu;
44 | }
45 |
46 | return {
47 | callback: function(action, options) {
48 | if ($.isFunction(actions)) {
49 | actions(node, action, options);
50 | } else if ($.isPlainObject(actions)) {
51 | if (
52 | actions.hasOwnProperty(action) &&
53 | $.isFunction(actions[action])
54 | ) {
55 | actions[action](node, options);
56 | }
57 | }
58 | },
59 | items: menuItems,
60 | };
61 | },
62 | });
63 | }
64 | });
65 | };
66 |
67 | $.ui.fancytree.registerExtension({
68 | name: "contextMenu",
69 | version: "@VERSION",
70 | contextMenu: {
71 | selector: "fancytree-title",
72 | menu: {},
73 | actions: {},
74 | },
75 | treeInit: function(ctx) {
76 | this._superApply(arguments);
77 | initContextMenu(
78 | ctx.tree,
79 | ctx.options.contextMenu.selector || "fancytree-title",
80 | ctx.options.contextMenu.menu,
81 | ctx.options.contextMenu.actions
82 | );
83 | },
84 | });
85 | })(jQuery, document);
--------------------------------------------------------------------------------
/lib/codemirror/addon/placeholder/placeholder.js:
--------------------------------------------------------------------------------
1 | // CodeMirror, copyright (c) by Marijn Haverbeke and others
2 | // Distributed under an MIT license: http://codemirror.net/LICENSE
3 |
4 | (function(mod) {
5 | if (typeof exports == "object" && typeof module == "object") // CommonJS
6 | mod(require("../../lib/codemirror"));
7 | else if (typeof define == "function" && define.amd) // AMD
8 | define(["../../lib/codemirror"], mod);
9 | else // Plain browser env
10 | mod(CodeMirror);
11 | })(function(CodeMirror) {
12 | CodeMirror.defineOption("placeholder", "", function(cm, val, old) {
13 | var prev = old && old != CodeMirror.Init;
14 | if (val && !prev) {
15 | cm.on("blur", onBlur);
16 | cm.on("change", onChange);
17 | cm.on("swapDoc", onChange);
18 | onChange(cm);
19 | } else if (!val && prev) {
20 | cm.off("blur", onBlur);
21 | cm.off("change", onChange);
22 | cm.off("swapDoc", onChange);
23 | clearPlaceholder(cm);
24 | var wrapper = cm.getWrapperElement();
25 | wrapper.className = wrapper.className.replace(" CodeMirror-empty", "");
26 | }
27 |
28 | if (val && !cm.hasFocus()) onBlur(cm);
29 | });
30 |
31 | function clearPlaceholder(cm) {
32 | if (cm.state.placeholder) {
33 | cm.state.placeholder.parentNode.removeChild(cm.state.placeholder);
34 | cm.state.placeholder = null;
35 | }
36 | }
37 | function setPlaceholder(cm) {
38 | clearPlaceholder(cm);
39 | var elt = cm.state.placeholder = document.createElement("pre");
40 | elt.style.cssText = "height: 0; overflow: visible";
41 | elt.style.direction = cm.getOption("direction");
42 | elt.className = "CodeMirror-placeholder";
43 | var placeHolder = cm.getOption("placeholder")
44 | if (typeof placeHolder == "string") placeHolder = document.createTextNode(placeHolder)
45 | elt.appendChild(placeHolder)
46 | cm.display.lineSpace.insertBefore(elt, cm.display.lineSpace.firstChild);
47 | }
48 |
49 | function onBlur(cm) {
50 | if (isEmpty(cm)) setPlaceholder(cm);
51 | }
52 | function onChange(cm) {
53 | var wrapper = cm.getWrapperElement(), empty = isEmpty(cm);
54 | wrapper.className = wrapper.className.replace(" CodeMirror-empty", "") + (empty ? " CodeMirror-empty" : "");
55 |
56 | if (empty) setPlaceholder(cm);
57 | else clearPlaceholder(cm);
58 | }
59 |
60 | function isEmpty(cm) {
61 | return (cm.lineCount() === 1) && (cm.getLine(0) === "");
62 | }
63 | });
64 |
--------------------------------------------------------------------------------
/lib/contextMenu/jquery.fancytree.contextMenu.js:
--------------------------------------------------------------------------------
1 | /**!
2 | * jquery.fancytree.contextmenu.js
3 | *
4 | * Integrate the 'jQuery contextMenu' plugin as Fancytree extension:
5 | * https://github.com/swisnl/jQuery-contextMenu
6 | *
7 | * Copyright (c) 2008-2018, Martin Wendt (https://wwWendt.de)
8 | * Released under the MIT license
9 | * https://github.com/mar10/fancytree/wiki/LicenseInfo
10 | */
11 | (function($, document) {
12 | "use strict";
13 |
14 | var initContextMenu = function(tree, selector, menu, actions) {
15 | tree.$container.on("mousedown.contextMenu", function(event) {
16 | var node = $.ui.fancytree.getNode(event);
17 |
18 | if (node) {
19 | $.contextMenu("destroy", "." + selector);
20 |
21 | // node.setFocus(true);
22 | node.setActive(true);
23 |
24 | $.contextMenu({
25 | selector: "." + selector,
26 | events: {
27 | show: function(options) {
28 | options.prevKeyboard = tree.options.keyboard;
29 | tree.options.keyboard = false;
30 | },
31 | hide: function(options) {
32 | tree.options.keyboard = options.prevKeyboard;
33 | node.setFocus(true);
34 | },
35 | },
36 | build: function($trigger, e) {
37 | node = $.ui.fancytree.getNode($trigger);
38 |
39 | var menuItems = {};
40 | if ($.isFunction(menu)) {
41 | menuItems = menu(node);
42 | } else if ($.isPlainObject(menu)) {
43 | menuItems = menu;
44 | }
45 |
46 | return {
47 | callback: function(action, options) {
48 | if ($.isFunction(actions)) {
49 | actions(node, action, options);
50 | } else if ($.isPlainObject(actions)) {
51 | if (
52 | actions.hasOwnProperty(action) &&
53 | $.isFunction(actions[action])
54 | ) {
55 | actions[action](node, options);
56 | }
57 | }
58 | },
59 | items: menuItems,
60 | };
61 | },
62 | });
63 | }
64 | });
65 | };
66 |
67 | $.ui.fancytree.registerExtension({
68 | name: "contextMenu",
69 | version: "@VERSION",
70 | contextMenu: {
71 | selector: "fancytree-title",
72 | menu: {},
73 | actions: {},
74 | },
75 | treeInit: function(ctx) {
76 | this._superApply(arguments);
77 | initContextMenu(
78 | ctx.tree,
79 | ctx.options.contextMenu.selector || "fancytree-title",
80 | ctx.options.contextMenu.menu,
81 | ctx.options.contextMenu.actions
82 | );
83 | },
84 | });
85 | })(jQuery, document);
86 |
--------------------------------------------------------------------------------
/lib/contextMenu/jquery.fancytree.contextMenuold.js:
--------------------------------------------------------------------------------
1 | /**!
2 | * jquery.fancytree.contextmenu.js
3 | *
4 | * Integrate the 'jQuery contextMenu' plugin as Fancytree extension:
5 | * https://github.com/swisnl/jQuery-contextMenu
6 | *
7 | * Copyright (c) 2008-2018, Martin Wendt (https://wwWendt.de)
8 | * Released under the MIT license
9 | * https://github.com/mar10/fancytree/wiki/LicenseInfo
10 | */
11 | (function($, document) {
12 | "use strict";
13 |
14 | var initContextMenu = function(tree, selector, menu, actions) {
15 | tree.$container.on("mousedown.contextMenu", function(event) {
16 | var node = $.ui.fancytree.getNode(event);
17 |
18 | if (node) {
19 | $.contextMenu("destroy", "." + selector);
20 |
21 | // node.setFocus(true);
22 | node.setActive(true);
23 |
24 | $.contextMenu({
25 | selector: "." + selector,
26 | events: {
27 | show: function(options) {
28 | options.prevKeyboard = tree.options.keyboard;
29 | tree.options.keyboard = false;
30 | },
31 | hide: function(options) {
32 | tree.options.keyboard = options.prevKeyboard;
33 | node.setFocus(true);
34 | },
35 | },
36 | build: function($trigger, e) {
37 | node = $.ui.fancytree.getNode($trigger);
38 |
39 | var menuItems = {};
40 | if ($.isFunction(menu)) {
41 | menuItems = menu(node);
42 | } else if ($.isPlainObject(menu)) {
43 | menuItems = menu;
44 | }
45 |
46 | return {
47 | callback: function(action, options) {
48 | if ($.isFunction(actions)) {
49 | actions(node, action, options);
50 | } else if ($.isPlainObject(actions)) {
51 | if (
52 | actions.hasOwnProperty(action) &&
53 | $.isFunction(actions[action])
54 | ) {
55 | actions[action](node, options);
56 | }
57 | }
58 | },
59 | items: menuItems,
60 | };
61 | },
62 | });
63 | }
64 | });
65 | };
66 |
67 | $.ui.fancytree.registerExtension({
68 | name: "contextMenu",
69 | version: "@VERSION",
70 | contextMenu: {
71 | selector: "fancytree-title",
72 | menu: {},
73 | actions: {},
74 | },
75 | treeInit: function(ctx) {
76 | this._superApply(arguments);
77 | initContextMenu(
78 | ctx.tree,
79 | ctx.options.contextMenu.selector || "fancytree-title",
80 | ctx.options.contextMenu.menu,
81 | ctx.options.contextMenu.actions
82 | );
83 | },
84 | });
85 | })(jQuery, document);
--------------------------------------------------------------------------------
/lib/jquery.fancytree.contextMenu.js:
--------------------------------------------------------------------------------
1 | /**!
2 | * jquery.fancytree.contextmenu.js
3 | *
4 | * Integrate the 'jQuery contextMenu' plugin as Fancytree extension:
5 | * https://github.com/swisnl/jQuery-contextMenu
6 | *
7 | * Copyright (c) 2008-2018, Martin Wendt (https://wwWendt.de)
8 | * Released under the MIT license
9 | * https://github.com/mar10/fancytree/wiki/LicenseInfo
10 | */
11 | (function ($, document) {
12 | "use strict";
13 |
14 | var initContextMenu = function (tree, selector, menu, actions) {
15 | tree.$container.on("mousedown.contextMenu", function (event) {
16 | var node = $.ui.fancytree.getNode(event);
17 |
18 | if (node) {
19 | $.contextMenu("destroy", "." + selector);
20 |
21 | // node.setFocus(true);
22 | node.setActive(true);
23 |
24 | $.contextMenu({
25 | selector: "." + selector,
26 | events: {
27 | show: function (options) {
28 | options.prevKeyboard = tree.options.keyboard;
29 | tree.options.keyboard = false;
30 | },
31 | hide: function (options) {
32 | tree.options.keyboard = options.prevKeyboard;
33 | node.setFocus(true);
34 | },
35 | },
36 | build: function ($trigger, e) {
37 | node = $.ui.fancytree.getNode($trigger);
38 |
39 | var menuItems = {};
40 | if ($.isFunction(menu)) {
41 | menuItems = menu(node);
42 | } else if ($.isPlainObject(menu)) {
43 | menuItems = menu;
44 | }
45 |
46 | return {
47 | callback: function (action, options) {
48 | if ($.isFunction(actions)) {
49 | actions(node, action, options);
50 | } else if ($.isPlainObject(actions)) {
51 | if (
52 | Object.prototype.hasOwnProperty.call(
53 | actions,
54 | action
55 | ) &&
56 | $.isFunction(actions[action])
57 | ) {
58 | actions[action](node, options);
59 | }
60 | }
61 | },
62 | items: menuItems,
63 | };
64 | },
65 | });
66 | }
67 | });
68 | };
69 |
70 | $.ui.fancytree.registerExtension({
71 | name: "contextMenu",
72 | version: "@VERSION",
73 | contextMenu: {
74 | selector: "fancytree-title",
75 | menu: {},
76 | actions: {},
77 | },
78 | treeInit: function (ctx) {
79 | this._superApply(arguments);
80 | initContextMenu(
81 | ctx.tree,
82 | ctx.options.contextMenu.selector || "fancytree-title",
83 | ctx.options.contextMenu.menu,
84 | ctx.options.contextMenu.actions
85 | );
86 | },
87 | });
88 | })(jQuery, document);
89 |
--------------------------------------------------------------------------------
/lib/fancytree_dist/skin-themeroller/ui.fancytree.less:
--------------------------------------------------------------------------------
1 | /*!
2 | * Fancytree "ThemeRoller" skin.
3 | * This file should be included after a jQuery Themeroller style sheet.
4 | * It is meant to be used together with the ext-themeroller extension.
5 | *
6 | * DON'T EDIT THE CSS FILE DIRECTLY, since it is automatically generated from
7 | * the LESS templates.
8 | */
9 |
10 | // Import common styles
11 | @import "../skin-common.less";
12 |
13 |
14 | /*******************************************************************************
15 | * Styles specific to this skin.
16 | *
17 | * This section is automatically generated from the `ui-fancytree.less` template.
18 | ******************************************************************************/
19 |
20 |
21 | // Override the variable after the import.
22 | // NOTE: Variables are always resolved as the last definition, even if it is
23 | // after where it is used.
24 | @fancy-use-sprites: true; // false: suppress all background images (i.e. icons)
25 |
26 | @fancy-line-height: 20px; // height of a nodes selection bar including borders
27 | @fancy-node-v-spacing: 0px; // gap between two node borders
28 | @fancy-icon-width: 16px;
29 | @fancy-icon-height: 16px;
30 | @fancy-icon-spacing: 3px; // margin between icon/icon or icon/title
31 | @fancy-icon-ofs-top: 2px; // extra vertical offset for expander, checkbox and icon
32 | @fancy-title-ofs-top: 0px; // extra vertical offset for title
33 | @fancy-node-border-width: 1px;
34 | @fancy-node-border-radius: 0px;
35 | @fancy-node-outline-width: 1px;
36 |
37 |
38 | // We need to define this variable here (not in skin-common.less) to make it
39 | // work with grunt and webpack:
40 | @fancy-image-prefix: "./skin-themeroller/";
41 |
42 | // Use 'data-uri(...)' to embed the image into CSS instead of linking to 'loading.gif':
43 | // @fancy-loading-url: data-uri("@{fancy-image-prefix}loading.gif");
44 | // Set to `true` to use `data-uri(...)` which will embed icons.gif into CSS
45 | // instead of linking to that file:
46 | // @fancy-inline-sprites: true;
47 |
48 | /*******************************************************************************
49 | * Node titles
50 | */
51 | .fancytree-plain {
52 | span.fancytree-node {
53 | border: @fancy-node-border-width solid transparent; // avoid jumping, when a border is added on hover
54 | }
55 | }
56 |
57 | /*******************************************************************************
58 | * 'table' extension
59 | */
60 | table.fancytree-ext-table tbody {
61 | tr td {
62 | border: 1px solid transparent;
63 | }
64 | }
65 |
--------------------------------------------------------------------------------
/app/MatchConnector.js:
--------------------------------------------------------------------------------
1 | var MatchConnector = fabric.util.createClass(fabric.Line, {
2 | type: 'matchConnector',
3 |
4 | initialize(element, options) {
5 | options || (options = {});
6 | this.callSuper('initialize', element, options);
7 |
8 | // Set default options
9 | this.set({
10 | hasBorders: false,
11 | hasControls: false,
12 | stroke: '#00a8f0',
13 | perPixelTargetFind: true,
14 | strokeWidth: 2,
15 | selectable: false,
16 | padding: 5
17 | });
18 |
19 | this.role = "preview"; // mode when dragging-to-create
20 | this.setRole("true");
21 |
22 | this.on('mousedown', function(options){
23 | if(options.button === 1) {
24 | app.view.markSelectedConnection(this);
25 | // console.log("left click");
26 | }
27 | if(options.button === 3) {
28 | // console.log("right click");
29 |
30 | // toggle connection "role" between "true" and "false"
31 | // find connectionmodel
32 | var model = app.view.pageModel;
33 | var connModel = model.connections.find(conn=>conn.id == this.id);
34 | if(connModel.role == "true")
35 | connModel.role = "false";
36 | else
37 | connModel.role = "true";
38 |
39 | this.setRole(connModel.role);
40 |
41 | this.redraw();
42 |
43 | options.e.preventDefault();
44 | options.e.stopPropagation();
45 | }
46 | });
47 | },
48 |
49 | // styling is changed according to role
50 | setRole: function(role){
51 | if(this.role != role){
52 | var newColor = null;
53 | var dash = null;
54 |
55 | this.role = role;
56 | if(this.role == "true"){
57 | newColor = '#00a8f0';
58 | dash = null;
59 | }
60 | else if(this.role == "false"){
61 | // "false"
62 | newColor = '#ff5555';
63 | dash = [5, 5];
64 | }
65 | else {
66 | // assume "preview"
67 | newColor = 'gray';
68 | dash = [5, 5];
69 | }
70 |
71 | this.set({
72 | strokeDashArray: dash,
73 | stroke: newColor
74 | })
75 | this.redraw();
76 | }
77 | },
78 |
79 | // redraw, for whatever reason
80 | redraw: function(){
81 | this.set({
82 | 'x2':this.source.left-1,
83 | 'y2':this.source.top-1,
84 | 'x1':this.target.left-1,
85 | 'y1':this.target.top-1
86 | });
87 | this.setCoords();
88 |
89 | // make sure the involved ports are at the top
90 | app.view.canvas.bringToFront(this.source);
91 | app.view.canvas.bringToFront(this.target);
92 |
93 | }
94 |
95 | });
--------------------------------------------------------------------------------
/app/Shapes/StraightConnector.js:
--------------------------------------------------------------------------------
1 | var StraightConnector = fabric.util.createClass(fabric.Line, {
2 | type: 'straightConnector',
3 |
4 | initialize(element, options) {
5 | options || (options = {});
6 | this.callSuper('initialize', element, options);
7 |
8 | // Set default options
9 | this.set({
10 | hasBorders: false,
11 | hasControls: false,
12 | stroke: '#00a8f0',
13 | perPixelTargetFind: true,
14 | strokeWidth: 2,
15 | selectable: false,
16 | padding: 5
17 | });
18 |
19 | this.role = "preview"; // mode when dragging-to-create
20 | this.setRole("true");
21 |
22 | this.on('mousedown', function(options){
23 | if(options.button === 1) {
24 | app.view.markSelectedConnection(this);
25 | // console.log("left click");
26 | }
27 | if(options.button === 3) {
28 | // console.log("right click");
29 |
30 | // toggle connection "role" between "true" and "false"
31 | // find connectionmodel
32 | var model = app.view.pageModel;
33 | var connModel = model.connections.find(conn=>conn.id == this.id);
34 | if(connModel.role == "true")
35 | connModel.role = "false";
36 | else
37 | connModel.role = "true";
38 |
39 | this.setRole(connModel.role);
40 |
41 | this.redraw();
42 |
43 | options.e.preventDefault();
44 | options.e.stopPropagation();
45 | }
46 | });
47 | },
48 |
49 | // styling is changed according to role
50 | setRole: function(role){
51 | if(this.role != role){
52 | var newColor = null;
53 | var dash = null;
54 |
55 | this.role = role;
56 | if(this.role == "true"){
57 | newColor = '#00a8f0';
58 | dash = null;
59 | }
60 | else if(this.role == "false"){
61 | // "false"
62 | newColor = '#ff5555';
63 | dash = [5, 5];
64 | }
65 | else {
66 | // assume "preview"
67 | newColor = 'gray';
68 | dash = [5, 5];
69 | }
70 |
71 | this.set({
72 | strokeDashArray: dash,
73 | stroke: newColor
74 | })
75 | this.redraw();
76 | }
77 | },
78 |
79 | // redraw, for whatever reason
80 | redraw: function(){
81 | this.set({
82 | 'x2':this.source.left-1,
83 | 'y2':this.source.top-1,
84 | 'x1':this.target.left-1,
85 | 'y1':this.target.top-1
86 | });
87 | this.setCoords();
88 |
89 | // make sure the involved ports are at the top
90 | app.view.canvas.bringToFront(this.source);
91 | app.view.canvas.bringToFront(this.target);
92 |
93 | }
94 |
95 | });
--------------------------------------------------------------------------------
/lib/Slickgrid/Plugins/slick.cellcopymanager.js:
--------------------------------------------------------------------------------
1 | (function ($) {
2 | // register namespace
3 | $.extend(true, window, {
4 | "Slick": {
5 | "CellCopyManager": CellCopyManager
6 | }
7 | });
8 |
9 |
10 | function CellCopyManager() {
11 | var _grid;
12 | var _self = this;
13 | var _copiedRanges;
14 |
15 | function init(grid) {
16 | _grid = grid;
17 | _grid.onKeyDown.subscribe(handleKeyDown);
18 | }
19 |
20 | function destroy() {
21 | _grid.onKeyDown.unsubscribe(handleKeyDown);
22 | }
23 |
24 | function handleKeyDown(e, args) {
25 | var ranges;
26 | if (!_grid.getEditorLock().isActive()) {
27 | if (e.which == Slick.keyCode.ESCAPE) {
28 | if (_copiedRanges) {
29 | e.preventDefault();
30 | clearCopySelection();
31 | _self.onCopyCancelled.notify({ranges: _copiedRanges});
32 | _copiedRanges = null;
33 | }
34 | }
35 |
36 | if (e.which == 67 && (e.ctrlKey || e.metaKey)) {
37 | ranges = _grid.getSelectionModel().getSelectedRanges();
38 | if (ranges.length !== 0) {
39 | e.preventDefault();
40 | _copiedRanges = ranges;
41 | markCopySelection(ranges);
42 | _self.onCopyCells.notify({ranges: ranges});
43 | }
44 | }
45 |
46 | if (e.which == 86 && (e.ctrlKey || e.metaKey)) {
47 | if (_copiedRanges) {
48 | e.preventDefault();
49 | ranges = _grid.getSelectionModel().getSelectedRanges();
50 | _self.onPasteCells.notify({from: _copiedRanges, to: ranges});
51 | if (!_grid.getOptions().preserveCopiedSelectionOnPaste) {
52 | clearCopySelection();
53 | _copiedRanges = null;
54 | }
55 | }
56 | }
57 | }
58 | }
59 |
60 | function markCopySelection(ranges) {
61 | var columns = _grid.getColumns();
62 | var hash = {};
63 | for (var i = 0; i < ranges.length; i++) {
64 | for (var j = ranges[i].fromRow; j <= ranges[i].toRow; j++) {
65 | hash[j] = {};
66 | for (var k = ranges[i].fromCell; k <= ranges[i].toCell; k++) {
67 | hash[j][columns[k].id] = "copied";
68 | }
69 | }
70 | }
71 | _grid.setCellCssStyles("copy-manager", hash);
72 | }
73 |
74 | function clearCopySelection() {
75 | _grid.removeCellCssStyles("copy-manager");
76 | }
77 |
78 | $.extend(this, {
79 | "init": init,
80 | "destroy": destroy,
81 | "pluginName": "CellCopyManager",
82 |
83 | "clearCopySelection": clearCopySelection,
84 |
85 | "onCopyCells": new Slick.Event(),
86 | "onCopyCancelled": new Slick.Event(),
87 | "onPasteCells": new Slick.Event()
88 | });
89 | }
90 | })(jQuery);
91 |
--------------------------------------------------------------------------------
/lib/Slickgrid/Plugins/slick.autotooltips.js:
--------------------------------------------------------------------------------
1 | (function ($) {
2 | // Register namespace
3 | $.extend(true, window, {
4 | "Slick": {
5 | "AutoTooltips": AutoTooltips
6 | }
7 | });
8 |
9 | /**
10 | * AutoTooltips plugin to show/hide tooltips when columns are too narrow to fit content.
11 | * @constructor
12 | * @param {boolean} [options.enableForCells=true] - Enable tooltip for grid cells
13 | * @param {boolean} [options.enableForHeaderCells=false] - Enable tooltip for header cells
14 | * @param {number} [options.maxToolTipLength=null] - The maximum length for a tooltip
15 | */
16 | function AutoTooltips(options) {
17 | var _grid;
18 | var _self = this;
19 | var _defaults = {
20 | enableForCells: true,
21 | enableForHeaderCells: false,
22 | maxToolTipLength: null,
23 | replaceExisting: true
24 | };
25 |
26 | /**
27 | * Initialize plugin.
28 | */
29 | function init(grid) {
30 | options = $.extend(true, {}, _defaults, options);
31 | _grid = grid;
32 | if (options.enableForCells) _grid.onMouseEnter.subscribe(handleMouseEnter);
33 | if (options.enableForHeaderCells) _grid.onHeaderMouseEnter.subscribe(handleHeaderMouseEnter);
34 | }
35 |
36 | /**
37 | * Destroy plugin.
38 | */
39 | function destroy() {
40 | if (options.enableForCells) _grid.onMouseEnter.unsubscribe(handleMouseEnter);
41 | if (options.enableForHeaderCells) _grid.onHeaderMouseEnter.unsubscribe(handleHeaderMouseEnter);
42 | }
43 |
44 | /**
45 | * Handle mouse entering grid cell to add/remove tooltip.
46 | * @param {jQuery.Event} e - The event
47 | */
48 | function handleMouseEnter(e) {
49 | var cell = _grid.getCellFromEvent(e);
50 | if (cell) {
51 | var $node = $(_grid.getCellNode(cell.row, cell.cell));
52 | var text;
53 | if (!$node.attr("title") || options.replaceExisting) {
54 | if ($node.innerWidth() < $node[0].scrollWidth) {
55 | text = $.trim($node.text());
56 | if (options.maxToolTipLength && text.length > options.maxToolTipLength) {
57 | text = text.substr(0, options.maxToolTipLength - 3) + "...";
58 | }
59 | } else {
60 | text = "";
61 | }
62 | $node.attr("title", text);
63 | }
64 | $node = null;
65 | }
66 | }
67 |
68 | /**
69 | * Handle mouse entering header cell to add/remove tooltip.
70 | * @param {jQuery.Event} e - The event
71 | * @param {object} args.column - The column definition
72 | */
73 | function handleHeaderMouseEnter(e, args) {
74 | var column = args.column,
75 | $node = $(e.target).closest(".slick-header-column");
76 | if (column && !column.toolTip) {
77 | $node.attr("title", ($node.innerWidth() < $node[0].scrollWidth) ? column.name : "");
78 | }
79 | $node = null;
80 | }
81 |
82 | // Public API
83 | $.extend(this, {
84 | "init": init,
85 | "destroy": destroy,
86 | "pluginName": "AutoTooltips"
87 | });
88 | }
89 | })(jQuery);
--------------------------------------------------------------------------------
/lib/fancytree_dist/skin-lion/ui.fancytree.less:
--------------------------------------------------------------------------------
1 | /*!
2 | * Fancytree "Lion" skin.
3 | *
4 | * DON'T EDIT THE CSS FILE DIRECTLY, since it is automatically generated from
5 | * the LESS templates.
6 | */
7 |
8 | /*
9 | Lion colors:
10 | gray highlight bar: #D4D4D4
11 | blue highlight-bar and -border #3875D7
12 |
13 | */
14 | // Import common styles
15 | @import "../skin-common.less";
16 |
17 |
18 | /*******************************************************************************
19 | * Styles specific to this skin.
20 | *
21 | * This section is automatically generated from the `ui-fancytree.less` template.
22 | ******************************************************************************/
23 |
24 | // Override the variable after the import.
25 | // NOTE: Variables are always resolved as the last definition, even if it is
26 | // after where it is used.
27 | @fancy-use-sprites: true; // false: suppress all background images (i.e. icons)
28 |
29 | @fancy-icon-width: 16px;
30 | @fancy-icon-height: 16px;
31 | @fancy-line-height: 16px;
32 | @fancy-icon-spacing: 3px;
33 |
34 | // We need to define this variable here (not in skin-common.less) to make it
35 | // work with grunt and webpack:
36 | @fancy-image-prefix: "./skin-lion/";
37 |
38 | // Use 'data-uri(...)' to embed the image into CSS instead of linking to 'loading.gif':
39 | // @fancy-loading-url: data-uri("@{fancy-image-prefix}loading.gif");
40 | // Set to `true` to use `data-uri(...)` which will embed icons.gif into CSS
41 | // instead of linking to that file:
42 | // @fancy-inline-sprites: true;
43 |
44 |
45 | /*******************************************************************************
46 | * Node titles
47 | */
48 | span.fancytree-title {
49 | border: 1px solid transparent; // reserve some space for status borders
50 | border-radius: 0;
51 | }
52 | span.fancytree-focused span.fancytree-title {
53 | outline: 1px dotted black;
54 | }
55 | span.fancytree-selected span.fancytree-title,
56 | span.fancytree-active span.fancytree-title {
57 | background-color: #D4D4D4; // gray
58 | }
59 | span.fancytree-selected span.fancytree-title {
60 | font-style: italic;
61 | }
62 | .fancytree-treefocus span.fancytree-selected span.fancytree-title,
63 | .fancytree-treefocus span.fancytree-active span.fancytree-title {
64 | color: white;
65 | background-color: #3875D7; // blue
66 | }
67 |
68 | /*******************************************************************************
69 | * 'table' extension
70 | */
71 | table.fancytree-ext-table {
72 | border-collapse: collapse;
73 | tbody {
74 | tr.fancytree-focused {
75 | background-color: #99DEFD;
76 | }
77 | tr.fancytree-active {
78 | background-color: royalblue;
79 | }
80 | tr.fancytree-selected {
81 | background-color: #99DEFD;
82 | }
83 | }
84 | }
85 |
86 | /*******************************************************************************
87 | * 'columnview' extension
88 | */
89 |
90 | table.fancytree-ext-columnview tbody tr td {
91 | border: 1px solid gray;
92 | }
93 | table.fancytree-ext-columnview span.fancytree-node.fancytree-expanded {
94 | background-color: #ccc;
95 | }
96 | table.fancytree-ext-columnview span.fancytree-node.fancytree-active {
97 | background-color: royalblue;
98 | }
99 |
--------------------------------------------------------------------------------
/lib/Slickgrid/slick-default-theme.css:
--------------------------------------------------------------------------------
1 | /*
2 | IMPORTANT:
3 | In order to preserve the uniform grid appearance, all cell styles need to have padding, margin and border sizes.
4 | No built-in (selected, editable, highlight, flashing, invalid, loading, :focus) or user-specified CSS
5 | classes should alter those!
6 | */
7 |
8 | .slick-header-columns {
9 | background: url('images/header-columns-bg.gif') repeat-x center bottom;
10 | border-bottom: 1px solid silver;
11 | }
12 |
13 | .slick-header-column {
14 | background: url('images/header-columns-bg.gif') repeat-x center bottom;
15 | border-right: 1px solid silver;
16 | }
17 |
18 | .slick-header-column:hover, .slick-header-column-active {
19 | background: white url('images/header-columns-over-bg.gif') repeat-x center bottom;
20 | }
21 |
22 | .slick-headerrow {
23 | background: #fafafa;
24 | }
25 |
26 | .slick-headerrow-column {
27 | background: #fafafa;
28 | border-bottom: 0;
29 | height: 100%;
30 | }
31 |
32 | .slick-preheader-panel {
33 | border: 1px solid #d3d3d3;
34 | }
35 |
36 | .slick-row.ui-state-active {
37 | background: #F5F7D7;
38 | }
39 |
40 | .slick-row {
41 | position: absolute;
42 | background: white;
43 | border: 0px;
44 | /* line-height: 20px; */
45 | }
46 |
47 | .slick-row.selected {
48 | z-index: 10;
49 | background: #DFE8F6;
50 | }
51 |
52 | .slick-cell {
53 | padding-left: 4px;
54 | padding-right: 4px;
55 | }
56 |
57 | .slick-group {
58 | border-bottom: 2px solid silver;
59 | }
60 |
61 | .slick-group-toggle {
62 | width: 9px;
63 | height: 9px;
64 | margin-right: 5px;
65 | }
66 |
67 | .slick-group-toggle.expanded {
68 | background: url(images/collapse.gif) no-repeat center center;
69 | }
70 |
71 | .slick-group-toggle.collapsed {
72 | background: url(images/expand.gif) no-repeat center center;
73 | }
74 |
75 | .slick-group-totals {
76 | color: gray;
77 | background: white;
78 | }
79 |
80 | .slick-group-select-checkbox {
81 | width: 13px;
82 | height: 13px;
83 | margin: 3px 10px 0 0;
84 | display: inline-block;
85 | }
86 | .slick-group-select-checkbox.checked {
87 | background: url(images/GrpCheckboxY.png) no-repeat center center;
88 | }
89 |
90 | .slick-group-select-checkbox.unchecked {
91 | background: url(images/GrpCheckboxN.png) no-repeat center center;
92 | }
93 |
94 | .slick-cell.selected {
95 | background-color: beige;
96 | }
97 |
98 | .slick-cell.active {
99 | border-color: gray;
100 | border-style: solid;
101 | }
102 |
103 | .slick-sortable-placeholder {
104 | background: #d9d9d9 !important;
105 | }
106 |
107 | .slick-row.odd {
108 | background: #fafafa;
109 | }
110 |
111 | .slick-row.ui-state-active {
112 | background: #F5F7D7;
113 | }
114 |
115 | .slick-row.loading {
116 | opacity: 0.5;
117 | filter: alpha(opacity = 50);
118 | }
119 |
120 | .slick-cell.invalid {
121 | border-color: red;
122 | -moz-animation-duration: 0.2s;
123 | -webkit-animation-duration: 0.2s;
124 | -moz-animation-name: slickgrid-invalid-hilite;
125 | -webkit-animation-name: slickgrid-invalid-hilite;
126 | }
127 |
128 | @-moz-keyframes slickgrid-invalid-hilite {
129 | from { box-shadow: 0 0 6px red; }
130 | to { box-shadow: none; }
131 | }
132 |
133 | @-webkit-keyframes slickgrid-invalid-hilite {
134 | from { box-shadow: 0 0 6px red; }
135 | to { box-shadow: none; }
136 | }
--------------------------------------------------------------------------------
/css/styles.less:
--------------------------------------------------------------------------------
1 | @import "configuration.less";
2 |
3 |
4 | * {
5 | -webkit-box-sizing: border-box;
6 | -moz-box-sizing: border-box;
7 | box-sizing: border-box;
8 | }
9 |
10 | body {
11 | overflow: hidden;
12 | font-family: 'Lato', sans-serif !important;
13 | font-weight: 300;
14 | padding: 0px;
15 | margin: 0px;
16 | border: 0px;
17 | background-color: #f9f9f9;
18 | color: #212121;
19 | -webkit-font-smoothing: antialiased;
20 | overflow: hidden;
21 | -webkit-text-size-adjust: 100%;
22 | text-rendering: optimizeLegibility;
23 | }
24 |
25 | #canvas {
26 | padding: 0px;
27 | margin: 0px;
28 | border: 0px;
29 | position: absolute;
30 | top: @toolbarHeight;
31 | right: @propertiesWidth;
32 | left: 290px;
33 | bottom: 0px;
34 | overflow: scroll;
35 | background-color: transparent;
36 | }
37 |
38 | #toolbar {
39 | position: absolute;
40 | margin: 0px;
41 | padding-top: 10px;
42 | padding-left: 20px;
43 | top: 0px;
44 | left: 160px;
45 | height: @toolbarHeight;
46 | right: 0px;
47 | overflow: hidden;
48 | z-index: 1000;
49 | background-color: #3f51b5;
50 | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
51 | }
52 |
53 | #toolbar_hint {
54 | position: absolute;
55 | top: 19px;
56 | height: @toolbarHeight;
57 | right: 40px;
58 | color: white;
59 | opacity:0.5;
60 | }
61 |
62 | #toolbar_hint a{
63 | color: white;
64 | }
65 | #propertyPane {
66 | border-right: 1px solid #e0e0e0;
67 | bottom: 0;
68 | background: #fff;
69 | color: #333;
70 | display: block;
71 | font-family: 'RobotoDraft', sans-serif;
72 | position: fixed;
73 | right: 0px;
74 | top: @toolbarHeight;
75 | width: @propertiesWidth;
76 | z-index: 4;
77 | }
78 |
79 | #propertyHeader{
80 | color: #3f51b5;
81 | font-size: 24px;
82 | font-weight: 400;
83 | line-height: 32px;
84 | overflow: hidden;
85 | padding: 10px;
86 | font-family: "RobotoDraft",sans-serif;
87 | margin: 0;
88 | margin-bottom: 30px;
89 | text-rendering: optimizelegibility;
90 | }
91 |
92 | #logo {
93 | display: block;
94 | margin: auto;
95 | padding: 12px 24px 10px 24px;
96 | position: fixed;
97 | left: 0;
98 | top: 0;
99 | height: @toolbarHeight;
100 | width: 160px;
101 | font-size: 30px;
102 | font-weight: 100;
103 | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
104 | z-index: 1000;
105 |
106 | }
107 |
108 | .panel{
109 | border-left: 5px solid #3f51b5;
110 | padding-left:15px;
111 | margin-bottom:30px;
112 | }
113 |
114 | .panel-heading{
115 | font-size: 15px;
116 | line-height: 32px;
117 | color: #212121;
118 | font-family: "RobotoDraft",sans-serif;
119 | font-weight: bold;
120 | margin: 0;
121 | text-rendering: optimizelegibility;
122 | }
123 |
124 | input.form-control{
125 | border: 1px solid gray;
126 | border-radius: 6px;
127 | height: 30px;
128 | margin-left: 10px;
129 | margin-top: 5px;
130 | padding-left: 5px;
131 | }
132 |
133 |
134 | .gray:active {
135 | border: 1px solid #c6c6c4;
136 | color: #222;
137 | -webkit-box-shadow: inset 0 0 2px 4px #f1f1f1, 0 1px 0 0 #eeeeee;
138 | -moz-box-shadow: inset 0 0 2px 4px #f1f1f1, 0 1px 0 0 #eeeeee;
139 | box-shadow: inset 0 0 2px 4px #f1f1f1, 0 1px 0 0 #eeeeee;
140 | }
141 |
142 | .disabled {
143 | cursor: default !important;
144 | color: #888 !important;
145 | opacity: 0.8;
146 | }
--------------------------------------------------------------------------------
/lib/fancytree_dist/skin-vista/ui.fancytree.less:
--------------------------------------------------------------------------------
1 | /*!
2 | * Fancytree "Vista" skin.
3 | *
4 | * DON'T EDIT THE CSS FILE DIRECTLY, since it is automatically generated from
5 | * the LESS templates.
6 | */
7 |
8 | /*
9 | both:
10 | unselected background: #FCFCFC 'nearly white'
11 | hover bar (unselected, inactive): #F8FCFE..#EFF9FE (border: #D8F0FA) 'very light blue'
12 | active node: #F6FBFD..#D5EFFC (border: #99DEFD) 'light blue'
13 | active node with hover: #F2F9FD..#C4E8FA (border: #B6E6FB)
14 |
15 | Tree view:
16 | active node, tree inactive: #FAFAFB..#E5E5E5 (border: #D9D9D9) 'light gray, selected, but tree not active'
17 |
18 | List view:
19 | selected bar: --> active bar
20 | focus bar: active + border 1px dotted #090402 (inside the blue border)
21 |
22 | table left/right border: #EDEDED 'light gray'
23 | */
24 |
25 | // Import common styles
26 | @import "../skin-common.less";
27 |
28 |
29 | /*******************************************************************************
30 | * Styles specific to this skin.
31 | *
32 | * This section is automatically generated from the `ui-fancytree.less` template.
33 | ******************************************************************************/
34 |
35 |
36 | // Override the variable after the import.
37 | // NOTE: Variables are always resolved as the last definition, even if it is
38 | // after where it is used.
39 | @fancy-use-sprites: true; // false: suppress all background images (i.e. icons)
40 |
41 | @fancy-icon-width: 16px;
42 | @fancy-icon-height: 16px;
43 | @fancy-line-height: 16px;
44 | @fancy-icon-spacing: 3px;
45 |
46 | // We need to define this variable here (not in skin-common.less) to make it
47 | // work with grunt and webpack:
48 | @fancy-image-prefix: "./skin-vista/";
49 |
50 | // Use 'data-uri(...)' to embed the image into CSS instead of linking to 'loading.gif':
51 | // @fancy-loading-url: data-uri("@{fancy-image-prefix}loading.gif");
52 | // Set to `true` to use `data-uri(...)` which will embed icons.gif into CSS
53 | // instead of linking to that file:
54 | // @fancy-inline-sprites: true;
55 |
56 |
57 | /*******************************************************************************
58 | * Node titles
59 | */
60 | span.fancytree-title {
61 | border: @fancy-node-border-width solid transparent; // avoid jumping, when a border is added on hover
62 | }
63 | span.fancytree-title:hover {
64 | background-color: #F2F7FD; // light blue
65 | border-color: #B8D6FB; // darker light blue
66 | }
67 | .fancytree-folder span.fancytree-title {
68 | // font-weight: bold;
69 | }
70 | span.fancytree-focused span.fancytree-title {
71 | background-color: #EFEBDE; // gray
72 | outline: 1px dotted gray;
73 | }
74 | span.fancytree-has-children span.fancytree-title {
75 | // font-style: oblique;
76 | }
77 | span.fancytree-expanded span.fancytree-title {
78 | }
79 | span.fancytree-selected span.fancytree-title {
80 | font-style: italic;
81 | }
82 | span.fancytree-active span.fancytree-title {
83 | border: 1px solid #99DEFD;
84 | background-color: #D8F0FA;
85 | }
86 |
87 | /*******************************************************************************
88 | * 'table' extension
89 | */
90 |
91 | table.fancytree-ext-table {
92 | border-collapse: collapse;
93 | tbody tr.fancytree-focused {
94 | background-color: #99DEFD;
95 | }
96 | tbody tr.fancytree-active {
97 | background-color: royalblue;
98 | }
99 | tbody tr.fancytree-selected {
100 | background-color: #99FDDE;
101 | }
102 | }
103 |
104 | /*******************************************************************************
105 | * 'columnview' extension
106 | */
107 |
108 | table.fancytree-ext-columnview {
109 | span.fancytree-node.fancytree-expanded {
110 | background-color: #ccc;
111 | }
112 | span.fancytree-node.fancytree-active {
113 | background-color: royalblue;
114 | }
115 | }
116 |
--------------------------------------------------------------------------------
/css/slickgrid.css:
--------------------------------------------------------------------------------
1 | /*
2 | IMPORTANT:
3 | In order to preserve the uniform grid appearance, all cell styles need to have padding, margin and border sizes.
4 | No built-in (selected, editable, highlight, flashing, invalid, loading, :focus) or user-specified CSS
5 | classes should alter those!
6 | */
7 |
8 | .slick-header.ui-state-default, .slick-headerrow.ui-state-default {
9 | width: 100%;
10 | overflow: hidden;
11 | border-left: 0px;
12 | }
13 |
14 | .slick-header-columns, .slick-headerrow-columns {
15 | position: relative;
16 | white-space: nowrap;
17 | cursor: default;
18 | overflow: hidden;
19 | }
20 |
21 | .slick-header-column.ui-state-default {
22 | position: relative;
23 | display: inline-block;
24 | overflow: hidden;
25 | -o-text-overflow: ellipsis;
26 | text-overflow: ellipsis;
27 | height: 16px;
28 | line-height: 16px;
29 | margin: 0;
30 | padding: 4px;
31 | border-right: 1px solid silver;
32 | border-left: 0px;
33 | border-top: 0px;
34 | border-bottom: 0px;
35 | float: left;
36 | }
37 |
38 | .slick-headerrow-column.ui-state-default {
39 | padding: 4px;
40 | }
41 |
42 | .slick-header-column-sorted {
43 | font-style: italic;
44 | }
45 |
46 | .slick-sort-indicator {
47 | display: inline-block;
48 | width: 8px;
49 | height: 5px;
50 | margin-left: 4px;
51 | margin-top: 6px;
52 | float: left;
53 | }
54 |
55 | .slick-sort-indicator-desc {
56 | background: url(images/sort-desc.gif);
57 | }
58 |
59 | .slick-sort-indicator-asc {
60 | background: url(images/sort-asc.gif);
61 | }
62 |
63 | .slick-resizable-handle {
64 | position: absolute;
65 | font-size: 0.1px;
66 | display: block;
67 | cursor: col-resize;
68 | width: 4px;
69 | right: 0px;
70 | top: 0;
71 | height: 100%;
72 | }
73 |
74 | .slick-sortable-placeholder {
75 | background: silver;
76 | }
77 |
78 | .grid-canvas {
79 | position: relative;
80 | outline: 0;
81 | }
82 |
83 | .slick-row.ui-widget-content, .slick-row.ui-state-active {
84 | position: absolute;
85 | border: 0px;
86 | width: 100%;
87 | }
88 |
89 | .slick-cell, .slick-headerrow-column {
90 | position: absolute;
91 | border: 1px solid transparent;
92 | border-right: 1px dotted silver;
93 | border-bottom-color: silver;
94 | overflow: hidden;
95 | -o-text-overflow: ellipsis;
96 | text-overflow: ellipsis;
97 | vertical-align: middle;
98 | z-index: 1;
99 | padding: 1px 2px 2px 1px;
100 | margin: 0;
101 | white-space: nowrap;
102 | cursor: default;
103 | }
104 |
105 | .slick-group {
106 | }
107 |
108 | .slick-group-toggle {
109 | display: inline-block;
110 | }
111 |
112 | .slick-cell.highlighted {
113 | background: lightskyblue;
114 | background: rgba(0, 0, 255, 0.2);
115 | -webkit-transition: all 0.5s;
116 | -moz-transition: all 0.5s;
117 | -o-transition: all 0.5s;
118 | transition: all 0.5s;
119 | }
120 |
121 | .slick-cell.flashing {
122 | border: 1px solid red !important;
123 | }
124 |
125 | .slick-cell.editable {
126 | z-index: 11;
127 | overflow: visible;
128 | background: white;
129 | border-color: black;
130 | border-style: solid;
131 | }
132 |
133 | .slick-cell:focus {
134 | outline: none;
135 | }
136 |
137 | .slick-reorder-proxy {
138 | display: inline-block;
139 | background: blue;
140 | opacity: 0.15;
141 | filter: alpha(opacity = 15);
142 | cursor: move;
143 | }
144 |
145 | .slick-reorder-guide {
146 | display: inline-block;
147 | height: 2px;
148 | background: blue;
149 | opacity: 0.7;
150 | filter: alpha(opacity = 70);
151 | }
152 |
153 | .slick-selection {
154 | z-index: 10;
155 | position: absolute;
156 | border: 2px dashed black;
157 | }
158 |
--------------------------------------------------------------------------------
/lib/fancytree_dist/modules/jquery.fancytree.multi.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * jquery.fancytree.multi.js
3 | *
4 | * Allow multiple selection of nodes by mouse or keyboard.
5 | * (Extension module for jquery.fancytree.js: https://github.com/mar10/fancytree/)
6 | *
7 | * Copyright (c) 2008-2020, Martin Wendt (https://wwWendt.de)
8 | *
9 | * Released under the MIT license
10 | * https://github.com/mar10/fancytree/wiki/LicenseInfo
11 | *
12 | * @version 2.37.0
13 | * @date 2020-09-11T18:58:08Z
14 | */
15 |
16 | (function(factory) {
17 | if (typeof define === "function" && define.amd) {
18 | // AMD. Register as an anonymous module.
19 | define(["jquery", "./jquery.fancytree"], factory);
20 | } else if (typeof module === "object" && module.exports) {
21 | // Node/CommonJS
22 | require("./jquery.fancytree");
23 | module.exports = factory(require("jquery"));
24 | } else {
25 | // Browser globals
26 | factory(jQuery);
27 | }
28 | })(function($) {
29 | "use strict";
30 |
31 | /*******************************************************************************
32 | * Private functions and variables
33 | */
34 |
35 | // var isMac = /Mac/.test(navigator.platform);
36 |
37 | /*******************************************************************************
38 | * Extension code
39 | */
40 | $.ui.fancytree.registerExtension({
41 | name: "multi",
42 | version: "2.37.0",
43 | // Default options for this extension.
44 | options: {
45 | allowNoSelect: false, //
46 | mode: "sameParent", //
47 | // Events:
48 | // beforeSelect: $.noop // Return false to prevent cancel/save (data.input is available)
49 | },
50 |
51 | treeInit: function(ctx) {
52 | this._superApply(arguments);
53 | this.$container.addClass("fancytree-ext-multi");
54 | if (ctx.options.selectMode === 1) {
55 | $.error(
56 | "Fancytree ext-multi: selectMode: 1 (single) is not compatible."
57 | );
58 | }
59 | },
60 | nodeClick: function(ctx) {
61 | var //pluginOpts = ctx.options.multi,
62 | tree = ctx.tree,
63 | node = ctx.node,
64 | activeNode = tree.getActiveNode() || tree.getFirstChild(),
65 | isCbClick = ctx.targetType === "checkbox",
66 | isExpanderClick = ctx.targetType === "expander",
67 | eventStr = $.ui.fancytree.eventToString(ctx.originalEvent);
68 |
69 | switch (eventStr) {
70 | case "click":
71 | if (isExpanderClick) {
72 | break;
73 | } // Default handler will expand/collapse
74 | if (!isCbClick) {
75 | tree.selectAll(false);
76 | // Select clicked node (radio-button mode)
77 | node.setSelected();
78 | }
79 | // Default handler will toggle checkbox clicks and activate
80 | break;
81 | case "shift+click":
82 | // node.debug("click")
83 | tree.visitRows(
84 | function(n) {
85 | // n.debug("click2", n===node, node)
86 | n.setSelected();
87 | if (n === node) {
88 | return false;
89 | }
90 | },
91 | {
92 | start: activeNode,
93 | reverse: activeNode.isBelowOf(node),
94 | }
95 | );
96 | break;
97 | case "ctrl+click":
98 | case "meta+click": // Mac: [Command]
99 | node.toggleSelected();
100 | return;
101 | }
102 | return this._superApply(arguments);
103 | },
104 | nodeKeydown: function(ctx) {
105 | var tree = ctx.tree,
106 | node = ctx.node,
107 | event = ctx.originalEvent,
108 | eventStr = $.ui.fancytree.eventToString(event);
109 |
110 | switch (eventStr) {
111 | case "up":
112 | case "down":
113 | tree.selectAll(false);
114 | node.navigate(event.which, true);
115 | tree.getActiveNode().setSelected();
116 | break;
117 | case "shift+up":
118 | case "shift+down":
119 | node.navigate(event.which, true);
120 | tree.getActiveNode().setSelected();
121 | break;
122 | }
123 | return this._superApply(arguments);
124 | },
125 | });
126 | // Value returned by `require('jquery.fancytree..')`
127 | return $.ui.fancytree;
128 | }); // End of closure
129 |
--------------------------------------------------------------------------------
/lib/fancytree_dist/skin-awesome/ui.fancytree.less:
--------------------------------------------------------------------------------
1 | /*!
2 | * Fancytree "awesome" skin.
3 | *
4 | * DON'T EDIT THE CSS FILE DIRECTLY, since it is automatically generated from
5 | * the LESS templates.
6 | */
7 |
8 | // Import common styles
9 | @import "../skin-common.less";
10 |
11 | // We need to define this variable here (not in skin-common.less) to make it
12 | // work with grunt and webpack:
13 | @fancy-image-prefix: "./skin-awesome/";
14 |
15 |
16 | /*******************************************************************************
17 | * Styles specific to this skin.
18 | *
19 | * This section is automatically generated from the `ui-fancytree.less` template.
20 | ******************************************************************************/
21 |
22 | @fancy-use-sprites: false; // false: suppress all background images (i.e. icons)
23 | @fancy-loading-url: none;
24 |
25 | @fancy-cst-size: 10pt;
26 |
27 | @fancy-level-indent: @fancy-cst-size; //@fancy-cst-size;
28 | @fancy-line-height: @fancy-cst-size; // height of a nodes selection bar including borders
29 | @fancy-node-v-spacing: 1px; // gap between two node borders
30 | @fancy-icon-width: @fancy-cst-size;
31 | @fancy-icon-height: @fancy-cst-size;
32 | @fancy-icon-spacing: 3px; // margin between icon/icon or icon/title
33 | @fancy-icon-ofs-top: 0px; // extra vertical offset for expander, checkbox and icon
34 | @fancy-title-ofs-top: 0px; // extra vertical offset for title
35 | @fancy-node-border-width: 1px;
36 | @fancy-node-border-radius: 0px;
37 | @fancy-node-outline-width: 1px;
38 |
39 | // @fancy-loading-url: data-uri("@{fancy-image-prefix}loading.gif");
40 |
41 | // Set to `true` to use `data-uri(...)` instead of a `url(...)` link:
42 | @fancy-inline-sprites: false;
43 |
44 | @fancy-font-size: @fancy-cst-size;
45 | @fancy-font-family: tahoma, arial, helvetica;
46 | @fancy-font-color: #000;
47 | @fancy-font-color-dimm: silver;
48 | @fancy-font-error-color: red;
49 |
50 |
51 | ul.fancytree-container ul
52 | {
53 | padding: 0.3em 0 0 1em;
54 | margin: 0;
55 | }
56 |
57 |
58 | // The standard CSS assumes span.icon, but Fontawesome may use SVG or SPAN
59 | .fancytree-expander,
60 | .fancytree-checkbox,
61 | .fancytree-icon {
62 | min-width: @fancy-icon-width;
63 | text-align: center;
64 | }
65 | svg.fancytree-checkbox, // span... is already defined in skin-common-less
66 | svg.fancytree-icon {
67 | padding-left: @fancy-icon-spacing;
68 | }
69 |
70 | /*******************************************************************************
71 | * Node titles
72 | */
73 | span.fancytree-title {
74 | border: 1px solid transparent; // reserve some space for status borders
75 | border-radius: 0;
76 | }
77 | span.fancytree-focused span.fancytree-title {
78 | outline: 1px dotted black;
79 | }
80 | // span.fancytree-selected span.fancytree-title,
81 | span.fancytree-active span.fancytree-title {
82 | background-color: #D4D4D4; // gray
83 | }
84 | // span.fancytree-selected span.fancytree-title {
85 | // font-style: italic;
86 | // }
87 | // .fancytree-treefocus span.fancytree-selected span.fancytree-title,
88 | .fancytree-treefocus span.fancytree-active span.fancytree-title {
89 | color: white;
90 | background-color: #3875D7; // blue
91 | }
92 |
93 | // .fancytree-treefocus span.fancytree-selected span.fancytree-title{
94 | // color: white;
95 | // background-color: #99DEFD; // blue
96 | // }
97 |
98 | /*******************************************************************************
99 | * 'table' extension
100 | */
101 | table.fancytree-ext-table {
102 | border-collapse: collapse;
103 | tbody {
104 | tr.fancytree-focused {
105 | background-color: #99DEFD;
106 | }
107 | tr.fancytree-active {
108 | background-color: royalblue;
109 | }
110 | // tr.fancytree-selected {
111 | // background-color: #99DEFD;
112 | // }
113 | }
114 | }
115 |
116 | /*******************************************************************************
117 | * 'columnview' extension
118 | */
119 |
120 | table.fancytree-ext-columnview tbody tr td {
121 | border: 1px solid gray;
122 | }
123 | table.fancytree-ext-columnview span.fancytree-node.fancytree-expanded {
124 | background-color: #ccc;
125 | }
126 | table.fancytree-ext-columnview span.fancytree-node.fancytree-active {
127 | background-color: royalblue;
128 | }
129 |
--------------------------------------------------------------------------------
/lib/Class.exec.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Simple JavaScript Inheritance
3 | * By John Resig http://ejohn.org/
4 | * MIT Licensed.
5 | *
6 | ******************************************************
7 | * Example Usage
8 | ******************************************************
9 | var Person = Class.extend({
10 | init: function(isDancing){
11 | this.dancing = isDancing;
12 | },
13 | dance: function(){
14 | return this.dancing;
15 | }
16 | });
17 |
18 | var Ninja = Person.extend({
19 | init: function(){
20 | this._super( false );
21 | },
22 | dance: function(){
23 | // Call the inherited version of dance()
24 | return this._super();
25 | },
26 | swingSword: function(){
27 | return true;
28 | }
29 | });
30 |
31 | var p = new Person(true);
32 | p.dance(); // => true
33 |
34 | var n = new Ninja();
35 | n.dance(); // => false
36 | n.swingSword(); // => true
37 |
38 | // Should all be true
39 | p instanceof Person && p instanceof Class &&
40 | n instanceof Ninja && n instanceof Person && n instanceof Class
41 |
42 | ******************************************************
43 | */
44 |
45 | // Inspired by base2 and Prototype
46 | (function(){
47 | var fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;
48 |
49 | // The base Class implementation (does nothing)
50 | this.Class = function(){};
51 |
52 |
53 | // Create a new Class that inherits from this class
54 | Class.extend = function(prop) {
55 | var _super = this.prototype;
56 |
57 | // Instantiate a base class (but only create the instance,
58 | // don't run the init constructor)
59 | initializing = true;
60 | var prototype = new this();
61 | initializing = false;
62 |
63 |
64 | // Copy the properties over onto the new prototype
65 | for (var name in prop) {
66 | // Check if we're overwriting an existing function
67 | prototype[name] = typeof prop[name] == "function" &&
68 | typeof _super[name] == "function" && fnTest.test(prop[name]) ?
69 | (function(name, fn){
70 | return function() {
71 | var tmp = this._super;
72 |
73 | // Add a new ._super() method that is the same method
74 | // but on the super-class
75 | this._super = _super[name];
76 |
77 | // The method only need to be bound temporarily, so we
78 | // remove it when we're done executing
79 | var ret = fn.apply(this, arguments);
80 | this._super = tmp;
81 |
82 | return ret;
83 | };
84 | })(name, prop[name]) :
85 | prop[name];
86 | }
87 |
88 | // The dummy class constructor
89 | function Class() {
90 | // All construction is actually done in the init method
91 | if ( !initializing && this.init )
92 | this.init.apply(this, arguments);
93 | }
94 |
95 | // Populate our constructed prototype object
96 | Class.prototype = prototype;
97 |
98 | // Enforce the constructor to be what we expect
99 | Class.prototype.constructor = Class;
100 |
101 | // And make this class extendable
102 | Class.extend = arguments.callee;
103 |
104 | // EXTENSION BY Draw2D.org to inject methods into an existing class to provide plugins or
105 | // bugfixes for further releases
106 | //
107 | Class.inject = function (prop) {
108 | var proto = this.prototype;
109 | var parent = {};
110 | for (var name in prop) {
111 | if (typeof (prop[name]) == "function" && typeof (proto[name]) == "function" && fnTest.test(prop[name])) {
112 | parent[name] = proto[name];
113 | proto[name] = (function (name, fn) {
114 | return function () {
115 | var tmp = this.parent;
116 | this.parent = parent[name];
117 | var ret = fn.apply(this, arguments);
118 | this.parent = tmp;
119 | return ret;
120 | };
121 | })(name, prop[name]);
122 | } else {
123 | proto[name] = prop[name];
124 | }
125 | }
126 | };
127 |
128 | return Class;
129 | };
130 | })();
131 |
132 |
--------------------------------------------------------------------------------
/lib/fancytree_dist/skin-material/ui.fancytree.less:
--------------------------------------------------------------------------------
1 | /*!
2 | * Fancytree "material" skin.
3 | *
4 | * DON'T EDIT THE CSS FILE DIRECTLY, since it is automatically generated from
5 | * the LESS templates.
6 | */
7 |
8 | // Import common styles
9 | @import "../skin-common.less";
10 |
11 | // We need to define this variable here (not in skin-common.less) to make it
12 | // work with grunt and webpack:
13 | @fancy-image-prefix: "./skin-material/";
14 |
15 | /*******************************************************************************
16 | * Styles specific to this skin.
17 | *
18 | * This section is automatically generated from the `ui-fancytree.less` template.
19 | ******************************************************************************/
20 | /*
21 | https://material.io/guidelines/components/data-tables.html#data-tables-structure
22 | */
23 | // local vars
24 | @fancy-cst-size: 24px;
25 | @fancy-cst-primary-color: #3f51b5; // primary app color (of indigo-pink)
26 | @fancy-cst-secondary-color: #ff4081; // secondary app color (of indigo-pink): checkbox
27 | @fancy-cst-black-87: #212121; // 87% black: table content
28 | @fancy-cst-black-54: #757575; // 54% black: column headers
29 | @fancy-cst-select-bg: #f5f5f5; // Grey 100: selected row backround
30 | @fancy-cst-hover-bg: #eeeeee; // Grey 200: hovered row backround
31 |
32 | // Override the variable after the import.
33 | // NOTE: Variables are always resolved as the last definition, even if it is
34 | // after where it is used.
35 | @fancy-use-sprites: false; // false: suppress all background images (i.e. icons)
36 | @fancy-loading-url: none;
37 |
38 | @fancy-level-indent: @fancy-cst-size; //@fancy-cst-size;
39 | @fancy-line-height: @fancy-cst-size; // height of a nodes selection bar including borders
40 | @fancy-node-v-spacing: 1px; // gap between two node borders
41 | @fancy-icon-width: @fancy-cst-size;
42 | @fancy-icon-height: @fancy-cst-size;
43 | @fancy-icon-spacing: 3px; // margin between icon/icon or icon/title
44 | @fancy-icon-ofs-top: 0px; // extra vertical offset for expander, checkbox and icon
45 | @fancy-title-ofs-top: 0px; // extra vertical offset for title
46 | @fancy-node-border-width: 1px;
47 | @fancy-node-border-radius: 0px;
48 | @fancy-node-outline-width: 1px;
49 |
50 | // @fancy-loading-url: data-uri("@{fancy-image-prefix}loading.gif");
51 |
52 | // Set to `true` to use `data-uri(...)` instead of a `url(...)` link:
53 | @fancy-inline-sprites: false;
54 |
55 | @fancy-font-size: @fancy-cst-size;
56 | @fancy-font-family: "Roboto Regular", tahoma, arial, helvetica;
57 | @fancy-font-color: @fancy-cst-black-87;
58 | @fancy-font-color-dimm: silver;
59 | @fancy-font-error-color: red;
60 |
61 |
62 | ul.fancytree-container ul
63 | {
64 | padding: 0.3em 0 0 1em;
65 | margin: 0;
66 | font-size: @fancy-cst-size;
67 | color: @fancy-cst-black-87;
68 | }
69 |
70 | ul.fancytree-container span.fancytree-icon.material-icons
71 | {
72 | // font-size: @fancy-cst-size;
73 | // color: @fancy-cst-black-87;
74 | }
75 |
76 |
77 | /*******************************************************************************
78 | * Node titles
79 | */
80 |
81 | .fancytree-plain {
82 | span.fancytree-selected span.fancytree-title {
83 | background-color: @fancy-cst-select-bg;
84 | }
85 | span.fancytree-selected span.fancytree-title:hover,
86 | span.fancytree-active span.fancytree-title {
87 | background-color: @fancy-cst-hover-bg;
88 | }
89 | }
90 |
91 | .fancytree-container span.fancytree-checkbox {
92 | color: @fancy-cst-secondary-color;
93 | }
94 |
95 | /*******************************************************************************
96 | * 'table' extension
97 | */
98 | table.fancytree-ext-table {
99 | border-collapse: collapse;
100 | tbody {
101 | tr.fancytree-focused, tr.fancytree-selected {
102 | background-color: @fancy-cst-select-bg;
103 | }
104 | tr.fancytree-active, tr:hover {
105 | background-color: @fancy-cst-hover-bg;
106 | }
107 | }
108 | }
109 |
110 | /*******************************************************************************
111 | * 'columnview' extension
112 | */
113 |
114 | table.fancytree-ext-columnview tbody tr td {
115 | border: 1px solid gray;
116 | }
117 | table.fancytree-ext-columnview span.fancytree-node.fancytree-expanded {
118 | background-color: #ccc;
119 | }
120 | table.fancytree-ext-columnview span.fancytree-node.fancytree-active {
121 | background-color: royalblue;
122 | }
123 |
--------------------------------------------------------------------------------
/lib/fancytree_dist/skin-xp/ui.fancytree.less:
--------------------------------------------------------------------------------
1 | /*!
2 | * Fancytree "XP" skin.
3 | *
4 | * DON'T EDIT THE CSS FILE DIRECTLY, since it is automatically generated from
5 | * the LESS templates.
6 | */
7 |
8 | // Import common styles
9 | @import "../skin-common.less";
10 |
11 |
12 | /*******************************************************************************
13 | * Styles specific to this skin.
14 | *
15 | * This section is automatically generated from the `ui-fancytree.less` template.
16 | ******************************************************************************/
17 |
18 | // Override the variable after the import.
19 | // NOTE: Variables are always resolved as the last definition, even if it is
20 | // after where it is used.
21 | @fancy-use-sprites: true; // false: suppress all background images (i.e. icons)
22 |
23 | @fancy-icon-width: 16px;
24 | @fancy-icon-height: 16px;
25 | @fancy-icon-spacing: 3px;
26 | @fancy-node-border-width: 0;
27 |
28 | // We need to define this variable here (not in skin-common.less) to make it
29 | // work with grunt and webpack:
30 | @fancy-image-prefix: "./skin-xp/";
31 |
32 | // Use 'data-uri(...)' to embed the image into CSS instead of linking to 'loading.gif':
33 | // @fancy-loading-url: data-uri("@{fancy-image-prefix}loading.gif");
34 | // Set to `true` to use `data-uri(...)` which will embed icons.gif into CSS
35 | // instead of linking to that file:
36 | // @fancy-inline-sprites: true;
37 |
38 |
39 | /*******************************************************************************
40 | * Tree container
41 | */
42 | ul.fancytree-container {
43 | li {
44 | // background-image: url("vline.gif");
45 | // Use 'data-uri(...)' to embed the image into CSS instead of linking to 'loading.gif':
46 | background-image: data-uri("@{fancy-image-prefix}vline.gif");
47 | background-position: 0 0;
48 | }
49 | &.fancytree-rtl {
50 | li {
51 | background-position: right 0;
52 | background-image: url("@{fancy-image-prefix}vline-rtl.gif");
53 | }
54 | .fancytree-exp-n span.fancytree-expander {
55 | background-image: url("@{fancy-image-prefix}icons-rtl.gif");
56 | .useSprite(0, 4);
57 | }
58 | .fancytree-exp-nl span.fancytree-expander {
59 | background-image: url("@{fancy-image-prefix}icons-rtl.gif");
60 | .useSprite(1, 4);
61 | }
62 | }
63 | // Suppress lines for last child node
64 | li.fancytree-lastsib {
65 | background-image: none;
66 | }
67 | }
68 | // Suppress lines if level is fixed expanded (option minExpandLevel)
69 | ul.fancytree-no-connector > li {
70 | background-image: none;
71 | }
72 |
73 | // XP theme always displays connectors (not only when .fancytree-connectors is set)
74 | .fancytree-exp-n span.fancytree-expander,
75 | .fancytree-exp-nl span.fancytree-expander {
76 | .setBgImageUrl("icons.gif");
77 | // margin-top: 0;
78 | }
79 | .fancytree-exp-n span.fancytree-expander, // End-node, not last sibling
80 | .fancytree-exp-n span.fancytree-expander:hover {
81 | .useSprite(0, 4);
82 | }
83 | .fancytree-exp-nl span.fancytree-expander, // End-node, last sibling
84 | .fancytree-exp-nl span.fancytree-expander:hover {
85 | .useSprite(1, 4);
86 | }
87 |
88 | /*******************************************************************************
89 | * Node titles
90 | */
91 |
92 | span.fancytree-title {
93 | border: @fancy-node-border-width solid transparent; // avoid jumping, when a border is added on hover
94 | }
95 | span.fancytree-title:hover {
96 | background-color: #F2F7FD; // light blue
97 | border-color: #B8D6FB; // darker light blue
98 | }
99 | span.fancytree-focused span.fancytree-title {
100 | outline: 1px dotted black;
101 | background-color: #EFEBDE; // gray
102 | }
103 | .fancytree-folder span.fancytree-title {
104 | font-weight: bold;
105 | }
106 | .fancytree-selected span.fancytree-title {
107 | color: green;
108 | font-style: italic;
109 | }
110 | .fancytree-active span.fancytree-title {
111 | background-color: #3169C6 !important;
112 | color: white !important; // @ IE6
113 | }
114 |
115 | /*******************************************************************************
116 | * 'table' extension
117 | */
118 | table.fancytree-ext-table {
119 | border-collapse: collapse;
120 | tbody tr.fancytree-focused {
121 | background-color: #99DEFD;
122 | }
123 | tbody tr.fancytree-active {
124 | background-color: royalblue;
125 | }
126 | tbody tr.fancytree-selected {
127 | background-color: #99FDDE;
128 | }
129 | }
130 |
--------------------------------------------------------------------------------
/app/Shapes/CommentShape.js:
--------------------------------------------------------------------------------
1 | var CommentShape = fabric.util.createClass(fabric.Group, {
2 | type: 'commentShape',
3 | // initialize can be of type function(options) or function(property, options), like for text.
4 | // no other signatures allowed.
5 | initialize: function(options) {
6 | options || (options = { });
7 |
8 | this.callSuper('initialize',[], options);
9 | this.set({
10 | originX: 'center',
11 | originY: 'center',
12 | objectCaching: false,
13 | hasControls: true
14 | });
15 |
16 |
17 | // TODO: when will these contained shapes be calculated?
18 | // - can we get drop-preview? (mark group border green, when we're going to drop on it)
19 | this.isDataShape = true; // all shapes should be data shapes?
20 | this.value = null;
21 |
22 | },
23 |
24 | defaultContent: function(){
25 | return {
26 | value: ""
27 | };
28 |
29 | },
30 | // gather all ports, with positions relative to the shape left/top
31 | gatherPorts: function(){
32 | // comment shape has no ports
33 | return [];
34 | },
35 |
36 |
37 | updateContents: function(shapeData) {
38 |
39 | // delete all the old content
40 | if(this.bg != null){
41 | this.remove(this.value);
42 | this.remove(this.bg);
43 | }
44 | var startx = this.left;
45 | var starty = this.top;
46 | var incomingx = startx;
47 | var incomingy = starty;
48 |
49 | var maxWidth = 0;
50 | var totHeight = 0;
51 | var padding = 10;
52 | var bottomPad = 0; // extra padding after last row
53 |
54 | this.value = new fabric.Text(shapeData.value,{fontSize:11, objectCaching: false,originX: 'center', fill:'green',fontFamily:'arial'});
55 |
56 | maxWidth = this.value.width + padding * 2;
57 | totHeight += this.value.height + padding * 2;
58 |
59 | // set minimum width
60 | if(maxWidth < 50)
61 | maxWidth = 50
62 |
63 | // place controls
64 | var top = 0;
65 |
66 | this.bg = new RoundedRect({
67 | topLeft:[5,5],
68 | topRight : [5,5],
69 | bottomLeft: [5,5],
70 | bottomRight: [5,5],
71 | top: this.top,
72 | left: this.left,
73 | width: 30,
74 | height: 30,
75 | fill: '#000000',
76 | rx: 5,
77 | ry: 5
78 | });
79 | var bg = this.bg;
80 |
81 | totHeight += bottomPad;
82 |
83 | // center the bg rect on midpoint
84 | bg.width = maxWidth;
85 | bg.height = totHeight;
86 | bg.left = this.left - bg.width/2;
87 | bg.top = this.top - bg.height/2;
88 | startx = bg.left;
89 | starty = bg.top;
90 | this.addWithUpdate(bg);
91 |
92 |
93 | this.value.left = startx + maxWidth/2; // - this.value.width / 2;
94 | this.value.top = starty + top + padding;
95 | this.addWithUpdate(this.value);
96 |
97 | this.left = incomingx;
98 | this.top = incomingy;
99 | },
100 |
101 | toObject: function() {
102 | return fabric.util.object.extend(this.callSuper('toObject'), {
103 | label: this.get('label')
104 | });
105 | },
106 |
107 | _render: function(ctx) {
108 | this.callSuper('_render', ctx);
109 |
110 | ctx.font = '20px Helvetica';
111 | ctx.fillStyle = '#333';
112 | },
113 |
114 |
115 | buildInputPanel: function(view, figure){
116 | // bygg HTML för panel
117 | var userData = app.view.getShapeModel(figure.id).data;
118 | view.html("");
119 |
120 | view.append('