🚧 Fix flickering pictures & mobile drag&drop

Author: Jonas Gossens

src/react-chayns-gallery/component/Gallery.jsx

@@ -54,16 +54,14 @@ export default class Gallery extends Component {
     constructor(props) {
         super(props);
         this.galleryRef = React.createRef();
+        this.state = { active: null, images: props.images, dropzone: null };
     }
 
-    componentDidUpdate(prevProps) {
-        const { images } = this.props;
-        if (prevProps.images !== images && this.selectedElement && this.lastDropzone) {
-            this.selectedElement.classList.remove('cc__gallery__image--active');
-            this.lastDropzone.classList.remove('cc__gallery__image--show_dropzone');
-            this.selectedElement = null;
+    componentWillUpdate(nextProps, nextState) {
+        if (nextProps.images !== nextState.images) {
+            // eslint-disable-next-line react/no-will-update-set-state
+            this.setState({ images: nextProps.images });
         }
-        return true;
     }
 
     onDown = (event, index, image) => {
@@ -83,23 +81,18 @@ export default class Gallery extends Component {
         this.offsetY = this.pageYStart - this.selectedElementStartPosition.top;
 
         document.addEventListener('mousemove', this.onMove);
-        document.addEventListener('touchmove', this.onMove);
+        document.addEventListener('touchmove', this.onMove, { passive: false });
         document.addEventListener('mouseup', this.onUp);
         document.addEventListener('touchend', this.onUp);
         document.addEventListener('touchcancel', this.onUp);
     };
 
     onMove = (event) => {
-
+        event.preventDefault();
         const { pageX, pageY } = event.changedTouches ? event.changedTouches[0] : event;
         const { clientWidth: galleryWidth } = this.galleryRef.current;
         const { clientHeight: itemHeight, clientWidth: itemWidth } = event.target.parentElement.parentElement.parentElement;
 
-        // set selected element active
-        if (!this.selectedElement.classList.contains('cc__gallery__image--active')) {
-            this.selectedElement.classList.add('cc__gallery__image--active');
-        }
-
         // move item
         this.selectedElement.style.left = `${pageX - this.galleryOffsetX - this.offsetX}px`;
         this.selectedElement.style.top = `${pageY - this.galleryOffsetY - this.offsetY}px`;
@@ -111,24 +104,24 @@ export default class Gallery extends Component {
         const row = Math.floor(middleY / itemHeight);
         const column = Math.floor(middleX / itemWidth);
         this.newPosition = (row * itemsPerRow) + column;
+        const { dropzone: oldDropzone } = this.state;
+        const newDropzone = this.newPosition + (this.newPosition > this.index ? 1 : 0);
+        if (oldDropzone !== newDropzone) {
+            this.setState({ dropzone: newDropzone, active: this.index });
+        }
 
         // show corresponding dropzone
         let insertPosition = this.newPosition * 2; // dropzones and images are alternating
         if (this.newPosition > this.index) {
             insertPosition += 2;
         }
         const dropzone = this.galleryRef.current.children[insertPosition];
-        if (this.lastDropzone && this.lastDropzone !== dropzone) {
-            this.lastDropzone.classList.remove('cc__gallery__image--show_dropzone');
-        }
-        if (dropzone) {
-            dropzone.classList.add('cc__gallery__image--show_dropzone');
-        }
         this.lastDropzone = dropzone;
     };
 
     onUp = () => {
         if (chayns.env.isApp || chayns.env.isMyChaynsApp) chayns.allowRefreshScroll();
+
         document.removeEventListener('mousemove', this.onMove);
         document.removeEventListener('touchmove', this.onMove);
         document.removeEventListener('mouseup', this.onUp);
@@ -147,20 +140,27 @@ export default class Gallery extends Component {
                     this.selectedElement.removeEventListener('transitionend', onTransitionEnd);
                     this.selectedElement.classList.remove('cc__gallery__image--transition');
 
+                    const image = images[this.index];
+                    const newArray = images.slice();
+                    newArray.splice(this.index, 1);
+                    newArray.splice(this.newPosition, 0, image);
+
                     if (onDragEnd) {
-                        const image = images[this.index];
-                        const newArray = images.slice();
-                        newArray.splice(this.index, 1);
-                        newArray.splice(this.newPosition, 0, image);
                         onDragEnd(newArray);
                     }
+
+                    this.setState({ dropzone: null, active: null, images: newArray });
                 }
             };
             this.transitionEnded = false;
             this.selectedElement.addEventListener('transitionend', onTransitionEnd);
         } else {
             this.selectedElement.classList.remove('cc__gallery__image--active');
         }
+        // Enable scrolling.
+        document.ontouchmove = function (e) {
+            return true;
+        };
     };
 
     render() {
@@ -173,11 +173,11 @@ export default class Gallery extends Component {
             className,
             stopPropagation,
             onClick,
-            images,
         } = this.props;
         const { style: propStyle } = this.props;
         const style = { ...propStyle };
         const defaultMode = !dragMode && !deleteMode;
+        const { active, dropzone: dropzoneId, images } = this.state;
 
         let styleHeight;
         if (defaultMode) {
@@ -193,11 +193,15 @@ export default class Gallery extends Component {
         }
         const numberOfImages = images.length;
 
-        const dropzone = key => (
-            <div key={key} id={key} className="cc__gallery__image cc__gallery__image--dropzone">
+        const dropzone = (key, show) => (
+            <div
+                key={key}
+                id={key}
+                className={classNames('cc__gallery__image cc__gallery__image--dropzone', { 'cc__gallery__image--show_dropzone': show })}
+            >
                 <ImageContainer>
                     <div
-                        className="cc__gallery__image__dropzone chayns__background-color--101 chayns__border-color--300"
+                        className={classNames('cc__gallery__image__dropzone chayns__background-color--101 chayns__border-color--300')}
                     />
                 </ImageContainer>
             </div>
@@ -216,7 +220,7 @@ export default class Gallery extends Component {
             >
                 {
                     dragMode
-                        ? dropzone('dropzone')
+                        ? dropzone('dropzone', dropzoneId === 0)
                         : null
                 }
                 {
@@ -228,8 +232,10 @@ export default class Gallery extends Component {
                                     icon: 'ts-bars',
                                     className: 'cc__gallery__image__tool--drag',
                                     onDown: (event) => {
+                                        event.preventDefault();
                                         this.onDown(event, index, image);
                                     },
+                                    noScroll: true,
                                 });
                             }
                             if (deleteMode) {
@@ -242,7 +248,11 @@ export default class Gallery extends Component {
                             }
 
                             return [
-                                <div className="cc__gallery__image" id={`image${index}`} key={`imageDiv${index}`}>
+                                <div
+                                    className={classNames('cc__gallery__image', { 'cc__gallery__image--active': index === active })}
+                                    id={`image${index}`}
+                                    key={`imageDiv${index}`}
+                                >
                                     <ImageContainer
                                         tools={tools}
                                     >
@@ -263,7 +273,7 @@ export default class Gallery extends Component {
                                     </ImageContainer>
                                 </div>,
                                 dragMode
-                                    ? dropzone(`dropzone${index}`)
+                                    ? dropzone(`dropzone${index}`, dropzoneId === index + 1)
                                     : null,
                             ];
                         }

src/react-chayns-gallery/component/Gallery.scss

@@ -96,7 +96,6 @@
         cursor: grab;
         &:active{
           cursor: grabbing;
-          touch-action: none; // no scrolling
         }
       }
     }
@@ -114,6 +113,7 @@
     }
 
     &--transition {
+      will-change: top, left;
       transition: top 250ms ease, left 250ms ease;
     }
 

src/react-chayns-gallery/component/Image.jsx

@@ -84,12 +84,19 @@ export default class Image extends PureComponent {
                 this.setState({ imageUrl: image });
             }
         } else { // file
-            const imageUrl = await getDataUrlFromFile(image);
-            if (styleLandscape || stylePortrait) { // get dimensions if needed
-                const metaData = await getImageMetaDataFromPreview(imageUrl);
-                this.setState({ metaData, imageUrl });
-            } else { // set only the image url
-                this.setState({ imageUrl });
+            const cacheId = `##FILE##${image.name}${image.lastModified}${image.size}`;
+            if (Image.imageMetaData[cacheId]) { // use cache
+                this.setState(Image.imageMetaData[cacheId]);
+            } else { // get dataUrl and metaData and set cache
+                const imageUrl = await getDataUrlFromFile(image);
+                if (styleLandscape || stylePortrait) { // get dimensions if needed
+                    const metaData = await getImageMetaDataFromPreview(imageUrl);
+                    Image.imageMetaData[cacheId] = { metaData, imageUrl };
+                    this.setState({ metaData, imageUrl });
+                } else { // set only the image url
+                    Image.imageMetaData[cacheId] = { imageUrl };
+                    this.setState({ imageUrl });
+                }
             }
         }
     };

src/react-chayns-gallery/component/ImageContainer.scss

@@ -12,11 +12,11 @@
     right: 0;
   }
 
-  &__tools{
-    touch-action: none; // no scrolling
+  &__tools {
     position: absolute;
     top: 0;
     right: 0;
     display: flex;
+    touch-action: none; // no scrolling
   }
 }