sanity-plugin-hotspot-array 0.0.1

package/.babelrc

@@ -0,0 +1,3 @@
+{
+  "extends": "sanipack/babel"
+}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Simeon Griggs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,121 @@
+# sanity-plugin-hotspot-array
+
+A configurable Custom Input for Arrays that will add and update items by clicking on an Image
+
+## Installation
+
+```
+sanity install hotspot-array
+```
+
+![2021-12-22 15 07 58](https://user-images.githubusercontent.com/9684022/147113578-d49d747a-4904-45b4-b4e0-409b33832226.gif)
+
+## Setup
+
+Import the `HotspotArray` component from this package, into your schema. And insert it as the `inputComponent` of an `array` field.
+
+```js
+import HotspotArray from 'sanity-plugin-hotspot-array'
+
+export default {
+  name: `product`,
+  title: `Product`,
+  type: `document`,
+  fields: [
+    {
+      name: `hotspots`,
+      type: `array`,
+      inputComponent: HotspotArray,
+      of: [
+          // see `Spot object` setup below
+      ],
+      options: {
+          // see `Image and description path` setup below
+          hotspotImagePath: `featureImage`
+          hotspotDescriptionPath: `details`
+      }
+    }
+    // ...all your other fields
+  ]
+}
+```
+
+The plugin makes a number of assumptions to add and update data in the array. Including:
+
+- The `array` field is an array of objects
+- The object contains two number fields named `x` and `y`
+- You'll want to save those values as % from the top left of the image
+- The same document contains the image you want to add hotspots to
+
+### Image and description paths
+
+The custom input has the current values of all fields in the document, and so can "pick" the image out of the document by its path.
+
+For example, if you want to add hotspots to an image, and that image is uploaded to the field `featuredImage`, your fields `options` would look like:
+
+```js
+options: {
+  hotspotImagePath: `featureImage`
+}
+```
+
+The custom input can also pre-fill a string or text field with a description of the position of the spot to make them easier to identify. Add a path **relative to the spot object** for this field.
+
+```js
+options: {
+  hotspotDescriptionPath: `details`
+}
+```
+
+### Spot object
+
+Here's an example object schema complete with initial values, validation, fieldsets and a styled preview.
+
+```js
+{
+  name: 'spot',
+  type: 'object',
+  fieldsets: [{name: 'position', options: {columns: 2}}],
+  fields: [
+    {name: 'details', type: 'text', rows: 2},
+    {
+      name: 'x',
+      type: 'number',
+      readOnly: true,
+      fieldset: 'position',
+      initialValue: 50,
+      validation: (Rule) => Rule.required().min(0).max(100),
+    },
+    {
+      name: 'y',
+      type: 'number',
+      readOnly: true,
+      fieldset: 'position',
+      initialValue: 50,
+      validation: (Rule) => Rule.required().min(0).max(100),
+    },
+  ],
+  preview: {
+    select: {
+      title: 'description',
+      x: 'x',
+      y: 'y',
+    },
+    prepare({title, x, y}) {
+      return {
+        title,
+        subtitle: x && y ? `${x}% x ${y}%` : `No position set`,
+      }
+    },
+  },
+}
+```
+
+## Future cool ideas I just haven't added (yet?)
+
+- An `options` key to define a custom preview component for the Spot's `<Tooltip />`
+
+## License
+
+MIT © Simeon Griggs
+See LICENSE

package/lib/Feedback.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Feedback;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ui = require("@sanity/ui");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function Feedback(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement(_ui.Card, {
+    padding: 4,
+    radius: 2,
+    shadow: 1,
+    tone: "caution"
+  }, /*#__PURE__*/_react.default.createElement(_ui.Text, null, children));
+}
+//# sourceMappingURL=Feedback.js.map

package/lib/Feedback.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Feedback.tsx"],"names":["Feedback","children"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEe,SAASA,QAAT,OAA8B;AAAA,MAAXC,QAAW,QAAXA,QAAW;AAC3C,sBACE,6BAAC,QAAD;AAAM,IAAA,OAAO,EAAE,CAAf;AAAkB,IAAA,MAAM,EAAE,CAA1B;AAA6B,IAAA,MAAM,EAAE,CAArC;AAAwC,IAAA,IAAI,EAAC;AAA7C,kBACE,6BAAC,QAAD,QAAOA,QAAP,CADF,CADF;AAKD","sourcesContent":["import React from 'react'\nimport {Card, Text} from '@sanity/ui'\n\nexport default function Feedback({children}) {\n  return (\n    <Card padding={4} radius={2} shadow={1} tone=\"caution\">\n      <Text>{children}</Text>\n    </Card>\n  )\n}\n"],"file":"Feedback.js"}

package/lib/HotspotArray.js

