@wordpress/components 19.17.0 → 20.0.2-next.957ca95e4c.0

package/build-module/focal-point-picker/index.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
 /**
@@ -9,9 +10,8 @@ import classnames from 'classnames';
  */
 
 import { __ } from '@wordpress/i18n';
-import { Component, createRef } from '@wordpress/element';
-import { withInstanceId } from '@wordpress/compose';
-import { UP, DOWN, LEFT, RIGHT } from '@wordpress/keycodes';
+import { useEffect, useRef, useState } from '@wordpress/element';
+import { __experimentalUseDragging as useDragging, useInstanceId, useIsomorphicLayoutEffect } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
@@ -22,354 +22,186 @@ import FocalPoint from './focal-point';
 import Grid from './grid';
 import Media from './media';
 import { MediaWrapper, MediaContainer } from './styles/focal-point-picker-style';
-import { roundClamp } from '../utils/math';
 import { INITIAL_BOUNDS } from './utils';
-export class FocalPointPicker extends Component {
-  constructor(props) {
-    super(...arguments);
-    this.state = {
-      isDragging: false,
-      bounds: INITIAL_BOUNDS,
-      percentages: props.value
-    };
-    this.containerRef = createRef();
-    this.mediaRef = createRef();
-    this.onMouseDown = this.startDrag.bind(this);
-    this.onMouseUp = this.stopDrag.bind(this);
-    this.onKeyDown = this.onKeyDown.bind(this);
-    this.onMouseMove = this.doDrag.bind(this);
-
-    this.ifDraggingStop = () => {
-      if (this.state.isDragging) {
-        this.stopDrag();
-      }
-    };
-
-    this.onChangeAtControls = value => {
-      this.updateValue(value, () => {
-        this.props.onChange(this.state.percentages);
-      });
-    };
-
-    this.updateBounds = this.updateBounds.bind(this);
-    this.updateValue = this.updateValue.bind(this);
-  }
-
-  componentDidMount() {
-    const {
-      defaultView
-    } = this.containerRef.current.ownerDocument;
-    defaultView.addEventListener('resize', this.updateBounds);
-    /*
-     * Set initial bound values.
-     *
-     * This is necessary for Safari:
-     * https://github.com/WordPress/gutenberg/issues/25814
-     */
-
-    this.updateBounds();
-  }
-
-  componentDidUpdate(prevProps) {
-    if (prevProps.url !== this.props.url) {
-      this.ifDraggingStop();
+import { useUpdateEffect } from '../utils/hooks';
+const GRID_OVERLAY_TIMEOUT = 600;
+export default function FocalPointPicker(_ref) {
+  let {
+    autoPlay = true,
+    className,
+    help,
+    label,
+    onChange,
+    onDrag,
+    onDragEnd,
+    onDragStart,
+    resolvePoint,
+    url,
+    value: valueProp = {
+      x: 0.5,
+      y: 0.5
     }
-    /*
-     * Handles cases where the incoming value changes.
-     * An example is the values resetting based on an UNDO action.
-     */
-
-
-    const {
-      isDragging,
-      percentages: {
-        x,
-        y
-      }
-    } = this.state;
-    const {
-      value
-    } = this.props;
-
-    if (!isDragging && (value.x !== x || value.y !== y)) {
-      this.setState({
-        percentages: this.props.value
-      });
+  } = _ref;
+  const [point, setPoint] = useState(valueProp);
+  const [showGridOverlay, setShowGridOverlay] = useState(false);
+  const {
+    startDrag,
+    endDrag,
+    isDragging
+  } = useDragging({
+    onDragStart: event => {
+      dragAreaRef.current.focus();
+      const value = getValueWithinDragArea(event);
+      onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(value, event);
+      setPoint(value);
+    },
+    onDragMove: event => {
+      // Prevents text-selection when dragging.
+      event.preventDefault();
+      const value = getValueWithinDragArea(event);
+      onDrag === null || onDrag === void 0 ? void 0 : onDrag(value, event);
+      setPoint(value);
+    },
+    onDragEnd: event => {
+      onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(event);
+      onChange === null || onChange === void 0 ? void 0 : onChange(point);
     }
-  }
+  }); // Uses the internal point while dragging or else the value from props.
+
+  const {
+    x,
+    y
+  } = isDragging ? point : valueProp;
+  const dragAreaRef = useRef();
+  const [bounds, setBounds] = useState(INITIAL_BOUNDS);
+  const refUpdateBounds = useRef(() => {
+    const {
+      clientWidth: width,
+      clientHeight: height
+    } = dragAreaRef.current; // Falls back to initial bounds if the ref has no size. Since styles
+    // give the drag area dimensions even when the media has not loaded
+    // this should only happen in unit tests (jsdom).
 
-  componentWillUnmount() {
+    setBounds(width > 0 && height > 0 ? {
+      width,
+      height
+    } : { ...INITIAL_BOUNDS
+    });
+  });
+  useEffect(() => {
+    const updateBounds = refUpdateBounds.current;
     const {
       defaultView
-    } = this.containerRef.current.ownerDocument;
-    defaultView.removeEventListener('resize', this.updateBounds);
-    this.ifDraggingStop();
-  }
-
-  calculateBounds() {
-    const bounds = INITIAL_BOUNDS;
-
-    if (!this.mediaRef.current) {
-      return bounds;
-    } // Prevent division by zero when updateBounds runs in componentDidMount
+    } = dragAreaRef.current.ownerDocument;
+    defaultView.addEventListener('resize', updateBounds);
+    return () => defaultView.removeEventListener('resize', updateBounds);
+  }, []); // Updates the bounds to cover cases of unspecified media or load failures.
 
+  useIsomorphicLayoutEffect(() => void refUpdateBounds.current(), []);
 
-    if (this.mediaRef.current.clientWidth === 0 || this.mediaRef.current.clientHeight === 0) {
-      return bounds;
-    }
-
-    const dimensions = {
-      width: this.mediaRef.current.clientWidth,
-      height: this.mediaRef.current.clientHeight
-    };
-    const pickerDimensions = this.pickerDimensions();
-    const widthRatio = pickerDimensions.width / dimensions.width;
-    const heightRatio = pickerDimensions.height / dimensions.height;
-
-    if (heightRatio >= widthRatio) {
-      bounds.width = bounds.right = pickerDimensions.width;
-      bounds.height = dimensions.height * widthRatio;
-      bounds.top = (pickerDimensions.height - bounds.height) / 2;
-      bounds.bottom = bounds.top + bounds.height;
-    } else {
-      bounds.height = bounds.bottom = pickerDimensions.height;
-      bounds.width = dimensions.width * heightRatio;
-      bounds.left = (pickerDimensions.width - bounds.width) / 2;
-      bounds.right = bounds.left + bounds.width;
-    }
-
-    return bounds;
-  }
-
-  updateValue() {
-    var _this$props$resolvePo, _this$props$resolvePo2, _this$props;
-
-    let nextValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    let callback = arguments.length > 1 ? arguments[1] : undefined;
-    const resolvedValue = (_this$props$resolvePo = (_this$props$resolvePo2 = (_this$props = this.props).resolvePoint) === null || _this$props$resolvePo2 === void 0 ? void 0 : _this$props$resolvePo2.call(_this$props, nextValue)) !== null && _this$props$resolvePo !== void 0 ? _this$props$resolvePo : nextValue;
+  const getValueWithinDragArea = _ref2 => {
+    let {
+      clientX,
+      clientY,
+      shiftKey
+    } = _ref2;
     const {
-      x,
-      y
-    } = resolvedValue;
-    const nextPercentage = {
-      x: parseFloat(x).toFixed(2),
-      y: parseFloat(y).toFixed(2)
-    };
-    this.setState({
-      percentages: nextPercentage
-    }, callback);
-  }
-
-  updateBounds() {
-    this.setState({
-      bounds: this.calculateBounds()
-    });
-  }
+      top,
+      left
+    } = dragAreaRef.current.getBoundingClientRect();
+    let nextX = (clientX - left) / bounds.width;
+    let nextY = (clientY - top) / bounds.height; // Enables holding shift to jump values by 10%.
 
-  startDrag(event) {
-    var _this$props$onDragSta, _this$props2;
+    if (shiftKey) {
+      nextX = Math.round(nextX / 0.1) * 0.1;
+      nextY = Math.round(nextY / 0.1) * 0.1;
+    }
 
-    event.persist();
-    this.containerRef.current.focus();
-    this.setState({
-      isDragging: true
+    return getFinalValue({
+      x: nextX,
+      y: nextY
     });
-    const {
-      ownerDocument
-    } = this.containerRef.current;
-    ownerDocument.addEventListener('mouseup', this.onMouseUp);
-    ownerDocument.addEventListener('mousemove', this.onMouseMove);
-    const value = this.getValueFromPoint({
-      x: event.pageX,
-      y: event.pageY
-    }, event.shiftKey);
-    this.updateValue(value);
-    (_this$props$onDragSta = (_this$props2 = this.props).onDragStart) === null || _this$props$onDragSta === void 0 ? void 0 : _this$props$onDragSta.call(_this$props2, value, event);
-  }
+  };
 
-  stopDrag(event) {
-    var _this$props$onDragEnd, _this$props3;
+  const getFinalValue = value => {
+    var _resolvePoint;
 
-    const {
-      ownerDocument
-    } = this.containerRef.current;
-    ownerDocument.removeEventListener('mouseup', this.onMouseUp);
-    ownerDocument.removeEventListener('mousemove', this.onMouseMove);
-    this.setState({
-      isDragging: false
-    }, () => {
-      this.props.onChange(this.state.percentages);
-    });
-    (_this$props$onDragEnd = (_this$props3 = this.props).onDragEnd) === null || _this$props$onDragEnd === void 0 ? void 0 : _this$props$onDragEnd.call(_this$props3, event);
-  }
+    const resolvedValue = (_resolvePoint = resolvePoint === null || resolvePoint === void 0 ? void 0 : resolvePoint(value)) !== null && _resolvePoint !== void 0 ? _resolvePoint : value;
+    resolvedValue.x = Math.max(0, Math.min(resolvedValue.x, 1));
+    resolvedValue.y = Math.max(0, Math.min(resolvedValue.y, 1));
+    return {
+      x: parseFloat(resolvedValue.x).toFixed(2),
+      y: parseFloat(resolvedValue.y).toFixed(2)
+    };
+  };
 
-  onKeyDown(event) {
+  const arrowKeyStep = event => {
     const {
-      keyCode,
+      code,
       shiftKey
     } = event;
-    if (![UP, DOWN, LEFT, RIGHT].includes(keyCode)) return;
+    if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(code)) return;
     event.preventDefault();
-    const next = { ...this.state.percentages
+    const value = {
+      x,
+      y
     };
     const step = shiftKey ? 0.1 : 0.01;
-    const delta = keyCode === UP || keyCode === LEFT ? -1 * step : step;
-    const axis = keyCode === UP || keyCode === DOWN ? 'y' : 'x';
-    const value = parseFloat(next[axis]) + delta;
-    next[axis] = roundClamp(value, 0, 1, step);
-    this.updateValue(next, () => {
-      this.props.onChange(this.state.percentages);
-    });
-  }
-
-  doDrag(event) {
-    var _this$props$onDrag, _this$props4;
-
-    // Prevents text-selection when dragging.
-    event.preventDefault();
-    const value = this.getValueFromPoint({
-      x: event.pageX,
-      y: event.pageY
-    }, event.shiftKey);
-    this.updateValue(value);
-    (_this$props$onDrag = (_this$props4 = this.props).onDrag) === null || _this$props$onDrag === void 0 ? void 0 : _this$props$onDrag.call(_this$props4, value, event);
-  }
-
-  getValueFromPoint(point, byTenths) {
-    const {
-      bounds
-    } = this.state;
-    const pickerDimensions = this.pickerDimensions();
-    const relativePoint = {
-      left: point.x - pickerDimensions.left,
-      top: point.y - pickerDimensions.top
-    };
-    const left = Math.max(bounds.left, Math.min(relativePoint.left, bounds.right));
-    const top = Math.max(bounds.top, Math.min(relativePoint.top, bounds.bottom));
-    let nextX = (left - bounds.left) / (pickerDimensions.width - bounds.left * 2);
-    let nextY = (top - bounds.top) / (pickerDimensions.height - bounds.top * 2); // Enables holding shift to jump values by 10%
-
-    const step = byTenths ? 0.1 : 0.01;
-    nextX = roundClamp(nextX, 0, 1, step);
-    nextY = roundClamp(nextY, 0, 1, step);
-    return {
-      x: nextX,
-      y: nextY
-    };
-  }
-
-  pickerDimensions() {
-    const containerNode = this.containerRef.current;
-
-    if (!containerNode) {
-      return {
-        width: 0,
-        height: 0,
-        left: 0,
-        top: 0
-      };
-    }
-
-    const {
-      clientHeight,
-      clientWidth
-    } = containerNode;
-    const {
-      top,
-      left
-    } = containerNode.getBoundingClientRect();
-    return {
-      width: clientWidth,
-      height: clientHeight,
-      top: top + document.body.scrollTop,
-      left
-    };
-  }
-
-  iconCoordinates() {
-    const {
-      bounds,
-      percentages: {
-        x,
-        y
-      }
-    } = this.state;
-
-    if (bounds.left === undefined || bounds.top === undefined) {
-      return {
-        left: '50%',
-        top: '50%'
-      };
+    const delta = code === 'ArrowUp' || code === 'ArrowLeft' ? -1 * step : step;
+    const axis = code === 'ArrowUp' || code === 'ArrowDown' ? 'y' : 'x';
+    value[axis] = parseFloat(value[axis]) + delta;
+    onChange === null || onChange === void 0 ? void 0 : onChange(getFinalValue(value));
+  };
+
+  const focalPointPosition = {
+    left: x * bounds.width,
+    top: y * bounds.height
+  };
+  const classes = classnames('components-focal-point-picker-control', className);
+  const instanceId = useInstanceId(FocalPointPicker);
+  const id = `inspector-focal-point-picker-control-${instanceId}`;
+  useUpdateEffect(() => {
+    setShowGridOverlay(true);
+    const timeout = window.setTimeout(() => {
+      setShowGridOverlay(false);
+    }, GRID_OVERLAY_TIMEOUT);
+    return () => window.clearTimeout(timeout);
+  }, [x, y]);
+  return createElement(BaseControl, {
+    label: label,
+    id: id,
+    help: help,
+    className: classes
+  }, createElement(MediaWrapper, {
+    className: "components-focal-point-picker-wrapper"
+  }, createElement(MediaContainer, {
+    className: "components-focal-point-picker",
+    onKeyDown: arrowKeyStep,
+    onMouseDown: startDrag,
+    onBlur: () => {
+      if (isDragging) endDrag();
+    },
+    ref: dragAreaRef,
+    role: "button",
+    tabIndex: "-1"
+  }, createElement(Grid, {
+    bounds: bounds,
+    showOverlay: showGridOverlay
+  }), createElement(Media, {
+    alt: __('Media preview'),
+    autoPlay: autoPlay,
+    onLoad: refUpdateBounds.current,
+    src: url
+  }), createElement(FocalPoint, _extends({}, focalPointPosition, {
+    isDragging: isDragging
+  })))), createElement(Controls, {
+    point: {
+      x,
+      y
+    },
+    onChange: value => {
+      onChange === null || onChange === void 0 ? void 0 : onChange(getFinalValue(value));
     }
-
-    const {
-      width,
-      height
-    } = this.pickerDimensions();
-    return {
-      left: x * (width - bounds.left * 2) + bounds.left,
-      top: y * (height - bounds.top * 2) + bounds.top
-    };
-  }
-
-  render() {
-    const {
-      autoPlay,
-      className,
-      help,
-      instanceId,
-      label,
-      url
-    } = this.props;
-    const {
-      bounds,
-      isDragging,
-      percentages
-    } = this.state;
-    const iconCoordinates = this.iconCoordinates();
-    const classes = classnames('components-focal-point-picker-control', className);
-    const id = `inspector-focal-point-picker-control-${instanceId}`;
-    return createElement(BaseControl, {
-      label: label,
-      id: id,
-      help: help,
-      className: classes
-    }, createElement(MediaWrapper, {
-      className: "components-focal-point-picker-wrapper"
-    }, createElement(MediaContainer, {
-      className: "components-focal-point-picker",
-      onKeyDown: this.onKeyDown,
-      onMouseDown: this.onMouseDown,
-      onBlur: this.ifDraggingStop,
-      ref: this.containerRef,
-      role: "button",
-      tabIndex: "-1"
-    }, createElement(Grid, {
-      bounds: bounds,
-      value: percentages.x + percentages.y
-    }), createElement(Media, {
-      alt: __('Media preview'),
-      autoPlay: autoPlay,
-      mediaRef: this.mediaRef,
-      onLoad: this.updateBounds,
-      src: url
-    }), createElement(FocalPoint, {
-      coordinates: iconCoordinates,
-      isDragging: isDragging
-    }))), createElement(Controls, {
-      percentages: percentages,
-      onChange: this.onChangeAtControls
-    }));
-  }
-
+  }));
 }
-FocalPointPicker.defaultProps = {
-  autoPlay: true,
-  value: {
-    x: 0.5,
-    y: 0.5
-  },
-  url: null
-};
-export default withInstanceId(FocalPointPicker);
 //# sourceMappingURL=index.js.map

package/build-module/focal-point-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/focal-point-picker/index.js"],"names":["classnames","__","Component","createRef","withInstanceId","UP","DOWN","LEFT","RIGHT","BaseControl","Controls","FocalPoint","Grid","Media","MediaWrapper","MediaContainer","roundClamp","INITIAL_BOUNDS","FocalPointPicker","constructor","props","arguments","state","isDragging","bounds","percentages","value","containerRef","mediaRef","onMouseDown","startDrag","bind","onMouseUp","stopDrag","onKeyDown","onMouseMove","doDrag","ifDraggingStop","onChangeAtControls","updateValue","onChange","updateBounds","componentDidMount","defaultView","current","ownerDocument","addEventListener","componentDidUpdate","prevProps","url","x","y","setState","componentWillUnmount","removeEventListener","calculateBounds","clientWidth","clientHeight","dimensions","width","height","pickerDimensions","widthRatio","heightRatio","right","top","bottom","left","nextValue","callback","resolvedValue","resolvePoint","nextPercentage","parseFloat","toFixed","event","persist","focus","getValueFromPoint","pageX","pageY","shiftKey","onDragStart","onDragEnd","keyCode","includes","preventDefault","next","step","delta","axis","onDrag","point","byTenths","relativePoint","Math","max","min","nextX","nextY","containerNode","getBoundingClientRect","document","body","scrollTop","iconCoordinates","undefined","render","autoPlay","className","help","instanceId","label","classes","id","defaultProps"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { Component, createRef } from '@wordpress/element';\nimport { withInstanceId } from '@wordpress/compose';\nimport { UP, DOWN, LEFT, RIGHT } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport Controls from './controls';\nimport FocalPoint from './focal-point';\nimport Grid from './grid';\nimport Media from './media';\nimport {\n\tMediaWrapper,\n\tMediaContainer,\n} from './styles/focal-point-picker-style';\nimport { roundClamp } from '../utils/math';\nimport { INITIAL_BOUNDS } from './utils';\n\nexport class FocalPointPicker extends Component {\n\tconstructor( props ) {\n\t\tsuper( ...arguments );\n\n\t\tthis.state = {\n\t\t\tisDragging: false,\n\t\t\tbounds: INITIAL_BOUNDS,\n\t\t\tpercentages: props.value,\n\t\t};\n\n\t\tthis.containerRef = createRef();\n\t\tthis.mediaRef = createRef();\n\n\t\tthis.onMouseDown = this.startDrag.bind( this );\n\t\tthis.onMouseUp = this.stopDrag.bind( this );\n\t\tthis.onKeyDown = this.onKeyDown.bind( this );\n\t\tthis.onMouseMove = this.doDrag.bind( this );\n\t\tthis.ifDraggingStop = () => {\n\t\t\tif ( this.state.isDragging ) {\n\t\t\t\tthis.stopDrag();\n\t\t\t}\n\t\t};\n\t\tthis.onChangeAtControls = ( value ) => {\n\t\t\tthis.updateValue( value, () => {\n\t\t\t\tthis.props.onChange( this.state.percentages );\n\t\t\t} );\n\t\t};\n\n\t\tthis.updateBounds = this.updateBounds.bind( this );\n\t\tthis.updateValue = this.updateValue.bind( this );\n\t}\n\tcomponentDidMount() {\n\t\tconst { defaultView } = this.containerRef.current.ownerDocument;\n\t\tdefaultView.addEventListener( 'resize', this.updateBounds );\n\n\t\t/*\n\t\t * Set initial bound values.\n\t\t *\n\t\t * This is necessary for Safari:\n\t\t * https://github.com/WordPress/gutenberg/issues/25814\n\t\t */\n\t\tthis.updateBounds();\n\t}\n\tcomponentDidUpdate( prevProps ) {\n\t\tif ( prevProps.url !== this.props.url ) {\n\t\t\tthis.ifDraggingStop();\n\t\t}\n\t\t/*\n\t\t * Handles cases where the incoming value changes.\n\t\t * An example is the values resetting based on an UNDO action.\n\t\t */\n\t\tconst {\n\t\t\tisDragging,\n\t\t\tpercentages: { x, y },\n\t\t} = this.state;\n\t\tconst { value } = this.props;\n\t\tif ( ! isDragging && ( value.x !== x || value.y !== y ) ) {\n\t\t\tthis.setState( { percentages: this.props.value } );\n\t\t}\n\t}\n\tcomponentWillUnmount() {\n\t\tconst { defaultView } = this.containerRef.current.ownerDocument;\n\t\tdefaultView.removeEventListener( 'resize', this.updateBounds );\n\t\tthis.ifDraggingStop();\n\t}\n\tcalculateBounds() {\n\t\tconst bounds = INITIAL_BOUNDS;\n\n\t\tif ( ! this.mediaRef.current ) {\n\t\t\treturn bounds;\n\t\t}\n\n\t\t// Prevent division by zero when updateBounds runs in componentDidMount\n\t\tif (\n\t\t\tthis.mediaRef.current.clientWidth === 0 ||\n\t\t\tthis.mediaRef.current.clientHeight === 0\n\t\t) {\n\t\t\treturn bounds;\n\t\t}\n\n\t\tconst dimensions = {\n\t\t\twidth: this.mediaRef.current.clientWidth,\n\t\t\theight: this.mediaRef.current.clientHeight,\n\t\t};\n\n\t\tconst pickerDimensions = this.pickerDimensions();\n\n\t\tconst widthRatio = pickerDimensions.width / dimensions.width;\n\t\tconst heightRatio = pickerDimensions.height / dimensions.height;\n\n\t\tif ( heightRatio >= widthRatio ) {\n\t\t\tbounds.width = bounds.right = pickerDimensions.width;\n\t\t\tbounds.height = dimensions.height * widthRatio;\n\t\t\tbounds.top = ( pickerDimensions.height - bounds.height ) / 2;\n\t\t\tbounds.bottom = bounds.top + bounds.height;\n\t\t} else {\n\t\t\tbounds.height = bounds.bottom = pickerDimensions.height;\n\t\t\tbounds.width = dimensions.width * heightRatio;\n\t\t\tbounds.left = ( pickerDimensions.width - bounds.width ) / 2;\n\t\t\tbounds.right = bounds.left + bounds.width;\n\t\t}\n\t\treturn bounds;\n\t}\n\tupdateValue( nextValue = {}, callback ) {\n\t\tconst resolvedValue =\n\t\t\tthis.props.resolvePoint?.( nextValue ) ?? nextValue;\n\n\t\tconst { x, y } = resolvedValue;\n\n\t\tconst nextPercentage = {\n\t\t\tx: parseFloat( x ).toFixed( 2 ),\n\t\t\ty: parseFloat( y ).toFixed( 2 ),\n\t\t};\n\n\t\tthis.setState( { percentages: nextPercentage }, callback );\n\t}\n\tupdateBounds() {\n\t\tthis.setState( {\n\t\t\tbounds: this.calculateBounds(),\n\t\t} );\n\t}\n\tstartDrag( event ) {\n\t\tevent.persist();\n\t\tthis.containerRef.current.focus();\n\t\tthis.setState( { isDragging: true } );\n\t\tconst { ownerDocument } = this.containerRef.current;\n\t\townerDocument.addEventListener( 'mouseup', this.onMouseUp );\n\t\townerDocument.addEventListener( 'mousemove', this.onMouseMove );\n\t\tconst value = this.getValueFromPoint(\n\t\t\t{ x: event.pageX, y: event.pageY },\n\t\t\tevent.shiftKey\n\t\t);\n\t\tthis.updateValue( value );\n\t\tthis.props.onDragStart?.( value, event );\n\t}\n\tstopDrag( event ) {\n\t\tconst { ownerDocument } = this.containerRef.current;\n\t\townerDocument.removeEventListener( 'mouseup', this.onMouseUp );\n\t\townerDocument.removeEventListener( 'mousemove', this.onMouseMove );\n\t\tthis.setState( { isDragging: false }, () => {\n\t\t\tthis.props.onChange( this.state.percentages );\n\t\t} );\n\t\tthis.props.onDragEnd?.( event );\n\t}\n\tonKeyDown( event ) {\n\t\tconst { keyCode, shiftKey } = event;\n\t\tif ( ! [ UP, DOWN, LEFT, RIGHT ].includes( keyCode ) ) return;\n\n\t\tevent.preventDefault();\n\n\t\tconst next = { ...this.state.percentages };\n\t\tconst step = shiftKey ? 0.1 : 0.01;\n\t\tconst delta = keyCode === UP || keyCode === LEFT ? -1 * step : step;\n\t\tconst axis = keyCode === UP || keyCode === DOWN ? 'y' : 'x';\n\t\tconst value = parseFloat( next[ axis ] ) + delta;\n\n\t\tnext[ axis ] = roundClamp( value, 0, 1, step );\n\n\t\tthis.updateValue( next, () => {\n\t\t\tthis.props.onChange( this.state.percentages );\n\t\t} );\n\t}\n\tdoDrag( event ) {\n\t\t// Prevents text-selection when dragging.\n\t\tevent.preventDefault();\n\t\tconst value = this.getValueFromPoint(\n\t\t\t{ x: event.pageX, y: event.pageY },\n\t\t\tevent.shiftKey\n\t\t);\n\t\tthis.updateValue( value );\n\t\tthis.props.onDrag?.( value, event );\n\t}\n\tgetValueFromPoint( point, byTenths ) {\n\t\tconst { bounds } = this.state;\n\n\t\tconst pickerDimensions = this.pickerDimensions();\n\t\tconst relativePoint = {\n\t\t\tleft: point.x - pickerDimensions.left,\n\t\t\ttop: point.y - pickerDimensions.top,\n\t\t};\n\n\t\tconst left = Math.max(\n\t\t\tbounds.left,\n\t\t\tMath.min( relativePoint.left, bounds.right )\n\t\t);\n\t\tconst top = Math.max(\n\t\t\tbounds.top,\n\t\t\tMath.min( relativePoint.top, bounds.bottom )\n\t\t);\n\n\t\tlet nextX =\n\t\t\t( left - bounds.left ) /\n\t\t\t( pickerDimensions.width - bounds.left * 2 );\n\t\tlet nextY =\n\t\t\t( top - bounds.top ) / ( pickerDimensions.height - bounds.top * 2 );\n\n\t\t// Enables holding shift to jump values by 10%\n\t\tconst step = byTenths ? 0.1 : 0.01;\n\n\t\tnextX = roundClamp( nextX, 0, 1, step );\n\t\tnextY = roundClamp( nextY, 0, 1, step );\n\n\t\treturn { x: nextX, y: nextY };\n\t}\n\tpickerDimensions() {\n\t\tconst containerNode = this.containerRef.current;\n\n\t\tif ( ! containerNode ) {\n\t\t\treturn {\n\t\t\t\twidth: 0,\n\t\t\t\theight: 0,\n\t\t\t\tleft: 0,\n\t\t\t\ttop: 0,\n\t\t\t};\n\t\t}\n\n\t\tconst { clientHeight, clientWidth } = containerNode;\n\t\tconst { top, left } = containerNode.getBoundingClientRect();\n\n\t\treturn {\n\t\t\twidth: clientWidth,\n\t\t\theight: clientHeight,\n\t\t\ttop: top + document.body.scrollTop,\n\t\t\tleft,\n\t\t};\n\t}\n\ticonCoordinates() {\n\t\tconst {\n\t\t\tbounds,\n\t\t\tpercentages: { x, y },\n\t\t} = this.state;\n\n\t\tif ( bounds.left === undefined || bounds.top === undefined ) {\n\t\t\treturn {\n\t\t\t\tleft: '50%',\n\t\t\t\ttop: '50%',\n\t\t\t};\n\t\t}\n\n\t\tconst { width, height } = this.pickerDimensions();\n\t\treturn {\n\t\t\tleft: x * ( width - bounds.left * 2 ) + bounds.left,\n\t\t\ttop: y * ( height - bounds.top * 2 ) + bounds.top,\n\t\t};\n\t}\n\trender() {\n\t\tconst { autoPlay, className, help, instanceId, label, url } =\n\t\t\tthis.props;\n\t\tconst { bounds, isDragging, percentages } = this.state;\n\t\tconst iconCoordinates = this.iconCoordinates();\n\n\t\tconst classes = classnames(\n\t\t\t'components-focal-point-picker-control',\n\t\t\tclassName\n\t\t);\n\n\t\tconst id = `inspector-focal-point-picker-control-${ instanceId }`;\n\n\t\treturn (\n\t\t\t<BaseControl\n\t\t\t\tlabel={ label }\n\t\t\t\tid={ id }\n\t\t\t\thelp={ help }\n\t\t\t\tclassName={ classes }\n\t\t\t>\n\t\t\t\t<MediaWrapper className=\"components-focal-point-picker-wrapper\">\n\t\t\t\t\t<MediaContainer\n\t\t\t\t\t\tclassName=\"components-focal-point-picker\"\n\t\t\t\t\t\tonKeyDown={ this.onKeyDown }\n\t\t\t\t\t\tonMouseDown={ this.onMouseDown }\n\t\t\t\t\t\tonBlur={ this.ifDraggingStop }\n\t\t\t\t\t\tref={ this.containerRef }\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<Grid\n\t\t\t\t\t\t\tbounds={ bounds }\n\t\t\t\t\t\t\tvalue={ percentages.x + percentages.y }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Media\n\t\t\t\t\t\t\talt={ __( 'Media preview' ) }\n\t\t\t\t\t\t\tautoPlay={ autoPlay }\n\t\t\t\t\t\t\tmediaRef={ this.mediaRef }\n\t\t\t\t\t\t\tonLoad={ this.updateBounds }\n\t\t\t\t\t\t\tsrc={ url }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<FocalPoint\n\t\t\t\t\t\t\tcoordinates={ iconCoordinates }\n\t\t\t\t\t\t\tisDragging={ isDragging }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</MediaContainer>\n\t\t\t\t</MediaWrapper>\n\t\t\t\t<Controls\n\t\t\t\t\tpercentages={ percentages }\n\t\t\t\t\tonChange={ this.onChangeAtControls }\n\t\t\t\t/>\n\t\t\t</BaseControl>\n\t\t);\n\t}\n}\n\nFocalPointPicker.defaultProps = {\n\tautoPlay: true,\n\tvalue: {\n\t\tx: 0.5,\n\t\ty: 0.5,\n\t},\n\turl: null,\n};\n\nexport default withInstanceId( FocalPointPicker );\n"]}
+{"version":3,"sources":["@wordpress/components/src/focal-point-picker/index.js"],"names":["classnames","__","useEffect","useRef","useState","__experimentalUseDragging","useDragging","useInstanceId","useIsomorphicLayoutEffect","BaseControl","Controls","FocalPoint","Grid","Media","MediaWrapper","MediaContainer","INITIAL_BOUNDS","useUpdateEffect","GRID_OVERLAY_TIMEOUT","FocalPointPicker","autoPlay","className","help","label","onChange","onDrag","onDragEnd","onDragStart","resolvePoint","url","value","valueProp","x","y","point","setPoint","showGridOverlay","setShowGridOverlay","startDrag","endDrag","isDragging","event","dragAreaRef","current","focus","getValueWithinDragArea","onDragMove","preventDefault","bounds","setBounds","refUpdateBounds","clientWidth","width","clientHeight","height","updateBounds","defaultView","ownerDocument","addEventListener","removeEventListener","clientX","clientY","shiftKey","top","left","getBoundingClientRect","nextX","nextY","Math","round","getFinalValue","resolvedValue","max","min","parseFloat","toFixed","arrowKeyStep","code","includes","step","delta","axis","focalPointPosition","classes","instanceId","id","timeout","window","setTimeout","clearTimeout"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport {\n\t__experimentalUseDragging as useDragging,\n\tuseInstanceId,\n\tuseIsomorphicLayoutEffect,\n} from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport Controls from './controls';\nimport FocalPoint from './focal-point';\nimport Grid from './grid';\nimport Media from './media';\nimport {\n\tMediaWrapper,\n\tMediaContainer,\n} from './styles/focal-point-picker-style';\nimport { INITIAL_BOUNDS } from './utils';\nimport { useUpdateEffect } from '../utils/hooks';\n\nconst GRID_OVERLAY_TIMEOUT = 600;\n\nexport default function FocalPointPicker( {\n\tautoPlay = true,\n\tclassName,\n\thelp,\n\tlabel,\n\tonChange,\n\tonDrag,\n\tonDragEnd,\n\tonDragStart,\n\tresolvePoint,\n\turl,\n\tvalue: valueProp = {\n\t\tx: 0.5,\n\t\ty: 0.5,\n\t},\n} ) {\n\tconst [ point, setPoint ] = useState( valueProp );\n\tconst [ showGridOverlay, setShowGridOverlay ] = useState( false );\n\n\tconst { startDrag, endDrag, isDragging } = useDragging( {\n\t\tonDragStart: ( event ) => {\n\t\t\tdragAreaRef.current.focus();\n\t\t\tconst value = getValueWithinDragArea( event );\n\t\t\tonDragStart?.( value, event );\n\t\t\tsetPoint( value );\n\t\t},\n\t\tonDragMove: ( event ) => {\n\t\t\t// Prevents text-selection when dragging.\n\t\t\tevent.preventDefault();\n\t\t\tconst value = getValueWithinDragArea( event );\n\t\t\tonDrag?.( value, event );\n\t\t\tsetPoint( value );\n\t\t},\n\t\tonDragEnd: ( event ) => {\n\t\t\tonDragEnd?.( event );\n\t\t\tonChange?.( point );\n\t\t},\n\t} );\n\n\t// Uses the internal point while dragging or else the value from props.\n\tconst { x, y } = isDragging ? point : valueProp;\n\n\tconst dragAreaRef = useRef();\n\tconst [ bounds, setBounds ] = useState( INITIAL_BOUNDS );\n\tconst refUpdateBounds = useRef( () => {\n\t\tconst { clientWidth: width, clientHeight: height } =\n\t\t\tdragAreaRef.current;\n\t\t// Falls back to initial bounds if the ref has no size. Since styles\n\t\t// give the drag area dimensions even when the media has not loaded\n\t\t// this should only happen in unit tests (jsdom).\n\t\tsetBounds(\n\t\t\twidth > 0 && height > 0 ? { width, height } : { ...INITIAL_BOUNDS }\n\t\t);\n\t} );\n\n\tuseEffect( () => {\n\t\tconst updateBounds = refUpdateBounds.current;\n\t\tconst { defaultView } = dragAreaRef.current.ownerDocument;\n\t\tdefaultView.addEventListener( 'resize', updateBounds );\n\t\treturn () => defaultView.removeEventListener( 'resize', updateBounds );\n\t}, [] );\n\n\t// Updates the bounds to cover cases of unspecified media or load failures.\n\tuseIsomorphicLayoutEffect( () => void refUpdateBounds.current(), [] );\n\n\tconst getValueWithinDragArea = ( { clientX, clientY, shiftKey } ) => {\n\t\tconst { top, left } = dragAreaRef.current.getBoundingClientRect();\n\t\tlet nextX = ( clientX - left ) / bounds.width;\n\t\tlet nextY = ( clientY - top ) / bounds.height;\n\t\t// Enables holding shift to jump values by 10%.\n\t\tif ( shiftKey ) {\n\t\t\tnextX = Math.round( nextX / 0.1 ) * 0.1;\n\t\t\tnextY = Math.round( nextY / 0.1 ) * 0.1;\n\t\t}\n\t\treturn getFinalValue( { x: nextX, y: nextY } );\n\t};\n\n\tconst getFinalValue = ( value ) => {\n\t\tconst resolvedValue = resolvePoint?.( value ) ?? value;\n\t\tresolvedValue.x = Math.max( 0, Math.min( resolvedValue.x, 1 ) );\n\t\tresolvedValue.y = Math.max( 0, Math.min( resolvedValue.y, 1 ) );\n\t\treturn {\n\t\t\tx: parseFloat( resolvedValue.x ).toFixed( 2 ),\n\t\t\ty: parseFloat( resolvedValue.y ).toFixed( 2 ),\n\t\t};\n\t};\n\n\tconst arrowKeyStep = ( event ) => {\n\t\tconst { code, shiftKey } = event;\n\t\tif (\n\t\t\t! [ 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight' ].includes(\n\t\t\t\tcode\n\t\t\t)\n\t\t)\n\t\t\treturn;\n\n\t\tevent.preventDefault();\n\t\tconst value = { x, y };\n\t\tconst step = shiftKey ? 0.1 : 0.01;\n\t\tconst delta =\n\t\t\tcode === 'ArrowUp' || code === 'ArrowLeft' ? -1 * step : step;\n\t\tconst axis = code === 'ArrowUp' || code === 'ArrowDown' ? 'y' : 'x';\n\t\tvalue[ axis ] = parseFloat( value[ axis ] ) + delta;\n\t\tonChange?.( getFinalValue( value ) );\n\t};\n\n\tconst focalPointPosition = {\n\t\tleft: x * bounds.width,\n\t\ttop: y * bounds.height,\n\t};\n\n\tconst classes = classnames(\n\t\t'components-focal-point-picker-control',\n\t\tclassName\n\t);\n\n\tconst instanceId = useInstanceId( FocalPointPicker );\n\tconst id = `inspector-focal-point-picker-control-${ instanceId }`;\n\n\tuseUpdateEffect( () => {\n\t\tsetShowGridOverlay( true );\n\t\tconst timeout = window.setTimeout( () => {\n\t\t\tsetShowGridOverlay( false );\n\t\t}, GRID_OVERLAY_TIMEOUT );\n\n\t\treturn () => window.clearTimeout( timeout );\n\t}, [ x, y ] );\n\n\treturn (\n\t\t<BaseControl\n\t\t\tlabel={ label }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ classes }\n\t\t>\n\t\t\t<MediaWrapper className=\"components-focal-point-picker-wrapper\">\n\t\t\t\t<MediaContainer\n\t\t\t\t\tclassName=\"components-focal-point-picker\"\n\t\t\t\t\tonKeyDown={ arrowKeyStep }\n\t\t\t\t\tonMouseDown={ startDrag }\n\t\t\t\t\tonBlur={ () => {\n\t\t\t\t\t\tif ( isDragging ) endDrag();\n\t\t\t\t\t} }\n\t\t\t\t\tref={ dragAreaRef }\n\t\t\t\t\trole=\"button\"\n\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t>\n\t\t\t\t\t<Grid bounds={ bounds } showOverlay={ showGridOverlay } />\n\t\t\t\t\t<Media\n\t\t\t\t\t\talt={ __( 'Media preview' ) }\n\t\t\t\t\t\tautoPlay={ autoPlay }\n\t\t\t\t\t\tonLoad={ refUpdateBounds.current }\n\t\t\t\t\t\tsrc={ url }\n\t\t\t\t\t/>\n\t\t\t\t\t<FocalPoint\n\t\t\t\t\t\t{ ...focalPointPosition }\n\t\t\t\t\t\tisDragging={ isDragging }\n\t\t\t\t\t/>\n\t\t\t\t</MediaContainer>\n\t\t\t</MediaWrapper>\n\t\t\t<Controls\n\t\t\t\tpoint={ { x, y } }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tonChange?.( getFinalValue( value ) );\n\t\t\t\t} }\n\t\t\t/>\n\t\t</BaseControl>\n\t);\n}\n"]}