Show images

.gitignore

@@ -9,3 +9,4 @@ stats.json
 npm-debug.log
 .idea
 .awcache
+static/*

app/containers/Editor/index.tsx

@@ -12,7 +12,7 @@ import { createStructuredSelector } from 'reselect';
 import { Set } from 'immutable';
 import { compose } from 'redux';
 import cx from 'classnames';
-import { Map, ImageOverlay } from 'react-leaflet';
+import { Map } from 'react-leaflet';
 import { StretchedLayoutContainer, StretchedLayoutItem } from 'quinoa-design-library';
 
 import injectSaga from 'utils/injectSaga';
@@ -26,7 +26,7 @@ import Annotation from 'types/Annotation';
 import { SupportedShapes } from 'types';
 import { Feature } from 'geojson';
 import { collision } from 'utils/geo';
-import { useTools, useFlyTo, useUrl, useMapLock } from 'utils/hooks';
+import { useTools, useFlyTo, useMapLock } from 'utils/hooks';
 
 import {
   createSlideshowAction,
@@ -42,6 +42,7 @@ import {
 import reducer from './reducer';
 import saga from './saga';
 import './styles.css';
+import IiifLayer from 'components/IiifLayer';
 
 const mapStateToProps = createStructuredSelector({
   slideshow: makeSelectSlideshow(),
@@ -77,12 +78,11 @@ interface EditorProps {
   readonly setMap: (event) => void;
 }
 
-const minZoom = 8;
-const maxZoom = 12;
-
+const minZoom = 0;
+const maxZoom = 20;
 const EditorMap: React.SFC<EditorProps> = (props) => {
   const {slideshow, map} = props;
-  const imageUrl: string = useUrl(slideshow.image.file);
+  const imageUrl: string = 'http://localhost:3000/test-image/info.json';
   const maxBounds: LatLngBounds = useMapLock(map, slideshow.image);
   const [tool, setTool, useToggleTool] = useTools(SupportedShapes.selector);
 
@@ -108,7 +108,7 @@ const EditorMap: React.SFC<EditorProps> = (props) => {
     },
     [props.changeSelection, tool],
   );
-  const onMapClick = useCallback((event) => {
+  const onMapClick = useCallback(() => {
     if (tool === SupportedShapes.selector) {
       props.changeSelection();
     }
@@ -143,12 +143,11 @@ const EditorMap: React.SFC<EditorProps> = (props) => {
         // zoomControl={false}
         // keyboard={false}
         // scrollWheelZoom={false}
-        maxBounds={maxBounds}
         crs={L.CRS.Simple}
         minZoom={minZoom}
         maxZoom={maxZoom}
         center={[0, 0]}>
-        {maxBounds && <ImageOverlay url={imageUrl} bounds={maxBounds} />}
+        <IiifLayer url={imageUrl} tileSize={512} />
         {(tool !== SupportedShapes.selector) && <DrawingLayer
           onDrown={tool === SupportedShapes.selector
             ? onSelect

app/containers/Editor/reducer.ts

@@ -57,7 +57,6 @@ export default combineReducers<ContainerState, ContainerActions>({
     return map;
   },
   slideshow: (slideshow = initialState.slideshow, action) => {
-    console.log(action);
     if (slideshow) {
       switch (action.type) {
         case ActionTypes.CHANGE_ORDER:

app/containers/Editor/saga.ts

@@ -12,9 +12,9 @@ const selectSlideshow = makeSelectSlideshow();
 
 export function* setSlideshow(slideshow: Slideshow) {
   if (isImmutable(slideshow)) {
-    console.log('sagas: save slideshow');
     yield db.setItem('slideshow', slideshow.toJS());
   }
+  yield slideshowCreator(slideshow.image.file);
   yield put(
     createSlideshowAction.success(
       slideshow,
@@ -25,10 +25,10 @@ export function* setSlideshow(slideshow: Slideshow) {
 export function* createSlideshow(action: any) {
   try {
     const slideshow: Slideshow = yield slideshowCreator(action.payload);
-    console.log('sagas: slideshow initalized');
-    console.log('sagas: sending slideshow to reducer');
+    // sagas: slideshow initalized
+    // sagas: sending slideshow to reducer
     yield setSlideshow(slideshow);
-    console.log('sagas: slideshow sent to reducer');
+    // sagas: slideshow sent to reducer
     return slideshow;
   } catch (e) {
     console.info('This should not happend');
@@ -37,10 +37,10 @@ export function* createSlideshow(action: any) {
 }
 
 export function* createAndRedirect(action) {
-  console.log('sagas: createSlideshow');
+  // sagas: createSlideshow
   yield createSlideshow(action);
-  console.log('sagas: slidehsow created');
-  console.log('sagas: redirect to editor');
+  // sagas: slidehsow created
+  // sagas: redirect to editor
   yield put(push('/editor'));
 }
 

app/containers/HomePage/index.tsx

@@ -26,6 +26,7 @@ interface HomePageProps {
 
 const stopPropagation = (files: FileList, event: any) => {
   event.preventDefault();
+  console.log(files[0]);
   return files[0];
 };
 

app/types/Slideshow.ts

@@ -3,6 +3,8 @@ import { Record, List } from 'immutable';
 import { split, nth, curry, map, pipe } from 'ramda';
 import Annotation from 'types/Annotation';
 import Cover from './Cover';
+// import slicer from 'utils/slice';
+// import db from 'utils/db';
 
 interface SlideshowArgs {
   id?: string;
@@ -74,7 +76,6 @@ const getSvgSize = (svgElement: Element): Box | never => {
 
 export const slideshowCreator = (file: File): Promise<Slideshow> =>
   new Promise((resolve, reject) => {
-    console.log('slideshow creator', file.type);
     if (file.type === svgType) {
       const reader = new FileReader();
       reader.onload = () => {
@@ -115,13 +116,19 @@ export const slideshowCreator = (file: File): Promise<Slideshow> =>
     } else {
       const url = window.URL.createObjectURL(file);
       const img = new Image();
-      img.onload = () => {
+      img.onload = async () => {
         if (img.width === 0) {
           return reject(new Error('Slideshow.image has a width of 0'));
         }
         if (img.height === 0) {
           return reject(new Error('Slideshow.image has a height of 0'));
         }
+
+        // for (const [url, file] of await slicer(img)) {
+        //   // console.log('ca se passe ?', i++);
+        //   console.log('db.setItem(url, file)', await db.setItem(url, file));
+        // }
+
         return resolve(new Slideshow({
           image: new Cover({
             file: file,
@@ -130,7 +137,10 @@ export const slideshowCreator = (file: File): Promise<Slideshow> =>
           }),
         }));
       };
-      img.onerror = reject;
+      img.onerror = (error) => {
+        console.error(error);
+        reject(error);
+      };
       img.src = url;
     }
   });

app/utils/hooks.ts

@@ -93,8 +93,8 @@ export function useMapLock(map: L.Map, image: Cover): LatLngBounds {
     if (map !== null) {
       setMaxBounds(
         new LatLngBounds(
-          map.unproject([0, image.height], map.getMaxZoom()),
-          map.unproject([image.width, 0], map.getMaxZoom()),
+          map.unproject([0, image.height * 2], map.getMaxZoom()),
+          map.unproject([image.width * 2, 0], map.getMaxZoom()),
         ),
       );
     }

app/utils/imageManipulation.ts

@@ -12,6 +12,43 @@ function calculateAspectRatioFit(srcWidth: number, srcHeight: number, maxWidth:
   return { width: srcWidth * ratio, height: srcHeight * ratio };
 }
 
+export function resizeImage(img, region, size, name) {
+  return new Promise((resolve, reject) => {
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d') as CanvasRenderingContext2D;
+    const [x, y, w, h] = region;
+    const drawingWidth = w;
+    const drawingHeight = h;
+
+    img.width = w;
+    img.height = h;
+    canvas.width = w;
+    canvas.height = h;
+    console.log('start draw');
+    context.drawImage(
+      img,
+      x,
+      y,
+      drawingWidth,
+      drawingHeight,
+      0,
+      0,
+      canvas.width,
+      canvas.height,
+    );
+    console.log('end draw', x, y, w, h);
+    canvas.toBlob((blob: Blob) => {
+      resolve(
+        new File(
+          [blob],
+          `default.jpg`,
+          {type: 'image/jpeg'},
+        ),
+      );
+    });
+  });
+}
+
 function loadImage(file: File, options: Options): Promise<File> {
   return new Promise((resolve, reject) => {
     const img = new Image();