@@ -0,0 +1,163 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _client = _interopRequireDefault(require("part:@sanity/base/client"));
+
+var _formBuilder = require("part:@sanity/form-builder");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ui = require("@sanity/ui");
+
+var _FormBuilderInput = require("@sanity/form-builder/lib/FormBuilderInput");
+
+var _content = require("@sanity/util/content");
+
+var _PatchEvent = require("@sanity/form-builder/PatchEvent");
+
+var _imageUrl = _interopRequireDefault(require("@sanity/image-url"));
+
+var _assetUtils = require("@sanity/asset-utils");
+
+var _get = _interopRequireDefault(require("lodash/get"));
+
+var _Spot = _interopRequireDefault(require("./Spot"));
+
+var _useUnsetInputComponent = require("./useUnsetInputComponent");
+
+var _Feedback = _interopRequireDefault(require("./Feedback"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var builder = (0, _imageUrl.default)(_client.default);
+
+var urlFor = source => builder.image(source);
+
+var imageStyle = {
+  width: "100%",
+  height: "auto"
+};
+
+var HotspotArray = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  var _type$options4, _type$options5;
+
+  var type = props.type,
+      value = props.value,
+      onChange = props.onChange,
+      sanityDocument = props.document; // Attempt prevention of infinite loop in <FormBuilderInput />
+  // Re-renders can still occur if this Component is used again in a nested field
+
+  var typeWithoutInputComponent = (0, _useUnsetInputComponent.useUnsetInputComponent)(type, type === null || type === void 0 ? void 0 : type.inputComponent); // Finding the image from the document,
+  // using the path from the hotspot's `options` field
+
+  var displayImage = _react.default.useMemo(() => {
+    var _type$options, _hotspotImage$asset;
+
+    var hotspotImage = (0, _get.default)(sanityDocument, type === null || type === void 0 ? void 0 : (_type$options = type.options) === null || _type$options === void 0 ? void 0 : _type$options.hotspotImagePath);
+
+    if (hotspotImage !== null && hotspotImage !== void 0 && (_hotspotImage$asset = hotspotImage.asset) !== null && _hotspotImage$asset !== void 0 && _hotspotImage$asset._ref) {
+      var _getImageDimensions = (0, _assetUtils.getImageDimensions)(hotspotImage.asset._ref),
+          aspectRatio = _getImageDimensions.aspectRatio;
+
+      var width = 600;
+      var height = Math.round(width / aspectRatio);
+      var url = urlFor(hotspotImage).width(width).url();
+      return {
+        width,
+        height,
+        url
+      };
+    }
+
+    return null;
+  }, [sanityDocument, type]);
+
+  var handleHotspotImageClick = _react.default.useCallback(event => {
+    var _type$options2;
+
+    var nativeEvent = event.nativeEvent; // Calculate the x/y percentage of the click position
+
+    var x = Number((nativeEvent.offsetX * 100 / nativeEvent.srcElement.width).toFixed(2));
+    var y = Number((nativeEvent.offsetY * 100 / nativeEvent.srcElement.height).toFixed(2));
+    var description = "New Hotspot at ".concat(x, "% x ").concat(y, "%");
+    var newRow = {
+      _key: (0, _content.randomKey)(12),
+      _type: "spot",
+      x,
+      y
+    };
+
+    if (type !== null && type !== void 0 && (_type$options2 = type.options) !== null && _type$options2 !== void 0 && _type$options2.hotspotDescriptionPath) {
+      console.log(type.options.hotspotDescriptionPath);
+      newRow[type.options.hotspotDescriptionPath] = description;
+    }
+
+    onChange(_PatchEvent.PatchEvent.from((0, _PatchEvent.setIfMissing)([]), (0, _PatchEvent.insert)([newRow], 'after', [-1])));
+  }, []);
+
+  var handleHotspotMove = _react.default.useCallback((key, x, y) => {
+    if (!Number(x) || !Number(y)) {
+      console.warn("Missing or non-number X or Y", {
+        x,
+        y
+      });
+      return;
+    }
+
+    onChange(_PatchEvent.PatchEvent.from( // Set the `x` value of this array key item
+    (0, _PatchEvent.set)(x, [{
+      _key: key
+    }, 'x']), // Set the `y` value of this array key item
+    (0, _PatchEvent.set)(y, [{
+      _key: key
+    }, 'y'])));
+  }, [value]);
+
+  var hotspotImageRef = _react.default.useRef(null);
+
+  return /*#__PURE__*/_react.default.createElement(_ui.Stack, {
+    space: [2, 2, 3]
+  }, displayImage !== null && displayImage !== void 0 && displayImage.url ? /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      position: "relative"
+    }
+  }, (value === null || value === void 0 ? void 0 : value.length) > 0 && value.map(spot => {
+    var _type$options3;
+
+    return /*#__PURE__*/_react.default.createElement(_Spot.default, {
+      key: spot._key,
+      spot: spot,
+      bounds: hotspotImageRef,
+      update: handleHotspotMove,
+      hotspotDescriptionPath: type === null || type === void 0 ? void 0 : (_type$options3 = type.options) === null || _type$options3 === void 0 ? void 0 : _type$options3.hotspotDescriptionPath
+    });
+  }), /*#__PURE__*/_react.default.createElement(_ui.Card, {
+    __unstable_checkered: true,
+    shadow: 1
+  }, /*#__PURE__*/_react.default.createElement(_ui.Flex, {
+    align: "center",
+    justify: "center"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    ref: hotspotImageRef,
+    src: displayImage.url,
+    width: displayImage.width,
+    height: displayImage.height,
+    alt: "",
+    style: imageStyle,
+    onClick: handleHotspotImageClick
+  })))) : /*#__PURE__*/_react.default.createElement(_Feedback.default, null, type !== null && type !== void 0 && (_type$options4 = type.options) !== null && _type$options4 !== void 0 && _type$options4.hotspotImagePath ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "No Hotspot image found at path ", /*#__PURE__*/_react.default.createElement("code", null, type === null || type === void 0 ? void 0 : (_type$options5 = type.options) === null || _type$options5 === void 0 ? void 0 : _type$options5.hotspotImagePath)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Define a path in this field using to the image field in this document at ", /*#__PURE__*/_react.default.createElement("code", null, "options.hotspotImagePath"))), /*#__PURE__*/_react.default.createElement(_FormBuilderInput.FormBuilderInput, _extends({}, props, {
+    type: typeWithoutInputComponent,
+    ref: ref
+  })));
+});
+
+var _default = (0, _formBuilder.withDocument)(HotspotArray);
+
+exports.default = _default;
+//# sourceMappingURL=HotspotArray.js.map

