@nativescript-community/ui-svg
Version:
Adds support for SVGs in your NativeScript apps.
197 lines • 8.37 kB
JavaScript
import { File, Font, ImageAsset, ImageSource, Utils, knownFolders, path } from '@nativescript/core';
import { SVGView as SVGViewBase, srcProperty } from './index.common';
export function getSVG(src) {
if (!src) {
return null;
}
let imagePath;
if (src instanceof File) {
return com.caverock.androidsvg.SVG.getFromInputStream(new java.io.FileInputStream(new java.io.File(src.path)));
}
else if (src instanceof ImageAsset) {
imagePath = src.android;
}
else {
imagePath = src;
}
if (Utils.isFileOrResourcePath(imagePath)) {
const context = Utils.android.getApplicationContext();
const res = context.getResources();
if (!res) {
return null;
}
if (imagePath.indexOf(Utils.RESOURCE_PREFIX) === 0) {
const resName = imagePath.substr(Utils.RESOURCE_PREFIX.length);
const identifier = res.getIdentifier(resName, 'drawable', Utils.ad.getApplication().getPackageName());
return com.caverock.androidsvg.SVG.getFromResource(res, identifier);
}
else if (imagePath.indexOf('~/') === 0) {
const strPath = path.join(knownFolders.currentApp().path, imagePath.replace('~/', ''));
const javaFile = new java.io.File(strPath);
const stream = new java.io.FileInputStream(javaFile);
return com.caverock.androidsvg.SVG.getFromInputStream(stream);
}
else if (imagePath.indexOf('/') === 0) {
const javaFile = new java.io.File(imagePath);
const stream = new java.io.FileInputStream(javaFile);
return com.caverock.androidsvg.SVG.getFromInputStream(stream);
}
}
return com.caverock.androidsvg.SVG.getFromString(imagePath);
}
var SVGExternalFileResolver = /** @class */ (function (_super) {
__extends(SVGExternalFileResolver, _super);
function SVGExternalFileResolver() {
return _super !== null && _super.apply(this, arguments) || this;
}
SVGExternalFileResolver.prototype.resolveFont = function (fontFamily, fontWeight, fontStyle) {
if (fontFamily) {
fontFamily = fontFamily.replace(/\\\//, '/');
}
return new Font(fontFamily, undefined, fontStyle.toLowerCase(), (fontWeight + '')).getAndroidTypeface();
};
SVGExternalFileResolver.prototype.resolveImage = function (filename) {
var bitmap = null;
if (Utils.isDataURI(filename)) {
var base64Data = filename.split(',')[1];
if (base64Data !== undefined) {
bitmap = ImageSource.fromBase64(base64Data);
}
}
else if (Utils.isFileOrResourcePath(filename)) {
if (filename.indexOf(Utils.RESOURCE_PREFIX) !== 0) {
if (filename.indexOf('~/') === 0) {
filename = path.join(knownFolders.currentApp().path, filename.replace('~/', ''));
}
}
bitmap = ImageSource.fromFileOrResourceSync(filename);
}
return bitmap;
};
return SVGExternalFileResolver;
}(com.caverock.androidsvg.SVGExternalFileResolver));
com.caverock.androidsvg.SVG.registerExternalFileResolver(new SVGExternalFileResolver());
var MySVGView = /** @class */ (function (_super) {
__extends(MySVGView, _super);
function MySVGView(context) {
var _this = _super.call(this, context) || this;
_this.renderOptions = new com.caverock.androidsvg.RenderOptions();
return _this;
}
MySVGView.prototype.onDraw = function (canvas) {
var svg = this._svg;
if (!svg) {
return;
}
this.renderOptions.viewPort(0, 0, canvas.getWidth(), canvas.getHeight());
// if (this._blendingMode !== undefined) {
// const picture = svg.renderToPicture(this.renderOptions);
// }
svg.renderToCanvas(canvas, this.renderOptions);
};
MySVGView.prototype.setSvg = function (svg) {
this._svg = svg;
if (svg) {
svg.setDocumentWidth('100%');
svg.setDocumentHeight('100%');
}
this.invalidate();
};
MySVGView.prototype.setRatio = function (ratio) {
this.renderOptions.preserveAspectRatio(ratio);
};
// _imageSourceAffectsLayout = false;
MySVGView.prototype.onMeasure = function (widthMeasureSpec, heightMeasureSpec) {
var svg = this._svg;
if (!svg) {
_super.prototype.onMeasure.call(this, widthMeasureSpec, heightMeasureSpec);
return;
}
// We don't call super because we measure native view with specific size.
var width = Utils.layout.getMeasureSpecSize(widthMeasureSpec);
var widthMode = Utils.layout.getMeasureSpecMode(widthMeasureSpec);
var height = Utils.layout.getMeasureSpecSize(heightMeasureSpec);
var heightMode = Utils.layout.getMeasureSpecMode(heightMeasureSpec);
var image = svg.getDocumentViewBox();
// const image = this.nativeViewProtected.image;
// const measureWidth = Math.max(nativeWidth, this.effectiveMinWidth);
// const measureHeight = Math.max(nativeHeight, this.effectiveMinHeight);
var finiteWidth = widthMode === Utils.layout.EXACTLY;
var finiteHeight = heightMode === Utils.layout.EXACTLY;
// this._imageSourceAffectsLayout = !finiteWidth || !finiteHeight;
if (image || this.aspectRatio > 0) {
var nativeWidth = image ? Utils.layout.toDevicePixels(image.width()) : 0;
var nativeHeight = image ? Utils.layout.toDevicePixels(image.height()) : 0;
var imgRatio = nativeWidth / nativeHeight;
var ratio = this.aspectRatio || imgRatio;
if (finiteWidth || finiteHeight) {
if (!finiteWidth) {
widthMeasureSpec = Utils.layout.makeMeasureSpec(height * ratio, Utils.layout.EXACTLY);
}
if (!finiteHeight) {
heightMeasureSpec = Utils.layout.makeMeasureSpec(width / ratio, Utils.layout.EXACTLY);
}
}
else {
var viewRatio = width / (height || 1000000000000);
if (imgRatio > viewRatio) {
var w = Math.min(nativeWidth, width);
widthMeasureSpec = Utils.layout.makeMeasureSpec(w, Utils.layout.EXACTLY);
heightMeasureSpec = Utils.layout.makeMeasureSpec(w / ratio, Utils.layout.EXACTLY);
}
else {
var h = Math.min(nativeHeight, height);
heightMeasureSpec = Utils.layout.makeMeasureSpec(h, Utils.layout.EXACTLY);
widthMeasureSpec = Utils.layout.makeMeasureSpec(h * ratio, Utils.layout.EXACTLY);
}
}
}
_super.prototype.onMeasure.call(this, widthMeasureSpec, heightMeasureSpec);
};
return MySVGView;
}(android.view.View));
export class SVGView extends SVGViewBase {
createNativeView() {
const view = new MySVGView(this._context);
// if (getSDK() >= 28) {
// view.setLayerType(android.view.View.LAYER_TYPE_HARDWARE, null);
// } else {
// view.setLayerType(android.view.View.LAYER_TYPE_SOFTWARE, null);
// }
return view;
}
async handleSrc(src) {
if (src instanceof Promise) {
try {
this.handleSrc(await src);
}
catch (error) {
this.handleSrc(null);
}
return;
}
else if (typeof src === 'function') {
let newSrc = src();
if (newSrc instanceof Promise) {
try {
await newSrc;
}
catch (error) {
newSrc = null;
}
}
this.handleSrc(newSrc);
return;
}
this.nativeViewProtected.setSvg(getSVG(src));
}
[srcProperty.setNative](value) {
this.handleSrc(value);
// this.nativeViewProtected.image = getSVGKImage(value);
// if (this._imageSourceAffectsLayout) {
// this._imageSourceAffectsLayout = false;
// this.requestLayout();
// }
}
}
//# sourceMappingURL=index.android.js.map