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

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

@@ -5,18 +5,18 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.FocalPointPicker = void 0;
+exports.default = FocalPointPicker;
 
 var _element = require("@wordpress/element");
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _i18n = require("@wordpress/i18n");
 
 var _compose = require("@wordpress/compose");
 
-var _keycodes = require("@wordpress/keycodes");
-
 var _baseControl = _interopRequireDefault(require("../base-control"));
 
 var _controls = _interopRequireDefault(require("./controls"));
@@ -29,10 +29,10 @@ var _media = _interopRequireDefault(require("./media"));
 
 var _focalPointPickerStyle = require("./styles/focal-point-picker-style");
 
-var _math = require("../utils/math");
-
 var _utils = require("./utils");
 
+var _hooks = require("../utils/hooks");
+
 /**
  * External dependencies
  */
@@ -44,357 +44,185 @@ var _utils = require("./utils");
 /**
  * Internal dependencies
  */
-class FocalPointPicker extends _element.Component {
-  constructor(props) {
-    super(...arguments);
-    this.state = {
-      isDragging: false,
-      bounds: _utils.INITIAL_BOUNDS,
-      percentages: props.value
-    };
-    this.containerRef = (0, _element.createRef)();
-    this.mediaRef = (0, _element.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();
+const GRID_OVERLAY_TIMEOUT = 600;
+
+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] = (0, _element.useState)(valueProp);
+  const [showGridOverlay, setShowGridOverlay] = (0, _element.useState)(false);
+  const {
+    startDrag,
+    endDrag,
+    isDragging
+  } = (0, _compose.__experimentalUseDragging)({
+    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 = (0, _element.useRef)();
+  const [bounds, setBounds] = (0, _element.useState)(_utils.INITIAL_BOUNDS);
+  const refUpdateBounds = (0, _element.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
+    } : { ..._utils.INITIAL_BOUNDS
+    });
+  });
+  (0, _element.useEffect)(() => {
+    const updateBounds = refUpdateBounds.current;
     const {
       defaultView
-    } = this.containerRef.current.ownerDocument;
-    defaultView.removeEventListener('resize', this.updateBounds);
-    this.ifDraggingStop();
-  }
+    } = dragAreaRef.current.ownerDocument;
+    defaultView.addEventListener('resize', updateBounds);
+    return () => defaultView.removeEventListener('resize', updateBounds);
+  }, []); // Updates the bounds to cover cases of unspecified media or load failures.
 
-  calculateBounds() {
-    const bounds = _utils.INITIAL_BOUNDS;
+  (0, _compose.useIsomorphicLayoutEffect)(() => void refUpdateBounds.current(), []);
 
-    if (!this.mediaRef.current) {
-      return bounds;
-    } // Prevent division by zero when updateBounds runs in componentDidMount
-
-
-    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 (![_keycodes.UP, _keycodes.DOWN, _keycodes.LEFT, _keycodes.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 === _keycodes.UP || keyCode === _keycodes.LEFT ? -1 * step : step;
-    const axis = keyCode === _keycodes.UP || keyCode === _keycodes.DOWN ? 'y' : 'x';
-    const value = parseFloat(next[axis]) + delta;
-    next[axis] = (0, _math.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 = (0, _math.roundClamp)(nextX, 0, 1, step);
-    nextY = (0, _math.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 = (0, _classnames.default)('components-focal-point-picker-control', className);
+  const instanceId = (0, _compose.useInstanceId)(FocalPointPicker);
+  const id = `inspector-focal-point-picker-control-${instanceId}`;
+  (0, _hooks.useUpdateEffect)(() => {
+    setShowGridOverlay(true);
+    const timeout = window.setTimeout(() => {
+      setShowGridOverlay(false);
+    }, GRID_OVERLAY_TIMEOUT);
+    return () => window.clearTimeout(timeout);
+  }, [x, y]);
+  return (0, _element.createElement)(_baseControl.default, {
+    label: label,
+    id: id,
+    help: help,
+    className: classes
+  }, (0, _element.createElement)(_focalPointPickerStyle.MediaWrapper, {
+    className: "components-focal-point-picker-wrapper"
+  }, (0, _element.createElement)(_focalPointPickerStyle.MediaContainer, {
+    className: "components-focal-point-picker",
+    onKeyDown: arrowKeyStep,
+    onMouseDown: startDrag,
+    onBlur: () => {
+      if (isDragging) endDrag();
+    },
+    ref: dragAreaRef,
+    role: "button",
+    tabIndex: "-1"
+  }, (0, _element.createElement)(_grid.default, {
+    bounds: bounds,
+    showOverlay: showGridOverlay
+  }), (0, _element.createElement)(_media.default, {
+    alt: (0, _i18n.__)('Media preview'),
+    autoPlay: autoPlay,
+    onLoad: refUpdateBounds.current,
+    src: url
+  }), (0, _element.createElement)(_focalPoint.default, (0, _extends2.default)({}, focalPointPosition, {
+    isDragging: isDragging
+  })))), (0, _element.createElement)(_controls.default, {
+    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 = (0, _classnames.default)('components-focal-point-picker-control', className);
-    const id = `inspector-focal-point-picker-control-${instanceId}`;
-    return (0, _element.createElement)(_baseControl.default, {
-      label: label,
-      id: id,
-      help: help,
-      className: classes
-    }, (0, _element.createElement)(_focalPointPickerStyle.MediaWrapper, {
-      className: "components-focal-point-picker-wrapper"
-    }, (0, _element.createElement)(_focalPointPickerStyle.MediaContainer, {
-      className: "components-focal-point-picker",
-      onKeyDown: this.onKeyDown,
-      onMouseDown: this.onMouseDown,
-      onBlur: this.ifDraggingStop,
-      ref: this.containerRef,
-      role: "button",
-      tabIndex: "-1"
-    }, (0, _element.createElement)(_grid.default, {
-      bounds: bounds,
-      value: percentages.x + percentages.y
-    }), (0, _element.createElement)(_media.default, {
-      alt: (0, _i18n.__)('Media preview'),
-      autoPlay: autoPlay,
-      mediaRef: this.mediaRef,
-      onLoad: this.updateBounds,
-      src: url
-    }), (0, _element.createElement)(_focalPoint.default, {
-      coordinates: iconCoordinates,
-      isDragging: isDragging
-    }))), (0, _element.createElement)(_controls.default, {
-      percentages: percentages,
-      onChange: this.onChangeAtControls
-    }));
-  }
-
+  }));
 }
-
-exports.FocalPointPicker = FocalPointPicker;
-FocalPointPicker.defaultProps = {
-  autoPlay: true,
-  value: {
-    x: 0.5,
-    y: 0.5
-  },
-  url: null
-};
-
-var _default = (0, _compose.withInstanceId)(FocalPointPicker);
-
-exports.default = _default;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/focal-point-picker/index.js"],"names":["FocalPointPicker","Component","constructor","props","arguments","state","isDragging","bounds","INITIAL_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","UP","DOWN","LEFT","RIGHT","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":["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","INITIAL_BOUNDS","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"]}