package/lib/HotspotArray.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/HotspotArray.tsx"],"names":["builder","sanityClient","urlFor","source","image","imageStyle","width","height","HotspotArray","React","forwardRef","props","ref","type","value","onChange","sanityDocument","document","typeWithoutInputComponent","inputComponent","displayImage","useMemo","hotspotImage","options","hotspotImagePath","asset","_ref","aspectRatio","Math","round","url","handleHotspotImageClick","useCallback","event","nativeEvent","x","Number","offsetX","srcElement","toFixed","y","offsetY","description","newRow","_key","_type","hotspotDescriptionPath","console","log","PatchEvent","from","handleHotspotMove","key","warn","hotspotImageRef","useRef","position","length","map","spot"],"mappings":"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","sourcesContent":["/* eslint-disable react/display-name */\n\n// @ts-ignore\nimport sanityClient from 'part:@sanity/base/client'\n// @ts-ignore\nimport {withDocument} from 'part:@sanity/form-builder'\n\nimport React from 'react'\nimport {Card, Flex, Stack, Text} from '@sanity/ui'\nimport {FormBuilderInput} from '@sanity/form-builder/lib/FormBuilderInput'\nimport {randomKey} from '@sanity/util/content'\nimport {PatchEvent, setIfMissing, set, insert} from '@sanity/form-builder/PatchEvent'\nimport imageUrlBuilder from '@sanity/image-url'\nimport {getImageDimensions} from '@sanity/asset-utils'\nimport get from 'lodash/get'\n\nimport Spot from './Spot'\nimport { useUnsetInputComponent } from './useUnsetInputComponent'\nimport Feedback from './Feedback'\n\nconst builder = imageUrlBuilder(sanityClient)\nconst urlFor = (source) => builder.image(source)\nconst imageStyle = {width: `100%`, height: `auto`}\n\n\nconst HotspotArray = React.forwardRef((props, ref) => {\n  const {type, value, onChange, document: sanityDocument} = props\n\n  // Attempt prevention of infinite loop in <FormBuilderInput />\n  // Re-renders can still occur if this Component is used again in a nested field\n  const typeWithoutInputComponent = useUnsetInputComponent(type, type?.inputComponent)\n\n  // Finding the image from the document,\n  // using the path from the hotspot's `options` field\n  const displayImage = React.useMemo(() => {\n    const hotspotImage = get(sanityDocument, type?.options?.hotspotImagePath)\n\n    if (hotspotImage?.asset?._ref) {\n      const {aspectRatio} = getImageDimensions(hotspotImage.asset._ref)\n      const width = 600\n      const height = Math.round(width / aspectRatio)\n      const url = urlFor(hotspotImage).width(width).url()\n\n      return {width, height, url}\n    }\n\n    return null\n  }, [sanityDocument, type])\n\n  const handleHotspotImageClick = React.useCallback((event) => {\n    const {nativeEvent} = event\n\n    // Calculate the x/y percentage of the click position\n    const x = Number(((nativeEvent.offsetX * 100) / nativeEvent.srcElement.width).toFixed(2))\n    const y = Number(((nativeEvent.offsetY * 100) / nativeEvent.srcElement.height).toFixed(2))\n    const description = `New Hotspot at ${x}% x ${y}%`\n\n    const newRow = {\n      _key: randomKey(12),\n      _type: `spot`,\n      x,\n      y,\n    }\n\n    if (type?.options?.hotspotDescriptionPath) {\n      console.log(type.options.hotspotDescriptionPath);\n      newRow[type.options.hotspotDescriptionPath] = description\n    }\n\n    onChange(PatchEvent.from(setIfMissing([]), insert([newRow], 'after', [-1])))\n  }, [])\n\n  const handleHotspotMove = React.useCallback(\n    (key, x, y) => {\n      if (!Number(x) || !Number(y)) {\n        console.warn(`Missing or non-number X or Y`, {x, y})\n        return\n      }\n\n      onChange(\n        PatchEvent.from(\n          // Set the `x` value of this array key item\n          set(x, [{_key: key}, 'x']),\n          // Set the `y` value of this array key item\n          set(y, [{_key: key}, 'y'])\n        )\n      )\n    },\n    [value]\n  )\n\n  const hotspotImageRef = React.useRef(null)\n\n  return (\n    <Stack space={[2,2,3]}>\n      {displayImage?.url ? (\n        <div style={{position: `relative`}}>\n          {value?.length > 0 &&\n            value.map((spot) => (\n              <Spot\n                key={spot._key}\n                spot={spot}\n                bounds={hotspotImageRef}\n                update={handleHotspotMove}\n                hotspotDescriptionPath={type?.options?.hotspotDescriptionPath}\n              />\n            ))}\n\n          <Card __unstable_checkered shadow={1}>\n            <Flex align=\"center\" justify=\"center\">\n              <img\n                ref={hotspotImageRef}\n                src={displayImage.url}\n                width={displayImage.width}\n                height={displayImage.height}\n                alt=\"\"\n                style={imageStyle}\n                onClick={handleHotspotImageClick}\n                />\n            </Flex>\n          </Card>\n        </div>\n      ) : (\n        <Feedback>\n            {type?.options?.hotspotImagePath \n              ? <>No Hotspot image found at path <code>{type?.options?.hotspotImagePath}</code></> \n              : <>Define a path in this field using to the image field in this document at <code>options.hotspotImagePath</code></>\n            }\n          </Feedback>\n      )}\n      <FormBuilderInput {...props} type={typeWithoutInputComponent} ref={ref} />\n    </Stack>\n  )\n})\n\nexport default withDocument(HotspotArray)\n"],"file":"HotspotArray.js"}

