@pie-element/hotspot 10.1.0-next.0 → 10.1.2-next.1

package/configure/lib/hotspot-circle.js

@@ -35,9 +35,12 @@ class CircleComponent extends _react.default.Component {
       this.trRef.current.getLayer().batchDraw();
     });
     (0, _defineProperty2.default)(this, "handleMouseLeave", () => {
-      this.setState({
-        hovered: false
-      });
+      // Don't hide transformer if user is actively dragging/resizing
+      if (!this.state.isDragging) {
+        this.setState({
+          hovered: false
+        });
+      }
       document.body.style.cursor = 'default';
     });
     (0, _defineProperty2.default)(this, "handleOnDragEnd", e => {

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

@@ -1 +1 @@
-{"version":3,"file":"hotspot-circle.js","names":["_react","_interopRequireDefault","require","_propTypes","_reactKonva","_DeleteWidget","CircleComponent","React","Component","constructor","props","_defineProperty2","default","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","avgScale","state","createRef","render","correct","hotspotColor","outlineColor","strokeWidth","selectedHotspotColor","hoverOutlineColor","validRadius","isNaN","createElement","Group","onMouseLeave","handleMouseLeave","onMouseEnter","handleMouseEnter","padding","Circle","ref","fill","handleClick","onTap","draggable","stroke","onDragStart","handleOnDragEnd","onTransformStart","onTransformEnd","onResizeEnd","handleWidgetClick","handleDelete","isCircle","Transformer","borderStroke","rotateEnabled","keepRatio","onTransform","enabledAnchors","boundBoxFunc","oldBox","newBox","width","height","oldCenterX","oldCenterY","newCenterX","newCenterY","offsetX","offsetY","propTypes","PropTypes","bool","isRequired","string","number","func","defaultProps","_default","exports"],"sources":["../src/hotspot-circle.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Circle, Group, Transformer } from 'react-konva';\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  onTransform = () => {\n    const node = this.shapeRef.current;\n    const avgScale = (node.scaleX() + node.scaleY()) / 2;\n    node.scaleX(avgScale);\n    node.scaleY(avgScale);\n  };\n\n  render() {\n    const {\n      correct,\n      radius,\n      hotspotColor,\n      id,\n      outlineColor,\n      x,\n      y,\n      strokeWidth = 5,\n      selectedHotspotColor,\n      hoverOutlineColor,\n    } = this.props;\n\n    const { hovered, isDragging } = this.state;\n    // Ensure radius is valid\n    const validRadius = isNaN(radius) || radius <= 0 ? 5 : radius;\n\n    return (\n      <Group onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter} padding={12}>\n        <Circle\n          ref={this.shapeRef}\n          radius={validRadius}\n          fill={correct && selectedHotspotColor ? selectedHotspotColor : 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          cursor=\"pointer\"\n        />\n\n        {!isDragging && hovered && (\n          <DeleteWidget\n            id={id}\n            radius={validRadius}\n            x={x}\n            y={y}\n            handleWidgetClick={this.handleDelete}\n            isCircle={true}\n          />\n        )}\n        {this.state.hovered && (\n          <Transformer\n            borderStroke={hoverOutlineColor || null}\n            ref={this.trRef}\n            rotateEnabled={false}\n            keepRatio={true}\n            onTransform={this.onTransform}\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\n              const oldCenterX = oldBox.x + oldBox.width / 2;\n              const oldCenterY = oldBox.y + oldBox.height / 2;\n              const newCenterX = newBox.x + newBox.width / 2;\n              const newCenterY = newBox.y + newBox.height / 2;\n\n              const offsetX = oldCenterX - newCenterX;\n              const offsetY = oldCenterY - newCenterY;\n\n              newBox.x += offsetX;\n              newBox.y += offsetY;\n\n              return newBox;\n            }}\n          />\n        )}\n      </Group>\n    );\n  }\n}\n\nCircleComponent.propTypes = {\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  selectedHotspotColor: PropTypes.string,\n  hoverOutlineColor: PropTypes.string,\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 CircleComponent;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"hotspot-circle.js","names":["_react","_interopRequireDefault","require","_propTypes","_reactKonva","_DeleteWidget","CircleComponent","React","Component","constructor","props","_defineProperty2","default","e","radius","isDrawing","onClick","id","cancelBubble","document","body","style","cursor","setState","hovered","trRef","current","setNode","shapeRef","getLayer","batchDraw","state","isDragging","onDragEnd","x","target","y","node","scale","scaleX","scaleY","newRadius","Math","max","onDeleteShape","avgScale","createRef","render","correct","hotspotColor","outlineColor","strokeWidth","selectedHotspotColor","hoverOutlineColor","validRadius","isNaN","createElement","Group","onMouseLeave","handleMouseLeave","onMouseEnter","handleMouseEnter","padding","Circle","ref","fill","handleClick","onTap","draggable","stroke","onDragStart","handleOnDragEnd","onTransformStart","onTransformEnd","onResizeEnd","handleWidgetClick","handleDelete","isCircle","Transformer","borderStroke","rotateEnabled","keepRatio","onTransform","enabledAnchors","boundBoxFunc","oldBox","newBox","width","height","oldCenterX","oldCenterY","newCenterX","newCenterY","offsetX","offsetY","propTypes","PropTypes","bool","isRequired","string","number","func","defaultProps","_default","exports"],"sources":["../src/hotspot-circle.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Circle, Group, Transformer } from 'react-konva';\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    // Don't hide transformer if user is actively dragging/resizing\n    if (!this.state.isDragging) {\n      this.setState({ hovered: false });\n    }\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  onTransform = () => {\n    const node = this.shapeRef.current;\n    const avgScale = (node.scaleX() + node.scaleY()) / 2;\n    node.scaleX(avgScale);\n    node.scaleY(avgScale);\n  };\n\n  render() {\n    const {\n      correct,\n      radius,\n      hotspotColor,\n      id,\n      outlineColor,\n      x,\n      y,\n      strokeWidth = 5,\n      selectedHotspotColor,\n      hoverOutlineColor,\n    } = this.props;\n\n    const { hovered, isDragging } = this.state;\n    // Ensure radius is valid\n    const validRadius = isNaN(radius) || radius <= 0 ? 5 : radius;\n\n    return (\n      <Group onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter} padding={12}>\n        <Circle\n          ref={this.shapeRef}\n          radius={validRadius}\n          fill={correct && selectedHotspotColor ? selectedHotspotColor : 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          cursor=\"pointer\"\n        />\n\n        {!isDragging && hovered && (\n          <DeleteWidget\n            id={id}\n            radius={validRadius}\n            x={x}\n            y={y}\n            handleWidgetClick={this.handleDelete}\n            isCircle={true}\n          />\n        )}\n        {this.state.hovered && (\n          <Transformer\n            borderStroke={hoverOutlineColor || null}\n            ref={this.trRef}\n            rotateEnabled={false}\n            keepRatio={true}\n            onTransform={this.onTransform}\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\n              const oldCenterX = oldBox.x + oldBox.width / 2;\n              const oldCenterY = oldBox.y + oldBox.height / 2;\n              const newCenterX = newBox.x + newBox.width / 2;\n              const newCenterY = newBox.y + newBox.height / 2;\n\n              const offsetX = oldCenterX - newCenterX;\n              const offsetY = oldCenterY - newCenterY;\n\n              newBox.x += offsetX;\n              newBox.y += offsetY;\n\n              return newBox;\n            }}\n          />\n        )}\n      </Group>\n    );\n  }\n}\n\nCircleComponent.propTypes = {\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  selectedHotspotColor: PropTypes.string,\n  hoverOutlineColor: PropTypes.string,\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 CircleComponent;\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,aAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAEA,MAAMI,eAAe,SAASC,cAAK,CAACC,SAAS,CAAC;EAC5CC,WAAWA,CAACC,KAAK,EAAE;IACjB,KAAK,CAACA,KAAK,CAAC;IAAC,IAAAC,gBAAA,CAAAC,OAAA,uBASAC,CAAC,IAAK;MACnB,MAAM;QAAEC,MAAM;QAAEC,SAAS;QAAEC,OAAO;QAAEC;MAAG,CAAC,GAAG,IAAI,CAACP,KAAK;MACrD,IAAII,MAAM,IAAI,CAAC,IAAIC,SAAS,EAAE;QAC5B;MACF;MACAF,CAAC,CAACK,YAAY,GAAG,IAAI;MACrBF,OAAO,CAACC,EAAE,CAAC;IACb,CAAC;IAAA,IAAAN,gBAAA,CAAAC,OAAA,4BAEkB,MAAM;MACvBO,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,MAAM,GAAG,SAAS;MACtC,IAAI,CAACC,QAAQ,CAAC;QAAEC,OAAO,EAAE;MAAK,CAAC,CAAC;MAChC,IAAI,CAACC,KAAK,CAACC,OAAO,CAACC,OAAO,CAAC,IAAI,CAACC,QAAQ,CAACF,OAAO,CAAC;MACjD,IAAI,CAACD,KAAK,CAACC,OAAO,CAACG,QAAQ,CAAC,CAAC,CAACC,SAAS,CAAC,CAAC;IAC3C,CAAC;IAAA,IAAAnB,gBAAA,CAAAC,OAAA,4BAEkB,MAAM;MACvB;MACA,IAAI,CAAC,IAAI,CAACmB,KAAK,CAACC,UAAU,EAAE;QAC1B,IAAI,CAACT,QAAQ,CAAC;UAAEC,OAAO,EAAE;QAAM,CAAC,CAAC;MACnC;MACAL,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,MAAM,GAAG,SAAS;IACxC,CAAC;IAAA,IAAAX,gBAAA,CAAAC,OAAA,2BAEkBC,CAAC,IAAK;MACvB,MAAM;QAAEoB,SAAS;QAAEhB;MAAG,CAAC,GAAG,IAAI,CAACP,KAAK;MACpC,IAAI,CAACa,QAAQ,CAAC;QAAES,UAAU,EAAE;MAAM,CAAC,CAAC;MACpCC,SAAS,CAAChB,EAAE,EAAE;QACZiB,CAAC,EAAErB,CAAC,CAACsB,MAAM,CAACD,CAAC,CAAC,CAAC;QACfE,CAAC,EAAEvB,CAAC,CAACsB,MAAM,CAACC,CAAC,CAAC;MAChB,CAAC,CAAC;IACJ,CAAC;IAAA,IAAAzB,gBAAA,CAAAC,OAAA,uBAEa,MAAM;MAClB,MAAM;QAAEqB,SAAS;QAAEhB;MAAG,CAAC,GAAG,IAAI,CAACP,KAAK;MACpC,MAAM2B,IAAI,GAAG,IAAI,CAACT,QAAQ,CAACF,OAAO;MAElC,MAAMY,KAAK,GAAGD,IAAI,CAACE,MAAM,CAAC,CAAC,KAAK,CAAC,GAAGF,IAAI,CAACE,MAAM,CAAC,CAAC,GAAGF,IAAI,CAACG,MAAM,CAAC,CAAC;MACjE,MAAMC,SAAS,GAAGC,IAAI,CAACC,GAAG,CAACN,IAAI,CAACvB,MAAM,CAAC,CAAC,GAAGwB,KAAK,EAAE,CAAC,CAAC;MAEpD,IAAI,CAACf,QAAQ,CAAC;QAAES,UAAU,EAAE;MAAM,CAAC,CAAC;MACpCC,SAAS,CAAChB,EAAE,EAAE;QACZiB,CAAC,EAAEG,IAAI,CAACH,CAAC,CAAC,CAAC;QACXE,CAAC,EAAEC,IAAI,CAACD,CAAC,CAAC,CAAC;QACXtB,MAAM,EAAE2B;MACV,CAAC,CAAC;MAEFJ,IAAI,CAACE,MAAM,CAAC,CAAC,CAAC;MACdF,IAAI,CAACG,MAAM,CAAC,CAAC,CAAC;IAChB,CAAC;IAAA,IAAA7B,gBAAA,CAAAC,OAAA,wBAEeK,EAAE,IAAK;MACrB,MAAM;QAAE2B;MAAc,CAAC,GAAG,IAAI,CAAClC,KAAK;MACpCkC,aAAa,CAAC3B,EAAE,CAAC;IACnB,CAAC;IAAA,IAAAN,gBAAA,CAAAC,OAAA,uBAEa,MAAM;MAClB,MAAMyB,IAAI,GAAG,IAAI,CAACT,QAAQ,CAACF,OAAO;MAClC,MAAMmB,QAAQ,GAAG,CAACR,IAAI,CAACE,MAAM,CAAC,CAAC,GAAGF,IAAI,CAACG,MAAM,CAAC,CAAC,IAAI,CAAC;MACpDH,IAAI,CAACE,MAAM,CAACM,QAAQ,CAAC;MACrBR,IAAI,CAACG,MAAM,CAACK,QAAQ,CAAC;IACvB,CAAC;IArEC,IAAI,CAACd,KAAK,GAAG;MACXP,OAAO,EAAE,KAAK;MACdQ,UAAU,EAAE;IACd,CAAC;IACD,IAAI,CAACJ,QAAQ,gBAAGrB,cAAK,CAACuC,SAAS,CAAC,CAAC;IACjC,IAAI,CAACrB,KAAK,gBAAGlB,cAAK,CAACuC,SAAS,CAAC,CAAC;EAChC;EAiEAC,MAAMA,CAAA,EAAG;IACP,MAAM;MACJC,OAAO;MACPlC,MAAM;MACNmC,YAAY;MACZhC,EAAE;MACFiC,YAAY;MACZhB,CAAC;MACDE,CAAC;MACDe,WAAW,GAAG,CAAC;MACfC,oBAAoB;MACpBC;IACF,CAAC,GAAG,IAAI,CAAC3C,KAAK;IAEd,MAAM;MAAEc,OAAO;MAAEQ;IAAW,CAAC,GAAG,IAAI,CAACD,KAAK;IAC1C;IACA,MAAMuB,WAAW,GAAGC,KAAK,CAACzC,MAAM,CAAC,IAAIA,MAAM,IAAI,CAAC,GAAG,CAAC,GAAGA,MAAM;IAE7D,oBACEd,MAAA,CAAAY,OAAA,CAAA4C,aAAA,CAACpD,WAAA,CAAAqD,KAAK;MAACC,YAAY,EAAE,IAAI,CAACC,gBAAiB;MAACC,YAAY,EAAE,IAAI,CAACC,gBAAiB;MAACC,OAAO,EAAE;IAAG,gBAC3F9D,MAAA,CAAAY,OAAA,CAAA4C,aAAA,CAACpD,WAAA,CAAA2D,MAAM;MACLC,GAAG,EAAE,IAAI,CAACpC,QAAS;MACnBd,MAAM,EAAEwC,WAAY;MACpBW,IAAI,EAAEjB,OAAO,IAAII,oBAAoB,GAAGA,oBAAoB,GAAGH,YAAa;MAC5EjC,OAAO,EAAE,IAAI,CAACkD,WAAY;MAC1BC,KAAK,EAAE,IAAI,CAACD,WAAY;MACxBE,SAAS;MACTC,MAAM,EAAEnB,YAAa;MACrBC,WAAW,EAAEH,OAAO,GAAGG,WAAW,GAAG,CAAE;MACvCmB,WAAW,EAAEA,CAAA,KAAM,IAAI,CAAC/C,QAAQ,CAAC;QAAES,UAAU,EAAE;MAAK,CAAC,CAAE;MACvDC,SAAS,EAAE,IAAI,CAACsC,eAAgB;MAChCC,gBAAgB,EAAEA,CAAA,KAAM,IAAI,CAACjD,QAAQ,CAAC;QAAES,UAAU,EAAE;MAAK,CAAC,CAAE;MAC5DyC,cAAc,EAAE,IAAI,CAACC,WAAY;MACjCxC,CAAC,EAAEA,CAAE;MACLE,CAAC,EAAEA,CAAE;MACLd,MAAM,EAAC;IAAS,CACjB,CAAC,EAED,CAACU,UAAU,IAAIR,OAAO,iBACrBxB,MAAA,CAAAY,OAAA,CAAA4C,aAAA,CAACnD,aAAA,CAAAO,OAAY;MACXK,EAAE,EAAEA,EAAG;MACPH,MAAM,EAAEwC,WAAY;MACpBpB,CAAC,EAAEA,CAAE;MACLE,CAAC,EAAEA,CAAE;MACLuC,iBAAiB,EAAE,IAAI,CAACC,YAAa;MACrCC,QAAQ,EAAE;IAAK,CAChB,CACF,EACA,IAAI,CAAC9C,KAAK,CAACP,OAAO,iBACjBxB,MAAA,CAAAY,OAAA,CAAA4C,aAAA,CAACpD,WAAA,CAAA0E,WAAW;MACVC,YAAY,EAAE1B,iBAAiB,IAAI,IAAK;MACxCW,GAAG,EAAE,IAAI,CAACvC,KAAM;MAChBuD,aAAa,EAAE,KAAM;MACrBC,SAAS,EAAE,IAAK;MAChBC,WAAW,EAAE,IAAI,CAACA,WAAY;MAC9BC,cAAc,EAAE,CAAC,aAAa,EAAE,cAAc,EAAE,YAAY,EAAE,eAAe,CAAE;MAC/EC,YAAY,EAAEA,CAACC,MAAM,EAAEC,MAAM,KAAK;QAChC;QACA,IAAIA,MAAM,CAACC,KAAK,GAAG,EAAE,IAAID,MAAM,CAACE,MAAM,GAAG,EAAE,EAAE;UAC3C,OAAOH,MAAM;QACf;QAEA,MAAMI,UAAU,GAAGJ,MAAM,CAACnD,CAAC,GAAGmD,MAAM,CAACE,KAAK,GAAG,CAAC;QAC9C,MAAMG,UAAU,GAAGL,MAAM,CAACjD,CAAC,GAAGiD,MAAM,CAACG,MAAM,GAAG,CAAC;QAC/C,MAAMG,UAAU,GAAGL,MAAM,CAACpD,CAAC,GAAGoD,MAAM,CAACC,KAAK,GAAG,CAAC;QAC9C,MAAMK,UAAU,GAAGN,MAAM,CAAClD,CAAC,GAAGkD,MAAM,CAACE,MAAM,GAAG,CAAC;QAE/C,MAAMK,OAAO,GAAGJ,UAAU,GAAGE,UAAU;QACvC,MAAMG,OAAO,GAAGJ,UAAU,GAAGE,UAAU;QAEvCN,MAAM,CAACpD,CAAC,IAAI2D,OAAO;QACnBP,MAAM,CAAClD,CAAC,IAAI0D,OAAO;QAEnB,OAAOR,MAAM;MACf;IAAE,CACH,CAEE,CAAC;EAEZ;AACF;AAEAhF,eAAe,CAACyF,SAAS,GAAG;EAC1B/C,OAAO,EAAEgD,kBAAS,CAACC,IAAI;EACvBlF,SAAS,EAAEiF,kBAAS,CAACC,IAAI,CAACC,UAAU;EACpCjF,EAAE,EAAE+E,kBAAS,CAACG,MAAM,CAACD,UAAU;EAC/BpF,MAAM,EAAEkF,kBAAS,CAACI,MAAM,CAACF,UAAU;EACnCjD,YAAY,EAAE+C,kBAAS,CAACG,MAAM,CAACD,UAAU;EACzC9C,oBAAoB,EAAE4C,kBAAS,CAACG,MAAM;EACtC9C,iBAAiB,EAAE2C,kBAAS,CAACG,MAAM;EACnCnF,OAAO,EAAEgF,kBAAS,CAACK,IAAI,CAACH,UAAU;EAClCtD,aAAa,EAAEoD,kBAAS,CAACK,IAAI,CAACH,UAAU;EACxCjE,SAAS,EAAE+D,kBAAS,CAACK,IAAI,CAACH,UAAU;EACpChD,YAAY,EAAE8C,kBAAS,CAACG,MAAM,CAACD,UAAU;EACzChE,CAAC,EAAE8D,kBAAS,CAACI,MAAM,CAACF,UAAU;EAC9B9D,CAAC,EAAE4D,kBAAS,CAACI,MAAM,CAACF,UAAU;EAC9B/C,WAAW,EAAE6C,kBAAS,CAACI;AACzB,CAAC;AAED9F,eAAe,CAACgG,YAAY,GAAG;EAC7BtD,OAAO,EAAE;AACX,CAAC;AAAC,IAAAuD,QAAA,GAAAC,OAAA,CAAA5F,OAAA,GAEaN,eAAe","ignoreList":[]}

package/configure/lib/hotspot-rectangle.js

@@ -36,10 +36,12 @@ class RectComponent extends _react.default.Component {
       this.trRef.current.getLayer().batchDraw();
     });
     (0, _defineProperty2.default)(this, "handleMouseLeave", () => {
-      this.setState({
-        hovered: false
-      });
-      document.body.style.cursor = 'default';
+      if (!this.state.isDragging) {
+        this.setState({
+          hovered: false
+        });
+        document.body.style.cursor = 'default';
+      }
     });
     (0, _defineProperty2.default)(this, "handleOnDragEnd", e => {
       const {

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

@@ -1 +1 @@
-{"version":3,"file":"hotspot-rectangle.js","names":["_react","_interopRequireDefault","require","_propTypes","_reactKonva","_DeleteWidget","RectComponent","React","Component","constructor","props","_defineProperty2","default","e","width","height","isDrawing","onClick","id","cancelBubble","document","body","style","cursor","setState","hovered","trRef","current","setNode","shapeRef","getLayer","batchDraw","onDragEnd","isDragging","x","target","y","node","scaleX","scaleY","Math","max","onDeleteShape","state","createRef","render","correct","hotspotColor","outlineColor","strokeWidth","selectedHotspotColor","hoverOutlineColor","createElement","Group","onMouseLeave","handleMouseLeave","onMouseEnter","handleMouseEnter","padding","Rect","stroke","listening","ref","fill","handleClick","onTap","draggable","onDragStart","handleOnDragEnd","onTransformStart","onTransformEnd","onResizeEnd","handleWidgetClick","handleDelete","Transformer","rotateEnabled","boundBoxFunc","oldBox","newBox","propTypes","PropTypes","bool","isRequired","string","number","func","defaultProps","_default","exports"],"sources":["../src/hotspot-rectangle.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Rect, Group, Transformer } from 'react-konva';\nimport DeleteWidget from './DeleteWidget';\n\nclass RectComponent 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 { width, height, isDrawing, onClick, id } = this.props;\n    if (width < 0 && height < 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    // transformer is changing scale of the node\n    // and NOT its width or height\n    // but in the store we have only width and height\n    // to match the data better we will reset scale on transform end\n    const node = this.shapeRef.current;\n    const scaleX = node.scaleX();\n    const scaleY = node.scaleY();\n\n    // we will reset it back\n    node.scaleX(1);\n    node.scaleY(1);\n    this.setState({ isDragging: false });\n    onDragEnd(id, {\n      x: node.x(),\n      y: node.y(),\n      // set minimal value\n      width: Math.max(5, node.width() * scaleX),\n      height: Math.max(node.height() * scaleY),\n    });\n  };\n\n  handleDelete = (id) => {\n    const { onDeleteShape } = this.props;\n    onDeleteShape(id);\n  };\n\n  render() {\n    const {\n      correct,\n      height,\n      hotspotColor,\n      id,\n      outlineColor,\n      width,\n      x,\n      y,\n      strokeWidth = 5,\n      selectedHotspotColor,\n      hoverOutlineColor,\n    } = this.props;\n\n    const { hovered } = this.state;\n\n    return (\n      <Group onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter} padding={12}>\n        {hoverOutlineColor && hovered && (\n          <Rect\n            x={x}\n            y={y}\n            width={width}\n            height={height}\n            stroke={hoverOutlineColor}\n            strokeWidth={2}\n            listening={false}\n          />\n        )}\n\n        <Rect\n          ref={this.shapeRef}\n          width={width}\n          height={height}\n          fill={correct && selectedHotspotColor ? selectedHotspotColor : hotspotColor}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable\n          stroke={hovered ? 'transparent' : outlineColor}\n          strokeWidth={correct && !hovered ? 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          cursor=\"pointer\"\n        />\n        {!this.state.isDragging && this.state.hovered && (\n          <DeleteWidget id={id} height={height} width={width} x={x} y={y} handleWidgetClick={this.handleDelete} />\n        )}\n        {this.state.hovered && (\n          <Transformer\n            ref={this.trRef}\n            rotateEnabled={false}\n            boundBoxFunc={(oldBox, newBox) => {\n              // limit resize\n              if (newBox.width < 10 || newBox.height < 10) {\n                return oldBox;\n              }\n              return newBox;\n            }}\n          />\n        )}\n      </Group>\n    );\n  }\n}\n\nRectComponent.propTypes = {\n  correct: PropTypes.bool,\n  isDrawing: PropTypes.bool.isRequired,\n  id: PropTypes.string.isRequired,\n  height: PropTypes.number.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  selectedHotspotColor: PropTypes.string,\n  hoverOutlineColor: PropTypes.string,\n  onClick: PropTypes.func.isRequired,\n  onDeleteShape: PropTypes.func.isRequired,\n  onDragEnd: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  width: PropTypes.number.isRequired,\n  x: PropTypes.number.isRequired,\n  y: PropTypes.number.isRequired,\n  strokeWidth: PropTypes.number,\n};\n\nRectComponent.defaultProps = {\n  correct: false,\n};\n\nexport default RectComponent;\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,aAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAEA,MAAMI,aAAa,SAASC,cAAK,CAACC,SAAS,CAAC;EAC1CC,WAAWA,CAACC,KAAK,EAAE;IACjB,KAAK,CAACA,KAAK,CAAC;IAAC,IAAAC,gBAAA,CAAAC,OAAA,uBASAC,CAAC,IAAK;MACnB,MAAM;QAAEC,KAAK;QAAEC,MAAM;QAAEC,SAAS;QAAEC,OAAO;QAAEC;MAAG,CAAC,GAAG,IAAI,CAACR,KAAK;MAC5D,IAAII,KAAK,GAAG,CAAC,IAAIC,MAAM,GAAG,CAAC,IAAIC,SAAS,EAAE;QACxC;MACF;MACAH,CAAC,CAACM,YAAY,GAAG,IAAI;MACrBF,OAAO,CAACC,EAAE,CAAC;IACb,CAAC;IAAA,IAAAP,gBAAA,CAAAC,OAAA,4BAEkB,MAAM;MACvBQ,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,MAAM,GAAG,SAAS;MACtC,IAAI,CAACC,QAAQ,CAAC;QAAEC,OAAO,EAAE;MAAK,CAAC,CAAC;MAChC,IAAI,CAACC,KAAK,CAACC,OAAO,CAACC,OAAO,CAAC,IAAI,CAACC,QAAQ,CAACF,OAAO,CAAC;MACjD,IAAI,CAACD,KAAK,CAACC,OAAO,CAACG,QAAQ,CAAC,CAAC,CAACC,SAAS,CAAC,CAAC;IAC3C,CAAC;IAAA,IAAApB,gBAAA,CAAAC,OAAA,4BAEkB,MAAM;MACvB,IAAI,CAACY,QAAQ,CAAC;QAAEC,OAAO,EAAE;MAAM,CAAC,CAAC;MACjCL,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,MAAM,GAAG,SAAS;IACxC,CAAC;IAAA,IAAAZ,gBAAA,CAAAC,OAAA,2BAEkBC,CAAC,IAAK;MACvB,MAAM;QAAEmB,SAAS;QAAEd;MAAG,CAAC,GAAG,IAAI,CAACR,KAAK;MACpC,IAAI,CAACc,QAAQ,CAAC;QAAES,UAAU,EAAE;MAAM,CAAC,CAAC;MACpCD,SAAS,CAACd,EAAE,EAAE;QACZgB,CAAC,EAAErB,CAAC,CAACsB,MAAM,CAACD,CAAC,CAAC,CAAC;QACfE,CAAC,EAAEvB,CAAC,CAACsB,MAAM,CAACC,CAAC,CAAC;MAChB,CAAC,CAAC;IACJ,CAAC;IAAA,IAAAzB,gBAAA,CAAAC,OAAA,uBAEa,MAAM;MAClB,MAAM;QAAEoB,SAAS;QAAEd;MAAG,CAAC,GAAG,IAAI,CAACR,KAAK;MACpC;MACA;MACA;MACA;MACA,MAAM2B,IAAI,GAAG,IAAI,CAACR,QAAQ,CAACF,OAAO;MAClC,MAAMW,MAAM,GAAGD,IAAI,CAACC,MAAM,CAAC,CAAC;MAC5B,MAAMC,MAAM,GAAGF,IAAI,CAACE,MAAM,CAAC,CAAC;;MAE5B;MACAF,IAAI,CAACC,MAAM,CAAC,CAAC,CAAC;MACdD,IAAI,CAACE,MAAM,CAAC,CAAC,CAAC;MACd,IAAI,CAACf,QAAQ,CAAC;QAAES,UAAU,EAAE;MAAM,CAAC,CAAC;MACpCD,SAAS,CAACd,EAAE,EAAE;QACZgB,CAAC,EAAEG,IAAI,CAACH,CAAC,CAAC,CAAC;QACXE,CAAC,EAAEC,IAAI,CAACD,CAAC,CAAC,CAAC;QACX;QACAtB,KAAK,EAAE0B,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEJ,IAAI,CAACvB,KAAK,CAAC,CAAC,GAAGwB,MAAM,CAAC;QACzCvB,MAAM,EAAEyB,IAAI,CAACC,GAAG,CAACJ,IAAI,CAACtB,MAAM,CAAC,CAAC,GAAGwB,MAAM;MACzC,CAAC,CAAC;IACJ,CAAC;IAAA,IAAA5B,gBAAA,CAAAC,OAAA,wBAEeM,EAAE,IAAK;MACrB,MAAM;QAAEwB;MAAc,CAAC,GAAG,IAAI,CAAChC,KAAK;MACpCgC,aAAa,CAACxB,EAAE,CAAC;IACnB,CAAC;IAhEC,IAAI,CAACyB,KAAK,GAAG;MACXlB,OAAO,EAAE,KAAK;MACdQ,UAAU,EAAE;IACd,CAAC;IACD,IAAI,CAACJ,QAAQ,gBAAGtB,cAAK,CAACqC,SAAS,CAAC,CAAC;IACjC,IAAI,CAAClB,KAAK,gBAAGnB,cAAK,CAACqC,SAAS,CAAC,CAAC;EAChC;EA4DAC,MAAMA,CAAA,EAAG;IACP,MAAM;MACJC,OAAO;MACP/B,MAAM;MACNgC,YAAY;MACZ7B,EAAE;MACF8B,YAAY;MACZlC,KAAK;MACLoB,CAAC;MACDE,CAAC;MACDa,WAAW,GAAG,CAAC;MACfC,oBAAoB;MACpBC;IACF,CAAC,GAAG,IAAI,CAACzC,KAAK;IAEd,MAAM;MAAEe;IAAQ,CAAC,GAAG,IAAI,CAACkB,KAAK;IAE9B,oBACE3C,MAAA,CAAAY,OAAA,CAAAwC,aAAA,CAAChD,WAAA,CAAAiD,KAAK;MAACC,YAAY,EAAE,IAAI,CAACC,gBAAiB;MAACC,YAAY,EAAE,IAAI,CAACC,gBAAiB;MAACC,OAAO,EAAE;IAAG,GAC1FP,iBAAiB,IAAI1B,OAAO,iBAC3BzB,MAAA,CAAAY,OAAA,CAAAwC,aAAA,CAAChD,WAAA,CAAAuD,IAAI;MACHzB,CAAC,EAAEA,CAAE;MACLE,CAAC,EAAEA,CAAE;MACLtB,KAAK,EAAEA,KAAM;MACbC,MAAM,EAAEA,MAAO;MACf6C,MAAM,EAAET,iBAAkB;MAC1BF,WAAW,EAAE,CAAE;MACfY,SAAS,EAAE;IAAM,CAClB,CACF,eAED7D,MAAA,CAAAY,OAAA,CAAAwC,aAAA,CAAChD,WAAA,CAAAuD,IAAI;MACHG,GAAG,EAAE,IAAI,CAACjC,QAAS;MACnBf,KAAK,EAAEA,KAAM;MACbC,MAAM,EAAEA,MAAO;MACfgD,IAAI,EAAEjB,OAAO,IAAII,oBAAoB,GAAGA,oBAAoB,GAAGH,YAAa;MAC5E9B,OAAO,EAAE,IAAI,CAAC+C,WAAY;MAC1BC,KAAK,EAAE,IAAI,CAACD,WAAY;MACxBE,SAAS;MACTN,MAAM,EAAEnC,OAAO,GAAG,aAAa,GAAGuB,YAAa;MAC/CC,WAAW,EAAEH,OAAO,IAAI,CAACrB,OAAO,GAAGwB,WAAW,GAAG,CAAE;MACnDkB,WAAW,EAAEA,CAAA,KAAM,IAAI,CAAC3C,QAAQ,CAAC;QAAES,UAAU,EAAE;MAAK,CAAC,CAAE;MACvDD,SAAS,EAAE,IAAI,CAACoC,eAAgB;MAChCC,gBAAgB,EAAEA,CAAA,KAAM,IAAI,CAAC7C,QAAQ,CAAC;QAAES,UAAU,EAAE;MAAK,CAAC,CAAE;MAC5DqC,cAAc,EAAE,IAAI,CAACC,WAAY;MACjCrC,CAAC,EAAEA,CAAE;MACLE,CAAC,EAAEA,CAAE;MACLb,MAAM,EAAC;IAAS,CACjB,CAAC,EACD,CAAC,IAAI,CAACoB,KAAK,CAACV,UAAU,IAAI,IAAI,CAACU,KAAK,CAAClB,OAAO,iBAC3CzB,MAAA,CAAAY,OAAA,CAAAwC,aAAA,CAAC/C,aAAA,CAAAO,OAAY;MAACM,EAAE,EAAEA,EAAG;MAACH,MAAM,EAAEA,MAAO;MAACD,KAAK,EAAEA,KAAM;MAACoB,CAAC,EAAEA,CAAE;MAACE,CAAC,EAAEA,CAAE;MAACoC,iBAAiB,EAAE,IAAI,CAACC;IAAa,CAAE,CACxG,EACA,IAAI,CAAC9B,KAAK,CAAClB,OAAO,iBACjBzB,MAAA,CAAAY,OAAA,CAAAwC,aAAA,CAAChD,WAAA,CAAAsE,WAAW;MACVZ,GAAG,EAAE,IAAI,CAACpC,KAAM;MAChBiD,aAAa,EAAE,KAAM;MACrBC,YAAY,EAAEA,CAACC,MAAM,EAAEC,MAAM,KAAK;QAChC;QACA,IAAIA,MAAM,CAAChE,KAAK,GAAG,EAAE,IAAIgE,MAAM,CAAC/D,MAAM,GAAG,EAAE,EAAE;UAC3C,OAAO8D,MAAM;QACf;QACA,OAAOC,MAAM;MACf;IAAE,CACH,CAEE,CAAC;EAEZ;AACF;AAEAxE,aAAa,CAACyE,SAAS,GAAG;EACxBjC,OAAO,EAAEkC,kBAAS,CAACC,IAAI;EACvBjE,SAAS,EAAEgE,kBAAS,CAACC,IAAI,CAACC,UAAU;EACpChE,EAAE,EAAE8D,kBAAS,CAACG,MAAM,CAACD,UAAU;EAC/BnE,MAAM,EAAEiE,kBAAS,CAACI,MAAM,CAACF,UAAU;EACnCnC,YAAY,EAAEiC,kBAAS,CAACG,MAAM,CAACD,UAAU;EACzChC,oBAAoB,EAAE8B,kBAAS,CAACG,MAAM;EACtChC,iBAAiB,EAAE6B,kBAAS,CAACG,MAAM;EACnClE,OAAO,EAAE+D,kBAAS,CAACK,IAAI,CAACH,UAAU;EAClCxC,aAAa,EAAEsC,kBAAS,CAACK,IAAI,CAACH,UAAU;EACxClD,SAAS,EAAEgD,kBAAS,CAACK,IAAI,CAACH,UAAU;EACpClC,YAAY,EAAEgC,kBAAS,CAACG,MAAM,CAACD,UAAU;EACzCpE,KAAK,EAAEkE,kBAAS,CAACI,MAAM,CAACF,UAAU;EAClChD,CAAC,EAAE8C,kBAAS,CAACI,MAAM,CAACF,UAAU;EAC9B9C,CAAC,EAAE4C,kBAAS,CAACI,MAAM,CAACF,UAAU;EAC9BjC,WAAW,EAAE+B,kBAAS,CAACI;AACzB,CAAC;AAED9E,aAAa,CAACgF,YAAY,GAAG;EAC3BxC,OAAO,EAAE;AACX,CAAC;AAAC,IAAAyC,QAAA,GAAAC,OAAA,CAAA5E,OAAA,GAEaN,aAAa","ignoreList":[]}
+{"version":3,"file":"hotspot-rectangle.js","names":["_react","_interopRequireDefault","require","_propTypes","_reactKonva","_DeleteWidget","RectComponent","React","Component","constructor","props","_defineProperty2","default","e","width","height","isDrawing","onClick","id","cancelBubble","document","body","style","cursor","setState","hovered","trRef","current","setNode","shapeRef","getLayer","batchDraw","state","isDragging","onDragEnd","x","target","y","node","scaleX","scaleY","Math","max","onDeleteShape","createRef","render","correct","hotspotColor","outlineColor","strokeWidth","selectedHotspotColor","hoverOutlineColor","createElement","Group","onMouseLeave","handleMouseLeave","onMouseEnter","handleMouseEnter","padding","Rect","stroke","listening","ref","fill","handleClick","onTap","draggable","onDragStart","handleOnDragEnd","onTransformStart","onTransformEnd","onResizeEnd","handleWidgetClick","handleDelete","Transformer","rotateEnabled","boundBoxFunc","oldBox","newBox","propTypes","PropTypes","bool","isRequired","string","number","func","defaultProps","_default","exports"],"sources":["../src/hotspot-rectangle.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Rect, Group, Transformer } from 'react-konva';\nimport DeleteWidget from './DeleteWidget';\n\nclass RectComponent 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 { width, height, isDrawing, onClick, id } = this.props;\n    if (width < 0 && height < 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    if (!this.state.isDragging) {\n      this.setState({ hovered: false });\n      document.body.style.cursor = 'default';\n    }\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    // transformer is changing scale of the node\n    // and NOT its width or height\n    // but in the store we have only width and height\n    // to match the data better we will reset scale on transform end\n    const node = this.shapeRef.current;\n    const scaleX = node.scaleX();\n    const scaleY = node.scaleY();\n\n    // we will reset it back\n    node.scaleX(1);\n    node.scaleY(1);\n    this.setState({ isDragging: false });\n    onDragEnd(id, {\n      x: node.x(),\n      y: node.y(),\n      // set minimal value\n      width: Math.max(5, node.width() * scaleX),\n      height: Math.max(node.height() * scaleY),\n    });\n  };\n\n  handleDelete = (id) => {\n    const { onDeleteShape } = this.props;\n    onDeleteShape(id);\n  };\n\n  render() {\n    const {\n      correct,\n      height,\n      hotspotColor,\n      id,\n      outlineColor,\n      width,\n      x,\n      y,\n      strokeWidth = 5,\n      selectedHotspotColor,\n      hoverOutlineColor,\n    } = this.props;\n\n    const { hovered } = this.state;\n\n    return (\n      <Group onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter} padding={12}>\n        {hoverOutlineColor && hovered && (\n          <Rect\n            x={x}\n            y={y}\n            width={width}\n            height={height}\n            stroke={hoverOutlineColor}\n            strokeWidth={2}\n            listening={false}\n          />\n        )}\n\n        <Rect\n          ref={this.shapeRef}\n          width={width}\n          height={height}\n          fill={correct && selectedHotspotColor ? selectedHotspotColor : hotspotColor}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable\n          stroke={hovered ? 'transparent' : outlineColor}\n          strokeWidth={correct && !hovered ? 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          cursor=\"pointer\"\n        />\n        {!this.state.isDragging && this.state.hovered && (\n          <DeleteWidget id={id} height={height} width={width} x={x} y={y} handleWidgetClick={this.handleDelete} />\n        )}\n        {this.state.hovered && (\n          <Transformer\n            ref={this.trRef}\n            rotateEnabled={false}\n            boundBoxFunc={(oldBox, newBox) => {\n              // limit resize\n              if (newBox.width < 10 || newBox.height < 10) {\n                return oldBox;\n              }\n              return newBox;\n            }}\n          />\n        )}\n      </Group>\n    );\n  }\n}\n\nRectComponent.propTypes = {\n  correct: PropTypes.bool,\n  isDrawing: PropTypes.bool.isRequired,\n  id: PropTypes.string.isRequired,\n  height: PropTypes.number.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  selectedHotspotColor: PropTypes.string,\n  hoverOutlineColor: PropTypes.string,\n  onClick: PropTypes.func.isRequired,\n  onDeleteShape: PropTypes.func.isRequired,\n  onDragEnd: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  width: PropTypes.number.isRequired,\n  x: PropTypes.number.isRequired,\n  y: PropTypes.number.isRequired,\n  strokeWidth: PropTypes.number,\n};\n\nRectComponent.defaultProps = {\n  correct: false,\n};\n\nexport default RectComponent;\n"],"mappings":"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","ignoreList":[]}

package/configure/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/hotspot-configure",
   "private": true,
-  "version": "9.1.0-next.0",
+  "version": "9.1.2-next.1",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -12,8 +12,8 @@
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
     "@pie-framework/pie-configure-events": "^1.3.0",
-    "@pie-lib/config-ui": "12.1.1-next.3",
-    "@pie-lib/editable-html-tip-tap": "1.1.1-next.3",
+    "@pie-lib/config-ui": "12.2.0-next.11",
+    "@pie-lib/editable-html-tip-tap": "1.2.0-next.11",
     "debug": "^4.1.1",
     "konva": "8.3.0",
     "lodash-es": "^4.17.23",

package/configure/src/hotspot-circle.jsx

@@ -31,7 +31,10 @@ class CircleComponent extends React.Component {
   };
 
   handleMouseLeave = () => {
-    this.setState({ hovered: false });
+    // Don't hide transformer if user is actively dragging/resizing
+    if (!this.state.isDragging) {
+      this.setState({ hovered: false });
+    }
     document.body.style.cursor = 'default';
   };
 

package/configure/src/hotspot-rectangle.jsx

@@ -31,8 +31,10 @@ class RectComponent extends React.Component {
   };
 
   handleMouseLeave = () => {
-    this.setState({ hovered: false });
-    document.body.style.cursor = 'default';
+    if (!this.state.isDragging) {
+      this.setState({ hovered: false });
+      document.body.style.cursor = 'default';
+    }
   };
 
   handleOnDragEnd = (e) => {