"use strict";

var __extends = this && this.__extends || function () {
  var _extendStatics = function extendStatics(d, b) {
    _extendStatics = Object.setPrototypeOf || {
      __proto__: []
    } instanceof Array && function (d, b) {
      d.__proto__ = b;
    } || function (d, b) {
      for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    };
    return _extendStatics(d, b);
  };
  return function (d, b) {
    _extendStatics(d, b);
    function __() {
      this.constructor = d;
    }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  };
}();
var __assign = this && this.__assign || function () {
  __assign = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];
      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
    }
    return t;
  };
  return __assign.apply(this, arguments);
};
var __spreadArrays = this && this.__spreadArrays || function () {
  for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
  for (var r = Array(s), k = 0, i = 0; i < il; i++) for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) r[k] = a[j];
  return r;
};
exports.__esModule = true;
var react_1 = require("react");
var GraphicEdit_1 = require("../../components/material/GraphicEdit");
var content_1 = require("./content");
var XtGraphic = /** @class */function (_super) {
  __extends(XtGraphic, _super);
  function XtGraphic(props) {
    var _this = _super.call(this, props) || this;
    // 提交
    _this.onSubmit = function () {
      var initSchemaH = JSON.parse(_this.state.schema).height;
      var _a = _this.contentRef.current,
        dom = _a.dom,
        psdList = _a.psdList;
      var _b = dom.container.getBoundingClientRect(),
        containerLeft = _b.left,
        containerTop = _b.top,
        width = _b.width;
      var scrollTop = +dom.container.scrollTop;
      var clientW = document.body.clientWidth; // 浏览器可视区域宽度
      var scaleW = width / clientW; // 宽度比例 = 534(弹窗宽度) / 1920
      var scaleH = width / psdList.width; // 高度比例 = 534(弹窗宽度) / 1242(初始宽度)
      var changePsdList = Object.assign(psdList, {
        height: initSchemaH,
        layers: __spreadArrays(psdList.layers.map(function (item, index) {
          if (dom["text" + index]) {
            var text = dom["text" + index].getBoundingClientRect();
            var scaleFontSize = Number(item.style.fontSize.replace('vw', ''));
            var fontSize = scaleFontSize / scaleW; // 按照比例计算出当前文字大小
            var left = (text.left - containerLeft) / scaleW / clientW * 100 + "%"; // (以浏览器可视区域宽度为基准) (元素left - 容器left) / 宽度比例 / 浏览器可视区域宽度 * 100
            var top = (text.top - containerTop + scrollTop) / scaleH / initSchemaH * 100 + "%"; // (以内容高度为基准) (元素top - 容器top + 垂直滚动距离scrollTop) / 高度比例 / 内容高度 * 100
            return __assign(__assign({}, item), {
              style: __assign(__assign({}, item.style), {
                left: left,
                top: top,
                fontSize: fontSize + "vw"
              })
            });
          } else return item;
        }))
      });
      _this.props.onChange({
        psdList: changePsdList,
        selectIdx: 0
      });
      _this.setState({
        dialogVisible: false,
        schema: JSON.stringify(changePsdList)
      });
    };
    // 取消
    _this.onCancel = function () {
      _this.setState({
        dialogVisible: false,
        schema: JSON.stringify(_this.props.value.psdList)
      });
    };
    _this.state = {
      dialogVisible: false,
      schema: ''
    };
    _this.contentRef = react_1.createRef();
    return _this;
  }
  XtGraphic.prototype.componentDidMount = function () {
    this.setState({
      schema: JSON.stringify(this.props.value.psdList)
    });
  };
  XtGraphic.prototype.render = function () {
    var _this = this;
    var _a = this.state,
      schema = _a.schema,
      dialogVisible = _a.dialogVisible;
    return react_1["default"].createElement(GraphicEdit_1["default"], {
      name: "\u56FE\u6587",
      mediaType: "IMAGE_TEXT",
      dialogVisible: dialogVisible,
      handleVisible: function handleVisible(e) {
        return _this.setState({
          dialogVisible: e
        });
      },
      content: react_1["default"].createElement(content_1["default"], {
        ref: this.contentRef,
        schema: schema,
        dialogVisible: dialogVisible
      }),
      onSubmit: this.onSubmit,
      onCancel: this.onCancel
    });
  };
  return XtGraphic;
}(react_1.Component);
exports["default"] = XtGraphic;