package/lib/Spot.js

@@ -0,0 +1,159 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Spot;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ui = require("@sanity/ui");
+
+var _framerMotion = require("framer-motion");
+
+var _get = _interopRequireDefault(require("lodash/get"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var dragStyle = {
+  width: "1rem",
+  height: "1rem",
+  position: "absolute"
+};
+
+var dotStyle = _objectSpread(_objectSpread({}, dragStyle), {}, {
+  borderRadius: "50%",
+  // make sure pointer events only run on the parent
+  pointerEvents: "none"
+});
+
+var round = num => Math.round(num * 100) / 100;
+
+function Spot(_ref) {
+  var spot = _ref.spot,
+      _ref$bounds = _ref.bounds,
+      bounds = _ref$bounds === void 0 ? undefined : _ref$bounds,
+      update = _ref.update,
+      _ref$hotspotDescripti = _ref.hotspotDescriptionPath,
+      hotspotDescriptionPath = _ref$hotspotDescripti === void 0 ? "" : _ref$hotspotDescripti;
+
+  // x/y are stored as % but need to be displayed as px
+  var _React$useState = _react.default.useState({
+    x: 0,
+    y: 0
+  }),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      _React$useState2$ = _React$useState2[0],
+      x = _React$useState2$.x,
+      y = _React$useState2$.y,
+      setXY = _React$useState2[1];
+
+  var _React$useState3 = _react.default.useState({
+    width: 0,
+    height: 0
+  }),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      rect = _React$useState4[0],
+      setRect = _React$useState4[1];
+
+  var _React$useState5 = _react.default.useState(false),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      isDragging = _React$useState6[0],
+      setIsDragging = _React$useState6[1];
+
+  _react.default.useEffect(() => {
+    var _bounds$current;
+
+    var clientRect = bounds === null || bounds === void 0 ? void 0 : (_bounds$current = bounds.current) === null || _bounds$current === void 0 ? void 0 : _bounds$current.getBoundingClientRect();
+
+    if (clientRect) {
+      // So convert % to px once we know the height/width of the image
+      setXY({
+        x: round(clientRect.width * (spot.x / 100)),
+        y: round(clientRect.height * (spot.y / 100))
+      });
+      setRect(clientRect);
+    }
+  }, [bounds, bounds.current]);
+
+  var handleDragEnd = _react.default.useCallback(event => {
+    setIsDragging(false); // I don't know why, but framer-motion doesn't give you the actual transform values
+    // So we have to regex the `px` values off the inline styles
+
+    var _event$srcElement$sty = event.srcElement.style.transform.split(" ").map(v => {
+      return v ? v.match(/\(([^)]+)\)/).pop().replace("px", "") : null;
+    }),
+        _event$srcElement$sty2 = _slicedToArray(_event$srcElement$sty, 2),
+        currentX = _event$srcElement$sty2[0],
+        currentY = _event$srcElement$sty2[1];
+
+    if (!Number(currentX) || !Number(currentY)) {
+      return console.warn("Missing or non-number X or Y", {
+        currentX,
+        currentY
+      }, event.srcElement);
+    } // Which we need to convert back to `%` to patch the document
+
+
+    var newX = round(currentX * 100 / rect.width);
+    var newY = round(currentY * 100 / rect.height); // Don't go below 0 or above 100
+
+    var safeX = Math.max(0, Math.min(100, newX));
+    var safeY = Math.max(0, Math.min(100, newY));
+    update(spot._key, safeX, safeY);
+  }, [spot]);
+
+  if (!x || !y) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_ui.Tooltip, {
+    key: spot._key,
+    disabled: isDragging,
+    boundaryElement: bounds.current,
+    portal: true,
+    content: /*#__PURE__*/_react.default.createElement(_ui.Box, {
+      padding: 2,
+      style: {
+        maxWidth: 200,
+        pointerEvents: "none"
+      }
+    }, /*#__PURE__*/_react.default.createElement(_ui.Text, {
+      textOverflow: "ellipsis"
+    }, hotspotDescriptionPath ? (0, _get.default)(spot, hotspotDescriptionPath) : "".concat(spot.x, "% x ").concat(spot.y, "%")))
+  }, /*#__PURE__*/_react.default.createElement(_framerMotion.motion.div, {
+    drag: true,
+    dragConstraints: bounds,
+    dragMomentum: false,
+    initial: {
+      x,
+      y
+    },
+    onDragEnd: handleDragEnd,
+    onDragStart: () => setIsDragging(true),
+    style: dragStyle
+  }, /*#__PURE__*/_react.default.createElement(_ui.Card, {
+    tone: "primary",
+    shadow: 3,
+    style: dotStyle
+  })));
+}
+//# sourceMappingURL=Spot.js.map

