pages_core 3.12.1 → 3.12.2

data/app/javascript/components/ImageCropper/FocalPoint.tsx

@@ -0,0 +1,94 @@
+import React, { useRef, useState } from "react";
+
+interface Position {
+  x: number,
+  y: number,
+}
+
+interface FocalPointProps {
+  x: number,
+  y: number,
+  onChange: (pos: Position) => void,
+  width: number,
+  height: number
+}
+
+function clamp(val: number, min: number, max: number): number {
+  if (val < min) {
+    return min;
+  } else if (val > max) {
+    return max;
+  } else {
+    return val;
+  }
+}
+
+export default function FocalPoint(props: FocalPointProps) {
+  const { width, height, onChange } = props;
+
+  const [dragging, setDragging] = useState(false);
+  const [position, setPosition] = useState<Position>({ x: props.x, y: props.y });
+
+  const containerRef = useRef<HTMLDivElement>();
+  const pointRef = useRef<HTMLDivElement>();
+
+  const dragStart = (evt: Event) => {
+    evt.preventDefault();
+    evt.stopPropagation();
+    if (evt.target == pointRef.current) {
+      setDragging(true);
+    }
+  };
+
+  const dragEnd = () => {
+    if (dragging) {
+      setDragging(false);
+      onChange(position);
+    }
+  };
+
+  const drag = (evt: TouchEvent | MouseEvent) => {
+    if (dragging) {
+      let x: number , y: number;
+      const containerSize = containerRef.current.getBoundingClientRect();
+      evt.preventDefault();
+
+      if ("touches" in evt && evt.type == "touchmove") {
+        x = evt.touches[0].clientX - (containerSize.x || containerSize.left);
+        y = evt.touches[0].clientY - (containerSize.y || containerSize.top);
+      } else {
+        x = evt.clientX - (containerSize.x || containerSize.left);
+        y = evt.clientY - (containerSize.y || containerSize.top);
+      }
+
+      x = clamp(x, 0, width);
+      y = clamp(y, 0, height);
+
+      setPosition({
+        x: (x / width) * 100,
+        y: (y / height) * 100
+      });
+    }
+  };
+
+  const x = width * (position.x / 100);
+  const y = height * (position.y / 100);
+  const pointStyle = {
+    transform: `translate3d(${x}px, ${y}px, 0)`
+  };
+
+  return (
+    <div className="focal-editor"
+         ref={containerRef}
+         onTouchStart={dragStart}
+         onTouchEnd={dragEnd}
+         onTouchMove={drag}
+         onMouseDown={dragStart}
+         onMouseUp={dragEnd}
+         onMouseMove={drag}>
+      <div className="focal-point"
+           style={pointStyle}
+           ref={pointRef} />
+    </div>
+  );
+}

data/app/javascript/components/ImageCropper/{Image.jsx → Image.tsx}

@@ -1,11 +1,19 @@
 import React from "react";
-import PropTypes from "prop-types";
 import ReactCrop from "react-image-crop";
 
-import { cropSize } from "./useCrop";
+import { cropSize, CropSize, CropState, Position, Size } from "./useCrop";
 import FocalPoint from "./FocalPoint";
 
