System.register(['reactive-jsx', 'src/components/widgets/lively-morph.js', 'src/client/graphics.js', 'src/client/morphic/snapping.js'], function (_export, _context) {
  "use strict";

  var _childExpression, _children, _attributeStringLiteral, _attributes, _element, Morph, pt, Grid;

  return {
    setters: [function (_reactiveJsx) {
      _childExpression = _reactiveJsx.childExpression;
      _children = _reactiveJsx.children;
      _attributeStringLiteral = _reactiveJsx.attributeStringLiteral;
      _attributes = _reactiveJsx.attributes;
      _element = _reactiveJsx.element;
    }, function (_srcComponentsWidgetsLivelyMorphJs) {
      Morph = _srcComponentsWidgetsLivelyMorphJs.default;
    }, function (_srcClientGraphicsJs) {
      pt = _srcClientGraphicsJs.pt;
    }, function (_srcClientMorphicSnappingJs) {
      Grid = _srcClientMorphicSnappingJs.Grid;
    }],
    execute: function () {
      const __SystemJSRewritingHack = {};
      _recorder_._src_components_widgets_lively_resizer_js = _recorder_._src_components_widgets_lively_resizer_js || {};
      Object.defineProperty(_recorder_._src_components_widgets_lively_resizer_js, 'Morph', {
        get() {
          return Morph;
        },

        set(thisIsVererySecretVariableName) {
          Morph = thisIsVererySecretVariableName;
          return true;
        },

        enumerable: true,
        configurable: true
      });
      Object.defineProperty(_recorder_._src_components_widgets_lively_resizer_js, 'pt', {
        get() {
          return pt;
        },

        set(thisIsVererySecretVariableName) {
          pt = thisIsVererySecretVariableName;
          return true;
        },

        enumerable: true,
        configurable: true
      });
      Object.defineProperty(_recorder_._src_components_widgets_lively_resizer_js, 'Grid', {
        get() {
          return Grid;
        },

        set(thisIsVererySecretVariableName) {
          Grid = thisIsVererySecretVariableName;
          return true;
        },

        enumerable: true,
        configurable: true
      });
      class Resizer extends Morph {
        initialize() {
          this.addEventListener('pointerdown', evt => {
            this.onPointerMoveStart(evt);
          });
        }

        getElement() {
          if (this.target) {
            return this.target;
          } else if (this.parentElement) {
            return this.parentElement;
          } else if (this.parentNode && this.parentNode.host) {
            return this.parentNode.host;
          }
          return null;
        }

        onPointerMoveStart(evt) {
          this.count = 0;
          var element = this.getElement();
          if (!element) return; // do nothging... should this happen?

          this.originalExtent = lively.getExtent(element);
          this.originalPosition = lively.getPosition(element);

          this.dragOffset = lively.getPosition(evt);
          evt.stopPropagation();

          lively.addEventListener('lively-resizer-drag', document.documentElement, 'pointermove', evt => this.onPointerMove(evt), true);
          lively.addEventListener('lively-resizer-drag', document.documentElement, 'pointerup', evt => this.onPointerMoveEnd(evt));
        }

        onPointerMove(evt) {
          if (!evt.clientX) return;

          var element = this.getElement();
          if (!element) return; // do nothging... should this happen?

          this.count++;
          if (this.count == 1) return; // ignore the first event because it seems to be off

          // 1. calculate values
          var pos = lively.getPosition(evt);
          // lively.showPoint(pos.addPt(lively.getGlobalPosition(document.body)))

          var delta = pos.subPt(this.dragOffset

          // 3. update new values

          );if (this.classList.contains("top-left")) {
            var newPosition = this.originalPosition.addPt(pt(Math.min(delta.x, this.originalExtent.x), Math.min(delta.y, this.originalExtent.y)));
            var newExtent = this.originalExtent.addPt(pt(-delta.x, -delta.y));

            lively.setPosition(element, newPosition);
            lively.setExtent(element, newExtent);
          } else if (this.classList.contains("top-right")) {
            var newPosition = this.originalPosition.addPt(pt(0, Math.min(delta.y, this.originalExtent.y)));
            var newExtent = this.originalExtent.addPt(pt(delta.x, -delta.y));

            lively.setPosition(element, newPosition);
            lively.setExtent(element, newExtent);
          } else if (this.classList.contains("bottom-left")) {
            var newPosition = this.originalPosition.addPt(pt(Math.min(delta.x, this.originalExtent.x), 0));
            var newExtent = this.originalExtent.addPt(pt(-delta.x, delta.y));

            lively.setPosition(element, newPosition);
            lively.setExtent(element, newExtent);
          } else {

            var newExtent = this.originalExtent.addPt(delta);

            newExtent = Grid.snapPt(newExtent, 100, 10 // #TODO transfere this to the other corners!

            );lively.setExtent(element, newExtent);
          }

          element.dispatchEvent(new CustomEvent("extent-changed"));

          evt.stopPropagation();
          evt.preventDefault();
        }

        onPointerMoveEnd(evt) {
          evt.stopPropagation();
          evt.preventDefault();

          lively.removeEventListener('lively-resizer-drag', document.documentElement);
        }

        async livelyExample() {

          var div2 = _element('div', _attributes(_attributeStringLiteral('style', 'background-color: gray; top:100px; position: absolute; left:100px;width:100px; height:100px')), _children(), {
            file: 'https://lively-kernel.org/lively4/lively4-portal/src/components/widgets/lively-resizer.js',
            end: {
              column: 126,
              line: 103
            },
            start: {
              column: 15,
              line: 103
            }
          });
          var div = _element('div', _attributes(_attributeStringLiteral('style', 'background-color: lightgray')), _children(_childExpression(div2)), {
            file: 'https://lively-kernel.org/lively4/lively4-portal/src/components/widgets/lively-resizer.js',
            end: {
              column: 67,
              line: 104
            },
            start: {
              column: 14,
              line: 104
            }
          });

          var topRight = await _element('lively-resizer', _attributes(_attributeStringLiteral('class', 'top-right')), _children(), {
            file: 'https://lively-kernel.org/lively4/lively4-portal/src/components/widgets/lively-resizer.js',
            end: {
              column: 77,
              line: 106
            },
            start: {
              column: 26,
              line: 106
            }
          });
          topRight.target = div2;
          topRight.style.color = "green";
          div2.appendChild(topRight);

          var topLeft = await _element('lively-resizer', _attributes(_attributeStringLiteral('class', 'top-left')), _children(), {
            file: 'https://lively-kernel.org/lively4/lively4-portal/src/components/widgets/lively-resizer.js',
            end: {
              column: 75,
              line: 111
            },
            start: {
              column: 25,
              line: 111
            }
          });
          topLeft.target = div2;
          topLeft.style.color = "yellow";
          div2.appendChild(topLeft);

          var bottomLeft = await _element('lively-resizer', _attributes(_attributeStringLiteral('class', 'bottom-left')), _children(), {
            file: 'https://lively-kernel.org/lively4/lively4-portal/src/components/widgets/lively-resizer.js',
            end: {
              column: 81,
              line: 117
            },
            start: {
              column: 28,
              line: 117
            }
          });
          bottomLeft.target = div2;
          bottomLeft.style.color = "blue";
          div2.appendChild(bottomLeft

          //default    
          );var bottomRight = await _element('lively-resizer', _attributes(_attributeStringLiteral('class', 'bottom-right')), _children(), {
            file: 'https://lively-kernel.org/lively4/lively4-portal/src/components/widgets/lively-resizer.js',
            end: {
              column: 83,
              line: 123
            },
            start: {
              column: 29,
              line: 123
            }
          });
          bottomRight.target = div2;
          bottomRight.style.color = "red";
          div2.appendChild(bottomRight);

          this.parentElement.appendChild(div);
          this.remove();
        }

      }

      _export('default', Resizer);

      Object.defineProperty(_recorder_._src_components_widgets_lively_resizer_js, 'Resizer', {
        get() {
          return Resizer;
        },

        set(thisIsVererySecretVariableName) {
          _export('default', Resizer = thisIsVererySecretVariableName);

          return true;
        },

        enumerable: true,
        configurable: true
      });
    }
  };
});