=== Active Contour ===
Contributors: Shra
Tags: image map, image hotspot, interactive image, media attachment, custom image areas
Version: 1.0
Requires at least: 6.0
Tested up to: 6.8
Stable tag: 1.0
Requires PHP: 7.4
Author: Korol Yuriy aka Shra
Author URI: https://shra.ru
Donate link: https://pay.cryptocloud.plus/pos/Oc9ieI6Eb5HWPptn
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

Create interactive areas on images using custom contours. Fully integrated with the media library and Gutenberg.

== Description ==

**Active Contour** lets you define interactive contour areas on media images. Each polygonal area can be associated with a title & URL, making it easy to build rich visual navigation, diagrams, and interactive image content.

### Features

- **Edit contours directly in the Media Library**
  - Add, move, and delete points visually
  - Scaled preview with zoom and background options

- **Define attributes per area**
  - Each area can include `title`, `href`, and custom data
  - Stored as JSON in image meta field

- **Import contours from external tools**
  - Paste a JSON object describing one or multiple contours
  - Compatible with AI-generated data or exported data from vector tools
  - Preview and refine the result before saving

- **Gutenberg Block Support**
  - Insert an image with interactive contours using the included block (Active Contour)
  - Live preview of the selected image and contour state

- **Shortcode Support**
  - Use `[active_contour id="123" cid="1,2"]` to embed images with specific contours
  - Works anywhere shortcodes are supported (pages, posts, widgets)

### Use cases

- Interactive maps and diagrams
- Infographics with tooltips or links
- Product showcases with click/tap areas
- Educational or documentation content

== Installation ==

1. Upload the plugin to the `/wp-content/plugins/` directory or install via the Plugin Installer.
2. Activate the plugin.
3. Open any image in the Media Library and go to the **Contours** tab.
4. Add contour points and set properties.
5. Use the provided block (Active Contour) or shortcode to insert the image.

== Keyboard Shortcuts ==

While editing points in the contour editor, you can use the following keyboard shortcuts for greater control:

- Delete — Removes the currently selected point from the contour.
- + or Numpad + — Converts the selected segment into a curved arc (or increases arc intensity).
- - or Numpad - — Decreases arc curvature or switches arc back to straight line.
- Shift (hold) — Activates zoom mode. While holding Shift, a magnifier lens appears under the cursor to help you place points more precisely.

Other behaviors:

- Click on canvas — Adds a new point in the closest location or selects an existing one if clicked near.
- Click and drag a point — Moves the selected point with the mouse.

== Frequently Asked Questions ==

= Where is contour data stored? =
As a JSON structure in the attachment meta under `_active_contours`.

= Can I style or extend how contours are rendered? =
Yes. You can use custom styles via CSS. Block is rendered inside div.active-contour-container element.

== Screenshots ==

1. Contour editor inside Media Library
2. Contour settings and preview in the Gutenberg block
3. Export tool
4. Creating contour...
5. Using arc interpolation tool
6. Filtering by tags...

== Changelog ==

= 1.0.0 =
* Initial release.