package/lib/Spot.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Spot.tsx"],"names":["dragStyle","width","height","position","dotStyle","borderRadius","pointerEvents","round","num","Math","Spot","spot","bounds","undefined","update","hotspotDescriptionPath","React","useState","x","y","setXY","rect","setRect","isDragging","setIsDragging","useEffect","clientRect","current","getBoundingClientRect","handleDragEnd","useCallback","event","srcElement","style","transform","split","map","v","match","pop","replace","currentX","currentY","Number","console","warn","newX","newY","safeX","max","min","safeY","_key","maxWidth"],"mappings":"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","sourcesContent":["import React from 'react'\nimport {Box, Card, Text, Tooltip} from '@sanity/ui'\nimport {motion} from 'framer-motion'\nimport get from 'lodash/get'\n\nconst dragStyle = {\n  width: `1rem`,\n  height: `1rem`,\n  position: `absolute`,\n}\n\nconst dotStyle = {\n  ...dragStyle,\n  borderRadius: `50%`,\n  // make sure pointer events only run on the parent\n  pointerEvents: `none`,\n}\n\nconst round = (num) => Math.round(num * 100) / 100\n\nexport default function Spot({spot, bounds = undefined, update, hotspotDescriptionPath = ``}) {\n  // x/y are stored as % but need to be displayed as px\n  const [{x, y}, setXY] = React.useState({x: 0, y: 0})\n  const [rect, setRect] = React.useState({width: 0, height: 0})\n  const [isDragging, setIsDragging] = React.useState(false)\n\n  React.useEffect(() => {\n    const clientRect = bounds?.current?.getBoundingClientRect()\n\n    if (clientRect) {\n      // So convert % to px once we know the height/width of the image\n      setXY({\n        x: round(clientRect.width * (spot.x / 100)),\n        y: round(clientRect.height * (spot.y / 100)),\n      })\n\n      setRect(clientRect)\n    }\n  }, [bounds, bounds.current])\n\n  const handleDragEnd = React.useCallback(\n    (event) => {\n      setIsDragging(false)\n\n      // I don't know why, but framer-motion doesn't give you the actual transform values\n      // So we have to regex the `px` values off the inline styles\n      const [currentX, currentY] = event.srcElement.style.transform.split(` `).map((v) => {\n        return v\n          ? v\n              .match(/\\(([^)]+)\\)/)\n              .pop()\n              .replace(`px`, ``)\n          : null\n      })\n\n      if (!Number(currentX) || !Number(currentY)) {\n        return console.warn(`Missing or non-number X or Y`, {currentX, currentY}, event.srcElement)\n      }\n\n      // Which we need to convert back to `%` to patch the document\n      const newX = round((currentX * 100) / rect.width)\n      const newY = round((currentY * 100) / rect.height)\n\n      // Don't go below 0 or above 100\n      const safeX = Math.max(0, Math.min(100, newX))\n      const safeY = Math.max(0, Math.min(100, newY))\n\n      update(spot._key, safeX, safeY)\n    },\n\n    [spot]\n  )\n\n  if (!x || !y) {\n    return null\n  }\n\n  return (\n    <Tooltip\n      key={spot._key}\n      disabled={isDragging}\n      boundaryElement={bounds.current}\n      portal\n      content={\n        <Box padding={2} style={{maxWidth: 200, pointerEvents: `none`}}>\n          <Text textOverflow=\"ellipsis\">{hotspotDescriptionPath ? get(spot, hotspotDescriptionPath) : `${spot.x}% x ${spot.y}%`}</Text>\n        </Box>\n      }\n    >\n      <motion.div\n        drag\n        dragConstraints={bounds}\n        dragMomentum={false}\n        initial={{x, y}}\n        onDragEnd={handleDragEnd}\n        onDragStart={() => setIsDragging(true)}\n        style={dragStyle}\n      >\n        <Card tone=\"primary\" shadow={3} style={dotStyle} />\n      </motion.div>\n    </Tooltip>\n  )\n}"],"file":"Spot.js"}

package/lib/useUnsetInputComponent.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useUnsetInputComponent = useUnsetInputComponent;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function useUnsetInputComponent(type, component) {
+  return _react.default.useMemo(() => unsetInputComponent(type, component), [type, component]);
+}
+
+function unsetInputComponent(type, component) {
+  var t = _objectSpread(_objectSpread({}, type), {}, {
+    inputComponent: type.inputComponent === component ? undefined : type.inputComponent
+  });
+
+  var typeOfType = t.type ? unsetInputComponent(t.type, component) : undefined;
+  return _objectSpread(_objectSpread({}, t), {}, {
+    type: typeOfType
+  });
+}
+//# sourceMappingURL=useUnsetInputComponent.js.map

package/lib/useUnsetInputComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useUnsetInputComponent.ts"],"names":["useUnsetInputComponent","type","component","React","useMemo","unsetInputComponent","t","inputComponent","undefined","typeOfType"],"mappings":";;;;;;;AAAA;;;;;;;;;;AAEO,SAASA,sBAAT,CAAgCC,IAAhC,EAAsCC,SAAtC,EAAiD;AACpD,SAAOC,eAAMC,OAAN,CAAc,MAAMC,mBAAmB,CAACJ,IAAD,EAAOC,SAAP,CAAvC,EAA0D,CAACD,IAAD,EAAOC,SAAP,CAA1D,CAAP;AACD;;AAED,SAASG,mBAAT,CAA6BJ,IAA7B,EAAmCC,SAAnC,EAA8C;AAC5C,MAAMI,CAAC,mCACFL,IADE;AAELM,IAAAA,cAAc,EAAEN,IAAI,CAACM,cAAL,KAAwBL,SAAxB,GAAoCM,SAApC,GAAgDP,IAAI,CAACM;AAFhE,IAAP;;AAIA,MAAME,UAAU,GAAGH,CAAC,CAACL,IAAF,GAASI,mBAAmB,CAACC,CAAC,CAACL,IAAH,EAASC,SAAT,CAA5B,GAAkDM,SAArE;AACA,yCACKF,CADL;AAEEL,IAAAA,IAAI,EAAEQ;AAFR;AAID","sourcesContent":["import React from 'react'\n\nexport function useUnsetInputComponent(type, component) {\n    return React.useMemo(() => unsetInputComponent(type, component), [type, component])\n  }\n  \n  function unsetInputComponent(type, component) {\n    const t = {\n      ...type,\n      inputComponent: type.inputComponent === component ? undefined : type.inputComponent,\n    }\n    const typeOfType = t.type ? unsetInputComponent(t.type, component) : undefined\n    return {\n      ...t,\n      type: typeOfType,\n    }\n  }"],"file":"useUnsetInputComponent.js"}

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "sanity-plugin-hotspot-array",
+  "version": "0.0.1",
+  "description": "A configurable Custom Input for Arrays that will add and update items by clicking on an Image",
+  "main": "lib/HotspotArray.js",
+  "scripts": {
+    "lint": "eslint .",
+    "build": "sanipack build",
+    "watch": "sanipack build --watch",
+    "prepublishOnly": "sanipack build && sanipack verify"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/SimeonGriggs/sanity-plugin-hotspot-array.git"
+  },
+  "keywords": [
+    "sanity",
+    "sanity-plugin"
+  ],
+  "author": "Simeon Griggs <simeon@sanity.io>",
+  "license": "MIT",
+  "dependencies": {
+    "@sanity/asset-utils": "^1.2.3",
+    "@sanity/base": "^2.23.2",
+    "@sanity/form-builder": "^2.23.2",
+    "@sanity/ui": "^0.36.17",
+    "framer-motion": "^5.5.5",
+    "prop-types": "^15.7.2"
+  },
+  "devDependencies": {
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-sanity": "^5.1.0",
+    "eslint-plugin-react": "^7.27.1",
+    "prettier": "^2.5.1",
+    "sanipack": "^2.1.0"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0",
+    "@sanity/util": "2.23.2",
+    "@sanity/image-url": "1.0.1",
+    "lodash": "4.17.21"
+  },
+  "bugs": {
+    "url": "https://github.com/SimeonGriggs/sanity-plugin-hotspot-array/issues"
+  },
+  "homepage": "https://github.com/SimeonGriggs/sanity-plugin-hotspot-array#readme",
+  "prettier": {
+    "semi": false,
+    "printWidth": 100,
+    "bracketSpacing": false,
+    "singleQuote": true
+  },
+  "eslintConfig": {
+    "parser": "sanipack/babel/eslint-parser",
+    "extends": [
+      "sanity",
+      "sanity/react",
+      "prettier"
+    ],
+    "ignorePatterns": [
+      "lib/**/"
+    ]
+  }
+}