-export default function Image(props) {
+interface ImageProps {
+  containerSize: Size,
+  croppedImage: string,
+  cropState: CropState,
+  focalPoint: Position,
+  setCrop: (crop: CropSize) => void,
+  setFocal: (focal: Position) => void
+}
+
+export default function Image(props: ImageProps) {
   const imageSize = () => {
     const { image, cropping, crop_width, crop_height } = props.cropState;
     if (cropping) {
@@ -19,8 +27,8 @@ export default function Image(props) {
   const maxHeight = props.containerSize.height;
   const aspect = imageSize().width / imageSize().height;
 
-  var width = maxWidth;
-  var height = maxWidth / aspect;
+  let width = maxWidth;
+  let height = maxWidth / aspect;
 
   if (height > maxHeight) {
     height = maxHeight;
@@ -54,12 +62,3 @@ export default function Image(props) {
   }
 
 }
-
-Image.propTypes = {
-  containerSize: PropTypes.object,
-  croppedImage: PropTypes.string,
-  cropState: PropTypes.object,
-  focalPoint: PropTypes.object,
-  setCrop: PropTypes.func,
-  setFocal: PropTypes.func
-};

data/app/javascript/components/ImageCropper/{Toolbar.jsx → Toolbar.tsx}

@@ -1,7 +1,19 @@
 import React from "react";
-import PropTypes from "prop-types";
 
-export default function Toolbar(props) {
+import { ImageResource } from "../../types";
+import { CropState } from "./useCrop";
+
+type Ratio = number | null;
+
+interface ToolbarProps {
+  cropState: CropState,
+  image: ImageResource,
+  setAspect: (Ratio) => void,
+  toggleCrop: (evt: Event) => void,
+  toggleFocal: (evt: Event) => void
+}
+
+export default function Toolbar(props: ToolbarProps) {
   const { cropping } = props.cropState;
 
   const aspectRatios = [
@@ -10,7 +22,7 @@ export default function Toolbar(props) {
     ["16:9", 16/9]
   ];
 
-  const updateAspect = (ratio) => (evt) => {
+  const updateAspect = (ratio: Ratio) => (evt: Event) => {
     evt.preventDefault();
     props.setAspect(ratio);
   };
@@ -52,7 +64,7 @@ export default function Toolbar(props) {
             Lock aspect ratio:
           </div>
           {aspectRatios.map(ratio => (
-            <button key={"ratio-" + ratio[1]}
+            <button key={ratio[0]}
                     className={(ratio[1] == props.cropState.aspect) ? "active" : ""}
                     onClick={updateAspect(ratio[1])}>
               {ratio[0]}
@@ -63,11 +75,3 @@ export default function Toolbar(props) {
     </div>
   );
 }
-
-Toolbar.propTypes = {
-  cropState: PropTypes.object,
-  image: PropTypes.object,
-  setAspect: PropTypes.func,
-  toggleCrop: PropTypes.func,
-  toggleFocal: PropTypes.func
-};

data/app/javascript/components/ImageCropper/{useCrop.js → useCrop.ts}

@@ -1,9 +1,49 @@
 import { useEffect, useReducer, useState } from "react";
 
-function applyAspect(state, aspect) {
-  let crop = cropSize(state);
-  let image = state.image;
-  let imageAspect = image.real_width / image.real_height;
+import { ImageResource } from "../../types";
+
+export interface Position {
+  x: number,
+  y: number,
+}
+
+export interface Size {
+  width: number,
+  height: number
+}
+
+interface CropParams {
+  crop_start_x: number,
+  crop_start_y: number,
+  crop_width: number,
+  crop_height: number,
+  crop_gravity_x: number,
+  crop_gravity_y: number,
+}
+
+export interface CropState extends CropParams {
+  aspect: number | null,
+  cropping: boolean,
+  image: ImageResource
+}
+
+export interface CropSize {
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  aspect?: number
+}
+
+export interface CropAction {
+  type: string,
+  payload?: CropSize | Position
+}
+
+function applyAspect(state: CropState, aspect: number | null) {
+  const crop = cropSize(state);
+  const image = state.image;
+  const imageAspect = image.real_width / image.real_height;
 
   // Maximize and center crop area
   if (aspect) {
@@ -25,7 +65,7 @@ function applyAspect(state, aspect) {
   return(applyCrop(state, crop));
 }
 
-function applyCrop(state, crop) {
+function applyCrop(state: CropState, crop: CropSize) {
   const { image } = state;
 
   // Don't crop if dimensions are below the threshold
@@ -44,7 +84,7 @@ function applyCrop(state, crop) {
            crop_height:  image.real_height * (crop.height / 100) });
 }
 
-function cropReducer(state, action) {
+function cropReducer(state: CropState, action: CropAction): CropState {
   const { crop_start_x,
           crop_start_y,
           crop_width,
@@ -86,7 +126,7 @@ function cropReducer(state, action) {
   }
 }
 
-function croppedImageCanvas(img, crop) {
+function croppedImageCanvas(img: HTMLImageElement, crop: CropSize) {
   const canvas = document.createElement("canvas");
   canvas.width = (img.naturalWidth * (crop.width / 100));
   canvas.height = (img.naturalHeight * (crop.height / 100));
@@ -105,9 +145,9 @@ function croppedImageCanvas(img, crop) {
   return [canvas, ctx];
 }
 
-function imageDataUrl(canvas, ctx) {
-  let pixels = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
-  for (var i = 0; i < (pixels.length / 4); i++) {
+function imageDataUrl(canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D): string {
+  const pixels = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
+  for (let i = 0; i < (pixels.length / 4); i++) {
     if (pixels[(i * 4) + 3] !== 255) {
       return canvas.toDataURL("image/png");
     }
@@ -115,17 +155,19 @@ function imageDataUrl(canvas, ctx) {
   return canvas.toDataURL("image/jpeg");
 }
 
-export function cropParams(state) {
-  const maybe = (func) => (val) => (val === null) ? val : func(val);
+export function cropParams(state: CropState): CropParams {
+  const maybe = (func: (number) => number) => (val: number | null) => (val === null) ? val : func(val);
   const maybeRound = maybe(Math.round);
   const maybeCeil = maybe(Math.ceil);
 
-  let crop = { crop_start_x:   maybeRound(state.crop_start_x),
-               crop_start_y:   maybeRound(state.crop_start_y),
-               crop_width:     maybeCeil(state.crop_width),
-               crop_height:    maybeCeil(state.crop_height),
-               crop_gravity_x: maybeRound(state.crop_gravity_x),
-               crop_gravity_y: maybeRound(state.crop_gravity_y) };
+  const crop: CropParams = {
+    crop_start_x:   maybeRound(state.crop_start_x),
+    crop_start_y:   maybeRound(state.crop_start_y),
+    crop_width:     maybeCeil(state.crop_width),
+    crop_height:    maybeCeil(state.crop_height),
+    crop_gravity_x: maybeRound(state.crop_gravity_x),
+    crop_gravity_y: maybeRound(state.crop_gravity_y)
+  };
 
   if (crop.crop_start_x + crop.crop_width > state.image.real_width) {
     crop.crop_width = state.image.real_width - crop.crop_start_x;
@@ -138,7 +180,7 @@ export function cropParams(state) {
   return(crop);
 }
 
-export function cropSize(state) {
+export function cropSize(state: CropState): CropSize {
   const { image,
           aspect,
           crop_start_x,
@@ -149,8 +191,8 @@ export function cropSize(state) {
   const x = (crop_start_x / image.real_width) * 100;
   const y = (crop_start_y / image.real_height) * 100;
 
-  var width = (crop_width / image.real_width) * 100;
-  var height = (crop_height / image.real_height) * 100;
+  let width = (crop_width / image.real_width) * 100;
+  let height = (crop_height / image.real_height) * 100;
 
   if (aspect && width) {
     height = (width / aspect) * imageAspect;
@@ -165,24 +207,25 @@ export function cropSize(state) {
   }
 }
 
-export default function useCrop(image) {
-  const [state, dispatch] = useReducer(
-    cropReducer,
-    { aspect:         null,
-      cropping:       false,
-      crop_start_x:   image.crop_start_x || 0,
-      crop_start_y:   image.crop_start_y || 0,
-      crop_width:     image.crop_width || image.real_width,
-      crop_height:    image.crop_height || image.real_height,
-      crop_gravity_x: image.crop_gravity_x,
-      crop_gravity_y: image.crop_gravity_y,
-      image:          image }
-  );
+export default function useCrop(image: ImageResource) {
+  const initialState: CropState = {
+    aspect:         null,
+    cropping:       false,
+    crop_start_x:   image.crop_start_x || 0,
+    crop_start_y:   image.crop_start_y || 0,
+    crop_width:     image.crop_width || image.real_width,
+    crop_height:    image.crop_height || image.real_height,
+    crop_gravity_x: image.crop_gravity_x,
+    crop_gravity_y: image.crop_gravity_y,
+    image:          image
+  };
+
+  const [state, dispatch] = useReducer(cropReducer, initialState);
 
-  const [croppedImage, setCroppedImage] = useState(null);
+  const [croppedImage, setCroppedImage] = useState<string | null>(null);
 
   async function updateCroppedImage() {
-    const img = new Image();
+    const img: HTMLImageElement = new Image();
     img.src = state.image.uncropped_url;
     await img.decode();
     const [canvas, ctx] = croppedImageCanvas(img, cropSize(state));
@@ -191,7 +234,7 @@ export default function useCrop(image) {
 
   useEffect(() => {
     if (!state.cropping) {
-      updateCroppedImage();
+      void updateCroppedImage();
     }
   }, [state.cropping]);
 

data/app/javascript/components/{ImageCropper.jsx → ImageCropper.tsx}

@@ -1,13 +1,21 @@
 import React, { useEffect, useRef, useState } from "react";
-import PropTypes from "prop-types";
 
 import Image from "./ImageCropper/Image";
 import Toolbar from "./ImageCropper/Toolbar";
 
+import { CropAction, CropSize, CropState,
+         Position } from "./ImageCropper/useCrop";
+
 export { default as useCrop,
          cropParams } from "./ImageCropper/useCrop";
 
-function focalPoint(state) {
+interface ImageCropperProps {
+  croppedImage: string,
+  cropState: CropState,
+  dispatch: (action: CropAction) => void
+}
+
+function focalPoint(state: CropState): Position {
   if (state.crop_gravity_x === null || state.crop_gravity_y === null) {
     return null;
   } else {
@@ -18,12 +26,12 @@ function focalPoint(state) {
   }
 }
 
-export default function ImageCropper(props) {
-  const containerRef = useRef();
-  const [containerSize, setContainerSize] = useState(null);
+export default function ImageCropper(props: ImageCropperProps) {
+  const containerRef = useRef<HTMLDivElement>();
+  const [containerSize, setContainerSize] = useState();
 
   const handleResize = () => {
-    let elem = containerRef.current;
+    const elem = containerRef.current;
     if (elem) {
       setContainerSize({ width: elem.offsetWidth - 2,
                          height: elem.offsetHeight - 2 });
@@ -39,15 +47,15 @@ export default function ImageCropper(props) {
 
   useEffect(handleResize, []);
 
-  const setAspect = (aspect) => {
+  const setAspect = (aspect: number) => {
     props.dispatch({ type: "setAspect", payload: aspect });
   };
 
-  const setCrop = (crop) => {
+  const setCrop = (crop: CropSize) => {
     props.dispatch({ type: "setCrop", payload: crop });
   };
 
-  const setFocal = (focal) => {
+  const setFocal = (focal: Position) => {
     props.dispatch({ type: "setFocal", payload: focal });
   };
 
@@ -82,9 +90,3 @@ export default function ImageCropper(props) {
     </div>
   );
 }
-
-ImageCropper.propTypes = {
-  croppedImage: PropTypes.string,
-  cropState: PropTypes.object,
-  dispatch: PropTypes.func
-};

data/app/javascript/components/ImageEditor/{Form.jsx → Form.tsx}

@@ -1,21 +1,34 @@
-import React from "react";
-import PropTypes from "prop-types";
-import ModalStore from "../../stores/ModalStore";
-import ToastStore from "../../stores/ToastStore";
+import React, { ChangeEvent } from "react";
+import useModalStore from "../../stores/useModalStore";
+import useToastStore from "../../stores/useToastStore";
+import { Locale, ImageResource } from "../../types";
 import copyToClipboard, { copySupported } from "../../lib/copyToClipboard";
 
-export default function Form(props) {
+interface FormProps {
+  alternative: Record<string, string>,
+  caption: Record<string, string>,
+  image: ImageResource,
+  locale: string,
+  locales: Record<string, Locale>,
+  setLocale: (locale: string) => void,
+  save: (evt: Event) => void,
+  showCaption: boolean,
+  updateLocalization: (name: "alternative" | "caption", value: string) => void
+}
+
+export default function Form(props: FormProps) {
   const { alternative, caption, image, locale, locales } = props;
 
-  const copyEmbedCode = (evt) => {
+  const closeModal = useModalStore((state) => state.close);
+  const notice = useToastStore((state) => state.notice);
+
+  const copyEmbedCode = (evt: Event) => {
     evt.preventDefault();
     copyToClipboard(`[image:${image.id}]`);
-    ToastStore.dispatch({
-      type: "NOTICE", message: "Embed code copied to clipboard"
-    });
+    notice("Embed code copied to clipboard");
   };
 
-  const handleChangeLocale = (evt) => {
+  const handleChangeLocale = (evt: ChangeEvent<HTMLSelectElement>) => {
     props.setLocale(evt.target.value);
   };
 
@@ -83,22 +96,10 @@ export default function Form(props) {
         <button onClick={props.save}>
           Save
         </button>
-        <button onClick={() => ModalStore.dispatch({ type: "CLOSE" })}>
+        <button onClick={closeModal}>
           Cancel
         </button>
       </div>
     </form>
   );
 }
-
-Form.propTypes = {
-  alternative: PropTypes.object,
-  caption: PropTypes.object,
-  image: PropTypes.object,
-  locale: PropTypes.string,
-  locales: PropTypes.object,
-  setLocale: PropTypes.func,
-  save: PropTypes.func,
-  showCaption: PropTypes.bool,
-  updateLocalization: PropTypes.func
-};

data/app/javascript/components/{ImageEditor.jsx → ImageEditor.tsx}

@@ -1,12 +1,20 @@
 import React, { useState } from "react";
-import PropTypes from "prop-types";
-import ModalStore from "../stores/ModalStore";
+import useModalStore from "../stores/useModalStore";
 import { putJson } from "../lib/request";
 
+import { Locale, ImageResource } from "../types";
 import ImageCropper, { useCrop, cropParams } from "./ImageCropper";
 import Form from "./ImageEditor/Form";
 
-export default function ImageEditor(props) {
+interface ImageEditorProps {
+  image: ImageResource,
+  caption: boolean,
+  locale: string,
+  locales: Record<string, Locale>,
+  onUpdate?: (data: ImageResource, croppedImage: string | null) => void
+}
+
+export default function ImageEditor(props: ImageEditorProps) {
   const [cropState, dispatch, croppedImage] = useCrop(props.image);
   const [locale, setLocale] = useState(props.locale);
   const [localizations, setLocalizations] = useState({
@@ -14,24 +22,26 @@ export default function ImageEditor(props) {
     alternative: props.image.alternative || {},
   });
 
-  const updateLocalization = (name, value) => {
+  const closeModal = useModalStore((state) => state.close);
+
+  const updateLocalization = (name: "alternative" | "caption", value: string) => {
     setLocalizations({
       ...localizations,
       [name]: { ...localizations[name], [locale]: value }
     });
   };
 
-  const save = (evt) => {
+  const save = (evt: Event) => {
     evt.preventDefault();
     evt.stopPropagation();
 
     const data = { ...localizations, ...cropParams(cropState) };
-    putJson(`/admin/images/${props.image.id}`, { image: data });
+    void putJson(`/admin/images/${props.image.id}`, { image: data });
 
     if (props.onUpdate) {
       props.onUpdate(data, croppedImage);
     }
-    ModalStore.dispatch({ type: "CLOSE" });
+    closeModal();
   };
 
   return (
@@ -52,11 +62,3 @@ export default function ImageEditor(props) {
     </div>
   );
 }
-
-ImageEditor.propTypes = {
-  image: PropTypes.object,
-  locale: PropTypes.string,
-  locales: PropTypes.object,
-  caption: PropTypes.bool,
-  onUpdate: PropTypes.func
-};

data/app/javascript/components/ImageGrid/{DragElement.jsx → DragElement.tsx}

@@ -1,7 +1,15 @@
-import React from "react";
-import PropTypes from "prop-types";
+import React, { RefObject } from "react";
 
-export default function DragElement(props) {
+import { ImageResource } from "../../types";
+import { DragState } from "../drag";
+
+interface DragElementProps {
+  container: RefObject<HTMLDivElement>,
+  draggable: string | { record: { image: ImageResource, src?: string } },
+  dragState: DragState
+}
+
+export default function DragElement(props: DragElementProps) {
   const { draggable, dragState, container } = props;
 
   if (draggable === "Files") {
@@ -15,16 +23,10 @@ export default function DragElement(props) {
     };
     return (
       <div className="drag-image" style={translateStyle}>
-        {draggable.record.image && (
+        {"record" in draggable && draggable.record.image && (
           <img src={draggable.record.src || draggable.record.image.thumbnail_url} />
         )}
       </div>
     );
   }
 }
-
-DragElement.propTypes = {
-  draggable: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-  dragState: PropTypes.object,
-  container: PropTypes.object
-};