Studio Developer Manual / Version 2204
Table Of ContentsThe image map editor comes as a panel component embedding an image view. The editor allows users to create hot zones (image map areas) and to attach documents to hot zones via drag and drop. The image map editor uses a configurable struct property name to store the image map configurations to a struct property of an image map document. It also offers a configuration option for the image to display. This allows you to store image map configurations in documents that do not have an image blob property themselves.
To enable image map editing in your project, include an image map editor component in your
document's TypeScript form (Blueprint shows this in
its CMImageMapForm.ts
definition).
Config(ImageMapEditor, { imageBlobValueExpression: config.bindTo.extendBy("properties.pictures.0.properties.data"), structPropertyName: "localSettings", })
Example 9.23. Configuring an Image Map Editor
In the example above, the source document has a link list property name
pictures
of cardinality 1
. So the image
editor component is bound to the image stored at the data
property of the linked image document. The map configuration is stored at the source
document's localSettings
property.
Enabling validation
Configure the ImageMapAreasValidator in the Studio server's Spring application context to enable validation of the image map document. The validator generates an error issue if there is no image blob or if at least one of the defined image map areas does not have a valid link target. See also Section 9.21.1, “Validators” for validation in general.
@Bean @ConditionalOnProperty(name = "validator.enabled.image-map-areas-validator.cm-image-map", matchIfMissing = true) ImageMapAreasValidator cmImageMapAreasValidator(CapConnection connection) { return new ImageMapAreasValidator(type(connection, "CMImageMap"), true, "localSettings", "pictures.data"); }
Example 9.24. Configuring a validator for image maps
In the example above, the validator is configured for the document type CMImageMap
and its subtypes.
The image is stored in the blob property data
of the first document of link list property
pictures
of the image map document. The image map configuration is stored in the struct
property localSettings
.