package/sanity.json

@@ -0,0 +1,7 @@
+{
+  "paths": {
+    "source": "./src",
+    "compiled": "./lib"
+  },
+  "parts": []
+}

package/src/Feedback.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import {Card, Text} from '@sanity/ui'
+
+export default function Feedback({children}) {
+  return (
+    <Card padding={4} radius={2} shadow={1} tone="caution">
+      <Text>{children}</Text>
+    </Card>
+  )
+}

package/src/HotspotArray.tsx

@@ -0,0 +1,136 @@
+/* eslint-disable react/display-name */
+
+// @ts-ignore
+import sanityClient from 'part:@sanity/base/client'
+// @ts-ignore
+import {withDocument} from 'part:@sanity/form-builder'
+
+import React from 'react'
+import {Card, Flex, Stack, Text} from '@sanity/ui'
+import {FormBuilderInput} from '@sanity/form-builder/lib/FormBuilderInput'
+import {randomKey} from '@sanity/util/content'
+import {PatchEvent, setIfMissing, set, insert} from '@sanity/form-builder/PatchEvent'
+import imageUrlBuilder from '@sanity/image-url'
+import {getImageDimensions} from '@sanity/asset-utils'
+import get from 'lodash/get'
+
+import Spot from './Spot'
+import { useUnsetInputComponent } from './useUnsetInputComponent'
+import Feedback from './Feedback'
+
+const builder = imageUrlBuilder(sanityClient)
+const urlFor = (source) => builder.image(source)
+const imageStyle = {width: `100%`, height: `auto`}
+
+
+const HotspotArray = React.forwardRef((props, ref) => {
+  const {type, value, onChange, document: sanityDocument} = props
+
+  // Attempt prevention of infinite loop in <FormBuilderInput />
+  // Re-renders can still occur if this Component is used again in a nested field
+  const typeWithoutInputComponent = useUnsetInputComponent(type, type?.inputComponent)
+
+  // Finding the image from the document,
+  // using the path from the hotspot's `options` field
+  const displayImage = React.useMemo(() => {
+    const hotspotImage = get(sanityDocument, type?.options?.hotspotImagePath)
+
+    if (hotspotImage?.asset?._ref) {
+      const {aspectRatio} = getImageDimensions(hotspotImage.asset._ref)
+      const width = 600
+      const height = Math.round(width / aspectRatio)
+      const url = urlFor(hotspotImage).width(width).url()
+
+      return {width, height, url}
+    }
+
+    return null
+  }, [sanityDocument, type])
+
+  const handleHotspotImageClick = React.useCallback((event) => {
+    const {nativeEvent} = event
+
+    // Calculate the x/y percentage of the click position
+    const x = Number(((nativeEvent.offsetX * 100) / nativeEvent.srcElement.width).toFixed(2))
+    const y = Number(((nativeEvent.offsetY * 100) / nativeEvent.srcElement.height).toFixed(2))
+    const description = `New Hotspot at ${x}% x ${y}%`
+
+    const newRow = {
+      _key: randomKey(12),
+      _type: `spot`,
+      x,
+      y,
+    }
+
+    if (type?.options?.hotspotDescriptionPath) {
+      console.log(type.options.hotspotDescriptionPath);
+      newRow[type.options.hotspotDescriptionPath] = description
+    }
+
+    onChange(PatchEvent.from(setIfMissing([]), insert([newRow], 'after', [-1])))
+  }, [])
+
+  const handleHotspotMove = React.useCallback(
+    (key, x, y) => {
+      if (!Number(x) || !Number(y)) {
+        console.warn(`Missing or non-number X or Y`, {x, y})
+        return
+      }
+
+      onChange(
+        PatchEvent.from(
+          // Set the `x` value of this array key item
+          set(x, [{_key: key}, 'x']),
+          // Set the `y` value of this array key item
+          set(y, [{_key: key}, 'y'])
+        )
+      )
+    },
+    [value]
+  )
+
+  const hotspotImageRef = React.useRef(null)
+
+  return (
+    <Stack space={[2,2,3]}>
+      {displayImage?.url ? (
+        <div style={{position: `relative`}}>
+          {value?.length > 0 &&
+            value.map((spot) => (
+              <Spot
+                key={spot._key}
+                spot={spot}
+                bounds={hotspotImageRef}
+                update={handleHotspotMove}
+                hotspotDescriptionPath={type?.options?.hotspotDescriptionPath}
+              />
+            ))}
+
+          <Card __unstable_checkered shadow={1}>
+            <Flex align="center" justify="center">
+              <img
+                ref={hotspotImageRef}
+                src={displayImage.url}
+                width={displayImage.width}
+                height={displayImage.height}
+                alt=""
+                style={imageStyle}
+                onClick={handleHotspotImageClick}
+                />
+            </Flex>
+          </Card>
+        </div>
+      ) : (
+        <Feedback>
+            {type?.options?.hotspotImagePath 
+              ? <>No Hotspot image found at path <code>{type?.options?.hotspotImagePath}</code></> 
+              : <>Define a path in this field using to the image field in this document at <code>options.hotspotImagePath</code></>
+            }
+          </Feedback>
+      )}
+      <FormBuilderInput {...props} type={typeWithoutInputComponent} ref={ref} />
+    </Stack>
+  )
+})
+
+export default withDocument(HotspotArray)

