@shopify/react-native-skia/lib/commonjs/dom/nodes/drawings/Box.js

High-performance React Native Graphics using Skia

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.BoxShadowNode = exports.BoxNode = void 0;

var _types = require("../../../skia/types");

var _types2 = require("../../types");

var _Node = require("../Node");

var _RenderNode = require("../RenderNode");

const inflate = function (Skia, box, dx, dy) {
  let tx = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
  let ty = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0;
  return Skia.RRectXY(Skia.XYWHRect(box.rect.x - dx + tx, box.rect.y - dy + ty, box.rect.width + 2 * dx, box.rect.height + 2 * dy), box.rx + dx, box.ry + dy);
};

const deflate = function (Skia, box, dx, dy) {
  let tx = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
  let ty = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0;
  return inflate(Skia, box, -dx, -dy, tx, ty);
};

class BoxShadowNode extends _Node.JsiDeclarationNode {
  constructor(ctx, props) {
    super(ctx, _types2.DeclarationType.Unknown, _types2.NodeType.BoxShadow, props);
  }

  decorate(_ctx) {// do nothing
  }

  materialize() {
    return this.props;
  }

}

exports.BoxShadowNode = BoxShadowNode;

class BoxNode extends _RenderNode.JsiRenderNode {
  constructor(ctx, props) {
    super(ctx, _types2.NodeType.Box, props);
  }

  renderNode(_ref) {
    let {
      canvas,
      paint
    } = _ref;
    const {
      box: defaultBox
    } = this.props;
    const opacity = paint.getAlphaf();
    const box = (0, _types.isRRect)(defaultBox) ? defaultBox : this.Skia.RRectXY(defaultBox, 0, 0);

    const shadows = this._children.map(node => {
      if (node instanceof BoxShadowNode) {
        return node.materialize();
      }

      return null;
    }).filter(n => n !== null);

    shadows.filter(shadow => !shadow.inner).map(shadow => {
      const {
        color = "black",
        blur,
        spread = 0,
        dx = 0,
        dy = 0
      } = shadow;
      const lPaint = this.Skia.Paint();
      lPaint.setColor(this.Skia.Color(color));
      lPaint.setAlphaf(paint.getAlphaf() * opacity);
      lPaint.setMaskFilter(this.Skia.MaskFilter.MakeBlur(_types.BlurStyle.Normal, blur, true));
      canvas.drawRRect(inflate(this.Skia, box, spread, spread, dx, dy), lPaint);
    });
    canvas.drawRRect(box, paint);
    shadows.filter(shadow => shadow.inner).map(shadow => {
      const {
        color = "black",
        blur,
        spread = 0,
        dx = 0,
        dy = 0
      } = shadow;
      const delta = this.Skia.Point(10 + Math.abs(dx), 10 + Math.abs(dy));
      canvas.save();
      canvas.clipRRect(box, _types.ClipOp.Intersect, false);
      const lPaint = this.Skia.Paint();
      lPaint.setColor(this.Skia.Color(color));
      lPaint.setAlphaf(paint.getAlphaf() * opacity);
      lPaint.setMaskFilter(this.Skia.MaskFilter.MakeBlur(_types.BlurStyle.Normal, blur, true));
      const inner = deflate(this.Skia, box, spread, spread, dx, dy);
      const outer = inflate(this.Skia, box, delta.x, delta.y);
      canvas.drawDRRect(outer, inner, lPaint);
      canvas.restore();
    });
  }

}

exports.BoxNode = BoxNode;
//# sourceMappingURL=Box.js.map