react-image-hotspots
Version:
React component for rendering images with hotspots
179 lines (178 loc) • 11.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: Object.getOwnPropertyDescriptor(all, name).get
});
}
_export(exports, {
get CustomBackground () {
return CustomBackground;
},
get Default () {
return Default;
},
get LandscapeInLandscape () {
return LandscapeInLandscape;
},
get LandscapeInPortrait () {
return LandscapeInPortrait;
},
get PortraitInLandscape () {
return PortraitInLandscape;
},
get PortraitInPortrait () {
return PortraitInPortrait;
},
get default () {
return _default;
}
});
const _react = /*#__PURE__*/ _interop_require_default(require("react"));
const _ImageHotspots = /*#__PURE__*/ _interop_require_default(require("./ImageHotspots"));
const _landscapejpg = /*#__PURE__*/ _interop_require_default(require("./landscape.jpg"));
const _portraitjpg = /*#__PURE__*/ _interop_require_default(require("./portrait.jpg"));
function _interop_require_default(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}
const hotspots = [
{
x: 10,
y: 20,
content: /*#__PURE__*/ _react.default.createElement("span", {
style: {
padding: 10
}
}, "Hotspot1")
},
{
x: 50,
y: 10,
content: /*#__PURE__*/ _react.default.createElement("span", {
style: {
padding: 10
}
}, "Hotspot2")
},
{
x: 30,
y: 40,
content: /*#__PURE__*/ _react.default.createElement("span", {
style: {
padding: 10
}
}, "Hotspot3")
},
{
x: 50,
y: 60,
content: /*#__PURE__*/ _react.default.createElement("span", {
style: {
padding: 10
}
}, "Hotspot4")
}
];
const _default = {
title: 'Image Hotspots',
component: _ImageHotspots.default
};
const Default = (args)=>{
return /*#__PURE__*/ _react.default.createElement("div", {
style: {
width: '100%',
height: '90vh'
}
}, /*#__PURE__*/ _react.default.createElement(_ImageHotspots.default, args));
};
Default.args = {
src: _landscapejpg.default,
alt: 'Sample image',
hideFullscreenControl: false,
hideZoomControls: false,
hotspots: hotspots,
hideMinimap: false
};
const LandscapeInLandscape = (args)=>{
return /*#__PURE__*/ _react.default.createElement("div", {
style: {
width: '450px',
height: '300px'
}
}, /*#__PURE__*/ _react.default.createElement(_ImageHotspots.default, args));
};
LandscapeInLandscape.args = {
src: _landscapejpg.default,
alt: 'Sample image',
hideFullscreenControl: false,
hideZoomControls: false,
hotspots: hotspots,
hideMinimap: false
};
const LandscapeInPortrait = (args)=>{
return /*#__PURE__*/ _react.default.createElement("div", {
style: {
width: '250px',
height: '300px'
}
}, /*#__PURE__*/ _react.default.createElement(_ImageHotspots.default, args));
};
LandscapeInPortrait.args = {
src: _landscapejpg.default,
alt: 'Sample image',
hideFullscreenControl: false,
hideZoomControls: false,
hotspots: hotspots,
hideMinimap: false
};
const PortraitInPortrait = (args)=>{
return /*#__PURE__*/ _react.default.createElement("div", {
style: {
width: '250px',
height: '300px'
}
}, /*#__PURE__*/ _react.default.createElement(_ImageHotspots.default, args));
};
PortraitInPortrait.args = {
src: _portraitjpg.default,
alt: 'Sample image',
hideFullscreenControl: false,
hideZoomControls: false,
hotspots: hotspots,
hideMinimap: false
};
const PortraitInLandscape = (args)=>{
return /*#__PURE__*/ _react.default.createElement("div", {
style: {
width: '450px',
height: '300px'
}
}, /*#__PURE__*/ _react.default.createElement(_ImageHotspots.default, args));
};
PortraitInLandscape.args = {
src: _portraitjpg.default,
alt: 'Sample image',
hideFullscreenControl: false,
hideZoomControls: false,
hotspots: hotspots,
hideMinimap: false
};
const CustomBackground = (args)=>{
return /*#__PURE__*/ _react.default.createElement("div", {
style: {
width: '450px',
height: '300px'
}
}, /*#__PURE__*/ _react.default.createElement(_ImageHotspots.default, args));
};
CustomBackground.args = {
src: _portraitjpg.default,
alt: 'Sample image',
background: 'lightGray'
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9JbWFnZUhvdHNwb3RzLnN0b3JpZXMuanMiXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IEltYWdlSG90c3BvdHMgZnJvbSAnLi9JbWFnZUhvdHNwb3RzJ1xuaW1wb3J0IGxhbmRzY2FwZSBmcm9tICcuL2xhbmRzY2FwZS5qcGcnXG5pbXBvcnQgcG9ydHJhaXQgZnJvbSAnLi9wb3J0cmFpdC5qcGcnXG5cbmNvbnN0IGhvdHNwb3RzID0gW1xuICB7IHg6IDEwLCB5OiAyMCwgY29udGVudDogPHNwYW4gc3R5bGU9e3sgcGFkZGluZzogMTAgfX0+SG90c3BvdDE8L3NwYW4+IH0sXG4gIHsgeDogNTAsIHk6IDEwLCBjb250ZW50OiA8c3BhbiBzdHlsZT17eyBwYWRkaW5nOiAxMCB9fT5Ib3RzcG90Mjwvc3Bhbj4gfSxcbiAgeyB4OiAzMCwgeTogNDAsIGNvbnRlbnQ6IDxzcGFuIHN0eWxlPXt7IHBhZGRpbmc6IDEwIH19PkhvdHNwb3QzPC9zcGFuPiB9LFxuICB7IHg6IDUwLCB5OiA2MCwgY29udGVudDogPHNwYW4gc3R5bGU9e3sgcGFkZGluZzogMTAgfX0+SG90c3BvdDQ8L3NwYW4+IH1cbl1cblxuZXhwb3J0IGRlZmF1bHQge1xuICB0aXRsZTogJ0ltYWdlIEhvdHNwb3RzJyxcbiAgY29tcG9uZW50OiBJbWFnZUhvdHNwb3RzXG59XG5cbmV4cG9ydCBjb25zdCBEZWZhdWx0ID0gKGFyZ3MpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8ZGl2IHN0eWxlPXt7IHdpZHRoOiAnMTAwJScsIGhlaWdodDogJzkwdmgnIH19PlxuICAgICAgPEltYWdlSG90c3BvdHMgey4uLmFyZ3N9IC8+XG4gICAgPC9kaXY+XG4gIClcbn1cbkRlZmF1bHQuYXJncyA9IHtcbiAgc3JjOiBsYW5kc2NhcGUsXG4gIGFsdDogJ1NhbXBsZSBpbWFnZScsXG4gIGhpZGVGdWxsc2NyZWVuQ29udHJvbDogZmFsc2UsXG4gIGhpZGVab29tQ29udHJvbHM6IGZhbHNlLFxuICBob3RzcG90czogaG90c3BvdHMsXG4gIGhpZGVNaW5pbWFwOiBmYWxzZVxufVxuXG5leHBvcnQgY29uc3QgTGFuZHNjYXBlSW5MYW5kc2NhcGUgPSAoYXJncykgPT4ge1xuICByZXR1cm4gKFxuICAgIDxkaXYgc3R5bGU9e3sgd2lkdGg6ICc0NTBweCcsIGhlaWdodDogJzMwMHB4JyB9fT5cbiAgICAgIDxJbWFnZUhvdHNwb3RzIHsuLi5hcmdzfSAvPlxuICAgIDwvZGl2PlxuICApXG59XG5MYW5kc2NhcGVJbkxhbmRzY2FwZS5hcmdzID0ge1xuICBzcmM6IGxhbmRzY2FwZSxcbiAgYWx0OiAnU2FtcGxlIGltYWdlJyxcbiAgaGlkZUZ1bGxzY3JlZW5Db250cm9sOiBmYWxzZSxcbiAgaGlkZVpvb21Db250cm9sczogZmFsc2UsXG4gIGhvdHNwb3RzOiBob3RzcG90cyxcbiAgaGlkZU1pbmltYXA6IGZhbHNlXG59XG5cbmV4cG9ydCBjb25zdCBMYW5kc2NhcGVJblBvcnRyYWl0ID0gKGFyZ3MpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8ZGl2IHN0eWxlPXt7IHdpZHRoOiAnMjUwcHgnLCBoZWlnaHQ6ICczMDBweCcgfX0+XG4gICAgICA8SW1hZ2VIb3RzcG90cyB7Li4uYXJnc30gLz5cbiAgICA8L2Rpdj5cbiAgKVxufVxuTGFuZHNjYXBlSW5Qb3J0cmFpdC5hcmdzID0ge1xuICBzcmM6IGxhbmRzY2FwZSxcbiAgYWx0OiAnU2FtcGxlIGltYWdlJyxcbiAgaGlkZUZ1bGxzY3JlZW5Db250cm9sOiBmYWxzZSxcbiAgaGlkZVpvb21Db250cm9sczogZmFsc2UsXG4gIGhvdHNwb3RzOiBob3RzcG90cyxcbiAgaGlkZU1pbmltYXA6IGZhbHNlXG59XG5cbmV4cG9ydCBjb25zdCBQb3J0cmFpdEluUG9ydHJhaXQgPSAoYXJncykgPT4ge1xuICByZXR1cm4gKFxuICAgIDxkaXYgc3R5bGU9e3sgd2lkdGg6ICcyNTBweCcsIGhlaWdodDogJzMwMHB4JyB9fT5cbiAgICAgIDxJbWFnZUhvdHNwb3RzIHsuLi5hcmdzfSAvPlxuICAgIDwvZGl2PlxuICApXG59XG5Qb3J0cmFpdEluUG9ydHJhaXQuYXJncyA9IHtcbiAgc3JjOiBwb3J0cmFpdCxcbiAgYWx0OiAnU2FtcGxlIGltYWdlJyxcbiAgaGlkZUZ1bGxzY3JlZW5Db250cm9sOiBmYWxzZSxcbiAgaGlkZVpvb21Db250cm9sczogZmFsc2UsXG4gIGhvdHNwb3RzOiBob3RzcG90cyxcbiAgaGlkZU1pbmltYXA6IGZhbHNlXG59XG5cbmV4cG9ydCBjb25zdCBQb3J0cmFpdEluTGFuZHNjYXBlID0gKGFyZ3MpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8ZGl2IHN0eWxlPXt7IHdpZHRoOiAnNDUwcHgnLCBoZWlnaHQ6ICczMDBweCcgfX0+XG4gICAgICA8SW1hZ2VIb3RzcG90cyB7Li4uYXJnc30gLz5cbiAgICA8L2Rpdj5cbiAgKVxufVxuUG9ydHJhaXRJbkxhbmRzY2FwZS5hcmdzID0ge1xuICBzcmM6IHBvcnRyYWl0LFxuICBhbHQ6ICdTYW1wbGUgaW1hZ2UnLFxuICBoaWRlRnVsbHNjcmVlbkNvbnRyb2w6IGZhbHNlLFxuICBoaWRlWm9vbUNvbnRyb2xzOiBmYWxzZSxcbiAgaG90c3BvdHM6IGhvdHNwb3RzLFxuICBoaWRlTWluaW1hcDogZmFsc2Vcbn1cblxuZXhwb3J0IGNvbnN0IEN1c3RvbUJhY2tncm91bmQgPSAoYXJncykgPT4ge1xuICByZXR1cm4gKFxuICAgIDxkaXYgc3R5bGU9e3sgd2lkdGg6ICc0NTBweCcsIGhlaWdodDogJzMwMHB4JyB9fT5cbiAgICAgIDxJbWFnZUhvdHNwb3RzIHsuLi5hcmdzfSAvPlxuICAgIDwvZGl2PlxuICApXG59XG5DdXN0b21CYWNrZ3JvdW5kLmFyZ3MgPSB7XG4gIHNyYzogcG9ydHJhaXQsXG4gIGFsdDogJ1NhbXBsZSBpbWFnZScsXG4gIGJhY2tncm91bmQ6ICdsaWdodEdyYXknXG59XG4iXSwibmFtZXMiOlsiQ3VzdG9tQmFja2dyb3VuZCIsIkRlZmF1bHQiLCJMYW5kc2NhcGVJbkxhbmRzY2FwZSIsIkxhbmRzY2FwZUluUG9ydHJhaXQiLCJQb3J0cmFpdEluTGFuZHNjYXBlIiwiUG9ydHJhaXRJblBvcnRyYWl0IiwiaG90c3BvdHMiLCJ4IiwieSIsImNvbnRlbnQiLCJzcGFuIiwic3R5bGUiLCJwYWRkaW5nIiwidGl0bGUiLCJjb21wb25lbnQiLCJJbWFnZUhvdHNwb3RzIiwiYXJncyIsImRpdiIsIndpZHRoIiwiaGVpZ2h0Iiwic3JjIiwibGFuZHNjYXBlIiwiYWx0IiwiaGlkZUZ1bGxzY3JlZW5Db250cm9sIiwiaGlkZVpvb21Db250cm9scyIsImhpZGVNaW5pbWFwIiwicG9ydHJhaXQiLCJiYWNrZ3JvdW5kIl0sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztRQWlHYUE7ZUFBQUE7O1FBaEZBQztlQUFBQTs7UUFnQkFDO2VBQUFBOztRQWdCQUM7ZUFBQUE7O1FBZ0NBQztlQUFBQTs7UUFoQkFDO2VBQUFBOztRQXJEYjtlQUFBOzs7OERBWmtCO3NFQUNRO3FFQUNKO29FQUNEOzs7Ozs7QUFFckIsTUFBTUMsV0FBVztJQUNmO1FBQUVDLEdBQUc7UUFBSUMsR0FBRztRQUFJQyx1QkFBUyw2QkFBQ0M7WUFBS0MsT0FBTztnQkFBRUMsU0FBUztZQUFHO1dBQUc7SUFBZ0I7SUFDdkU7UUFBRUwsR0FBRztRQUFJQyxHQUFHO1FBQUlDLHVCQUFTLDZCQUFDQztZQUFLQyxPQUFPO2dCQUFFQyxTQUFTO1lBQUc7V0FBRztJQUFnQjtJQUN2RTtRQUFFTCxHQUFHO1FBQUlDLEdBQUc7UUFBSUMsdUJBQVMsNkJBQUNDO1lBQUtDLE9BQU87Z0JBQUVDLFNBQVM7WUFBRztXQUFHO0lBQWdCO0lBQ3ZFO1FBQUVMLEdBQUc7UUFBSUMsR0FBRztRQUFJQyx1QkFBUyw2QkFBQ0M7WUFBS0MsT0FBTztnQkFBRUMsU0FBUztZQUFHO1dBQUc7SUFBZ0I7Q0FDeEU7TUFFRCxXQUFlO0lBQ2JDLE9BQU87SUFDUEMsV0FBV0Msc0JBQWE7QUFDMUI7QUFFTyxNQUFNZCxVQUFVLENBQUNlO0lBQ3RCLHFCQUNFLDZCQUFDQztRQUFJTixPQUFPO1lBQUVPLE9BQU87WUFBUUMsUUFBUTtRQUFPO3FCQUMxQyw2QkFBQ0osc0JBQWEsRUFBS0M7QUFHekI7QUFDQWYsUUFBUWUsSUFBSSxHQUFHO0lBQ2JJLEtBQUtDLHFCQUFTO0lBQ2RDLEtBQUs7SUFDTEMsdUJBQXVCO0lBQ3ZCQyxrQkFBa0I7SUFDbEJsQixVQUFVQTtJQUNWbUIsYUFBYTtBQUNmO0FBRU8sTUFBTXZCLHVCQUF1QixDQUFDYztJQUNuQyxxQkFDRSw2QkFBQ0M7UUFBSU4sT0FBTztZQUFFTyxPQUFPO1lBQVNDLFFBQVE7UUFBUTtxQkFDNUMsNkJBQUNKLHNCQUFhLEVBQUtDO0FBR3pCO0FBQ0FkLHFCQUFxQmMsSUFBSSxHQUFHO0lBQzFCSSxLQUFLQyxxQkFBUztJQUNkQyxLQUFLO0lBQ0xDLHVCQUF1QjtJQUN2QkMsa0JBQWtCO0lBQ2xCbEIsVUFBVUE7SUFDVm1CLGFBQWE7QUFDZjtBQUVPLE1BQU10QixzQkFBc0IsQ0FBQ2E7SUFDbEMscUJBQ0UsNkJBQUNDO1FBQUlOLE9BQU87WUFBRU8sT0FBTztZQUFTQyxRQUFRO1FBQVE7cUJBQzVDLDZCQUFDSixzQkFBYSxFQUFLQztBQUd6QjtBQUNBYixvQkFBb0JhLElBQUksR0FBRztJQUN6QkksS0FBS0MscUJBQVM7SUFDZEMsS0FBSztJQUNMQyx1QkFBdUI7SUFDdkJDLGtCQUFrQjtJQUNsQmxCLFVBQVVBO0lBQ1ZtQixhQUFhO0FBQ2Y7QUFFTyxNQUFNcEIscUJBQXFCLENBQUNXO0lBQ2pDLHFCQUNFLDZCQUFDQztRQUFJTixPQUFPO1lBQUVPLE9BQU87WUFBU0MsUUFBUTtRQUFRO3FCQUM1Qyw2QkFBQ0osc0JBQWEsRUFBS0M7QUFHekI7QUFDQVgsbUJBQW1CVyxJQUFJLEdBQUc7SUFDeEJJLEtBQUtNLG9CQUFRO0lBQ2JKLEtBQUs7SUFDTEMsdUJBQXVCO0lBQ3ZCQyxrQkFBa0I7SUFDbEJsQixVQUFVQTtJQUNWbUIsYUFBYTtBQUNmO0FBRU8sTUFBTXJCLHNCQUFzQixDQUFDWTtJQUNsQyxxQkFDRSw2QkFBQ0M7UUFBSU4sT0FBTztZQUFFTyxPQUFPO1lBQVNDLFFBQVE7UUFBUTtxQkFDNUMsNkJBQUNKLHNCQUFhLEVBQUtDO0FBR3pCO0FBQ0FaLG9CQUFvQlksSUFBSSxHQUFHO0lBQ3pCSSxLQUFLTSxvQkFBUTtJQUNiSixLQUFLO0lBQ0xDLHVCQUF1QjtJQUN2QkMsa0JBQWtCO0lBQ2xCbEIsVUFBVUE7SUFDVm1CLGFBQWE7QUFDZjtBQUVPLE1BQU16QixtQkFBbUIsQ0FBQ2dCO0lBQy9CLHFCQUNFLDZCQUFDQztRQUFJTixPQUFPO1lBQUVPLE9BQU87WUFBU0MsUUFBUTtRQUFRO3FCQUM1Qyw2QkFBQ0osc0JBQWEsRUFBS0M7QUFHekI7QUFDQWhCLGlCQUFpQmdCLElBQUksR0FBRztJQUN0QkksS0FBS00sb0JBQVE7SUFDYkosS0FBSztJQUNMSyxZQUFZO0FBQ2QifQ==