Merge pull request #336 from antman3351/master

Added basic print function

Author: mariohmol

Documentation.md

@@ -546,6 +546,20 @@ g.Draw();
 </script>
 ```
 
+## Printing
+`g.printChart(width, height);` will set the page size (via an injected css) and trigger the browser's print.
+The default injected style can be changed by passing a different style as the 3rd parameter to `printChart`.
+
+The default style is:
+```css
+ @page {
+    size: ${width}mm ${height}mm;
+  }
+  .gchartcontainer {
+    width: ${width}mm;
+  }
+``` 
+
 
 ## Troubleshooting
 

dist/jsgantt.css

@@ -787,6 +787,32 @@ td.gspanning div {
   .glistgrid {
     float: none !important;
   }
+
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .gchartcontainer *::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Hide scrollbar for IE, Edge and Firefox */
+  .gchartcontainer * {
+    -ms-overflow-style: none;  /* IE and Edge */
+    scrollbar-width: none;  /* Firefox */
+  }
+
+  /* Hide tool-tip */
+  .JSGanttToolTip {
+    display: none !important;
+  }
+
+  /* This is the default css, injected by the JSGantt.printChart(width,height); function -->
+  @page {
+    size: ${width}mm ${height}mm;
+  }
+
+  .gchartcontainer {
+    width: ${width}mm;
+  }
+  <-- This will be injected by the JSGantt.printChart() function */
 }
 
 /* if using setUseSingleCell(1) the following is a suggested set of CSS3 styles to recreate the table grid - won't work on old browsers
@@ -812,16 +838,20 @@ td.gspanning div {
 
   display: flex;
   flex-direction: column;
+  /* Allow resize */
+  resize: horizontal;
 }
 
 .gmainright {
   overflow: hidden;
-  flex: auto;
+  flex: 1 1 auto;
 }
 
 .gmainleft {
   overflow: hidden;
   flex: 0 0 50%;
+  /* Allow side to grow and shrink */
+  flex: 1 0 auto;
 }
 
 .gtasktableh tr,

dist/jsgantt.js

@@ -1,13 +1,15 @@
 (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.JSGantt = f()}})(function(){var define,module,exports;return (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.JSGantt = void 0;
 var jsGantt = require("./src/jsgantt");
 module.exports = jsGantt.JSGantt;
 exports.JSGantt = jsGantt.JSGantt;
 
 },{"./src/jsgantt":6}],2:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.GanttChart = void 0;
 var lang = require("./lang");
 var events_1 = require("./events");
 var general_utils_1 = require("./utils/general_utils");
@@ -160,6 +162,7 @@ exports.GanttChart = function (pDiv, pFormat) {
     this.DrawDependencies = draw_dependencies_1.DrawDependencies.bind(this);
     this.getArrayLocationByID = draw_utils_1.getArrayLocationByID.bind(this);
     this.drawSelector = draw_utils_1.drawSelector.bind(this);
+    this.printChart = general_utils_1.printChart.bind(this);
     this.clearDependencies = function () {
         var parent = this.getLines();
         if (this.vEventsChange.line &&
@@ -840,6 +843,7 @@ exports.GanttChart = function (pDiv, pFormat) {
 },{"./draw_columns":3,"./draw_dependencies":4,"./events":5,"./lang":8,"./options":9,"./task":10,"./utils/date_utils":11,"./utils/draw_utils":12,"./utils/general_utils":13,"./xml":14}],3:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.draw_task_headings = exports.draw_bottom = exports.draw_header = exports.COLUMN_ORDER = void 0;
 var date_utils_1 = require("./utils/date_utils");
 var task_1 = require("./task");
 var events_1 = require("./events");
@@ -1009,6 +1013,7 @@ exports.draw_task_headings = function (column, vTmpRow, vLangs, vLang, vAddition
 },{"./events":5,"./task":10,"./utils/date_utils":11,"./utils/draw_utils":12}],4:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.DrawDependencies = exports.drawDependency = void 0;
 exports.drawDependency = function (x1, y1, x2, y2, pType, pClass) {
     var vDir = 1;
     var vBend = false;
@@ -1105,6 +1110,7 @@ exports.DrawDependencies = function (vDebug) {
 },{}],5:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.addListenerDependencies = exports.addListenerInputCell = exports.addListenerClickCell = exports.addScrollListeners = exports.addFormatListeners = exports.addFolderListeners = exports.updateGridHeaderWidth = exports.addThisRowListeners = exports.addTooltipListeners = exports.syncScroll = exports.removeListener = exports.addListener = exports.showToolTip = exports.mouseOut = exports.mouseOver = exports.show = exports.hide = exports.folder = void 0;
 var general_utils_1 = require("./utils/general_utils");
 // Function to open/close and hide/show children of specified task
 exports.folder = function (pID, ganttObj) {
@@ -1505,6 +1511,7 @@ var vColumnsNames = {
     Copyright (c) 2009, Shlomy Gantz BlueBrick Inc.
 */
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.JSGantt = void 0;
 var events_1 = require("./events");
 var general_utils_1 = require("./utils/general_utils");
 var xml_1 = require("./xml");
@@ -1568,10 +1575,11 @@ exports.JSGantt.criticalPath = general_utils_1.criticalPath;
 },{"./draw":2,"./events":5,"./json":7,"./task":10,"./utils/date_utils":11,"./utils/general_utils":13,"./xml":14}],7:[function(require,module,exports){
 "use strict";
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
         function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
@@ -1603,6 +1611,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.addJSONTask = exports.parseJSONString = exports.parseJSON = void 0;
 var task_1 = require("./task");
 var general_utils_1 = require("./utils/general_utils");
 /**
@@ -1760,6 +1769,7 @@ exports.addJSONTask = function (pGanttVar, pJsonObj) {
 },{"./task":10,"./utils/general_utils":13}],8:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ko = exports.hu = exports.cs = exports.ja = exports.tr = exports.id = exports.nl = exports.sv = exports.cn = exports.ru = exports.fr = exports.pt = exports.de = exports.es = exports.en = void 0;
 var es = {
     'january': 'Enero',
     'february': 'Febrero',
@@ -2872,6 +2882,7 @@ exports.ko = ko;
 },{}],9:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.includeGetSet = void 0;
 var date_utils_1 = require("./utils/date_utils");
 var draw_columns_1 = require("./draw_columns");
 exports.includeGetSet = function () {
@@ -3094,6 +3105,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.processRows = exports.ClearTasks = exports.RemoveTaskItem = exports.AddTaskItemObject = exports.AddTaskItem = exports.createTaskInfo = exports.TaskItem = exports.TaskItemObject = exports.sortTasks = exports.taskLink = void 0;
 var general_utils_1 = require("./utils/general_utils");
 var draw_utils_1 = require("./utils/draw_utils");
 var date_utils_1 = require("./utils/date_utils");
@@ -3815,6 +3827,7 @@ exports.processRows = function (pList, pID, pRow, pLevel, pOpen, pUseSort, vDebu
 },{"./utils/date_utils":11,"./utils/draw_utils":12,"./utils/general_utils":13}],11:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.getIsoWeek = exports.parseDateFormatStr = exports.formatDateStr = exports.parseDateStr = exports.coerceDate = exports.getMaxDate = exports.getMinDate = void 0;
 /**
  * DATES
  */
@@ -4110,6 +4123,7 @@ exports.getIsoWeek = function (pDate) {
 },{}],12:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.drawSelector = exports.sLine = exports.CalcTaskXY = exports.getArrayLocationByID = exports.newNode = exports.makeInput = void 0;
 var events_1 = require("../events");
 exports.makeInput = function (formattedValue, editable, type, value, choices) {
     if (type === void 0) { type = 'text'; }
@@ -4274,6 +4288,7 @@ exports.drawSelector = function (pPos) {
 },{"../events":5}],13:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.printChart = exports.calculateStartEndFromDepend = exports.makeRequestOldBrowsers = exports.makeRequest = exports.moveToolTip = exports.updateFlyingObj = exports.isParentElementOrSelf = exports.criticalPath = exports.hashKey = exports.hashString = exports.fadeToolTip = exports.hideToolTip = exports.isIE = exports.getOffset = exports.calculateCurrentDateOffset = exports.getScrollbarWidth = exports.getScrollPositions = exports.benchMark = exports.getZoomFactor = exports.delayedHide = exports.stripUnwanted = exports.stripIds = exports.changeFormat = exports.findObj = exports.internalPropertiesLang = exports.internalProperties = void 0;
 exports.internalProperties = ['pID', 'pName', 'pStart', 'pEnd', 'pClass', 'pLink', 'pMile', 'pRes', 'pComp', 'pGroup', 'pParent',
     'pOpen', 'pDepend', 'pCaption', 'pNotes', 'pGantt', 'pCost', 'pPlanStart', 'pPlanEnd'];
 exports.internalPropertiesLang = {
@@ -4724,10 +4739,26 @@ exports.makeRequestOldBrowsers = function (pFile, vDebug) {
 };
 exports.calculateStartEndFromDepend = function (tasksList) {
 };
+exports.printChart = function (width, height, css) {
+    if (css === void 0) { css = undefined; }
+    if (css === undefined) {
+        css = // Default injected CSS
+            "@media print {\n        @page {\n          size: " + width + "mm " + height + "mm;\n        }\n        /* set gantt container to the same width as the page */\n        .gchartcontainer {\n            width: " + width + "mm;\n        }\n    };";
+    }
+    var $container = document.querySelector('.gchartcontainer');
+    $container.insertAdjacentHTML('afterbegin', "<style>" + css + "</style>");
+    // Remove the print CSS when the print dialog is closed
+    window.addEventListener('afterprint', function () {
+        $container.removeChild($container.children[0]);
+    }, { 'once': true });
+    // Trigger the print
+    window.print();
+};
 
 },{}],14:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.getXMLTask = exports.getXMLProject = exports.AddXMLTask = exports.getXMLNodeValue = exports.findXMLNode = exports.parseXMLString = exports.parseXML = void 0;
 var task_1 = require("./task");
 var date_utils_1 = require("./utils/date_utils");
 var draw_utils_1 = require("./utils/draw_utils");

docs/demo.html

@@ -31,6 +31,11 @@
       height: 22px;
       background: #777777;
     }
+    @media print {
+      .no-print {
+        display: none;
+      }
+    }
   </style>
   <!-- External resources -->
   <!-- jQuery + Ajax [required by Bootstrap] -->
@@ -60,7 +65,7 @@
 
 <body data-spy="scroll" data-target="#my-navbar-nav" style="padding: 30px;">
 
-
+<div class="no-print">
   <div class="row">
     <h3 class="row">Hide and Show Properties</h3>
 
@@ -188,7 +193,7 @@ <h3 class="row">Hide and Show Properties</h3>
   <br />
 
 
-  <span>
+<!--  <span>-->
     <label>Height:</label>
     <input type="text" id="vTotalHeight" fl onchange="start(event)" />
     (CSS style height like "300px". Empty for auto height)
@@ -234,17 +239,34 @@ <h3 class="row">Hide and Show Properties</h3>
     </span>
 
     <span>
-      <button onclick="print()">Print data in console</button>
+      <button onclick="printTasksInConsole()">Print data in console</button>
     </span>
 
     <br />
+    
+    <select id="print_page_size">
+        <option value="210,297">A4 Portrait</option>
+        <option value="297,210">A4 Landscape</option>
+        <option value="297,420">A3 Portrait</option>
+        <option value="420,297">A3 Landscape</option>
+        <option value="420,594">A2 Portrait</option>
+        <option value="594,420">A2 Landscape</option>
+        <option value="594,841">A1 Portrait</option>
+        <option value="841,594">A1 Landscape</option>
+        <option value="841,1189">A0 Portrait</option>
+        <option value="1189,841">A0 Landscape</option>
+    </select>
+    <button onclick="printChart()">Print</button>
+
+    <br>
 
     <small>
       * Click events in table are binded to console.log for testing
     </small>
 
 
     <br /><br />
+  </div>
     <div id="embedded-Gantt">
     </div>
 

docs/index.js

@@ -201,11 +201,17 @@ function clearTasks() {
   g.Draw()
 }
 
-function print() {
+function printTasksInConsole() {
   const tasks = g.vTaskList.map(e => ({ ...e.getAllData(), ...e.getDataObject() }));
   console.log(tasks);
 }
 
+function printChart(){
+  let width, height;
+  [ width, height ] = document.querySelector('#print_page_size').value.split(',');
+  g.printChart( width, height );
+}
+
 
 function editValue(list, task, event, cell, column) {
   console.log(list, task, event, cell, column)

src/draw.ts

@@ -16,7 +16,7 @@ import {
 } from './events';
 import {
   calculateCurrentDateOffset,
-  getOffset, getScrollbarWidth
+  getOffset, getScrollbarWidth, printChart
 } from './utils/general_utils';
 import { createTaskInfo, AddTaskItem, AddTaskItemObject, RemoveTaskItem, processRows, ClearTasks } from './task';
 
@@ -178,6 +178,7 @@ export const GanttChart = function (pDiv, pFormat) {
   this.DrawDependencies = DrawDependencies.bind(this);
   this.getArrayLocationByID = getArrayLocationByID.bind(this);
   this.drawSelector = drawSelector.bind(this);
+  this.printChart = printChart.bind(this);
 
   this.clearDependencies = function () {
     let parent = this.getLines();

src/jsgantt.css

@@ -787,6 +787,32 @@ td.gspanning div {
   .glistgrid {
     float: none !important;
   }
+
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .gchartcontainer *::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Hide scrollbar for IE, Edge and Firefox */
+  .gchartcontainer * {
+    -ms-overflow-style: none;  /* IE and Edge */
+    scrollbar-width: none;  /* Firefox */
+  }
+
+  /* Hide tool-tip */
+  .JSGanttToolTip {
+    display: none !important;
+  }
+
+  /* This is the default css, injected by the JSGantt.printChart(width,height); function -->
+  @page {
+    size: ${width}mm ${height}mm;
+  }
+
+  .gchartcontainer {
+    width: ${width}mm;
+  }
+  <-- This will be injected by the JSGantt.printChart() function */
 }
 
 /* if using setUseSingleCell(1) the following is a suggested set of CSS3 styles to recreate the table grid - won't work on old browsers
@@ -812,16 +838,20 @@ td.gspanning div {
 
   display: flex;
   flex-direction: column;
+  /* Allow resize */
+  resize: horizontal;
 }
 
 .gmainright {
   overflow: hidden;
-  flex: auto;
+  flex: 1 1 auto;
 }
 
 .gmainleft {
   overflow: hidden;
   flex: 0 0 50%;
+  /* Allow side to grow and shrink */
+  flex: 1 0 auto;
 }
 
 .gtasktableh tr,