@pie-element/hotspot 6.5.2-next.2 → 6.5.2

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.5.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@6.5.1...@pie-element/hotspot@6.5.2) (2024-01-30)
+
+
+### Bug Fixes
+
+* circle not resizing properly from the top PD-1446 ([7cc20a4](https://github.com/pie-framework/pie-elements/commit/7cc20a4c3eab6b49e38f106c1c86538596273d9f))
+* circle not resizing properly from the top PD-1446 ([bb3b1a6](https://github.com/pie-framework/pie-elements/commit/bb3b1a69314876586c7809edfa3a05610fae5949))
+
+
+
+
+
 ## [6.5.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@6.5.0...@pie-element/hotspot@6.5.1) (2024-01-24)
 
 

package/configure/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.5.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@6.5.1...@pie-element/hotspot-configure@6.5.2) (2024-01-30)
+
+
+### Bug Fixes
+
+* circle not resizing properly from the top PD-1446 ([7cc20a4](https://github.com/pie-framework/pie-elements/commit/7cc20a4c3eab6b49e38f106c1c86538596273d9f))
+* circle not resizing properly from the top PD-1446 ([bb3b1a6](https://github.com/pie-framework/pie-elements/commit/bb3b1a69314876586c7809edfa3a05610fae5949))
+
+
+
+
+
 ## [6.5.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@6.5.0...@pie-element/hotspot-configure@6.5.1) (2024-01-24)
 
 

package/configure/lib/hotspot-circle.js

@@ -96,7 +96,8 @@ var CircleComponent = /*#__PURE__*/function (_React$Component) {
           onDragEnd = _this$props3.onDragEnd,
           id = _this$props3.id;
       var node = _this.shapeRef.current;
-      var newRadius = Math.max(node.radius() * node.scaleX(), 5);
+      var scale = node.scaleX() !== 1 ? node.scaleX() : node.scaleY();
+      var newRadius = Math.max(node.radius() * scale, 5);
 
       _this.setState({
         isDragging: false
@@ -178,6 +179,7 @@ var CircleComponent = /*#__PURE__*/function (_React$Component) {
         ref: this.trRef,
         rotateEnabled: false,
         keepRatio: true,
+        enabledAnchors: ['middle-left', 'middle-right', 'top-center', 'bottom-center'],
         boundBoxFunc: function boundBoxFunc(oldBox, newBox) {
           // Constraint to prevent resizing too small
           if (newBox.width < 10 || newBox.height < 10) {

package/configure/lib/hotspot-circle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hotspot-circle.jsx"],"names":["CircleComponent","props","e","radius","isDrawing","onClick","id","cancelBubble","document","body","style","cursor","setState","hovered","trRef","current","setNode","shapeRef","getLayer","batchDraw","onDragEnd","isDragging","x","target","y","node","newRadius","Math","max","scaleX","scaleY","onDeleteShape","state","React","createRef","classes","correct","hotspotColor","outlineColor","strokeWidth","group","handleMouseLeave","handleMouseEnter","base","handleClick","handleOnDragEnd","onResizeEnd","handleDelete","oldBox","newBox","width","height","Component","styles","opacity","padding","propTypes","PropTypes","object","isRequired","bool","string","number","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Circle, Group, Transformer } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\nimport DeleteWidget from './DeleteWidget';\n\nclass CircleComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      hovered: false,\n      isDragging: false,\n    };\n    this.shapeRef = React.createRef();\n    this.trRef = React.createRef();\n  }\n\n  handleClick = (e) => {\n    const { radius, isDrawing, onClick, id } = this.props;\n    if (radius <= 0 && isDrawing) {\n      return;\n    }\n    e.cancelBubble = true;\n    onClick(id);\n  };\n\n  handleMouseEnter = () => {\n    document.body.style.cursor = 'pointer';\n    this.setState({ hovered: true });\n    this.trRef.current.setNode(this.shapeRef.current);\n    this.trRef.current.getLayer().batchDraw();\n  };\n\n  handleMouseLeave = () => {\n    this.setState({ hovered: false });\n    document.body.style.cursor = 'default';\n  };\n\n  handleOnDragEnd = (e) => {\n    const { onDragEnd, id } = this.props;\n    this.setState({ isDragging: false });\n    onDragEnd(id, {\n      x: e.target.x(),\n      y: e.target.y(),\n    });\n  };\n\n  onResizeEnd = () => {\n    const { onDragEnd, id } = this.props;\n    const node = this.shapeRef.current;\n\n    const newRadius = Math.max(node.radius() * node.scaleX(), 5);\n\n    this.setState({ isDragging: false });\n    onDragEnd(id, {\n      x: node.x(),\n      y: node.y(),\n      radius: newRadius,\n    });\n\n    node.scaleX(1);\n    node.scaleY(1);\n  };\n\n  handleDelete = (id) => {\n    const { onDeleteShape } = this.props;\n    onDeleteShape(id);\n  };\n\n  render() {\n    const { classes, correct, radius, hotspotColor, id, outlineColor, x, y, strokeWidth = 5 } = this.props;\n\n    return (\n      <Group classes={classes.group} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>\n        <Circle\n          classes={classes.base}\n          ref={this.shapeRef}\n          radius={radius}\n          fill={hotspotColor}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable\n          stroke={outlineColor}\n          strokeWidth={correct ? strokeWidth : 0}\n          onDragStart={() => this.setState({ isDragging: true })}\n          onDragEnd={this.handleOnDragEnd}\n          onTransformStart={() => this.setState({ isDragging: true })}\n          onTransformEnd={this.onResizeEnd}\n          x={x}\n          y={y}\n        />\n        {!this.state.isDragging && this.state.hovered && (\n          <DeleteWidget id={id} radius={radius} x={x} y={y} handleWidgetClick={this.handleDelete} isCircle={true} />\n        )}\n        {this.state.hovered && (\n          <Transformer\n            ref={this.trRef}\n            rotateEnabled={false}\n            keepRatio={true}\n            boundBoxFunc={(oldBox, newBox) => {\n              // Constraint to prevent resizing too small\n              if (newBox.width < 10 || newBox.height < 10) {\n                return oldBox;\n              }\n              return newBox;\n            }}\n          />\n        )}\n      </Group>\n    );\n  }\n}\n\nconst styles = () => ({\n  base: {\n    cursor: 'pointer',\n    opacity: 0.5,\n  },\n\n  group: {\n    padding: '12px',\n  },\n});\n\nCircleComponent.propTypes = {\n  classes: PropTypes.object.isRequired,\n  correct: PropTypes.bool,\n  isDrawing: PropTypes.bool.isRequired,\n  id: PropTypes.string.isRequired,\n  radius: PropTypes.number.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  onClick: PropTypes.func.isRequired,\n  onDeleteShape: PropTypes.func.isRequired,\n  onDragEnd: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  x: PropTypes.number.isRequired,\n  y: PropTypes.number.isRequired,\n  strokeWidth: PropTypes.number,\n};\n\nCircleComponent.defaultProps = {\n  correct: false,\n};\n\nexport default withStyles(styles)(CircleComponent);\n"],"file":"hotspot-circle.js"}
+{"version":3,"sources":["../src/hotspot-circle.jsx"],"names":["CircleComponent","props","e","radius","isDrawing","onClick","id","cancelBubble","document","body","style","cursor","setState","hovered","trRef","current","setNode","shapeRef","getLayer","batchDraw","onDragEnd","isDragging","x","target","y","node","scale","scaleX","scaleY","newRadius","Math","max","onDeleteShape","state","React","createRef","classes","correct","hotspotColor","outlineColor","strokeWidth","group","handleMouseLeave","handleMouseEnter","base","handleClick","handleOnDragEnd","onResizeEnd","handleDelete","oldBox","newBox","width","height","Component","styles","opacity","padding","propTypes","PropTypes","object","isRequired","bool","string","number","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Circle, Group, Transformer } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\nimport DeleteWidget from './DeleteWidget';\n\nclass CircleComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      hovered: false,\n      isDragging: false,\n    };\n    this.shapeRef = React.createRef();\n    this.trRef = React.createRef();\n  }\n\n  handleClick = (e) => {\n    const { radius, isDrawing, onClick, id } = this.props;\n    if (radius <= 0 && isDrawing) {\n      return;\n    }\n    e.cancelBubble = true;\n    onClick(id);\n  };\n\n  handleMouseEnter = () => {\n    document.body.style.cursor = 'pointer';\n    this.setState({ hovered: true });\n    this.trRef.current.setNode(this.shapeRef.current);\n    this.trRef.current.getLayer().batchDraw();\n  };\n\n  handleMouseLeave = () => {\n    this.setState({ hovered: false });\n    document.body.style.cursor = 'default';\n  };\n\n  handleOnDragEnd = (e) => {\n    const { onDragEnd, id } = this.props;\n    this.setState({ isDragging: false });\n    onDragEnd(id, {\n      x: e.target.x(),\n      y: e.target.y(),\n    });\n  };\n\n  onResizeEnd = () => {\n    const { onDragEnd, id } = this.props;\n    const node = this.shapeRef.current;\n\n    const scale = node.scaleX() !== 1 ? node.scaleX() : node.scaleY();\n    const newRadius = Math.max(node.radius() * scale, 5);\n\n    this.setState({ isDragging: false });\n    onDragEnd(id, {\n      x: node.x(),\n      y: node.y(),\n      radius: newRadius,\n    });\n\n    node.scaleX(1);\n    node.scaleY(1);\n  };\n\n  handleDelete = (id) => {\n    const { onDeleteShape } = this.props;\n    onDeleteShape(id);\n  };\n\n  render() {\n    const { classes, correct, radius, hotspotColor, id, outlineColor, x, y, strokeWidth = 5 } = this.props;\n\n    return (\n      <Group classes={classes.group} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>\n        <Circle\n          classes={classes.base}\n          ref={this.shapeRef}\n          radius={radius}\n          fill={hotspotColor}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable\n          stroke={outlineColor}\n          strokeWidth={correct ? strokeWidth : 0}\n          onDragStart={() => this.setState({ isDragging: true })}\n          onDragEnd={this.handleOnDragEnd}\n          onTransformStart={() => this.setState({ isDragging: true })}\n          onTransformEnd={this.onResizeEnd}\n          x={x}\n          y={y}\n        />\n        {!this.state.isDragging && this.state.hovered && (\n          <DeleteWidget id={id} radius={radius} x={x} y={y} handleWidgetClick={this.handleDelete} isCircle={true} />\n        )}\n        {this.state.hovered && (\n          <Transformer\n            ref={this.trRef}\n            rotateEnabled={false}\n            keepRatio={true}\n            enabledAnchors={['middle-left', 'middle-right', 'top-center', 'bottom-center']}\n            boundBoxFunc={(oldBox, newBox) => {\n              // Constraint to prevent resizing too small\n              if (newBox.width < 10 || newBox.height < 10) {\n                return oldBox;\n              }\n              return newBox;\n            }}\n          />\n        )}\n      </Group>\n    );\n  }\n}\n\nconst styles = () => ({\n  base: {\n    cursor: 'pointer',\n    opacity: 0.5,\n  },\n\n  group: {\n    padding: '12px',\n  },\n});\n\nCircleComponent.propTypes = {\n  classes: PropTypes.object.isRequired,\n  correct: PropTypes.bool,\n  isDrawing: PropTypes.bool.isRequired,\n  id: PropTypes.string.isRequired,\n  radius: PropTypes.number.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  onClick: PropTypes.func.isRequired,\n  onDeleteShape: PropTypes.func.isRequired,\n  onDragEnd: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  x: PropTypes.number.isRequired,\n  y: PropTypes.number.isRequired,\n  strokeWidth: PropTypes.number,\n};\n\nCircleComponent.defaultProps = {\n  correct: false,\n};\n\nexport default withStyles(styles)(CircleComponent);\n"],"file":"hotspot-circle.js"}

package/configure/lib/hotspot-container.js

@@ -272,6 +272,15 @@ var Container = /*#__PURE__*/function (_Component) {
         className: classes.buttonShape
       }, /*#__PURE__*/_react["default"].createElement(_polygon.PolygonButton, {
         isActive: selectedShape === 'polygon'
+      })), /*#__PURE__*/_react["default"].createElement("div", {
+        onClick: function onClick() {
+          return _this2.setState({
+            selectedShape: selectedShape === 'circle' ? 'none' : 'circle'
+          });
+        },
+        className: classes.buttonShape
+      }, /*#__PURE__*/_react["default"].createElement(_circle.CircleButton, {
+        isActive: selectedShape === 'circle'
       })), imageUrl && /*#__PURE__*/_react["default"].createElement(_uploadControl["default"], {
         classNameButton: classes.replaceButton,
         classNameSection: classes.replaceSection,

package/configure/lib/hotspot-container.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hotspot-container.jsx"],"names":["isImage","file","imageType","type","match","Container","props","Blob","onImageUpload","insertImage","reader","FileReader","onloadend","result","readAsDataURL","fakeImageHandler","getChosenFile","isPasted","setState","dropzoneActive","e","files","clipboardData","handleFileRead","preventDefault","dataTransfer","items","kind","getAsFile","disableDropzone","state","enableDropzone","newShapes","onUpdateShapes","shapes","id","length","filter","shape","dragEnabled","selectedShape","showTooltip","cancel","done","a","url","fileChosen","progress","classes","dimensions","hasErrors","hotspotColor","imageUrl","multipleCorrect","onUpdateImageDimension","outlineColor","strokeWidth","preserveAspectRatioEnabled","base","box","boxError","boxActive","onDragExit","handleOnDragExit","onDragLeave","onDragOver","handleOnDragOver","onDrop","handleOnDrop","onPaste","handleOnPaste","toolbar","buttonShape","replaceButton","replaceSection","handleInputClick","ref","input","handleClearAll","imageSection","drawableHeight","handleDisableDrag","handleEnableDrag","handleFinishDrawing","onDeleteShape","centered","tooltip","tooltipContent","tooltipArrow","icon","toggleTooltip","nextProps","prevState","Component","styles","theme","marginRight","cursor","marginTop","spacing","unit","marginBottom","border","borderRadius","palette","error","main","alignItems","display","flexDirection","justifyContent","minHeight","paddingBottom","paddingRight","color","marginLeft","backgroundColor","borderBottom","borderTopLeftRadius","borderTopRightRadius","padding","position","textAlign","background","common","white","fontSize","typography","lineHeight","right","width","height","borderLeft","borderRight","borderTop","propTypes","PropTypes","object","isRequired","string","bool","func","rectangles","array","polygons","number","defaultProps"],"mappings":"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","sourcesContent":["import { withStyles } from '@material-ui/core/styles/index';\nimport Help from '@material-ui/icons/Help';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport Button from './button';\nimport { CircleButton } from './buttons/circle';\nimport { PolygonButton } from './buttons/polygon';\nimport { RectangleButton } from './buttons/rectangle';\n\nimport Drawable from './hotspot-drawable';\nimport UploadControl from './upload-control';\nimport { getAllShapes, groupShapes } from './utils';\n\nconst isImage = (file) => {\n  const imageType = /image.*/;\n\n  return file.type.match(imageType);\n};\n\nexport class Container extends Component {\n  static getDerivedStateFromProps(nextProps, prevState) {\n    // always transform shapes map into shapes array at this level\n    return {\n      ...prevState,\n      shapes: getAllShapes(nextProps.shapes),\n    };\n  }\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      dragEnabled: true,\n      // always transform shapes map into shapes array at this level\n      shapes: getAllShapes(props.shapes),\n      selectedShape: 'none',\n    };\n    this.fakeImageHandler = {\n      cancel: () => {},\n      done: (a, url) => this.props.onImageUpload(url),\n      fileChosen: () => {},\n      progress: () => {},\n    };\n  }\n\n  handleFileRead = (file) => {\n    if (file instanceof Blob) {\n      const { onImageUpload, insertImage } = this.props;\n      const reader = new FileReader();\n\n      reader.onloadend = () => onImageUpload(reader.result);\n      reader.readAsDataURL(file);\n\n      if (insertImage) {\n        insertImage({\n          ...this.fakeImageHandler,\n          getChosenFile: () => file,\n          isPasted: true,\n        });\n      }\n    }\n  };\n  enableDropzone = () => this.setState({ dropzoneActive: true });\n\n  disableDropzone = () => this.setState({ dropzoneActive: false });\n\n  handleOnPaste = (e) => {\n    const { files } = e.clipboardData;\n\n    if (files && isImage(files[0])) {\n      this.handleFileRead(files[0]);\n    }\n  };\n\n  handleOnDrop = (e) => {\n    e.preventDefault();\n\n    const { items, files } = e.dataTransfer;\n\n    if (items && items[0].kind === 'file') {\n      const file = items[0].getAsFile();\n\n      if (isImage(file)) {\n        this.handleFileRead(file);\n      }\n    } else if (isImage(files[0])) {\n      this.handleFileRead(files[0]);\n    }\n\n    this.disableDropzone();\n  };\n\n  handleOnDragOver = (e) => {\n    e.preventDefault();\n\n    const { dropzoneActive } = this.state;\n\n    if (!dropzoneActive) {\n      this.enableDropzone();\n    }\n  };\n\n  handleOnDragExit = (e) => {\n    e.preventDefault();\n\n    this.disableDropzone();\n  };\n\n  onUpdateShapes = (newShapes) => {\n    const { onUpdateShapes } = this.props;\n    this.setState(\n      { shapes: newShapes },\n      // always transform shapes array back into shapes map when saving changes\n      () => onUpdateShapes(groupShapes(newShapes)),\n    );\n  };\n\n  onDeleteShape = (id) => {\n    const { shapes } = this.state;\n    if (shapes && shapes.length) {\n      // filter the deleted shape out\n      let newShapes = shapes.filter((shape) => shape.id !== id);\n      this.onUpdateShapes(newShapes);\n    }\n  };\n\n  handleClearAll = () => this.onUpdateShapes([]);\n\n  handleEnableDrag = () => this.setState({ dragEnabled: true });\n\n  handleDisableDrag = () => this.setState({ dragEnabled: false });\n\n  handleInputClick = () => {\n    const { insertImage } = this.props;\n\n    if (insertImage) {\n      insertImage(this.fakeImageHandler);\n    }\n  };\n\n  handleFinishDrawing = () => {\n    // Explicitly end the current shape drawing session\n    // This would cause the finalizeCreation method to be called in the HotspotDrawable component\n    this.setState({ selectedShape: 'none' });\n  };\n  toggleTooltip = () => this.setState({ showTooltip: !this.state.showTooltip });\n\n  render() {\n    const {\n      classes,\n      dimensions,\n      hasErrors,\n      hotspotColor,\n      imageUrl,\n      multipleCorrect,\n      onUpdateImageDimension,\n      outlineColor,\n      strokeWidth,\n      preserveAspectRatioEnabled,\n    } = this.props;\n    const { dropzoneActive, dragEnabled, showTooltip } = this.state;\n    const { shapes, selectedShape } = this.state;\n\n    return (\n      <div className={classes.base}>\n        <div\n          className={classNames(classes.box, {\n            [classes.boxError]: hasErrors && !dropzoneActive,\n            [classes.boxActive]: dropzoneActive,\n          })}\n          {...(dragEnabled\n            ? {\n                onDragExit: this.handleOnDragExit,\n                onDragLeave: this.handleOnDragExit,\n                onDragOver: this.handleOnDragOver,\n                onDrop: this.handleOnDrop,\n                onPaste: this.handleOnPaste,\n              }\n            : {})}\n        >\n          <div className={classes.toolbar}>\n            <div\n              onClick={() => this.setState({ selectedShape: selectedShape === 'rectangle' ? 'none' : 'rectangle' })}\n              className={classes.buttonShape}\n            >\n              <RectangleButton isActive={selectedShape === 'rectangle'} />\n            </div>\n            <div\n              onClick={() => this.setState({ selectedShape: selectedShape === 'polygon' ? 'none' : 'polygon' })}\n              className={classes.buttonShape}\n            >\n              <PolygonButton isActive={selectedShape === 'polygon'} />\n            </div>\n            {/*<div*/}\n            {/*  onClick={() => this.setState({ selectedShape: selectedShape === 'circle' ? 'none' : 'circle' })}*/}\n            {/*  className={classes.buttonShape}*/}\n            {/*>*/}\n            {/*  <CircleButton isActive={selectedShape === 'circle'} />*/}\n            {/*</div>*/}\n\n            {imageUrl && (\n              <UploadControl\n                classNameButton={classes.replaceButton}\n                classNameSection={classes.replaceSection}\n                label=\"Replace Image\"\n                onInputClick={this.handleInputClick}\n                setRef={(ref) => {\n                  this.input = ref;\n                }}\n              />\n            )}\n            <Button disabled={!(shapes && shapes.length)} onClick={this.handleClearAll} label=\"Clear all\" />\n          </div>\n\n          <div\n            ref={(ref) => {\n              this.imageSection = ref;\n            }}\n            className={classes.drawableHeight}\n          >\n            {imageUrl ? (\n              <Drawable\n                dimensions={dimensions}\n                disableDrag={this.handleDisableDrag}\n                enableDrag={this.handleEnableDrag}\n                shapeType={this.state.selectedShape}\n                handleFinishDrawing={this.handleFinishDrawing}\n                imageUrl={imageUrl}\n                hotspotColor={hotspotColor}\n                multipleCorrect={multipleCorrect}\n                onUpdateImageDimension={onUpdateImageDimension}\n                onUpdateShapes={this.onUpdateShapes}\n                onDeleteShape={this.onDeleteShape}\n                outlineColor={outlineColor}\n                shapes={shapes}\n                strokeWidth={strokeWidth}\n                preserveAspectRatioEnabled={preserveAspectRatioEnabled}\n              />\n            ) : (\n              <div className={classNames(classes.drawableHeight, classes.centered)}>\n                <label>Drag and drop or upload image from computer</label>\n                <br />\n                <UploadControl\n                  label=\"Upload Image\"\n                  onInputClick={this.handleInputClick}\n                  setRef={(ref) => {\n                    this.input = ref;\n                  }}\n                />\n              </div>\n            )}\n          </div>\n\n          {imageUrl && (\n            <div className={classes.tooltip}>\n              {showTooltip && (\n                <div className={classes.tooltipContent}>\n                  <label>\n                    Click and drag to create a hotspot. Click the hotspot to mark correct. Click again to unmark.\n                  </label>\n                  <div className={classes.tooltipArrow} />\n                </div>\n              )}\n\n              <Help className={classes.icon} onMouseOut={this.toggleTooltip} onMouseOver={this.toggleTooltip} />\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  buttonShape: {\n    marginRight: '5px',\n    '&:hover': {\n      cursor: 'pointer',\n    },\n  },\n  base: {\n    marginTop: theme.spacing.unit * 1.5,\n    marginBottom: theme.spacing.unit * 2.5,\n  },\n  box: {\n    border: '1px solid #E0E1E6',\n    borderRadius: '5px',\n  },\n  boxActive: {\n    border: '1px solid #0032C2',\n  },\n  boxError: {\n    border: `1px solid ${theme.palette.error.main}`,\n  },\n  centered: {\n    alignItems: 'center',\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'center',\n  },\n  drawableHeight: {\n    minHeight: 350,\n    paddingBottom: theme.spacing.unit * 5,\n    paddingRight: theme.spacing.unit * 5,\n  },\n  icon: {\n    '&:hover': {\n      color: '#333131',\n      cursor: 'help',\n    },\n    color: '#C1C1C1',\n  },\n  replaceButton: {\n    marginLeft: 0,\n  },\n  replaceSection: {\n    marginRight: 'auto',\n  },\n  toolbar: {\n    backgroundColor: '#FFF',\n    borderBottom: '1px solid #E0E1E6',\n    borderTopLeftRadius: '5px',\n    borderTopRightRadius: '5px',\n    display: 'flex',\n    justifyContent: 'flex-end',\n    padding: theme.spacing.unit,\n  },\n  tooltip: {\n    position: 'relative',\n    textAlign: 'right',\n    padding: theme.spacing.unit,\n  },\n  tooltipContent: {\n    background: '#333131',\n    borderRadius: '4px',\n    color: theme.palette.common.white,\n    fontSize: theme.typography.fontSize,\n    lineHeight: '18px',\n    marginTop: '-60px',\n    padding: theme.spacing.unit,\n    position: 'absolute',\n    right: '5px',\n    textAlign: 'left',\n    width: '300px',\n  },\n  tooltipArrow: {\n    width: 0,\n    height: 0,\n    borderLeft: '10px solid transparent',\n    borderRight: '10px solid transparent',\n    borderTop: '10px solid #333131',\n    marginBottom: -10,\n    marginTop: '4px',\n    position: 'absolute',\n    right: '5px',\n  },\n});\n\nContainer.propTypes = {\n  classes: PropTypes.object.isRequired,\n  dimensions: PropTypes.object.isRequired,\n  imageUrl: PropTypes.string.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  multipleCorrect: PropTypes.bool.isRequired,\n  onImageUpload: PropTypes.func.isRequired,\n  onUpdateImageDimension: PropTypes.func.isRequired,\n  insertImage: PropTypes.func,\n  onUpdateShapes: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  shapes: PropTypes.shape({\n    rectangles: PropTypes.array,\n    polygons: PropTypes.array,\n  }).isRequired,\n  strokeWidth: PropTypes.number,\n  preserveAspectRatioEnabled: PropTypes.bool,\n  hasErrors: PropTypes.bool,\n};\n\nContainer.defaultProps = {\n  strokeWidth: 5,\n};\n\nexport default withStyles(styles)(Container);\n"],"file":"hotspot-container.js"}
+{"version":3,"sources":["../src/hotspot-container.jsx"],"names":["isImage","file","imageType","type","match","Container","props","Blob","onImageUpload","insertImage","reader","FileReader","onloadend","result","readAsDataURL","fakeImageHandler","getChosenFile","isPasted","setState","dropzoneActive","e","files","clipboardData","handleFileRead","preventDefault","dataTransfer","items","kind","getAsFile","disableDropzone","state","enableDropzone","newShapes","onUpdateShapes","shapes","id","length","filter","shape","dragEnabled","selectedShape","showTooltip","cancel","done","a","url","fileChosen","progress","classes","dimensions","hasErrors","hotspotColor","imageUrl","multipleCorrect","onUpdateImageDimension","outlineColor","strokeWidth","preserveAspectRatioEnabled","base","box","boxError","boxActive","onDragExit","handleOnDragExit","onDragLeave","onDragOver","handleOnDragOver","onDrop","handleOnDrop","onPaste","handleOnPaste","toolbar","buttonShape","replaceButton","replaceSection","handleInputClick","ref","input","handleClearAll","imageSection","drawableHeight","handleDisableDrag","handleEnableDrag","handleFinishDrawing","onDeleteShape","centered","tooltip","tooltipContent","tooltipArrow","icon","toggleTooltip","nextProps","prevState","Component","styles","theme","marginRight","cursor","marginTop","spacing","unit","marginBottom","border","borderRadius","palette","error","main","alignItems","display","flexDirection","justifyContent","minHeight","paddingBottom","paddingRight","color","marginLeft","backgroundColor","borderBottom","borderTopLeftRadius","borderTopRightRadius","padding","position","textAlign","background","common","white","fontSize","typography","lineHeight","right","width","height","borderLeft","borderRight","borderTop","propTypes","PropTypes","object","isRequired","string","bool","func","rectangles","array","polygons","number","defaultProps"],"mappings":"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","sourcesContent":["import { withStyles } from '@material-ui/core/styles/index';\nimport Help from '@material-ui/icons/Help';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport Button from './button';\nimport { CircleButton } from './buttons/circle';\nimport { PolygonButton } from './buttons/polygon';\nimport { RectangleButton } from './buttons/rectangle';\n\nimport Drawable from './hotspot-drawable';\nimport UploadControl from './upload-control';\nimport { getAllShapes, groupShapes } from './utils';\n\nconst isImage = (file) => {\n  const imageType = /image.*/;\n\n  return file.type.match(imageType);\n};\n\nexport class Container extends Component {\n  static getDerivedStateFromProps(nextProps, prevState) {\n    // always transform shapes map into shapes array at this level\n    return {\n      ...prevState,\n      shapes: getAllShapes(nextProps.shapes),\n    };\n  }\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      dragEnabled: true,\n      // always transform shapes map into shapes array at this level\n      shapes: getAllShapes(props.shapes),\n      selectedShape: 'none',\n    };\n    this.fakeImageHandler = {\n      cancel: () => {},\n      done: (a, url) => this.props.onImageUpload(url),\n      fileChosen: () => {},\n      progress: () => {},\n    };\n  }\n\n  handleFileRead = (file) => {\n    if (file instanceof Blob) {\n      const { onImageUpload, insertImage } = this.props;\n      const reader = new FileReader();\n\n      reader.onloadend = () => onImageUpload(reader.result);\n      reader.readAsDataURL(file);\n\n      if (insertImage) {\n        insertImage({\n          ...this.fakeImageHandler,\n          getChosenFile: () => file,\n          isPasted: true,\n        });\n      }\n    }\n  };\n  enableDropzone = () => this.setState({ dropzoneActive: true });\n\n  disableDropzone = () => this.setState({ dropzoneActive: false });\n\n  handleOnPaste = (e) => {\n    const { files } = e.clipboardData;\n\n    if (files && isImage(files[0])) {\n      this.handleFileRead(files[0]);\n    }\n  };\n\n  handleOnDrop = (e) => {\n    e.preventDefault();\n\n    const { items, files } = e.dataTransfer;\n\n    if (items && items[0].kind === 'file') {\n      const file = items[0].getAsFile();\n\n      if (isImage(file)) {\n        this.handleFileRead(file);\n      }\n    } else if (isImage(files[0])) {\n      this.handleFileRead(files[0]);\n    }\n\n    this.disableDropzone();\n  };\n\n  handleOnDragOver = (e) => {\n    e.preventDefault();\n\n    const { dropzoneActive } = this.state;\n\n    if (!dropzoneActive) {\n      this.enableDropzone();\n    }\n  };\n\n  handleOnDragExit = (e) => {\n    e.preventDefault();\n\n    this.disableDropzone();\n  };\n\n  onUpdateShapes = (newShapes) => {\n    const { onUpdateShapes } = this.props;\n    this.setState(\n      { shapes: newShapes },\n      // always transform shapes array back into shapes map when saving changes\n      () => onUpdateShapes(groupShapes(newShapes)),\n    );\n  };\n\n  onDeleteShape = (id) => {\n    const { shapes } = this.state;\n    if (shapes && shapes.length) {\n      // filter the deleted shape out\n      let newShapes = shapes.filter((shape) => shape.id !== id);\n      this.onUpdateShapes(newShapes);\n    }\n  };\n\n  handleClearAll = () => this.onUpdateShapes([]);\n\n  handleEnableDrag = () => this.setState({ dragEnabled: true });\n\n  handleDisableDrag = () => this.setState({ dragEnabled: false });\n\n  handleInputClick = () => {\n    const { insertImage } = this.props;\n\n    if (insertImage) {\n      insertImage(this.fakeImageHandler);\n    }\n  };\n\n  handleFinishDrawing = () => {\n    // Explicitly end the current shape drawing session\n    // This would cause the finalizeCreation method to be called in the HotspotDrawable component\n    this.setState({ selectedShape: 'none' });\n  };\n  toggleTooltip = () => this.setState({ showTooltip: !this.state.showTooltip });\n\n  render() {\n    const {\n      classes,\n      dimensions,\n      hasErrors,\n      hotspotColor,\n      imageUrl,\n      multipleCorrect,\n      onUpdateImageDimension,\n      outlineColor,\n      strokeWidth,\n      preserveAspectRatioEnabled,\n    } = this.props;\n    const { dropzoneActive, dragEnabled, showTooltip } = this.state;\n    const { shapes, selectedShape } = this.state;\n\n    return (\n      <div className={classes.base}>\n        <div\n          className={classNames(classes.box, {\n            [classes.boxError]: hasErrors && !dropzoneActive,\n            [classes.boxActive]: dropzoneActive,\n          })}\n          {...(dragEnabled\n            ? {\n                onDragExit: this.handleOnDragExit,\n                onDragLeave: this.handleOnDragExit,\n                onDragOver: this.handleOnDragOver,\n                onDrop: this.handleOnDrop,\n                onPaste: this.handleOnPaste,\n              }\n            : {})}\n        >\n          <div className={classes.toolbar}>\n            <div\n              onClick={() => this.setState({ selectedShape: selectedShape === 'rectangle' ? 'none' : 'rectangle' })}\n              className={classes.buttonShape}\n            >\n              <RectangleButton isActive={selectedShape === 'rectangle'} />\n            </div>\n            <div\n              onClick={() => this.setState({ selectedShape: selectedShape === 'polygon' ? 'none' : 'polygon' })}\n              className={classes.buttonShape}\n            >\n              <PolygonButton isActive={selectedShape === 'polygon'} />\n            </div>\n            <div\n              onClick={() => this.setState({ selectedShape: selectedShape === 'circle' ? 'none' : 'circle' })}\n              className={classes.buttonShape}\n            >\n              <CircleButton isActive={selectedShape === 'circle'} />\n            </div>\n\n            {imageUrl && (\n              <UploadControl\n                classNameButton={classes.replaceButton}\n                classNameSection={classes.replaceSection}\n                label=\"Replace Image\"\n                onInputClick={this.handleInputClick}\n                setRef={(ref) => {\n                  this.input = ref;\n                }}\n              />\n            )}\n            <Button disabled={!(shapes && shapes.length)} onClick={this.handleClearAll} label=\"Clear all\" />\n          </div>\n\n          <div\n            ref={(ref) => {\n              this.imageSection = ref;\n            }}\n            className={classes.drawableHeight}\n          >\n            {imageUrl ? (\n              <Drawable\n                dimensions={dimensions}\n                disableDrag={this.handleDisableDrag}\n                enableDrag={this.handleEnableDrag}\n                shapeType={this.state.selectedShape}\n                handleFinishDrawing={this.handleFinishDrawing}\n                imageUrl={imageUrl}\n                hotspotColor={hotspotColor}\n                multipleCorrect={multipleCorrect}\n                onUpdateImageDimension={onUpdateImageDimension}\n                onUpdateShapes={this.onUpdateShapes}\n                onDeleteShape={this.onDeleteShape}\n                outlineColor={outlineColor}\n                shapes={shapes}\n                strokeWidth={strokeWidth}\n                preserveAspectRatioEnabled={preserveAspectRatioEnabled}\n              />\n            ) : (\n              <div className={classNames(classes.drawableHeight, classes.centered)}>\n                <label>Drag and drop or upload image from computer</label>\n                <br />\n                <UploadControl\n                  label=\"Upload Image\"\n                  onInputClick={this.handleInputClick}\n                  setRef={(ref) => {\n                    this.input = ref;\n                  }}\n                />\n              </div>\n            )}\n          </div>\n\n          {imageUrl && (\n            <div className={classes.tooltip}>\n              {showTooltip && (\n                <div className={classes.tooltipContent}>\n                  <label>\n                    Click and drag to create a hotspot. Click the hotspot to mark correct. Click again to unmark.\n                  </label>\n                  <div className={classes.tooltipArrow} />\n                </div>\n              )}\n\n              <Help className={classes.icon} onMouseOut={this.toggleTooltip} onMouseOver={this.toggleTooltip} />\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  buttonShape: {\n    marginRight: '5px',\n    '&:hover': {\n      cursor: 'pointer',\n    },\n  },\n  base: {\n    marginTop: theme.spacing.unit * 1.5,\n    marginBottom: theme.spacing.unit * 2.5,\n  },\n  box: {\n    border: '1px solid #E0E1E6',\n    borderRadius: '5px',\n  },\n  boxActive: {\n    border: '1px solid #0032C2',\n  },\n  boxError: {\n    border: `1px solid ${theme.palette.error.main}`,\n  },\n  centered: {\n    alignItems: 'center',\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'center',\n  },\n  drawableHeight: {\n    minHeight: 350,\n    paddingBottom: theme.spacing.unit * 5,\n    paddingRight: theme.spacing.unit * 5,\n  },\n  icon: {\n    '&:hover': {\n      color: '#333131',\n      cursor: 'help',\n    },\n    color: '#C1C1C1',\n  },\n  replaceButton: {\n    marginLeft: 0,\n  },\n  replaceSection: {\n    marginRight: 'auto',\n  },\n  toolbar: {\n    backgroundColor: '#FFF',\n    borderBottom: '1px solid #E0E1E6',\n    borderTopLeftRadius: '5px',\n    borderTopRightRadius: '5px',\n    display: 'flex',\n    justifyContent: 'flex-end',\n    padding: theme.spacing.unit,\n  },\n  tooltip: {\n    position: 'relative',\n    textAlign: 'right',\n    padding: theme.spacing.unit,\n  },\n  tooltipContent: {\n    background: '#333131',\n    borderRadius: '4px',\n    color: theme.palette.common.white,\n    fontSize: theme.typography.fontSize,\n    lineHeight: '18px',\n    marginTop: '-60px',\n    padding: theme.spacing.unit,\n    position: 'absolute',\n    right: '5px',\n    textAlign: 'left',\n    width: '300px',\n  },\n  tooltipArrow: {\n    width: 0,\n    height: 0,\n    borderLeft: '10px solid transparent',\n    borderRight: '10px solid transparent',\n    borderTop: '10px solid #333131',\n    marginBottom: -10,\n    marginTop: '4px',\n    position: 'absolute',\n    right: '5px',\n  },\n});\n\nContainer.propTypes = {\n  classes: PropTypes.object.isRequired,\n  dimensions: PropTypes.object.isRequired,\n  imageUrl: PropTypes.string.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  multipleCorrect: PropTypes.bool.isRequired,\n  onImageUpload: PropTypes.func.isRequired,\n  onUpdateImageDimension: PropTypes.func.isRequired,\n  insertImage: PropTypes.func,\n  onUpdateShapes: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  shapes: PropTypes.shape({\n    rectangles: PropTypes.array,\n    polygons: PropTypes.array,\n  }).isRequired,\n  strokeWidth: PropTypes.number,\n  preserveAspectRatioEnabled: PropTypes.bool,\n  hasErrors: PropTypes.bool,\n};\n\nContainer.defaultProps = {\n  strokeWidth: 5,\n};\n\nexport default withStyles(styles)(Container);\n"],"file":"hotspot-container.js"}

package/configure/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/hotspot-configure",
   "private": true,
-  "version": "6.5.1",
+  "version": "6.5.2",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",

package/configure/src/__tests__/__snapshots__/hotspot-container.test.js.snap

@@ -25,6 +25,13 @@ exports[`HotspotContainer render renders 1`] = `
           isActive={false}
         />
       </div>
+      <div
+        onClick={[Function]}
+      >
+        <CircleButton
+          isActive={false}
+        />
+      </div>
       <WithStyles(UploadControl)
         label="Replace Image"
         onInputClick={[Function]}

package/configure/src/hotspot-circle.jsx

@@ -49,7 +49,8 @@ class CircleComponent extends React.Component {
     const { onDragEnd, id } = this.props;
     const node = this.shapeRef.current;
 
-    const newRadius = Math.max(node.radius() * node.scaleX(), 5);
+    const scale = node.scaleX() !== 1 ? node.scaleX() : node.scaleY();
+    const newRadius = Math.max(node.radius() * scale, 5);
 
     this.setState({ isDragging: false });
     onDragEnd(id, {
@@ -97,6 +98,7 @@ class CircleComponent extends React.Component {
             ref={this.trRef}
             rotateEnabled={false}
             keepRatio={true}
+            enabledAnchors={['middle-left', 'middle-right', 'top-center', 'bottom-center']}
             boundBoxFunc={(oldBox, newBox) => {
               // Constraint to prevent resizing too small
               if (newBox.width < 10 || newBox.height < 10) {

package/configure/src/hotspot-container.jsx

@@ -192,12 +192,12 @@ export class Container extends Component {
             >
               <PolygonButton isActive={selectedShape === 'polygon'} />
             </div>
-            {/*<div*/}
-            {/*  onClick={() => this.setState({ selectedShape: selectedShape === 'circle' ? 'none' : 'circle' })}*/}
-            {/*  className={classes.buttonShape}*/}
-            {/*>*/}
-            {/*  <CircleButton isActive={selectedShape === 'circle'} />*/}
-            {/*</div>*/}
+            <div
+              onClick={() => this.setState({ selectedShape: selectedShape === 'circle' ? 'none' : 'circle' })}
+              className={classes.buttonShape}
+            >
+              <CircleButton isActive={selectedShape === 'circle'} />
+            </div>
 
             {imageUrl && (
               <UploadControl

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/hotspot",
-  "version": "6.5.2-next.2+7521f7fde",
+  "version": "6.5.2",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
@@ -18,7 +18,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "7521f7fdef22c6f5918d299a7f323a4f54976023",
+  "gitHead": "afae00206695f5769cc601d939c48e4c20d7459b",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },