'use strict';

var elements_BaseElement = require('./BaseElement.cjs');
var types_constants = require('../types/constants.cjs');
var utils_helpers = require('../utils/helpers.cjs');
var types_enums = require('../types/enums.cjs');
require('@chnak/paper');

/**
 * 矩形元素
 */
class RectElement extends elements_BaseElement.BaseElement {
  constructor(config = {}) {
    super(config);
    this.type = types_enums.ElementType.RECT;
    // 重新合并配置，确保传入的config优先级最高
    this.config = utils_helpers.deepMerge({}, types_constants.DEFAULT_ELEMENT_CONFIG, config);
    this.config.bgcolor = this.config.bgcolor || '#ffffff';
    this.config.borderRadius = this.config.borderRadius || 0;
    this.config.borderWidth = this.config.borderWidth || 0;
    this.config.borderColor = this.config.borderColor || '#000000';
  }

  /**
   * 设置背景颜色
   */
  setBgColor(color) {
    this.config.bgcolor = color;
  }

  /**
   * 设置圆角
   */
  setBorderRadius(radius) {
    this.config.borderRadius = radius;
  }

  /**
   * 设置边框
   */
  setBorder(width, color) {
    this.config.borderWidth = width;
    this.config.borderColor = color;
  }

  /**
   * 渲染矩形元素（使用 Paper.js）
   * @param {paper.Layer} layer - Paper.js 图层
   * @param {number} time - 当前时间（秒）
   * @param {Object} paperInstance - Paper.js 实例 { project, paper }
   */
  render(layer, time, paperInstance = null) {
    if (!this.visible) return null;
    
    // 检查时间范围
    if (!this.isActiveAtTime(time)) {
      return null;
    }

    // 获取 Paper.js 实例
    const { paper: p, project } = this.getPaperInstance(paperInstance);

    // 优先使用元素的 canvasWidth/canvasHeight，如果没有则使用 project.view.viewSize
    const viewSize = project && project.view && project.view.viewSize 
      ? project.view.viewSize 
      : { width: 1920, height: 1080 };
    const context = { 
      width: this.canvasWidth || viewSize.width, 
      height: this.canvasHeight || viewSize.height 
    };
    const state = this.getStateAtTime(time, context);

    // 使用 BaseElement 的通用方法转换尺寸
    // state.x 和 state.y 已经在 getStateAtTime 中转换了单位
    const { width, height } = this.convertSize(state.width, state.height, context);
    const x = state.x || 0;
    const y = state.y || 0;

    // 使用 BaseElement 的通用方法计算位置（包括 anchor 对齐）
    const { x: rectX, y: rectY } = this.calculatePosition(state, context, {
      elementWidth: width,
      elementHeight: height,
    });

    // 创建矩形
    let rect;
    if (state.borderRadius > 0) {
      // 圆角矩形 - Paper.js 需要手动创建圆角路径
      const r = Math.min(state.borderRadius, width / 2, height / 2);
      const path = new p.Path();
      
      // 创建圆角矩形路径（顺时针）
      // 从左上角开始
      path.moveTo(new p.Point(rectX + r, rectY));
      // 上边
      path.lineTo(new p.Point(rectX + width - r, rectY));
      // 右上角圆弧
      path.arcTo(new p.Point(rectX + width, rectY + r));
      // 右边
      path.lineTo(new p.Point(rectX + width, rectY + height - r));
      // 右下角圆弧
      path.arcTo(new p.Point(rectX + width - r, rectY + height));
      // 下边
      path.lineTo(new p.Point(rectX + r, rectY + height));
      // 左下角圆弧
      path.arcTo(new p.Point(rectX, rectY + height - r));
      // 左边
      path.lineTo(new p.Point(rectX, rectY + r));
      // 左上角圆弧
      path.arcTo(new p.Point(rectX + r, rectY));
      path.closePath();
      rect = path;
    } else {
      // 普通矩形
      rect = new p.Path.Rectangle({
        rectangle: new p.Rectangle(rectX, rectY, width, height),
      });
    }

    // 处理填充颜色（支持 fillColor 和 bgcolor）
    const fillColor = state.fillColor || state.bgcolor || '#ffffff';
    rect.fillColor = fillColor;

    // 边框（支持 strokeColor 和 borderColor）
    const strokeColor = state.strokeColor || state.borderColor;
    const strokeWidth = state.strokeWidth || state.borderWidth || 0;
    if (strokeWidth > 0 && strokeColor) {
      rect.strokeColor = strokeColor;
      rect.strokeWidth = strokeWidth;
    }

    // 使用统一的变换方法应用动画
    // 优化：对于没有动画的静态矩形，直接设置 opacity，避免不必要的变换计算
    if (this.animations.length === 0 && state.opacity === undefined) {
      // 没有动画，直接设置默认透明度
      rect.opacity = 1;
    } else {
      // 有动画或需要设置透明度，使用统一的变换方法
      this.applyTransform(rect, state, {
        pivot: new p.Point(x, y), // 使用矩形中心作为变换中心
        paperInstance: paperInstance,
      });
    }

    // 添加到 layer
    layer.addChild(rect);
    
    // 调用 onRender 回调（传递 paperItem 和 paperInstance）
    this._callOnRender(time, rect, paperInstance);
    
    return rect;
  }

}

exports.RectElement = RectElement;
//# sourceMappingURL=RectElement.cjs.map
