mirror of
https://github.com/nasa/openmct.git
synced 2025-06-19 15:43:48 +00:00
Notebook integration deep (#1947)
* NASA - OPEN MCT NOTEBOOK UI PROTOTYPE CHALLENGE https://www.topcoder.com/challenge-details/30059614/ Initial submission * Code updates: -Topcoder final fixes -NASA review fixes * drag and drop style fix, new entry focus, delete display fix * NASA reported issues fixed: objects saved in notebook, delete entry dialog, style files, and new entry from drag objects fixed. * Annotation toolbar UI style fixes, added annotation functionality on new entry dialog * painterro .map file issue fixed. * NASA review fixes: css files adjusted notebook children tree removed embed's title links to live object * CouchDB documentation added * CouchDB documentation added Screenshots added. * CouchDB setup documentation added * Test case functional and cosmetic issues fixed. * Test cases functional and cosmetic issues fixed. * updated file saver library * Code issues fixes: NotificationLaunchIndicator deleted. Inappropriate modifications to domain object models fixed. Implemented $destroy listener on entryDnd directive. Naming conventions fixed. Unnecessary changes made to platform handled. Painterro dependency handled gulp verify fix. * names and package fixes * filenames fix * [Notebook] Relocate to platform/features/notebook * [Notebook] Remove obsolete README * [Notebook] Restore original index.html * [Notebook] Expose via openmct.plugins * [Notebook] Remove demo entries * [Notebook] Run gulp fixstyle * [Notebook] Use dot notation instead of brackets ...for checkstyle * [Notebook] Remove extra comma * [Notebook] Run gulp fixstyle * [Notebook] Use dot notation instead of brackets ...for checkstyle * [Notebook] Fix lint issues * [Notebook] Fix lint issues * [Notebook] Fix lint issues * [Notebook] Fix lint issues * [Notebook] Fix lint issues * [Notebook] Fix lint issues * [Notebook] Fix lint issues * [Notebook] Fix lint issues * [Notebook] Fix lint issues * [Notebook] Run gulp fixstyle * [Notebook] Include painterro for tests * [Notebook] Fix require config for painterro * [Merge] WIP markup and styling Fixes #1896 - Very much WIP, currently having issues with hovering and jiggling * [Merge] WIP markup and styling Fixes #1896 - Very much WIP, attempting to convert textarea to contenteditable; * [Merge] JS debugging Fixes #1896 - Very much WIP! * [Merge] JS debugging Fixes #1896 - Really, really WIP - DnD doesn't work properly, and drag to existing entry no longer works. * [Front-end] Notebook thematic styling; test console Fixes #1896 - Added thematic styles and config; - Really, really, really WIP!! - DnD doesn't work properly, and drag to existing entry no longer works. * [Merge] Cleanups in JS Fixes #1896 - Removed and commented out logging statements * [Merge] WIP SCSS and markup polishing Fixes #1896 - Significant style and markup changes; - Styles, layout, etc. relating to embed elements; - Fixes in both notebook.html and embedControl.html; - Class name normalization; * [Merge] WIP Mods related to MCTModalNotebook.js Fixes #1896 Fixes #1906 * fix drag and drop, delete entries * [Front-end] Refined styling of entry embeds Fixes #1896 * [Merge] Generalized hover hide/show of local controls Fixes #1896 * [Merge] Generalized labeled icon-* elements Fixes #1896 * [Frontend] CSS normalizing, apply general styles in markup Fixes #1896 - Notebook class names more individualized; - Apply .labeled and .has-local-controls general classes; - Apply .s-input-inline to contenteditable div; - Look and feel cleanups for drag area and entry elements; * added modifiedOn time for entries that are changed, and fixed issue regarding inner text being filled when new entry button clicked * [Frontend] CSS sanding and cleanups Fixes #1896 - Removing unused classes; - Finessed margin and padding; * [Frontend] Mobile styling Fixes #1896 - Mod .has-local-controls to not apply when in touch context * [Frontend] WIP Mobile styling Fixes #1896 - phone portrait entry layout optimization * fix expand in layout, which was causing snapshot at expand * [Frontend] Fixes to search control Fixes #1896 - Search control now more robust, added .search-filter-by-type class selector; * [Frontend] Fix custom Selects Fixes #1896 - Custom Selects now much more solid, handle width compression better; * remove duplicate code from MCTModalNotebook and roll changes into MCTTriggerModal * [Frontend] WIP Mobile styling Fixes #1896 - Fixed general approach to portrait orientation in mobile/_layout.scss to use media query; - Fixed portrait layout in _notebook_base.scss to use media query; * prevent multiple new notebook entry divs from being created on open overlay, instead create on initialization * [Frontend] WIP Snapshot styling Fixes #1896 - Better class names; - Moved buttons in frame layout; * remove frame layout duplicate and use frame.html * fix issue of preserving line breaks when text is received from a persisted source * add comments, clean out some code, and fix broken tests * fix export image after merging with master * include painterro in karma config * Inlined templates for notebook * disable view policy - to allow layouts to function - needs more investigation * fix layout display overload, remove viewpolicy and notebookLayout.html. Fix delete error - issues found when deploying for testathon * fix (not being able to focus on content editable div to add text, while in layout) - when in layout, the first child of the outermost div is the only one that registers a click, this was causing an issue of not being able to edit notebook entries. My fix includes finding the first child of the div that registers the click and forcing a focus event. * fix focus one new entry issue, cleanup of code related to finding elements, and write more reusable code * abstract findElementById for reusability and improve performance from O^2 to O * user findElementById in entrydnd * change snapshot library to dom-to-image * [Frontend] WIP Snapshot styling Fixes #1896 Fixes #1947 - Significant markup changes to template in ViewSnaphot.js - WIP!!! Keeping own topic branch for now * [Frontend] WIP Snapshot styling Fixes #1896 Fixes #1947 - Significant markup changes to ViewSnaphot.js; - Change in imagery.scss to move non-layout styling to appropriate class; * Removed snapshot from version number to close sprint eagle * Updated version number for Enterprise release * Lock filesaver version (#1956) Lock filesaver version as there have been a large number of broken builds from what should be non-breaking version increases. Fixes currently broken build. * [Frontend] Snapshot styling Fixes #1896 Fixes #1947 - Final tweaks after rebase from notebook-integration-deep-styling * fixes issue of overlay not closing when context menu item in clicked when viewing snapshot * [Frontend] Painterro styling Fixes #1896 Fixes #1947 - WIP - Painterro styling overrides and config - Removed commented code * [Frontend] Painterro styling Fixes #1896 Fixes #1947 - WIP - Painterro styling overrides and config * fixes issue of overlay not closing when context menu item in clicked when viewing snapshot * specify require paths for new library * [Frontend] Local controls CSS added for hide/show of trash can icons Fixes #1896 Fixes #1947 - Also updated frame.scss to use same transition timing * proper shimming * dragging objects to notebook now only creates a link, clicking on snapshot from object view takes a snapshot of the current view, without re-rendering * [Frontend] Local controls CSS added for hide/show of trash can icons Fixes #1896 Fixes #1947 - Also updated frame.scss to use same transition timing * select correct div for snapshot * [Frontend] Adding background color to snapshot Fixes #1896 Fixes #1947 * remove snapshot class after async image render * [Frontend] Adding background color to snapshot Fixes #1896 Fixes #1947 * remove snapshot button from frames in layout * remove snapshot from frame view, add it only to overlay, change mctSnapShot to accomodate taking snaps of overlay/object view * add preview action, working, need styling for notebook action on preview * fix checkstyle * change glyph for preview, use similar tempalte to frame.html * dont allow preview action on objects getting edited currently * changes to browseController and NavigationService to block navigation and show preview of object when trying to navigate to object in tree in edit mode * [Frontend] Painterro styling and config Fixes #1896 Fixes #1947 - Changes mainly related to toolbar styling and labels * [Frontend] Notebook/Preview related sanding and polishing Fixes #1947 - Changed description for notebook-new-entry * [Frontend] Notebook/Preview related sanding and polishing Fixes #1947 - Added new global "hide-in-t-main-view" class; - Apply new class to Preview action to suppress display of that button in main view of navigated object; * code cleanup * [Frontend] Notebook/Preview related sanding and polishing Fixes #1947 - Classes for Notebook Entry button spacing; * abstract overlay into a service/api - to reduce code duplication catch error produced by painterro because of async div creation by dialog service * fix broken mcttriggermodal tests * fix checkstyle and lint * add functionality of being able to add buttons to the browse bar element of overlay when instantiating the overlay service * Reduce frequency of template recompilation in mct-include * Use updated painterro library. Fixes #1981 * add save flag and call done in both cases (clicking on cancel or ok) * fixes #1951 persist modified empty entry on blur * Bump Node Version * fix checkstyle * fixes issue where annotating snapshot that is already saved in notebook does not work * fix painterro button styling issue move jquery logic inside timeout block, because buttons are asynchronously created * remove description required when saving snapshot to notebook * remove create snapshot action from embeds, and add preview action to embeds * fixes edge case for issue #1981 Add a reject callback in the edgecase that user presses the x icon or esc key to cancel annotation, which was leading to the drag drop issue * Add default sort options on creation menu of Notebook * fix auto focus on new entry when in oldest first order, both in layout and regular view * [Frontend] Notebook mobile mods - Hide entry area when mobile; - Disallow entry edit or delete in mobile; * fixes issue 2041 (#2049) * fixes issue 2041 allows user to select caret position in notebook entries while in layout * [Frontend] Restore class, refine selector Fixes #2041 Fixes #2049 - Restored .s-input-inline to editable field; - Refined pointer-events: none to properly target .title-label only; * remove unused files/code and smoke test * remove , add pre-wrap to css and use inner text * make reviewer requested changes 'in progress still' * make reviewer requested changes 'continued' * replace html2canvas with dom-to-image - add in progress dialog to export image service - add error dialog to export image service * Search UI refactored to use flex Fixes #1947 - Fixes broken search inputs in main search and Notebook; - Significant rewrite to search SCSS and markup; * Fixes for Notebook custom selects; polishes to search Fixes #1947 - Better flex styles for custom selects; - Refinements to search styling; - Much better mobile responsive layout for search and controls in portrait layout; * fix preview action for embeds, which was showing current domain object vs selected domain object * Fixed hidden search dropdown menu Fixes #1947 * Revert whitespace change Revert change to whitespace in index.html. #1947. * [Export] Use html2canvas Use html2canvas instead of dom-to-image. Fixes issues with text exports. html2canvas is better supported and under active development and is a better choice for this library. Cleaned up export code, ensure that images are properly saved as the correct types. related to feedback on #1947 * Don't show brackets when timestamp is not specified (#331)
This commit is contained in:
Deep Tailor
committed by
Pete Richards
Pete Richards
parent
73e38f1955
commit
90a6bbc13e
@ -178,9 +178,7 @@ define([
|
||||
"key": "exportImageService",
|
||||
"implementation": ExportImageService,
|
||||
"depends": [
|
||||
"$q",
|
||||
"$timeout",
|
||||
"$log"
|
||||
"dialogService"
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
/* global console*/
|
||||
/**
|
||||
* Module defining ExportImageService. Created by hudsonfoo on 09/02/16
|
||||
*/
|
||||
@ -36,85 +36,71 @@ define(
|
||||
/**
|
||||
* The export image service will export any HTML node to
|
||||
* JPG, or PNG.
|
||||
* @param {object} $q
|
||||
* @param {object} $timeout
|
||||
* @param {object} $log
|
||||
* @param {constant} EXPORT_IMAGE_TIMEOUT time in milliseconds before a timeout error is returned
|
||||
* @param {object} dialogService
|
||||
* @constructor
|
||||
*/
|
||||
function ExportImageService($q, $timeout, $log) {
|
||||
this.$q = $q;
|
||||
this.$timeout = $timeout;
|
||||
this.$log = $log;
|
||||
this.EXPORT_IMAGE_TIMEOUT = 1000;
|
||||
}
|
||||
|
||||
function changeBackgroundColor(element, color) {
|
||||
element.style.backgroundColor = color;
|
||||
function ExportImageService(dialogService) {
|
||||
this.exportCount = 0;
|
||||
this.dialogService = dialogService;
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders an HTML element into a base64 encoded image
|
||||
* as a BLOB, PNG, or JPG.
|
||||
* Converts an HTML element into a PNG or JPG Blob.
|
||||
* @private
|
||||
* @param {node} element that will be converted to an image
|
||||
* @param {string} type of image to convert the element to
|
||||
* @param {string} type of image to convert the element to.
|
||||
* @returns {promise}
|
||||
*/
|
||||
ExportImageService.prototype.renderElement = function (element, type, color) {
|
||||
var defer = this.$q.defer(),
|
||||
validTypes = ["png", "jpg", "jpeg"],
|
||||
renderTimeout,
|
||||
originalColor;
|
||||
|
||||
if (validTypes.indexOf(type) === -1) {
|
||||
this.$log.error("Invalid type requested. Try: (" + validTypes.join(",") + ")");
|
||||
return;
|
||||
}
|
||||
|
||||
if (color) {
|
||||
// Save color to be restored later
|
||||
originalColor = element.style.backgroundColor || '';
|
||||
// Defaulting to white so we can see the chart when printed
|
||||
changeBackgroundColor(element, color);
|
||||
}
|
||||
|
||||
renderTimeout = this.$timeout(function () {
|
||||
defer.reject("html2canvas timed out");
|
||||
this.$log.warn("html2canvas timed out");
|
||||
}.bind(this), this.EXPORT_IMAGE_TIMEOUT);
|
||||
|
||||
try {
|
||||
html2canvas(element, {
|
||||
onrendered: function (canvas) {
|
||||
if (color) {
|
||||
changeBackgroundColor(element, originalColor);
|
||||
}
|
||||
switch (type.toLowerCase()) {
|
||||
case "png":
|
||||
canvas.toBlob(defer.resolve, "image/png");
|
||||
break;
|
||||
|
||||
default:
|
||||
case "jpg":
|
||||
case "jpeg":
|
||||
canvas.toBlob(defer.resolve, "image/jpeg");
|
||||
break;
|
||||
}
|
||||
}
|
||||
ExportImageService.prototype.renderElement = function (element, imageType, color) {
|
||||
var dialogService = this.dialogService,
|
||||
dialog = dialogService.showBlockingMessage({
|
||||
title: "Capturing...",
|
||||
hint: "Capturing an image",
|
||||
unknownProgress: true,
|
||||
severity: "info",
|
||||
delay: true
|
||||
});
|
||||
} catch (e) {
|
||||
defer.reject(e);
|
||||
this.$log.warn("html2canvas failed with error: " + e);
|
||||
|
||||
var mimeType = "image/png";
|
||||
if (imageType === "jpg") {
|
||||
mimeType = "image/jpeg";
|
||||
}
|
||||
|
||||
defer.promise.finally(function () {
|
||||
renderTimeout.cancel();
|
||||
if (color) {
|
||||
changeBackgroundColor(element, originalColor);
|
||||
}
|
||||
});
|
||||
var exportId = 'export-element-' + this.exportCount;
|
||||
this.exportCount++;
|
||||
var oldId = element.id;
|
||||
element.id = exportId;
|
||||
|
||||
return defer.promise;
|
||||
return html2canvas(element, {
|
||||
onclone: function (document) {
|
||||
// Make export style changes to cloned document so that
|
||||
// users don't see view flickering.
|
||||
var clonedElement = document.getElementById(exportId);
|
||||
if (clonedElement && color) {
|
||||
clonedElement.style.backgroundColor = color;
|
||||
}
|
||||
element.id = oldId;
|
||||
}
|
||||
}).then(function (canvas) {
|
||||
dialog.dismiss();
|
||||
return new Promise(function (resolve, reject) {
|
||||
return canvas.toBlob(resolve, mimeType);
|
||||
});
|
||||
}, function (error) {
|
||||
console.log('error capturing image', error);
|
||||
dialog.dismiss();
|
||||
var errorDialog = dialogService.showBlockingMessage({
|
||||
title: "Error capturing image",
|
||||
severity: "error",
|
||||
hint: "Image was not captured successfully!",
|
||||
options: [{
|
||||
label: "OK",
|
||||
callback: function () {
|
||||
errorDialog.dismiss();
|
||||
}
|
||||
}]
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
@ -124,7 +110,7 @@ define(
|
||||
* @returns {promise}
|
||||
*/
|
||||
ExportImageService.prototype.exportJPG = function (element, filename, color) {
|
||||
return this.renderElement(element, "jpeg", color).then(function (img) {
|
||||
return this.renderElement(element, "jpg", color).then(function (img) {
|
||||
saveAs(img, filename);
|
||||
});
|
||||
};
|
||||
@ -141,6 +127,17 @@ define(
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Takes a screenshot of a DOM node in PNG format.
|
||||
* @param {node} element to be exported
|
||||
* @param {string} filename the exported image
|
||||
* @returns {promise}
|
||||
*/
|
||||
|
||||
ExportImageService.prototype.exportPNGtoSRC = function (element) {
|
||||
return this.renderElement(element, "png");
|
||||
};
|
||||
|
||||
/**
|
||||
* canvas.toBlob() not supported in IE < 10, Opera, and Safari. This polyfill
|
||||
* implements the method in browsers that would not otherwise support it.
|
||||
@ -149,9 +146,9 @@ define(
|
||||
function polyfillToBlob() {
|
||||
if (!HTMLCanvasElement.prototype.toBlob) {
|
||||
Object.defineProperty(HTMLCanvasElement.prototype, "toBlob", {
|
||||
value: function (callback, type, quality) {
|
||||
value: function (callback, mimeType, quality) {
|
||||
|
||||
var binStr = atob(this.toDataURL(type, quality).split(',')[1]),
|
||||
var binStr = atob(this.toDataURL(mimeType, quality).split(',')[1]),
|
||||
len = binStr.length,
|
||||
arr = new Uint8Array(len);
|
||||
|
||||
@ -159,7 +156,7 @@ define(
|
||||
arr[i] = binStr.charCodeAt(i);
|
||||
}
|
||||
|
||||
callback(new Blob([arr], {type: type || "image/png"}));
|
||||
callback(new Blob([arr], {type: mimeType || "image/png"}));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user