package/src/Spot.tsx

@@ -0,0 +1,103 @@
+import React from 'react'
+import {Box, Card, Text, Tooltip} from '@sanity/ui'
+import {motion} from 'framer-motion'
+import get from 'lodash/get'
+
+const dragStyle = {
+  width: `1rem`,
+  height: `1rem`,
+  position: `absolute`,
+}
+
+const dotStyle = {
+  ...dragStyle,
+  borderRadius: `50%`,
+  // make sure pointer events only run on the parent
+  pointerEvents: `none`,
+}
+
+const round = (num) => Math.round(num * 100) / 100
+
+export default function Spot({spot, bounds = undefined, update, hotspotDescriptionPath = ``}) {
+  // x/y are stored as % but need to be displayed as px
+  const [{x, y}, setXY] = React.useState({x: 0, y: 0})
+  const [rect, setRect] = React.useState({width: 0, height: 0})
+  const [isDragging, setIsDragging] = React.useState(false)
+
+  React.useEffect(() => {
+    const clientRect = bounds?.current?.getBoundingClientRect()
+
+    if (clientRect) {
+      // So convert % to px once we know the height/width of the image
+      setXY({
+        x: round(clientRect.width * (spot.x / 100)),
+        y: round(clientRect.height * (spot.y / 100)),
+      })
+
+      setRect(clientRect)
+    }
+  }, [bounds, bounds.current])
+
+  const handleDragEnd = React.useCallback(
+    (event) => {
+      setIsDragging(false)
+
+      // I don't know why, but framer-motion doesn't give you the actual transform values
+      // So we have to regex the `px` values off the inline styles
+      const [currentX, currentY] = event.srcElement.style.transform.split(` `).map((v) => {
+        return v
+          ? v
+              .match(/\(([^)]+)\)/)
+              .pop()
+              .replace(`px`, ``)
+          : null
+      })
+
+      if (!Number(currentX) || !Number(currentY)) {
+        return console.warn(`Missing or non-number X or Y`, {currentX, currentY}, event.srcElement)
+      }
+
+      // Which we need to convert back to `%` to patch the document
+      const newX = round((currentX * 100) / rect.width)
+      const newY = round((currentY * 100) / rect.height)
+
+      // Don't go below 0 or above 100
+      const safeX = Math.max(0, Math.min(100, newX))
+      const safeY = Math.max(0, Math.min(100, newY))
+
+      update(spot._key, safeX, safeY)
+    },
+
+    [spot]
+  )
+
+  if (!x || !y) {
+    return null
+  }
+
+  return (
+    <Tooltip
+      key={spot._key}
+      disabled={isDragging}
+      boundaryElement={bounds.current}
+      portal
+      content={
+        <Box padding={2} style={{maxWidth: 200, pointerEvents: `none`}}>
+          <Text textOverflow="ellipsis">{hotspotDescriptionPath ? get(spot, hotspotDescriptionPath) : `${spot.x}% x ${spot.y}%`}</Text>
+        </Box>
+      }
+    >
+      <motion.div
+        drag
+        dragConstraints={bounds}
+        dragMomentum={false}
+        initial={{x, y}}
+        onDragEnd={handleDragEnd}
+        onDragStart={() => setIsDragging(true)}
+        style={dragStyle}
+      >
+        <Card tone="primary" shadow={3} style={dotStyle} />
+      </motion.div>
+    </Tooltip>
+  )
+}

package/src/useUnsetInputComponent.ts

@@ -0,0 +1,17 @@
+import React from 'react'
+
+export function useUnsetInputComponent(type, component) {
+    return React.useMemo(() => unsetInputComponent(type, component), [type, component])
+  }
+  
+  function unsetInputComponent(type, component) {
+    const t = {
+      ...type,
+      inputComponent: type.inputComponent === component ? undefined : type.inputComponent,
+    }
+    const typeOfType = t.type ? unsetInputComponent(t.type, component) : undefined
+    return {
+      ...t,
+      type: typeOfType,
+    }
+  }