@shopify/react-native-skia
Version:
High-performance React Native Graphics using Skia
82 lines (81 loc) • 2.83 kB
JavaScript
;
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 = (Skia, box, dx, dy, tx = 0, ty = 0) => 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 = (Skia, box, dx, dy, tx = 0, ty = 0) => 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({
canvas,
paint
}) {
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