From f70a857562bf9f8e70377e591cd2a76d08c4ebdb Mon Sep 17 00:00:00 2001 From: bartvde Date: Wed, 1 Feb 2017 10:59:44 +0100 Subject: [PATCH 1/5] start on thumbnail implementation --- src/components/geonode.jsx | 6 +++++- src/services/geonode.js | 8 ++++++++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/src/components/geonode.jsx b/src/components/geonode.jsx index b7643e9..b4d4e47 100644 --- a/src/components/geonode.jsx +++ b/src/components/geonode.jsx @@ -26,7 +26,7 @@ global.enMessages = enMessages; import Save from './save'; import MapUrlLink from '../containers/MapUrlLink'; -import {getLocalGeoServer} from '../services/geonode'; +import {getLocalGeoServer, getThumbnail} from '../services/geonode'; import '../css/app.css' import 'boundless-sdk/dist/css/components.css'; @@ -49,6 +49,10 @@ var map = new ol.Map({ view: new ol.View({center: [0, 0], zoom: 3}) }); +global.createMapThumbnail = function() { + getThumbnail(map); +}; + class GeoNodeViewer extends React.Component { constructor(props) { super(props); diff --git a/src/services/geonode.js b/src/services/geonode.js index 265be79..7ebfdaf 100644 --- a/src/services/geonode.js +++ b/src/services/geonode.js @@ -57,3 +57,11 @@ export const getLocalGeoServer = (sources, baseUrl) => { } } }; +export const getThumbnail = (map) => { + map.once('postcompose', function(event) { + var canvas = event.context.canvas; + var data = canvas.toDataURL('image/png'); + // TODO send to Django + }); + map.renderSync(); +}; From bb4d4de65a22fae01e4b061503e6502e6dc1293f Mon Sep 17 00:00:00 2001 From: bartvde Date: Thu, 2 Feb 2017 11:10:27 +0100 Subject: [PATCH 2/5] Send thumbnail data --- package.json | 15 ++++++++------- src/services/geonode.js | 17 ++++++++++++++--- 2 files changed, 22 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index 42c6fe2..22232cd 100644 --- a/package.json +++ b/package.json @@ -18,9 +18,9 @@ "test:lint": "eslint src --ext .jsx,.js", "test:unit": "NODE_ENV=test ./node_modules/karma/bin/karma start --browsers PhantomJS --auto-watch", "deploy": "npm run build:gh-pages && git-directory-deploy --directory _build --branch gh-pages", - "geonode:mkdir": "mkdir -p geonode-client/static && mkdir -p geonode-client/static/geonode-client && mkdir -p geonode-client/static/geonode-client/js && mkdir -p geonode-client/static/geonode-client/cesium", - "geonode:cp": "cp dist/Viewer.min.js geonode-client/static/geonode-client/js/viewer.min.js && cp dist/Composer.min.js geonode-client/static/geonode-client/js/composer.min.js && cp -R dist/cesium/* geonode-client/static/geonode-client/cesium/", - "geonode:deploy": "npm run geonode:mkdir && npm run geonode:cp" + "geonode:mkdir": "mkdir -p geonode-client/static && mkdir -p geonode-client/static/geonode-client && mkdir -p geonode-client/static/geonode-client/js && mkdir -p geonode-client/static/geonode-client/cesium", + "geonode:cp": "cp dist/Viewer.min.js geonode-client/static/geonode-client/js/viewer.min.js && cp dist/Composer.min.js geonode-client/static/geonode-client/js/composer.min.js && cp -R dist/cesium/* geonode-client/static/geonode-client/cesium/", + "geonode:deploy": "npm run geonode:mkdir && npm run geonode:cp" }, "main": "dist/viewer.js", "browser": "dist/viewer.js", @@ -36,16 +36,17 @@ "node": ">6" }, "dependencies": { - "react": "15.3.2", - "react-dom": "15.3.2", - "react-intl": "^2.1.5", - "react-tap-event-plugin": "1.0.0", "boundless-sdk": "^0.10.20", "material-ui": "0.16.4", "ol3-cesium": "3.9.4", "openlayers": "3.19.0", + "react": "15.3.2", + "react-dom": "15.3.2", + "react-intl": "^2.1.5", "react-redux": "^5.0.0", + "react-tap-event-plugin": "1.0.0", "redux-thunk": "^2.1.0", + "url-parse": "^1.1.7", "whatwg-fetch": "^1.0.0" }, "devDependencies": { diff --git a/src/services/geonode.js b/src/services/geonode.js index 7ebfdaf..9122121 100644 --- a/src/services/geonode.js +++ b/src/services/geonode.js @@ -2,6 +2,7 @@ import MapConfigTransformService from 'boundless-sdk/services/MapConfigTransform import MapConfigService from 'boundless-sdk/services/MapConfigService'; import {getCRSFToken, removeTrailingSlash} from '../helper'; import {edit_map_endpoint, NEW_MAP_ENDPOINT} from '../constants/server' +import URL from 'url-parse'; import 'whatwg-fetch'; @@ -58,10 +59,20 @@ export const getLocalGeoServer = (sources, baseUrl) => { } }; export const getThumbnail = (map) => { + let url = new URL(window.location.href); map.once('postcompose', function(event) { - var canvas = event.context.canvas; - var data = canvas.toDataURL('image/png'); - // TODO send to Django + let canvas = event.context.canvas; + let data = canvas.toDataURL('image/png'); + let config = { + image: true, + data: data + }; + var request = createRequestObject('POST', JSON.stringify(config)); + var requestPath = removeTrailingSlash(url.pathname) + '/thumbnail'; + return fetch(requestPath,request) + .then(checkStatus) + .then((response) => response.json()) + .catch((ex) => Promise.reject(ex)); }); map.renderSync(); }; From 70607a113dd17ea3e6a914a2c7e9e8ee037bae63 Mon Sep 17 00:00:00 2001 From: bartvde Date: Thu, 2 Feb 2017 13:39:50 +0100 Subject: [PATCH 3/5] Update thumbnail on map save --- src/services/geonode.js | 5 ++++- src/state/map/actions.js | 3 ++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/services/geonode.js b/src/services/geonode.js index 9122121..8e9c786 100644 --- a/src/services/geonode.js +++ b/src/services/geonode.js @@ -58,8 +58,11 @@ export const getLocalGeoServer = (sources, baseUrl) => { } } }; -export const getThumbnail = (map) => { +export const getThumbnail = (map, opt_id) => { let url = new URL(window.location.href); + if (opt_id !== undefined) { + url.set('pathname', url.pathname.replace('new', opt_id)); + } map.once('postcompose', function(event) { let canvas = event.context.canvas; let data = canvas.toDataURL('image/png'); diff --git a/src/state/map/actions.js b/src/state/map/actions.js index 570db58..3e63b0e 100644 --- a/src/state/map/actions.js +++ b/src/state/map/actions.js @@ -1,5 +1,5 @@ import * as types from '../actiontypes'; -import {saveToGeonode, login} from '../../services/geonode'; +import {saveToGeonode, login, saveThumbnail} from '../../services/geonode'; export function getId() { @@ -60,6 +60,7 @@ export function saveMap() { let state = getState(); return saveToGeonode(state.server.url, state.mapConfig, state.map.id) .then((json) => dispatch(saveMapSuccess(json))) + .then((json) => saveThumbnail(state.olMap, json.result.id)) .catch(ex => dispatch(saveMapError(ex))); }; } From 6886740aa46156548272586da54dec6bad639811 Mon Sep 17 00:00:00 2001 From: bartvde Date: Thu, 2 Feb 2017 13:46:20 +0100 Subject: [PATCH 4/5] Rename function --- src/components/geonode.jsx | 4 ++-- src/services/geonode.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/geonode.jsx b/src/components/geonode.jsx index b4d4e47..edc8499 100644 --- a/src/components/geonode.jsx +++ b/src/components/geonode.jsx @@ -26,7 +26,7 @@ global.enMessages = enMessages; import Save from './save'; import MapUrlLink from '../containers/MapUrlLink'; -import {getLocalGeoServer, getThumbnail} from '../services/geonode'; +import {getLocalGeoServer, saveThumbnail} from '../services/geonode'; import '../css/app.css' import 'boundless-sdk/dist/css/components.css'; @@ -50,7 +50,7 @@ var map = new ol.Map({ }); global.createMapThumbnail = function() { - getThumbnail(map); + saveThumbnail(map); }; class GeoNodeViewer extends React.Component { diff --git a/src/services/geonode.js b/src/services/geonode.js index 8e9c786..0c0a302 100644 --- a/src/services/geonode.js +++ b/src/services/geonode.js @@ -58,7 +58,7 @@ export const getLocalGeoServer = (sources, baseUrl) => { } } }; -export const getThumbnail = (map, opt_id) => { +export const saveThumbnail = (map, opt_id) => { let url = new URL(window.location.href); if (opt_id !== undefined) { url.set('pathname', url.pathname.replace('new', opt_id)); From 4a5d9eb12dc1daaa1db0cb35e8ec02da24f3318e Mon Sep 17 00:00:00 2001 From: bartvde Date: Thu, 2 Feb 2017 16:17:07 +0100 Subject: [PATCH 5/5] WIP --- src/state/map/actions.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/state/map/actions.js b/src/state/map/actions.js index 3e63b0e..5e08756 100644 --- a/src/state/map/actions.js +++ b/src/state/map/actions.js @@ -60,7 +60,20 @@ export function saveMap() { let state = getState(); return saveToGeonode(state.server.url, state.mapConfig, state.map.id) .then((json) => dispatch(saveMapSuccess(json))) - .then((json) => saveThumbnail(state.olMap, json.result.id)) .catch(ex => dispatch(saveMapError(ex))); }; } +export function saveThumbnail() { + return (dispatch, getState) => { + let state = getState(); + return saveThumbnail(state.olMap, state.map.id); + }; +} +export function saveMapAndThumbnail() { + return (dispatch, getState) => { + return dispatch(saveMap()).then(() => { + let state = getState(); + return dispatch(saveThumbnail()); + }); + }; +}