allow to crop frame when exporting/sharing files or rendering animation

HerrZatacke · Jul 17, 2020 · a2e061c · a2e061c
1 parent dedd8ac
commit a2e061c
Show file tree

Hide file tree

Showing 13 changed files with 160 additions and 40 deletions.
diff --git a/src/javascript/app/components/Settings/component.jsx b/src/javascript/app/components/Settings/component.jsx
@@ -5,6 +5,7 @@ import SocketStateIndicator from '../SocketStateIndicator';
 import cleanUrl from '../../../tools/cleanUrl';
 import { getEnv } from '../../../tools/getEnv';
 import supportedCanvasImageFormats from '../../../tools/supportedCanvasImageFormats/îndex';
+import SVG from '../SVG';
 
 class Settings extends React.Component {
   constructor(props) {
@@ -118,6 +119,33 @@ class Settings extends React.Component {
             </label>
           ))}
         </div>
+        <label
+          className={
+            classnames('settings__inputgroup settings__check-group', {
+              'settings__check-group--checked': this.props.exportCropFrame,
+            })
+          }
+        >
+          <span
+            className="settings__label"
+            title="Enable Yoyo-Effect (loop back to the beginning)"
+          >
+            Crop/remove frame when exporting or sharing images
+          </span>
+          <span
+            className="settings__checkbox-wrap"
+          >
+            <input
+              type="checkbox"
+              className="settings__checkbox"
+              checked={this.props.exportCropFrame}
+              onChange={({ target }) => {
+                this.props.setExportCropFrame(target.checked);
+              }}
+            />
+            <SVG name="checkmark" />
+          </span>
+        </label>
         {(this.env.env !== 'webpack-dev') ? null : (
           <>
             <div className="settings__inputgroup">
@@ -267,6 +295,8 @@ Settings.propTypes = {
   pageSize: PropTypes.number.isRequired,
   setPageSize: PropTypes.func.isRequired,
   exportSettings: PropTypes.func.isRequired,
+  setExportCropFrame: PropTypes.func.isRequired,
+  exportCropFrame: PropTypes.bool.isRequired,
 };
 
 Settings.defaultProps = {};

diff --git a/src/javascript/app/components/Settings/container.js b/src/javascript/app/components/Settings/container.js
@@ -7,6 +7,7 @@ const mapStateToProps = (state) => ({
   exportFileTypes: state.exportFileTypes,
   pageSize: state.pageSize,
   savFrameTypes: state.savFrameTypes,
+  exportCropFrame: state.exportCropFrame,
 });
 
 const mapDispatchToProps = (dispatch) => ({
@@ -28,6 +29,12 @@ const mapDispatchToProps = (dispatch) => ({
       payload: savFrameTypes,
     });
   },
+  setExportCropFrame(exportCropFrame) {
+    dispatch({
+      type: 'SET_EXPORT_CROP_FRAME',
+      payload: exportCropFrame,
+    });
+  },
   setPageSize(pageSize) {
     dispatch({
       type: 'SET_PAGESIZE',

diff --git a/src/javascript/app/components/Settings/index.scss b/src/javascript/app/components/Settings/index.scss
@@ -106,6 +106,32 @@
     }
   }
 
+  &__check-group {
+    .svg {
+      width: 30px;
+      height: 30px;
+    }
+
+    .tick {
+      display: none;
+    }
+
+    &--checked .tick {
+      display: block;
+    }
+  }
+
+  &__checkbox-wrap {
+    cursor: pointer;
+    flex: auto 1 1;
+    user-select: none;
+    margin-left: 20px;
+  }
+
+  &__checkbox {
+    display: none;
+  }
+
   &__version {
     margin-top: 40px;
     font-size: 12px;

diff --git a/src/javascript/app/components/VideoParamsForm/component.jsx b/src/javascript/app/components/VideoParamsForm/component.jsx
@@ -19,6 +19,7 @@ class VideoParamsForm extends React.Component {
       yoyo: props.yoyo,
       frame: props.frame,
       lockFrame: props.lockFrame,
+      cropFrame: props.lockFrame,
     };
 
     this.callUpdate = this.callUpdate.bind(this);
@@ -34,6 +35,7 @@ class VideoParamsForm extends React.Component {
       yoyo: this.state.yoyo,
       frame: this.state.frame,
       lockFrame: this.state.lockFrame,
+      cropFrame: this.state.cropFrame,
     };
 
     this.setState(cleanState);
@@ -120,6 +122,28 @@ class VideoParamsForm extends React.Component {
           <SVG name="checkmark" />
           <span className="video-params__check-label-text">Yoyo-Effect</span>
         </label>
+        <label
+          className={
+            classnames('video-params__check-label', {
+              'video-params__check-label--checked': this.props.cropFrame,
+            })
+          }
+        >
+          <input
+            type="checkbox"
+            className="video-params__checkbox"
+            checked={this.state.cropFrame}
+            onChange={({ target }) => {
+              this.setState({
+                cropFrame: target.checked,
+              }, this.callUpdate);
+            }}
+          />
+          <SVG name="checkmark" />
+          <span className="video-params__check-label-text">
+            Crop/remove frame
+          </span>
+        </label>
         <div className="video-params__select-label">
           Palette
         </div>
@@ -139,24 +163,28 @@ class VideoParamsForm extends React.Component {
             }, this.callUpdate);
           }}
         />
-        <div className="video-params__select-label">
-          Frame
-        </div>
-        <FrameSelect
-          frame={this.state.frame}
-          lockFrame={this.state.lockFrame}
-          noFrameOption="As selected per image"
-          updateFrame={(frame) => {
-            this.setState({
-              frame,
-            }, this.callUpdate);
-          }}
-          updateFrameLock={(lockFrame) => {
-            this.setState({
-              lockFrame,
-            }, this.callUpdate);
-          }}
-        />
+        { this.state.cropFrame ? null : (
+          <>
+            <div className="video-params__select-label">
+              Frame
+            </div>
+            <FrameSelect
+              frame={this.state.frame}
+              lockFrame={this.state.lockFrame}
+              noFrameOption="As selected per image"
+              updateFrame={(frame) => {
+                this.setState({
+                  frame,
+                }, this.callUpdate);
+              }}
+              updateFrameLock={(lockFrame) => {
+                this.setState({
+                  lockFrame,
+                }, this.callUpdate);
+              }}
+            />
+          </>
+        )}
       </Lightbox>
     );
   }
@@ -170,6 +198,7 @@ VideoParamsForm.propTypes = {
   invertPalette: PropTypes.bool.isRequired,
   yoyo: PropTypes.bool.isRequired,
   lockFrame: PropTypes.bool.isRequired,
+  cropFrame: PropTypes.bool.isRequired,
   frame: PropTypes.string.isRequired,
   cancel: PropTypes.func.isRequired,
   animate: PropTypes.func.isRequired,

diff --git a/src/javascript/app/components/VideoParamsForm/container.js b/src/javascript/app/components/VideoParamsForm/container.js
@@ -8,6 +8,7 @@ const mapStateToProps = (state) => ({
   lockFrame: state.videoParams.lockFrame || false,
   invertPalette: state.videoParams.invertPalette || false,
   frame: state.videoParams.frame || '',
+  cropFrame: state.videoParams.cropFrame || false,
   palette: state.videoParams.palette || '',
 });
 

diff --git a/src/javascript/app/store/defaults.js b/src/javascript/app/store/defaults.js
@@ -14,6 +14,7 @@ export default {
   videoParams: {},
   filter: {},
   savFrameTypes: 'int',
+  exportCropFrame: false,
   palettes: [
     {
       name: 'Black & White',

diff --git a/src/javascript/app/store/middlewares/animate.js b/src/javascript/app/store/middlewares/animate.js
@@ -19,6 +19,7 @@ const animate = (store) => (next) => (action) => {
       lockFrame: videoLockFrame,
       invertPalette: videoInvertPalette,
       palette: videoPalette,
+      cropFrame,
     } = state.videoParams;
 
     const videoWriter = new WebMWriter({
@@ -62,7 +63,7 @@ const animate = (store) => (next) => (action) => {
               });
             }
 
-            return decoder.getScaledCanvas(scaleFactor);
+            return decoder.getScaledCanvas(scaleFactor, cropFrame);
           })
       )))
       .then((images) => {

diff --git a/src/javascript/app/store/middlewares/share.js b/src/javascript/app/store/middlewares/share.js
@@ -12,8 +12,9 @@ const batch = (store) => (next) => (action) => {
 
     const shareScaleFactor = [...state.exportScaleFactors].pop() || 4;
     const shareFileType = [...state.exportFileTypes].pop() || 'png';
+    const exportCropFrame = state.exportCropFrame;
 
-    const prepareFiles = getPrepareFiles([shareScaleFactor], [shareFileType]);
+    const prepareFiles = getPrepareFiles([shareScaleFactor], [shareFileType], exportCropFrame);
 
     loadImageTiles(image, state)
       .then(prepareFiles(imagePalette, image))

diff --git a/src/javascript/app/store/middlewares/startDownload.js b/src/javascript/app/store/middlewares/startDownload.js
@@ -38,9 +38,9 @@ const startDownload = (store) => (next) => (action) => {
 
   if ((action.type === 'START_DOWNLOAD') || (action.type === 'DOWNLOAD_SELECTION')) {
     const state = store.getState();
-    const { exportScaleFactors, exportFileTypes } = state;
+    const { exportScaleFactors, exportFileTypes, exportCropFrame } = state;
 
-    const prepareFiles = getPrepareFiles(exportScaleFactors, exportFileTypes);
+    const prepareFiles = getPrepareFiles(exportScaleFactors, exportFileTypes, exportCropFrame);
 
     switch (action.type) {
       case 'START_DOWNLOAD':

diff --git a/src/javascript/app/store/reducers.js b/src/javascript/app/store/reducers.js
@@ -4,6 +4,7 @@ import canShare from './reducers/canShareReducer';
 import confirmation from './reducers/confirmationReducer';
 import dragover from './reducers/dragoverReducer';
 import editImage from './reducers/editImageReducer';
+import exportCropFrame from './reducers/exportCropFrameReducer';
 import exportFileTypes from './reducers/exportFileTypesReducer';
 import exportScaleFactors from './reducers/exportScaleFactorsReducer';
 import filter from './reducers/filtersReducer';
@@ -33,6 +34,7 @@ export default combineReducers({
   confirmation,
   dragover,
   editImage,
+  exportCropFrame,
   exportFileTypes,
   exportScaleFactors,
   filter,

diff --git a/src/javascript/app/store/reducers/exportCropFrameReducer.js b/src/javascript/app/store/reducers/exportCropFrameReducer.js
@@ -0,0 +1,12 @@
+const exportCropFrameReducer = (value = false, action) => {
+  switch (action.type) {
+    case 'SET_EXPORT_CROP_FRAME':
+      return action.payload;
+    case 'GLOBAL_UPDATE':
+      return action.payload.exportCropFrame || value;
+    default:
+      return value;
+  }
+};
+
+export default exportCropFrameReducer;
diff --git a/src/javascript/tools/Decoder/index.js b/src/javascript/tools/Decoder/index.js
@@ -82,20 +82,30 @@ class Decoder {
     context.putImageData(imageData, 0, 0);
   }
 
-  getScaledCanvas(scaleFactor) {
-    const initialWidth = TILES_PER_LINE * TILE_PIXEL_WIDTH;
-    const initialHeight = this.getHeight();
-
-    const scaledCanvas = document.createElement('canvas');
-    const scaledContext = scaledCanvas.getContext('2d');
-    scaledCanvas.width = initialWidth * scaleFactor;
-    scaledCanvas.height = initialHeight * scaleFactor;
-
-    this.tiles.forEach((tile, index) => {
-      this.paintTileScaled(this.decodeTile(tile), index, scaledContext, scaleFactor);
-    });
+  getScaledCanvas(scaleFactor, cropFrame = false) {
+    // 2 tiles top/left/bottom/right -> 4 tiles to each side
+    const FRAME_TILES = 4;
+
+    const initialHeight = this.getHeight() - (cropFrame ? TILE_PIXEL_HEIGHT * FRAME_TILES : 0);
+    const initialWidth = (TILES_PER_LINE * TILE_PIXEL_WIDTH) - (cropFrame ? TILE_PIXEL_WIDTH * FRAME_TILES : 0);
+
+    const tilesPerLine = cropFrame ? TILES_PER_LINE - FRAME_TILES : TILES_PER_LINE;
+
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d');
+    canvas.width = initialWidth * scaleFactor;
+    canvas.height = initialHeight * scaleFactor;
+
+    this.tiles
+      .map((tile, index) => (
+        cropFrame && this.tileIndexIsFramePart(index) ? null : tile
+      ))
+      .filter(Boolean)
+      .forEach((tile, index) => {
+        this.paintTileScaled(this.decodeTile(tile), index, context, scaleFactor, tilesPerLine);
+      });
 
-    return scaledCanvas;
+    return canvas;
   }
 
   setCanvas(canvas) {
@@ -247,9 +257,9 @@ class Decoder {
     }
   }
 
-  paintTileScaled(pixels, index, canvasContext, pixelSize) {
-    const tileXOffset = index % TILES_PER_LINE;
-    const tileYOffset = Math.floor(index / TILES_PER_LINE);
+  paintTileScaled(pixels, index, canvasContext, pixelSize, tilesPerLine) {
+    const tileXOffset = index % tilesPerLine;
+    const tileYOffset = Math.floor(index / tilesPerLine);
 
     const pixelXOffset = TILE_PIXEL_WIDTH * tileXOffset * pixelSize;
     const pixelYOffset = TILE_PIXEL_HEIGHT * tileYOffset * pixelSize;

diff --git a/src/javascript/tools/download/getPrepareFiles.js b/src/javascript/tools/download/getPrepareFiles.js
@@ -2,7 +2,7 @@ import Decoder from '../Decoder';
 import RGBNDecoder from '../RGBNDecoder';
 import generateFileName from '../generateFileName';
 
-const getPrepareFiles = (exportScaleFactors, exportFileTypes) => (palette, image) => (tiles) => {
+const getPrepareFiles = (exportScaleFactors, exportFileTypes, exportCropFrame) => (palette, image) => (tiles) => {
 
   const isRGBN = !!image.hashes;
   const decoder = isRGBN ? new RGBNDecoder() : new Decoder();
@@ -45,7 +45,7 @@ const getPrepareFiles = (exportScaleFactors, exportFileTypes) => (palette, image
           exportScaleFactor,
         });
 
-        const scaledCanvas = decoder.getScaledCanvas(exportScaleFactor);
+        const scaledCanvas = decoder.getScaledCanvas(exportScaleFactor, exportCropFrame);
 
         if (scaledCanvas.msToBlob) {
           window.navigator.msSaveBlob(scaledCanvas.msToBlob(), `${filename}.png`);