diff --git a/.github/workflows/app.yml b/.github/workflows/app.yml
new file mode 100644
index 0000000..5d5eb4a
--- /dev/null
+++ b/.github/workflows/app.yml
@@ -0,0 +1,41 @@
+name: App
+
+on: [push, pull_request]
+
+jobs:
+ build:
+ runs-on: ubuntu-latest
+
+ strategy:
+ matrix:
+ node-version: [14.x]
+
+ steps:
+ - uses: actions/checkout@v2
+
+ - name: Get yarn cache directory path
+ id: yarn-cache-dir-path
+ run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
+
+ - uses: actions/cache@v2
+ id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+ with:
+ path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+ key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+ restore-keys: |
+ ${{ runner.os }}-yarn-
+
+ - name: Use Node.js ${{ matrix.node-version }}
+ uses: actions/setup-node@v2
+ with:
+ node-version: ${{ matrix.node-version }}
+
+ - name: yarn install, build, and test
+ run: |
+ yarn install
+ yarn build
+ yarn test
+ if: |
+ steps.yarn-cache.outputs.cache-hit != 'true'
+ env:
+ CI: false
\ No newline at end of file
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..989e2c5
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,201 @@
+Apache License
+ Version 2.0, January 2004
+ http://www.apache.org/licenses/
+
+ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+ 1. Definitions.
+
+ "License" shall mean the terms and conditions for use, reproduction,
+ and distribution as defined by Sections 1 through 9 of this document.
+
+ "Licensor" shall mean the copyright owner or entity authorized by
+ the copyright owner that is granting the License.
+
+ "Legal Entity" shall mean the union of the acting entity and all
+ other entities that control, are controlled by, or are under common
+ control with that entity. For the purposes of this definition,
+ "control" means (i) the power, direct or indirect, to cause the
+ direction or management of such entity, whether by contract or
+ otherwise, or (ii) ownership of fifty percent (50%) or more of the
+ outstanding shares, or (iii) beneficial ownership of such entity.
+
+ "You" (or "Your") shall mean an individual or Legal Entity
+ exercising permissions granted by this License.
+
+ "Source" form shall mean the preferred form for making modifications,
+ including but not limited to software source code, documentation
+ source, and configuration files.
+
+ "Object" form shall mean any form resulting from mechanical
+ transformation or translation of a Source form, including but
+ not limited to compiled object code, generated documentation,
+ and conversions to other media types.
+
+ "Work" shall mean the work of authorship, whether in Source or
+ Object form, made available under the License, as indicated by a
+ copyright notice that is included in or attached to the work
+ (an example is provided in the Appendix below).
+
+ "Derivative Works" shall mean any work, whether in Source or Object
+ form, that is based on (or derived from) the Work and for which the
+ editorial revisions, annotations, elaborations, or other modifications
+ represent, as a whole, an original work of authorship. For the purposes
+ of this License, Derivative Works shall not include works that remain
+ separable from, or merely link (or bind by name) to the interfaces of,
+ the Work and Derivative Works thereof.
+
+ "Contribution" shall mean any work of authorship, including
+ the original version of the Work and any modifications or additions
+ to that Work or Derivative Works thereof, that is intentionally
+ submitted to Licensor for inclusion in the Work by the copyright owner
+ or by an individual or Legal Entity authorized to submit on behalf of
+ the copyright owner. For the purposes of this definition, "submitted"
+ means any form of electronic, verbal, or written communication sent
+ to the Licensor or its representatives, including but not limited to
+ communication on electronic mailing lists, source code control systems,
+ and issue tracking systems that are managed by, or on behalf of, the
+ Licensor for the purpose of discussing and improving the Work, but
+ excluding communication that is conspicuously marked or otherwise
+ designated in writing by the copyright owner as "Not a Contribution."
+
+ "Contributor" shall mean Licensor and any individual or Legal Entity
+ on behalf of whom a Contribution has been received by Licensor and
+ subsequently incorporated within the Work.
+
+ 2. Grant of Copyright License. Subject to the terms and conditions of
+ this License, each Contributor hereby grants to You a perpetual,
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ copyright license to reproduce, prepare Derivative Works of,
+ publicly display, publicly perform, sublicense, and distribute the
+ Work and such Derivative Works in Source or Object form.
+
+ 3. Grant of Patent License. Subject to the terms and conditions of
+ this License, each Contributor hereby grants to You a perpetual,
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ (except as stated in this section) patent license to make, have made,
+ use, offer to sell, sell, import, and otherwise transfer the Work,
+ where such license applies only to those patent claims licensable
+ by such Contributor that are necessarily infringed by their
+ Contribution(s) alone or by combination of their Contribution(s)
+ with the Work to which such Contribution(s) was submitted. If You
+ institute patent litigation against any entity (including a
+ cross-claim or counterclaim in a lawsuit) alleging that the Work
+ or a Contribution incorporated within the Work constitutes direct
+ or contributory patent infringement, then any patent licenses
+ granted to You under this License for that Work shall terminate
+ as of the date such litigation is filed.
+
+ 4. Redistribution. You may reproduce and distribute copies of the
+ Work or Derivative Works thereof in any medium, with or without
+ modifications, and in Source or Object form, provided that You
+ meet the following conditions:
+
+ (a) You must give any other recipients of the Work or
+ Derivative Works a copy of this License; and
+
+ (b) You must cause any modified files to carry prominent notices
+ stating that You changed the files; and
+
+ (c) You must retain, in the Source form of any Derivative Works
+ that You distribute, all copyright, patent, trademark, and
+ attribution notices from the Source form of the Work,
+ excluding those notices that do not pertain to any part of
+ the Derivative Works; and
+
+ (d) If the Work includes a "NOTICE" text file as part of its
+ distribution, then any Derivative Works that You distribute must
+ include a readable copy of the attribution notices contained
+ within such NOTICE file, excluding those notices that do not
+ pertain to any part of the Derivative Works, in at least one
+ of the following places: within a NOTICE text file distributed
+ as part of the Derivative Works; within the Source form or
+ documentation, if provided along with the Derivative Works; or,
+ within a display generated by the Derivative Works, if and
+ wherever such third-party notices normally appear. The contents
+ of the NOTICE file are for informational purposes only and
+ do not modify the License. You may add Your own attribution
+ notices within Derivative Works that You distribute, alongside
+ or as an addendum to the NOTICE text from the Work, provided
+ that such additional attribution notices cannot be construed
+ as modifying the License.
+
+ You may add Your own copyright statement to Your modifications and
+ may provide additional or different license terms and conditions
+ for use, reproduction, or distribution of Your modifications, or
+ for any such Derivative Works as a whole, provided Your use,
+ reproduction, and distribution of the Work otherwise complies with
+ the conditions stated in this License.
+
+ 5. Submission of Contributions. Unless You explicitly state otherwise,
+ any Contribution intentionally submitted for inclusion in the Work
+ by You to the Licensor shall be under the terms and conditions of
+ this License, without any additional terms or conditions.
+ Notwithstanding the above, nothing herein shall supersede or modify
+ the terms of any separate license agreement you may have executed
+ with Licensor regarding such Contributions.
+
+ 6. Trademarks. This License does not grant permission to use the trade
+ names, trademarks, service marks, or product names of the Licensor,
+ except as required for reasonable and customary use in describing the
+ origin of the Work and reproducing the content of the NOTICE file.
+
+ 7. Disclaimer of Warranty. Unless required by applicable law or
+ agreed to in writing, Licensor provides the Work (and each
+ Contributor provides its Contributions) on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+ implied, including, without limitation, any warranties or conditions
+ of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+ PARTICULAR PURPOSE. You are solely responsible for determining the
+ appropriateness of using or redistributing the Work and assume any
+ risks associated with Your exercise of permissions under this License.
+
+ 8. Limitation of Liability. In no event and under no legal theory,
+ whether in tort (including negligence), contract, or otherwise,
+ unless required by applicable law (such as deliberate and grossly
+ negligent acts) or agreed to in writing, shall any Contributor be
+ liable to You for damages, including any direct, indirect, special,
+ incidental, or consequential damages of any character arising as a
+ result of this License or out of the use or inability to use the
+ Work (including but not limited to damages for loss of goodwill,
+ work stoppage, computer failure or malfunction, or any and all
+ other commercial damages or losses), even if such Contributor
+ has been advised of the possibility of such damages.
+
+ 9. Accepting Warranty or Additional Liability. While redistributing
+ the Work or Derivative Works thereof, You may choose to offer,
+ and charge a fee for, acceptance of support, warranty, indemnity,
+ or other liability obligations and/or rights consistent with this
+ License. However, in accepting such obligations, You may act only
+ on Your own behalf and on Your sole responsibility, not on behalf
+ of any other Contributor, and only if You agree to indemnify,
+ defend, and hold each Contributor harmless for any liability
+ incurred by, or claims asserted against, such Contributor by reason
+ of your accepting any such warranty or additional liability.
+
+ END OF TERMS AND CONDITIONS
+
+ APPENDIX: How to apply the Apache License to your work.
+
+ To apply the Apache License to your work, attach the following
+ boilerplate notice, with the fields enclosed by brackets "[]"
+ replaced with your own identifying information. (Don't include
+ the brackets!) The text should be enclosed in the appropriate
+ comment syntax for the file format. We also recommend that a
+ file or class name and description of purpose be included on the
+ same "printed page" as the copyright notice for easier
+ identification within third-party archives.
+
+ Copyright [yyyy] [name of copyright owner]
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
\ No newline at end of file
diff --git a/README.md b/README.md
index 02aac3f..766db2b 100644
--- a/README.md
+++ b/README.md
@@ -1,70 +1,76 @@
-# Getting Started with Create React App
+[](https://amplience.com/dynamic-content)
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
-## Available Scripts
+# Dynamic Content Shoppable Image Extension
-In the project directory, you can run:
+This extension allows users to define Focal Points and interactable Hotspots over an image, in a format similar to what Content Hub provides, but with the data being stored on a content item.
-### `yarn start`
+If you want to get started after cloning this repo, remember to sync packages with `yarn install`.
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+## Partial for Shoppabble Image Field and Configuration
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
+The shoppable image extension has a rather complicated structure for the field it writes, so it's recommended that you put the schema in a partial. You can find the full partial definition in `shoppable-image-partial.json` in the base of this repository.
-### `yarn test`
+To use the schema when imported as a partial, use this snippet:
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+```json
+{
+ "shoppableImage": {
+ "title": "Shoppable Image",
+ "description": "An image enriched with a focal point and hotspots.",
+ "allOf": [
+ { "$ref": "https://amplience.com/shoppable-image-partial#/definitions/shoppableImage" }
+ ]
+ }
+}
+```
-### `yarn build`
+## Register Extension
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+This extension needs to be [registered](https://amplience.com/docs/development/registeringextensions.html) against a Hub with in the Dynamic Content application (Developer -> Extensions), for it to load within that Hub.
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+### Setup
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
-### `yarn eject`
+* Category: Content Field
+* Label: Shoppable Image _(this will appear as the tab title in the Dashboard)_
+* Name: shoppable-image _(needs to be unique with the Hub)_
+* URL: [https://shoppable-image.extensions.content.amplience.net](https://shoppable-image.extensions.content.amplience.net)
+* Description: Shoppable Image Extension _(can be left blank, if you wish)_
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+Note:
+You can use our deployed version of this extension (builds from the "production" branch) -
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+[https://shoppable-image.extensions.content.amplience.net](https://shoppable-image.extensions.content.amplience.net)
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+_As this is an open source project you're welcome to host your own "fork" of this project. You can use any standard static hosting service (Netlify, Amplify, Vercel, etc.) if you wish._
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+#### Permissions
-## Learn More
+No additional permissions are required.
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+## Output Data Format & Usage
-To learn React, check out the [React documentation](https://reactjs.org/).
+The shoppable image extension creates a simple format that you can ingest in your site to use or represent hotspots and the point of interest however you want.
-### Code Splitting
+For information on the format structure, and how you might use it in your own renderer, see [this documentation.](docs/FORMAT-USAGE.md)
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+## Visualization
-### Analyzing the Bundle Size
+The webapp for the extension can also double as a standalone visualization for the shoppable image field. It will run in visualization mode if you provide `?vse={{vse.domain}}` as a query string parameter, and will read back the field from the `shoppableImage` property of your content item. If you want to provide a different top level property, simply provide it in the query string like `fieldName=exampleImage`.
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+The visualization uses the `dc-visualization-sdk` to update its preview as the field is being edited, so you'll be able to try hotspot interaction over your image as you add and move hotspots.
-### Making a Progressive Web App
+To add the visualization to your content type, just switch to the `Visualizations` tab, and add a visualization with the extension as the url, and the query string `?vse={{vse.domain}}`.
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+## Development server
-### Advanced Configuration
+Run `HTTPS=true yarn run start` for a dev server. Navigate to `https://localhost:3000/`. The app will automatically reload if you change any of the source files.
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+If you want to test on DC, you'll need to link an extension to that same localhost url. Keep in mind that you might run into a browser security issue when using SSL, so if you're having any issues visit the extension directly and accept any ssl warnings.
-### Deployment
+## Build
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
-
-### `yarn build` fails to minify
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+Run `yarn build`. The built extension will then be present in the `build/` directory, and you can upload it to any webserver.
\ No newline at end of file
diff --git a/amplify.yml b/amplify.yml
new file mode 100644
index 0000000..d1a7a2a
--- /dev/null
+++ b/amplify.yml
@@ -0,0 +1,16 @@
+version: 1
+frontend:
+ phases:
+ preBuild:
+ commands:
+ - nvm install 14
+ - nvm use 14
+ - yarn install --immutable
+ - yarn test
+ build:
+ commands:
+ - CI=false yarn build
+ artifacts:
+ baseDirectory: build
+ files:
+ - '**/*'
\ No newline at end of file
diff --git a/docs/FORMAT-USAGE.md b/docs/FORMAT-USAGE.md
new file mode 100644
index 0000000..6755939
--- /dev/null
+++ b/docs/FORMAT-USAGE.md
@@ -0,0 +1,207 @@
+# Format & Usage information
+
+This document will explain what each of the fields in the partial maps to, and how to use them in your own applications.
+
+## Example
+
+
+
+In the example image above, a few regions of the image have been highlighted with polygon hotspots, there is a point of interest centered on the camera, and there is a hotspot placed on top of a watch.
+
+Here is the JSON for this Shoppable Image:
+
+```json
+{
+ "shoppableImage": {
+ "image": {
+ "_meta": {
+ "schema": "http://bigcontent.io/cms/schema/v1/core#/definitions/image-link"
+ },
+ "id": "b82e697a-0c8d-4270-9241-58ce6b53948c",
+ "name": "hipster-bag",
+ "endpoint": "csdemo",
+ "defaultHost": "cdn.media.amplience.net"
+ },
+ "poi": {
+ "x": 0.38377001455604076,
+ "y": 0.7459606986899564,
+ "w": 0.09999999999999999,
+ "h": 0.15
+ },
+ "hotspots":[
+ {
+ "id": "4b70802c-0499-4c6f-aa27-1e4ff0b125cb",
+ "target": "Watch",
+ "selector": ".watch",
+ "points": {
+ "x": 0.5647743813682679,
+ "y": 0.8384279475982532
+ }
+ }
+ ],
+ "polygons": [
+ {
+ "id": "744a00b9-0b21-47b5-800e-789911e0ad9a",
+ "target": "Shirt",
+ "selector": ".Shirt",
+ "points": [
+ {
+ "x": 0.11062590975254731,
+ "y": 0.4912663755458515
+ },
+ {
+ "x": 0.33624454148471616,
+ "y": 0.4912663755458515
+ },
+ {
+ "x": 0.33624454148471616,
+ "y": 0.8973799126637555
+ },
+ {
+ "x": 0.11062590975254731,
+ "y": 0.8973799126637555
+ }
+ ]
+ },
+ {
+ "id": "6264b28f-0db9-4caf-b4d5-900bfb140d1a",
+ "target": "Fabric",
+ "selector": ".fabric",
+ "points": [
+ {
+ "x": 0.4735225618631732,
+ "y": 0.36899563318777295
+ },
+ {
+ "x": 0.5352110625909757,
+ "y": 0.36899563318777295
+ },
+ {
+ "x": 0.5921542940320236,
+ "y": 0.4127074235807857
+ },
+ {
+ "x": 0.6229985443959243,
+ "y": 0.4934061135371177
+ },
+ {
+ "x": 0.6229985443959243,
+ "y": 0.5808296943231442
+ },
+ {
+ "x": 0.5921542940320236,
+ "y": 0.6615283842794764
+ },
+ {
+ "x": 0.5352110625909757,
+ "y": 0.7052401746724891
+ },
+ {
+ "x": 0.4735225618631732,
+ "y": 0.7052401746724891
+ },
+ {
+ "x": 0.41657933042212547,
+ "y": 0.6615283842794764
+ },
+ {
+ "x": 0.38573508005822416,
+ "y": 0.5808296943231442
+ },
+ {
+ "x": 0.38573508005822416,
+ "y": 0.4934061135371177
+ },
+ {
+ "x": 0.41657933042212547,
+ "y": 0.4127074235807857
+ }
+ ]
+ },
+ {
+ "id": "5678248d-6ad5-40c7-bb20-a68e9f3f1312",
+ "target": "Bag",
+ "selector": ".bag",
+ "points": [
+ {
+ "x": 0.6506550218340611,
+ "y": 0.10043668122270744
+ },
+ {
+ "x": 0.9068413391557496,
+ "y": 0.10043668122270744
+ },
+ {
+ "x": 0.9068413391557496,
+ "y": 0.4781659388646288
+ },
+ {
+ "x": 0.6506550218340611,
+ "y": 0.4781659388646288
+ }
+ ]
+ }
+ ]
+ }
+}
+```
+
+The `image` field is a normal amplience media link. You can use the provided information to request the image. Here is an example handlebars template for generating an `` `src` attribute from an `image` object:
+
+```hbs
+https://{{image.defaultHost}}/i/{{image.endpoint}}/{{image.name}}
+```
+
+The `poi` field represents a point of interest - an anchor point for the image to be centered around when cropping. The point of interest is technically a rectangle; it contains `x` and `y` positions, as well as width `w` and height `h`. The point is considered in the center of the rectangle.
+
+The `hotspots` field is an array of hotspot objects:
+- `id`: GUID for the hotspot. Can be used to uniquely identify the hotspot.
+- `target`: Target string. It's up to the user what this means.
+- `selector`: Selector string. It's up to the user what this means.
+- `points`: An object containing a single point for the hotspot. `x` and `y` contain the x and y postions, respectively.
+
+The `polygons` field is an array of polygon objects:
+- `id`: GUID for the polygon. Can be used to uniquely identify the polygon.
+- `target`: Target string. It's up to the user what this means.
+- `selector`: Selector string. It's up to the user what this means.
+- `points`: An array of points that construct the polygon. The final point is connected to the first point to form a closed loop.
+
+## Interactive Hotspots over an Image
+
+To place interactive elements over your image, you need both a container for them, and some code to calculate their placement relative to the scaled image size. The visualization does this by creating a container with the image size which floats on top of the image itself using `position: absolute;`, and hotspots/polygons which are placed by using css transforms with translations calculated by multiplying the normalized positions with the image size.
+
+Hotspots are easy enough to place by creating a div and styling it yourself, but polygons prove a little more challenging as they can technically create any shape out of their points. The best way to deal with this is to render your polygon within an SVG, and then place that in your container.
+
+You can generate an SVG Path's `d` attribute using the points of the polygon, which will let you draw the path within an SVG with any styling and interaction of your choice. See [polygon-helper.ts](../src/preview/polygon/polygon-helper.ts) for an example method that does this (`pointsToSVGPath`).
+
+## Point of Interest
+
+As the crop rectangle for the image changes dynamically, the visualization requests the full image and then applies the crop using css and javascript. You can do this by making the image a background and then using background position to move the image to follow the point of interest, or you can put the image in an outer container with `overflow: hidden` and your crop size, and use a css transformation to move the image. It's worth noting here that your interactive hotspots rely on the uncropped size of the image, so if hotspots are used, they should also be transformed in the same manner as the image.
+
+To crop with point of interest and a target aspect, you want to first determine which axis is uncropped. If the w/h ratio of the image is greater than the w/h ratio of the container, then the y-axis will be uncropped, as the wider image will overflow outside of your container in the x-axis. If it is less, the x-axis will be uncropped. You only need to move the image in the axis where it is cropped, so this simplifies calculation a bit.
+
+Let's say that the y-axis is uncropped, that `imageWidth` and `imageHeight` contain the size of the image, and that `targetWidth` contains the width of the cropping container. You can calculate a crop that avoids moving outside the image as follows:
+
+```typescript
+// The point of interest needs to be converted back from normalized rectangle
+// into a centerpoint with pixel coords.
+const poiX = (field.poi.x + field.poi.w / 2 - 0.5) * imageWidth;
+
+// maxDist is the number of pixels of the image that overflow in a single direction.
+// This will bound how much the image can be moved in that axis.
+const maxDist = (imageWidth - targetWidth) / 2;
+
+offsetTransform = `translate(${Math.min(maxDist, Math.max(-poiX, -maxDist))}px, 0)`;
+```
+
+When uncropped on the y-axis, the css for the contained image is `height: 100%; maxWidth: none;`, and it's centered using flex. If uncropped on the other axis, simply swap all X for Y and width for height in the above examples. If using an interactive canvas on top, set its size to that of the image (scaled by its constrained axis) and also have it placed in the middle to float over it.
+
+If you wish to crop the image statically, you can pass the point of interest directly to DI and have it crop around the point of interest for you. Example parameters:
+
+`poi=0.2056,0.5014,0.1124,0.15&scaleFit=poi`
+
+You can add these to any crop that works with Point of Interest, such as an aspect crop. This one sets a width of 141px, and the height is implicitly 141 as well due to the aspect:
+
+`sm=aspect&aspect=1:1&w=141`
+
+If you wish to use both point of interest and hotspots at the same time, then you'll still need to know the original size of the image before cropping, as all coordinates are normalized using that size. This might mean applying the crop rectangle to the full image yourself, or requesting the image metadata separately to get its original size.
\ No newline at end of file
diff --git a/media/format-example.png b/media/format-example.png
new file mode 100644
index 0000000..7268aff
Binary files /dev/null and b/media/format-example.png differ
diff --git a/media/header.png b/media/header.png
new file mode 100644
index 0000000..dc252de
Binary files /dev/null and b/media/header.png differ
diff --git a/media/screenshot.png b/media/screenshot.png
new file mode 100644
index 0000000..dc7a232
Binary files /dev/null and b/media/screenshot.png differ
diff --git a/media/setup.png b/media/setup.png
new file mode 100644
index 0000000..6d8fb4a
Binary files /dev/null and b/media/setup.png differ
diff --git a/package.json b/package.json
index d92533d..264ecd1 100644
--- a/package.json
+++ b/package.json
@@ -1,14 +1,27 @@
{
"name": "dc-extension-shoppable-image",
- "version": "0.1.0",
+ "version": "1.0.0",
"private": true,
"dependencies": {
+ "@emotion/react": "^11.5.0",
+ "@emotion/styled": "^11.3.0",
+ "@mui/icons-material": "^5.1.0",
+ "@mui/material": "^5.1.0",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
+ "@types/jest": "^27.0.2",
+ "@types/node": "^16.11.7",
+ "@types/react-dom": "^17.0.11",
+ "@types/uuid": "^8.3.4",
+ "clsx": "^1.1.1",
+ "dc-extensions-sdk": "^2.0.0",
+ "dc-visualization-sdk": "^1.1.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
+ "typescript": "^4.4.4",
+ "uuid": "^8.3.2",
"web-vitals": "^1.0.1"
},
"scripts": {
@@ -34,5 +47,8 @@
"last 1 firefox version",
"last 1 safari version"
]
+ },
+ "devDependencies": {
+ "@types/react": "^17.0.34"
}
}
diff --git a/shoppable-image-partial.json b/shoppable-image-partial.json
new file mode 100644
index 0000000..5696a0c
--- /dev/null
+++ b/shoppable-image-partial.json
@@ -0,0 +1,115 @@
+{
+ "shoppableImage": {
+ "type": "object",
+ "properties": {
+ "image": {
+ "title": "Image",
+ "description": "The base image that the shoppable image elements are for.",
+ "allOf": [
+ { "$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/image-link" }
+ ]
+ },
+ "poi": {
+ "title": "Focal Point",
+ "description": "The focal point defined on the image. Coordinates are normalized 0-1 based on image size.",
+ "type": "object",
+ "properties": {
+ "x": {
+ "type": "number"
+ },
+ "y": {
+ "type": "number"
+ },
+ "w": {
+ "type": "number"
+ },
+ "h": {
+ "type": "number"
+ }
+ }
+ },
+ "hotspots": {
+ "title": "Hotspots",
+ "description": "Interactable hotspots defined on the image. Coordinates are normalized 0-1 based on image size.",
+ "type": "array",
+ "items": {
+ "type": "object",
+ "properties": {
+ "points": {
+ "title": "Point",
+ "description": "The location of this hotspot on the image.",
+ "type": "object",
+ "properties": {
+ "x": {
+ "type": "number"
+ },
+ "y": {
+ "type": "number"
+ }
+ }
+ },
+ "id": {
+ "title": "ID",
+ "description": "Unique idendifier for this hotspot.",
+ "type": "string"
+ },
+ "selector": {
+ "title": "Selector",
+ "description": "The selector associated with this hotspot.",
+ "type": "string"
+ },
+ "target": {
+ "title": "Target",
+ "description": "The target associated with this hotspot.",
+ "type": "string"
+ }
+ }
+ }
+ },
+ "polygons": {
+ "title": "Polygons",
+ "description": "Interactable polygonal regions defined on the image. Coordinates are normalized 0-1 based on image size.",
+ "type": "array",
+ "items": {
+ "type": "object",
+ "properties": {
+ "points": {
+ "title": "Polygon Points",
+ "description": "The points that define this polygon. The polygon edge is drawn between all points in order, and closed at the end by drawing an edge from the last to the first point.",
+ "type": "array",
+ "items": {
+ "type": "object",
+ "properties": {
+ "x": {
+ "type": "number"
+ },
+ "y": {
+ "type": "number"
+ }
+ }
+ }
+ },
+ "id": {
+ "title": "ID",
+ "description": "Unique idendifier for this polygon.",
+ "type": "string"
+ },
+ "selector": {
+ "title": "Selector",
+ "description": "The selector associated with this polygon.",
+ "type": "string"
+ },
+ "target": {
+ "title": "Target",
+ "description": "The target associated with this polygon.",
+ "type": "string"
+ }
+ }
+ }
+ }
+ },
+ "ui:extension": {
+ "name": "shoppable-image"
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/App.css b/src/App.css
index 74b5e05..b3456d4 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,38 +1,8 @@
-.App {
- text-align: center;
+.amp-app {
+ overflow: hidden;
+ min-height: 500px;
}
-.App-logo {
- height: 40vmin;
- pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
- .App-logo {
- animation: App-logo-spin infinite 20s linear;
- }
-}
-
-.App-header {
- background-color: #282c34;
- min-height: 100vh;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-size: calc(10px + 2vmin);
- color: white;
-}
-
-.App-link {
- color: #61dafb;
-}
-
-@keyframes App-logo-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
+.amp-app-clip {
+ overflow: hidden;
}
diff --git a/src/App.js b/src/App.js
deleted file mode 100644
index 3784575..0000000
--- a/src/App.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
- return (
-