');
- viewportColumn.appendChild(this.$viewport.get(0));
-
- if (trackView.track.height) {
- this.$viewport.get(0).style.height = `${trackView.track.height}px`;
- }
-
- // Create an alert dialog for the sequence track to copy ref sequence to.
- if (trackView.track instanceof SequenceTrack) {
- this.alert = new AlertDialog$1(this.$viewport.get(0));
- }
-
- this.contentTop = 0;
- this.contentHeight = this.$viewport.height();
-
-
- this.$viewport.width(width);
-
- this.initializationHelper();
-
- }
-
- initializationHelper() {
-
- }
-
- showMessage(message) {
- if (!this.messageDiv) {
- this.messageDiv = document.createElement('div');
- this.messageDiv.className = 'igv-viewport-message';
- //this.contentDiv.append(this.messageDiv)
- this.$viewport.append($$1(this.messageDiv));
- }
- this.messageDiv.textContent = message;
- this.messageDiv.style.display = 'inline-block';
- }
-
- hideMessage(message) {
- if (this.messageDiv)
- this.messageDiv.style.display = 'none';
- }
-
- setTrackLabel(label) {
- }
-
- startSpinner() {
- }
-
- stopSpinner() {
- }
-
- checkZoomIn() {
- return true
- }
-
- shift() {
- }
-
- setTop(contentTop) {
-
- this.contentTop = contentTop;
- this.$viewport.height();
-
- //this.$content.css('top', `${contentTop}px`)
- //
- // if (undefined === this.canvasVerticalRange || this.canvasVerticalRange.bottom < viewBottom || this.canvasVerticalRange.top > viewTop) {
- // console.log("Repaint " + this.canvasVerticalRange)
- // this.repaint()
- // }
-
- }
-
- async loadFeatures() {
- return undefined
- }
-
- clearCache() {
-
- }
-
- async repaint() {
- }
-
- draw(drawConfiguration, features, roiFeatures) {
- console.log('Viewport - draw(drawConfiguration, features, roiFeatures)');
- }
-
- checkContentHeight(features) {
-
- let track = this.trackView.track;
- features = features || this.cachedFeatures;
- if ("FILL" === track.displayMode) {
- this.setContentHeight(this.$viewport.height());
- } else if (typeof track.computePixelHeight === 'function') {
- if (features && features.length > 0) {
- let requiredContentHeight = track.computePixelHeight(features);
- //let currentContentHeight = this.$content.height()
- let currentContentHeight = this.contentHeight;
- if (requiredContentHeight !== currentContentHeight) {
- this.setContentHeight(requiredContentHeight);
- }
- }
- }
- }
-
- getContentHeight() {
- //return this.$content.height()
- return this.contentHeight
- }
-
- setContentHeight(contentHeight) {
- this.contentHeight = contentHeight;
- }
-
- isLoading() {
- return false
- }
-
- saveSVG() {
-
- }
-
- isVisible() {
- return this.$viewport.width()
- }
-
- setWidth(width) {
- this.$viewport.width(width);
- }
-
- getWidth() {
- return this.$viewport.width()
- }
-
- getContentTop() {
- return this.contentTop
- }
-
- containsPosition(chr, position) {
- console.log('Viewport - containsPosition(chr, position)');
- }
-
- addMouseHandlers() {
- }
-
- removeMouseHandlers() {
- }
-
- /**
- * Called when the associated track is removed. Do any needed cleanup here.
- */
- dispose() {
-
- if (this.popover) {
- this.popover.dispose();
- }
-
- this.$viewport.get(0).remove();
-
- // Null out all properties -- this should not be neccessary, but just in case there is a
- // reference to self somewhere we want to free memory.
- for (let key of Object.keys(this)) {
- this[key] = undefined;
- }
- }
-
-}
-
-/*!!
- * Canvas 2 Svg v1.0.19
- * A low level canvas to SVG converter. Uses a mock canvas context to build an SVG document.
- *
- * Licensed under the MIT license:
- * http://www.opensource.org/licenses/mit-license.php
- *
- * Author:
- * Kerry Liu
- *
- * Copyright (c) 2014 Gliffy Inc.
- */
-
-//helper function to format a string
-function format(str, args) {
- var keys = Object.keys(args), i;
- for (i = 0; i < keys.length; i++) {
- str = str.replace(new RegExp("\\{" + keys[i] + "\\}", "gi"), args[keys[i]]);
- }
- return str
-}
-
-//helper function that generates a random string
-function randomString(holder) {
- var chars, randomstring, i;
- if (!holder) {
- throw new Error("cannot create a random attribute name for an undefined object")
- }
- chars = "ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
- randomstring = "";
- do {
- randomstring = "";
- for (i = 0; i < 12; i++) {
- randomstring += chars[Math.floor(Math.random() * chars.length)];
- }
- } while (holder[randomstring])
- return randomstring
-}
-
-//helper function to map named to numbered entities
-function createNamedToNumberedLookup(items, radix) {
- var i, entity, lookup = {}, base10;
- items = items.split(',');
- radix = radix || 10;
- // Map from named to numbered entities.
- for (i = 0; i < items.length; i += 2) {
- entity = '&' + items[i + 1] + ';';
- base10 = parseInt(items[i], radix);
- lookup[entity] = '&#' + base10 + ';';
- }
- //FF and IE need to create a regex from hex values ie == \xa0
- lookup["\\xa0"] = ' ';
- return lookup
-}
-
-//helper function to map canvas-textAlign to svg-textAnchor
-function getTextAnchor(textAlign) {
- //TODO: support rtl languages
- var mapping = {"left": "start", "right": "end", "center": "middle", "start": "start", "end": "end"};
- return mapping[textAlign] || mapping.start
-}
-
-//helper function to map canvas-textBaseline to svg-dominantBaseline
-function getDominantBaseline(textBaseline) {
- //INFO: not supported in all browsers
- var mapping = {
- "alphabetic": "alphabetic",
- "hanging": "hanging",
- "top": "text-before-edge",
- "bottom": "text-after-edge",
- "middle": "central"
- };
- return mapping[textBaseline] || mapping.alphabetic
-}
-
-
-/**
- * Return a new normalized vector of given vector
- */
-function normalize(vector) {
- var len = Math.sqrt(vector[0] * vector[0] + vector[1] * vector[1]);
- return [vector[0] / len, vector[1] / len]
-}
-
-
-function intersectRect(rect1, rect2) {
- return (rect1.x < rect2.x + rect2.width &&
- rect1.x + rect1.width > rect2.x &&
- rect1.y < rect2.y + rect2.height &&
- rect1.y + rect1.height > rect2.y)
-}
-
-
-// Unpack entities lookup where the numbers are in radix 32 to reduce the size
-// entity mapping courtesy of tinymce
-const namedEntities = createNamedToNumberedLookup(
- '50,nbsp,51,iexcl,52,cent,53,pound,54,curren,55,yen,56,brvbar,57,sect,58,uml,59,copy,' +
- '5a,ordf,5b,laquo,5c,not,5d,shy,5e,reg,5f,macr,5g,deg,5h,plusmn,5i,sup2,5j,sup3,5k,acute,' +
- '5l,micro,5m,para,5n,middot,5o,cedil,5p,sup1,5q,ordm,5r,raquo,5s,frac14,5t,frac12,5u,frac34,' +
- '5v,iquest,60,Agrave,61,Aacute,62,Acirc,63,Atilde,64,Auml,65,Aring,66,AElig,67,Ccedil,' +
- '68,Egrave,69,Eacute,6a,Ecirc,6b,Euml,6c,Igrave,6d,Iacute,6e,Icirc,6f,Iuml,6g,ETH,6h,Ntilde,' +
- '6i,Ograve,6j,Oacute,6k,Ocirc,6l,Otilde,6m,Ouml,6n,times,6o,Oslash,6p,Ugrave,6q,Uacute,' +
- '6r,Ucirc,6s,Uuml,6t,Yacute,6u,THORN,6v,szlig,70,agrave,71,aacute,72,acirc,73,atilde,74,auml,' +
- '75,aring,76,aelig,77,ccedil,78,egrave,79,eacute,7a,ecirc,7b,euml,7c,igrave,7d,iacute,7e,icirc,' +
- '7f,iuml,7g,eth,7h,ntilde,7i,ograve,7j,oacute,7k,ocirc,7l,otilde,7m,ouml,7n,divide,7o,oslash,' +
- '7p,ugrave,7q,uacute,7r,ucirc,7s,uuml,7t,yacute,7u,thorn,7v,yuml,ci,fnof,sh,Alpha,si,Beta,' +
- 'sj,Gamma,sk,Delta,sl,Epsilon,sm,Zeta,sn,Eta,so,Theta,sp,Iota,sq,Kappa,sr,Lambda,ss,Mu,' +
- 'st,Nu,su,Xi,sv,Omicron,t0,Pi,t1,Rho,t3,Sigma,t4,Tau,t5,Upsilon,t6,Phi,t7,Chi,t8,Psi,' +
- 't9,Omega,th,alpha,ti,beta,tj,gamma,tk,delta,tl,epsilon,tm,zeta,tn,eta,to,theta,tp,iota,' +
- 'tq,kappa,tr,lambda,ts,mu,tt,nu,tu,xi,tv,omicron,u0,pi,u1,rho,u2,sigmaf,u3,sigma,u4,tau,' +
- 'u5,upsilon,u6,phi,u7,chi,u8,psi,u9,omega,uh,thetasym,ui,upsih,um,piv,812,bull,816,hellip,' +
- '81i,prime,81j,Prime,81u,oline,824,frasl,88o,weierp,88h,image,88s,real,892,trade,89l,alefsym,' +
- '8cg,larr,8ch,uarr,8ci,rarr,8cj,darr,8ck,harr,8dl,crarr,8eg,lArr,8eh,uArr,8ei,rArr,8ej,dArr,' +
- '8ek,hArr,8g0,forall,8g2,part,8g3,exist,8g5,empty,8g7,nabla,8g8,isin,8g9,notin,8gb,ni,8gf,prod,' +
- '8gh,sum,8gi,minus,8gn,lowast,8gq,radic,8gt,prop,8gu,infin,8h0,ang,8h7,and,8h8,or,8h9,cap,8ha,cup,' +
- '8hb,int,8hk,there4,8hs,sim,8i5,cong,8i8,asymp,8j0,ne,8j1,equiv,8j4,le,8j5,ge,8k2,sub,8k3,sup,8k4,' +
- 'nsub,8k6,sube,8k7,supe,8kl,oplus,8kn,otimes,8l5,perp,8m5,sdot,8o8,lceil,8o9,rceil,8oa,lfloor,8ob,' +
- 'rfloor,8p9,lang,8pa,rang,9ea,loz,9j0,spades,9j3,clubs,9j5,hearts,9j6,diams,ai,OElig,aj,oelig,b0,' +
- 'Scaron,b1,scaron,bo,Yuml,m6,circ,ms,tilde,802,ensp,803,emsp,809,thinsp,80c,zwnj,80d,zwj,80e,lrm,' +
- '80f,rlm,80j,ndash,80k,mdash,80o,lsquo,80p,rsquo,80q,sbquo,80s,ldquo,80t,rdquo,80u,bdquo,810,dagger,' +
- '811,Dagger,81g,permil,81p,lsaquo,81q,rsaquo,85c,euro', 32);
-
-
-//Some basic mappings for attributes and default values.
-const STYLES = {
- "strokeStyle": {
- svgAttr: "stroke", //corresponding svg attribute
- canvas: "#000000", //canvas default
- svg: "none", //svg default
- apply: "stroke" //apply on stroke() or fill()
- },
- "fillStyle": {
- svgAttr: "fill",
- canvas: "#000000",
- svg: null, //svg default is black, but we need to special case this to handle canvas stroke without fill
- apply: "fill"
- },
- "lineCap": {
- svgAttr: "stroke-linecap",
- canvas: "butt",
- svg: "butt",
- apply: "stroke"
- },
- "lineJoin": {
- svgAttr: "stroke-linejoin",
- canvas: "miter",
- svg: "miter",
- apply: "stroke"
- },
- "miterLimit": {
- svgAttr: "stroke-miterlimit",
- canvas: 10,
- svg: 4,
- apply: "stroke"
- },
- "lineWidth": {
- svgAttr: "stroke-width",
- canvas: 1,
- svg: 1,
- apply: "stroke"
- },
- "globalAlpha": {
- svgAttr: "opacity",
- canvas: 1,
- svg: 1,
- apply: "fill stroke"
- },
- "font": {
- //font converts to multiple svg attributes, there is custom logic for this
- canvas: "10px sans-serif"
- },
- "shadowColor": {
- canvas: "#000000"
- },
- "shadowOffsetX": {
- canvas: 0
- },
- "shadowOffsetY": {
- canvas: 0
- },
- "shadowBlur": {
- canvas: 0
- },
- "textAlign": {
- canvas: "start"
- },
- "textBaseline": {
- canvas: "alphabetic"
- },
- "lineDash": {
- svgAttr: "stroke-dasharray",
- canvas: [],
- svg: null,
- apply: "stroke"
- }
-};
-
-/**
- *
- * @param gradientNode - reference to the gradient
- * @constructor
- */
-class CanvasGradient {
- constructor(gradientNode, ctx) {
- this.__root = gradientNode;
- this.__ctx = ctx;
- }
-
- /**
- * Adds a color stop to the gradient root
- */
- addColorStop(offset, color) {
- var stop = this.__ctx.__createElement("stop"), regex, matches;
- stop.setAttribute("offset", offset);
- if (color && color.indexOf("rgba") !== -1) {
- //separate alpha value, since webkit can't handle it
- regex = /rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d?\.?\d*)\s*\)/gi;
- matches = regex.exec(color);
- stop.setAttribute("stop-color", format("rgb({r},{g},{b})", {r: matches[1], g: matches[2], b: matches[3]}));
- stop.setAttribute("stop-opacity", matches[4]);
- } else {
- stop.setAttribute("stop-color", color);
- }
- this.__root.appendChild(stop);
- }
-}
-
-class CanvasPattern {
- constructor(pattern, ctx) {
- this.__root = pattern;
- this.__ctx = ctx;
- }
-}
-
-/**
- * The mock canvas context
- * @param config - options include:
- * ctx - existing Context2D to wrap around
- * width - width of your canvas (defaults to 500)
- * height - height of your canvas (defaults to 500)
- * enableMirroring - enables canvas mirroring (get image data) (defaults to false)
- * document - the document object (defaults to the current document)
- */
-class ctx {
- constructor(config) {
-
- if (!(this instanceof ctx)) {
- //did someone call this without new?
- return new ctx(config)
- }
-
- // clone config
- this.config = config;
-
- //setup options
- this.width = config.width;
- this.height = config.height;
- this.enableMirroring = config.enableMirroring || false;
-
- this.canvas = this; ///point back to this instance!
- this.__document = document;
-
- // allow passing in an existing context to wrap around
- // if a context is passed in, we know a canvas already exist
- if (config.ctx) {
- this.__ctx = config.ctx;
- } else {
- this.__canvas = this.__document.createElement("canvas");
- this.__ctx = this.__canvas.getContext("2d");
- }
-
- // give this canvas a type
- this.isSVG = true;
-
- this.__setDefaultStyles();
- this.__stack = [this.__getStyleState()];
- this.__groupStack = [];
-
- // root svg element
- this.__root = this.__createElement("svg");
- this.__root.setAttribute("width", this.width);
- this.__root.setAttribute("height", this.height);
-
- // allow contents to overflow svg bbox
- this.__root.setAttribute('overflow', 'visible');
-
- // viewbox
- if (config.viewbox) {
- const str = config.viewbox.x + ' ' + config.viewbox.y + ' ' + config.viewbox.width + ' ' + config.viewbox.height;
- this.__root.setAttribute("viewBox", str);
-
- this.viewbox = config.viewbox;
- }
-
- // make sure we don't generate the same ids in defs
- this.__ids = {};
-
- // defs
- this.__defs = this.__createElement("defs");
- this.__root.appendChild(this.__defs);
-
- this.multiLocusGap = config.multiLocusGap;
-
- // svg background color
- let backdropConfig =
- {
- id: 'svg_output_backdrop',
- width: '100%',
- height: '100%',
- fill: config.backdropColor || 'white'
- };
-
- let backdropRect = this.__createElement('rect', backdropConfig);
- this.__root.appendChild(backdropRect);
-
- // root group
- this.__rootGroup = this.__createElement('g', {id: 'root-group'});
- this.__root.appendChild(this.__rootGroup);
-
- // point current element to root group
- this.__currentElement = this.__rootGroup;
- }
-
- setWidth(width) {
-
- this.width = width;
- this.__root.setAttribute("width", this.width);
-
- const str = this.config.viewbox.x + ' ' + this.config.viewbox.y + ' ' + width + ' ' + this.config.viewbox.height;
- this.__root.setAttribute("viewBox", str);
-
- };
-
- setHeight(height) {
-
- this.height = height;
- this.__root.setAttribute("height", this.height);
-
- const str = this.config.viewbox.x + ' ' + this.config.viewbox.y + ' ' + this.config.viewbox.width + ' ' + height;
- this.__root.setAttribute("viewBox", str);
-
- };
-
- /**
- * Creates the specified svg element
- * @private
- */
- __createElement(elementName, properties, resetFill) {
-
- if (typeof properties === "undefined") {
- properties = {};
- }
-
- let element = this.__document.createElementNS("http://www.w3.org/2000/svg", elementName);
-
- if (resetFill) {
- //if fill or stroke is not specified, the svg element should not display. By default SVG's fill is black.
- element.setAttribute("fill", "none");
- element.setAttribute("stroke", "none");
- }
-
- for (let key of Object.keys(properties)) {
- element.setAttribute(key, properties[key]);
- }
-
- return element
- };
-
- /**
- * Applies default canvas styles to the context
- * @private
- */
- __setDefaultStyles() {
- //default 2d canvas context properties see:http://www.w3.org/TR/2dcontext/
- var keys = Object.keys(STYLES), i, key;
- for (i = 0; i < keys.length; i++) {
- key = keys[i];
- this[key] = STYLES[key].canvas;
- }
- };
-
- /**
- * Applies styles on restore
- * @param styleState
- * @private
- */
- __applyStyleState(styleState) {
- var keys = Object.keys(styleState), i, key;
- for (i = 0; i < keys.length; i++) {
- key = keys[i];
- this[key] = styleState[key];
- }
- };
-
- /**
- * Gets the current style state
- * @return {Object}
- * @private
- */
- __getStyleState() {
- var i, styleState = {}, keys = Object.keys(STYLES), key;
- for (i = 0; i < keys.length; i++) {
- key = keys[i];
- styleState[key] = this[key];
- }
- return styleState
- };
-
- /**
- * Apples the current styles to the current SVG element. On "ctx.fill" or "ctx.stroke"
- * @param type
- * @private
- */
- __applyStyleToCurrentElement(type) {
- var currentElement = this.__currentElement;
- var currentStyleGroup = this.__currentElementsToStyle;
- if (currentStyleGroup) {
- currentElement.setAttribute(type, "");
- currentElement = currentStyleGroup.element;
- currentStyleGroup.children.forEach(function (node) {
- node.setAttribute(type, "");
- });
- }
-
- var keys = Object.keys(STYLES), i, style, value, id, regex, matches;
- for (i = 0; i < keys.length; i++) {
- style = STYLES[keys[i]];
- value = this[keys[i]];
- if (style.apply) {
- //is this a gradient or pattern?
- if (value instanceof CanvasPattern) {
- //pattern
- if (value.__ctx) {
- //copy over defs
- while (value.__ctx.__defs.childNodes.length) {
- id = value.__ctx.__defs.childNodes[0].getAttribute("id");
- this.__ids[id] = id;
- this.__defs.appendChild(value.__ctx.__defs.childNodes[0]);
- }
- }
- currentElement.setAttribute(style.apply, format("url(#{id})", {id: value.__root.getAttribute("id")}));
- } else if (value instanceof CanvasGradient) {
- //gradient
- currentElement.setAttribute(style.apply, format("url(#{id})", {id: value.__root.getAttribute("id")}));
- } else if (style && style.apply.indexOf(type) !== -1 && style.svg !== value) {
- if ((style.svgAttr === "stroke" || style.svgAttr === "fill") && value && value.indexOf("rgba") !== -1) {
- //separate alpha value, since illustrator can't handle it
- regex = /rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d?\.?\d*)\s*\)/gi;
- matches = regex.exec(value);
- currentElement.setAttribute(style.svgAttr, format("rgb({r},{g},{b})", {
- r: matches[1],
- g: matches[2],
- b: matches[3]
- }));
- //should take globalAlpha here
- var opacity = matches[4];
- var globalAlpha = this.globalAlpha;
- if (globalAlpha != null) {
- opacity *= globalAlpha;
- }
- currentElement.setAttribute(style.svgAttr + "-opacity", opacity);
- } else {
- var attr = style.svgAttr;
- if (keys[i] === 'globalAlpha') {
- attr = type + '-' + style.svgAttr;
- if (currentElement.getAttribute(attr)) {
- //fill-opacity or stroke-opacity has already been set by stroke or fill.
- continue
- }
- }
- //otherwise only update attribute if right type, and not svg default
- currentElement.setAttribute(attr, value);
- }
- }
- }
- }
- };
-
- /**
- * Will return the closest group or svg node. May return the current element.
- * @private
- */
- __closestGroupOrSvg(node) {
- node = node || this.__currentElement;
- if (node.nodeName === "g" || node.nodeName === "svg") {
- return node
- } else {
- return this.__closestGroupOrSvg(node.parentNode)
- }
- };
-
- /**
- * Returns the serialized value of the svg so far
- * @param fixNamedEntities - Standalone SVG doesn't support named entities, which document.createTextNode encodes.
- * If true, we attempt to find all named entities and encode it as a numeric entity.
- * @return serialized svg
- */
- getSerializedSvg(fixNamedEntities) {
- var serialized = new XMLSerializer().serializeToString(this.__root),
- keys, i, key, value, regexp;
-
- //IE search for a duplicate xmnls because they didn't implement setAttributeNS correctly
- // xmlns = /xmlns="http:\/\/www\.w3\.org\/2000\/svg".+xmlns="http:\/\/www\.w3\.org\/2000\/svg/gi;
- // if (xmlns.test(serialized)) {
- // serialized = serialized.replace('xmlns="http://www.w3.org/2000/svg','xmlns:xlink="http://www.w3.org/1999/xlink');
- // }
-
- if (fixNamedEntities) {
- keys = Object.keys(namedEntities);
- //loop over each named entity and replace with the proper equivalent.
- for (i = 0; i < keys.length; i++) {
- key = keys[i];
- value = namedEntities[key];
- regexp = new RegExp(key, "gi");
- if (regexp.test(serialized)) {
- serialized = serialized.replace(regexp, value);
- }
- }
- }
-
- return serialized
- };
-
-
- /**
- * Returns the root svg
- * @return
- */
- getSvg() {
- return this.__root
- };
-
- /**
- * Will generate a group tag.
- */
- saveWithTranslationAndClipRect(id, tx, ty, width, height, clipYOffset) {
-
- // clip rect
- const clip_id = `${id}_clip_rect`;
- let clipPath = this.__createElement('clipPath', {id: clip_id});
-
- this.__defs.appendChild(clipPath);
-
- const config =
- {
- x: '0',
- y: clipYOffset.toString(),
- width: width.toString(),
- height: height.toString()
- };
-
- clipPath.appendChild(this.__createElement('rect', config));
-
- const group = this.__createElement("g");
- group.setAttribute('transform', format('translate({x},{y})', {x: tx, y: ty}));
- group.setAttribute('clip-path', format('url(#{id})', {id: clip_id}));
-
- const parent = this.__closestGroupOrSvg();
- parent.appendChild(group);
- this.__groupStack.push(parent);
-
- this.__currentElement = group;
- this.__stack.push(this.__getStyleState());
- };
-
- save() {
- var group = this.__createElement("g");
- var parent = this.__closestGroupOrSvg();
- this.__groupStack.push(parent);
- parent.appendChild(group);
- this.__currentElement = group;
- this.__stack.push(this.__getStyleState());
- };
-
- /**
- * Sets current element to parent, or just root if already root
- */
- restore() {
- this.__currentElement = this.__groupStack.pop();
- this.__currentElementsToStyle = null;
- //Clearing canvas will make the poped group invalid, currentElement is set to the root group node.
- if (!this.__currentElement) {
- this.__currentElement = this.__root.childNodes[1];
- }
- var state = this.__stack.pop();
- this.__applyStyleState(state);
- };
-
- /**
- * Helper method to add transform
- * @private
- */
- __addTransform(t) {
- //if the current element has siblings, add another group
- var parent = this.__closestGroupOrSvg();
- if (parent.childNodes.length > 0) {
- if (this.__currentElement.nodeName === "path") {
- if (!this.__currentElementsToStyle) this.__currentElementsToStyle = {element: parent, children: []};
- this.__currentElementsToStyle.children.push(this.__currentElement);
- this.__applyCurrentDefaultPath();
- }
-
- var group = this.__createElement("g");
- parent.appendChild(group);
- this.__currentElement = group;
- }
-
- var transform = this.__currentElement.getAttribute("transform");
- if (transform) {
- transform += " ";
- } else {
- transform = "";
- }
- transform += t;
- this.__currentElement.setAttribute("transform", transform);
- };
-
- addTrackGroupWithTranslationAndClipRect(id, tx, ty, width, height, clipYOffset) {
-
- // clip rect
- const clip_id = id + '_clip_rect';
- let clipPath = this.__createElement('clipPath', {id: clip_id});
-
- this.__defs.appendChild(clipPath);
- clipPath.appendChild(this.__createElement('rect', {
- x: '0',
- y: clipYOffset.toString(),
- width: width.toString(),
- height: height.toString()
- }));
-
- let group = this.__createElement('g');
- this.__rootGroup.appendChild(group);
-
- group.setAttribute('transform', format('translate({x},{y})', {x: tx, y: ty}));
- group.setAttribute('id', (id + '_group'));
-
- // add clip rect
- group.setAttribute('clip-path', format('url(#{id})', {id: clip_id}));
-
- this.__currentElement = group;
- };
-
- /**
- * scales the current element
- */
- scale(x, y) {
- if (y === undefined) {
- y = x;
- }
- this.__addTransform(format("scale({x},{y})", {x: x, y: y}));
- };
-
- /**
- * rotates the current element
- */
- rotate(angle) {
- var degrees = (angle * 180 / Math.PI);
- this.__addTransform(format("rotate({angle},{cx},{cy})", {angle: degrees, cx: 0, cy: 0}));
- };
-
- /**
- * translates the current element
- */
- translate(x, y) {
- this.__addTransform(format("translate({x},{y})", {x: x, y: y}));
- };
-
- /**
- * applies a transform to the current element
- */
- transform(a, b, c, d, e, f) {
- this.__addTransform(format("matrix({a},{b},{c},{d},{e},{f})", {a: a, b: b, c: c, d: d, e: e, f: f}));
- };
-
- /**
- * Create a new Path Element
- */
- beginPath() {
- var path, parent;
-
- // Note that there is only one current default path, it is not part of the drawing state.
- // See also: https://html.spec.whatwg.org/multipage/scripting.html#current-default-path
- this.__currentDefaultPath = "";
- this.__currentPosition = {};
-
- path = this.__createElement("path", {}, true);
- parent = this.__closestGroupOrSvg();
- parent.appendChild(path);
- this.__currentElement = path;
- };
-
- /**
- * Helper function to apply currentDefaultPath to current path element
- * @private
- */
- __applyCurrentDefaultPath() {
- var currentElement = this.__currentElement;
- if (currentElement.nodeName === "path") {
- currentElement.setAttribute("d", this.__currentDefaultPath);
- } else {
- console.error("Attempted to apply path command to node", currentElement.nodeName);
- }
- };
-
- /**
- * Helper function to add path command
- * @private
- */
- __addPathCommand(command) {
- this.__currentDefaultPath += " ";
- this.__currentDefaultPath += command;
- };
-
- /**
- * Adds the move command to the current path element,
- * if the currentPathElement is not empty create a new path element
- */
- moveTo(x, y) {
- if (this.__currentElement.nodeName !== "path") {
- this.beginPath();
- }
-
- // creates a new subpath with the given point
- this.__currentPosition = {x: x, y: y};
- this.__addPathCommand(format("M {x} {y}", {x: x, y: y}));
- };
-
- /**
- * Closes the current path
- */
- closePath() {
- if (this.__currentDefaultPath) {
- this.__addPathCommand("Z");
- }
- };
-
- /**
- * Adds a line to command
- */
- lineTo(x, y) {
- this.__currentPosition = {x: x, y: y};
- if (this.__currentDefaultPath && this.__currentDefaultPath.indexOf('M') > -1) {
- this.__addPathCommand(format("L {x} {y}", {x: x, y: y}));
- } else {
- this.__addPathCommand(format("M {x} {y}", {x: x, y: y}));
- }
- };
-
- /**
- * Add a bezier command
- */
- bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
- this.__currentPosition = {x: x, y: y};
- this.__addPathCommand(format("C {cp1x} {cp1y} {cp2x} {cp2y} {x} {y}",
- {cp1x: cp1x, cp1y: cp1y, cp2x: cp2x, cp2y: cp2y, x: x, y: y}));
- };
-
- /**
- * Adds a quadratic curve to command
- */
- quadraticCurveTo(cpx, cpy, x, y) {
- this.__currentPosition = {x: x, y: y};
- this.__addPathCommand(format("Q {cpx} {cpy} {x} {y}", {cpx: cpx, cpy: cpy, x: x, y: y}));
- };
-
- /**
- * Adds the arcTo to the current path
- *
- * @see http://www.w3.org/TR/2015/WD-2dcontext-20150514/#dom-context-2d-arcto
- */
- arcTo(x1, y1, x2, y2, radius) {
- // Let the point (x0, y0) be the last point in the subpath.
- var x0 = this.__currentPosition && this.__currentPosition.x;
- var y0 = this.__currentPosition && this.__currentPosition.y;
-
- // First ensure there is a subpath for (x1, y1).
- if (typeof x0 == "undefined" || typeof y0 == "undefined") {
- return
- }
-
- // Negative values for radius must cause the implementation to throw an IndexSizeError exception.
- if (radius < 0) {
- throw new Error("IndexSizeError: The radius provided (" + radius + ") is negative.")
- }
-
- // If the point (x0, y0) is equal to the point (x1, y1),
- // or if the point (x1, y1) is equal to the point (x2, y2),
- // or if the radius radius is zero,
- // then the method must add the point (x1, y1) to the subpath,
- // and connect that point to the previous point (x0, y0) by a straight line.
- if (((x0 === x1) && (y0 === y1))
- || ((x1 === x2) && (y1 === y2))
- || (radius === 0)) {
- this.lineTo(x1, y1);
- return
- }
-
- // Otherwise, if the points (x0, y0), (x1, y1), and (x2, y2) all lie on a single straight line,
- // then the method must add the point (x1, y1) to the subpath,
- // and connect that point to the previous point (x0, y0) by a straight line.
- var unit_vec_p1_p0 = normalize([x0 - x1, y0 - y1]);
- var unit_vec_p1_p2 = normalize([x2 - x1, y2 - y1]);
- if (unit_vec_p1_p0[0] * unit_vec_p1_p2[1] === unit_vec_p1_p0[1] * unit_vec_p1_p2[0]) {
- this.lineTo(x1, y1);
- return
- }
-
- // Otherwise, let The Arc be the shortest arc given by circumference of the circle that has radius radius,
- // and that has one point tangent to the half-infinite line that crosses the point (x0, y0) and ends at the point (x1, y1),
- // and that has a different point tangent to the half-infinite line that ends at the point (x1, y1), and crosses the point (x2, y2).
- // The points at which this circle touches these two lines are called the start and end tangent points respectively.
-
- // note that both vectors are unit vectors, so the length is 1
- var cos = (unit_vec_p1_p0[0] * unit_vec_p1_p2[0] + unit_vec_p1_p0[1] * unit_vec_p1_p2[1]);
- var theta = Math.acos(Math.abs(cos));
-
- // Calculate origin
- var unit_vec_p1_origin = normalize([
- unit_vec_p1_p0[0] + unit_vec_p1_p2[0],
- unit_vec_p1_p0[1] + unit_vec_p1_p2[1]
- ]);
- var len_p1_origin = radius / Math.sin(theta / 2);
- var x = x1 + len_p1_origin * unit_vec_p1_origin[0];
- var y = y1 + len_p1_origin * unit_vec_p1_origin[1];
-
- // Calculate start angle and end angle
- // rotate 90deg clockwise (note that y axis points to its down)
- var unit_vec_origin_start_tangent = [
- -unit_vec_p1_p0[1],
- unit_vec_p1_p0[0]
- ];
- // rotate 90deg counter clockwise (note that y axis points to its down)
- var unit_vec_origin_end_tangent = [
- unit_vec_p1_p2[1],
- -unit_vec_p1_p2[0]
- ];
- var getAngle = function (vector) {
- // get angle (clockwise) between vector and (1, 0)
- var x = vector[0];
- var y = vector[1];
- if (y >= 0) { // note that y axis points to its down
- return Math.acos(x)
- } else {
- return -Math.acos(x)
- }
- };
- var startAngle = getAngle(unit_vec_origin_start_tangent);
- var endAngle = getAngle(unit_vec_origin_end_tangent);
-
- // Connect the point (x0, y0) to the start tangent point by a straight line
- this.lineTo(x + unit_vec_origin_start_tangent[0] * radius,
- y + unit_vec_origin_start_tangent[1] * radius);
-
- // Connect the start tangent point to the end tangent point by arc
- // and adding the end tangent point to the subpath.
- this.arc(x, y, radius, startAngle, endAngle);
- };
-
- /**
- * Sets the stroke property on the current element
- */
- stroke() {
- if (this.__currentElement.nodeName === "path") {
- this.__currentElement.setAttribute("paint-order", "fill stroke markers");
- }
- this.__applyCurrentDefaultPath();
- this.__applyStyleToCurrentElement("stroke");
- };
-
- /**
- * Sets fill properties on the current element
- */
- fill() {
- if (this.__currentElement.nodeName === "path") {
- this.__currentElement.setAttribute("paint-order", "stroke fill markers");
- }
- this.__applyCurrentDefaultPath();
- this.__applyStyleToCurrentElement("fill");
- };
-
- /**
- * Adds a rectangle to the path.
- */
- rect(x, y, width, height) {
- if (this.__currentElement.nodeName !== "path") {
- this.beginPath();
- }
- this.moveTo(x, y);
- this.lineTo(x + width, y);
- this.lineTo(x + width, y + height);
- this.lineTo(x, y + height);
- this.lineTo(x, y);
- this.closePath();
- };
-
-
- /**
- * adds a rectangle element
- */
- fillRect(x, y, width, height) {
-
- if (height < 0) {
- y += height;
- height = -height;
- }
- if (width < 0) {
- x += width;
- width = -width;
- }
- // See if rect intersects current viewbox
- var r2 = {
- x: x,
- y: y,
- width: width,
- height: height
- };
-
- if (this.viewbox) {
- if (!intersectRect(this.viewbox, r2)) {
- return
- }
- }
-
- var rect, parent;
- rect = this.__createElement("rect", r2, true);
- parent = this.__closestGroupOrSvg();
- parent.appendChild(rect);
- this.__currentElement = rect;
- this.__applyStyleToCurrentElement("fill");
- };
-
- /**
- * Draws a rectangle with no fill
- * @param x
- * @param y
- * @param width
- * @param height
- */
- strokeRect(x, y, width, height) {
- var rect, parent;
- rect = this.__createElement("rect", {
- x: x,
- y: y,
- width: width,
- height: height
- }, true);
- parent = this.__closestGroupOrSvg();
- parent.appendChild(rect);
- this.__currentElement = rect;
- this.__applyStyleToCurrentElement("stroke");
- };
-
- // stroke ellipse
- strokeEllipse(cx, cy, rx, ry, rotation, startAngle, endAngle, isCCW) {
- this.__ellipse(cx, cy, rx, ry, rotation, startAngle, endAngle, isCCW, 'stroke');
- }
-
- // fill ellipse
- fillEllipse(cx, cy, rx, ry, rotation, startAngle, endAngle, isCCW) {
- this.__ellipse(cx, cy, rx, ry, rotation, startAngle, endAngle, isCCW, 'fill');
- }
-
- // ellipse helper
- __ellipse(cx, cy, rx, ry, rotation, startAngle, endAngle, isCCW, style) {
-
- const config =
- {
- cx,
- cy,
- rx,
- ry
- };
- const element = this.__createElement('ellipse', config, true);
- const parent = this.__closestGroupOrSvg();
- parent.appendChild(element);
- this.__currentElement = element;
- this.__applyStyleToCurrentElement(style);
- }
-
- /**
- * Clear entire canvas:
- * 1. save current transforms
- * 2. remove all the childNodes of the root g element
- */
- __clearCanvas() {
- var current = this.__closestGroupOrSvg(),
- transform = current.getAttribute("transform");
- var rootGroup = this.__root.childNodes[1];
- var childNodes = rootGroup.childNodes;
- for (var i = childNodes.length - 1; i >= 0; i--) {
- if (childNodes[i]) {
- rootGroup.removeChild(childNodes[i]);
- }
- }
- this.__currentElement = rootGroup;
- //reset __groupStack as all the child group nodes are all removed.
- this.__groupStack = [];
- if (transform) {
- this.__addTransform(transform);
- }
- };
-
- /**
- * "Clears" a canvas by just drawing a white rectangle in the current group.
- */
- clearRect(x, y, width, height) {
- //clear entire canvas
- if (x === 0 && y === 0 && width === this.width && height === this.height) {
- this.__clearCanvas();
- return
- }
- var rect, parent = this.__closestGroupOrSvg();
- rect = this.__createElement("rect", {
- x: x,
- y: y,
- width: width,
- height: height,
- fill: "#FFFFFF"
- }, true);
- parent.appendChild(rect);
- };
-
- /**
- * Adds a linear gradient to a defs tag.
- * Returns a canvas gradient object that has a reference to it's parent def
- */
- createLinearGradient(x1, y1, x2, y2) {
- var grad = this.__createElement("linearGradient", {
- id: randomString(this.__ids),
- x1: x1 + "px",
- x2: x2 + "px",
- y1: y1 + "px",
- y2: y2 + "px",
- "gradientUnits": "userSpaceOnUse"
- }, false);
- this.__defs.appendChild(grad);
- return new CanvasGradient(grad, this)
- };
-
- /**
- * Adds a radial gradient to a defs tag.
- * Returns a canvas gradient object that has a reference to it's parent def
- */
- createRadialGradient(x0, y0, r0, x1, y1, r1) {
- var grad = this.__createElement("radialGradient", {
- id: randomString(this.__ids),
- cx: x1 + "px",
- cy: y1 + "px",
- r: r1 + "px",
- fx: x0 + "px",
- fy: y0 + "px",
- "gradientUnits": "userSpaceOnUse"
- }, false);
- this.__defs.appendChild(grad);
- return new CanvasGradient(grad, this)
-
- };
-
- /**
- * Parses the font string and returns svg mapping
- * @private
- */
- __parseFont() {
- var regex = /^\s*(?=(?:(?:[-a-z]+\s*){0,2}(italic|oblique))?)(?=(?:(?:[-a-z]+\s*){0,2}(small-caps))?)(?=(?:(?:[-a-z]+\s*){0,2}(bold(?:er)?|lighter|[1-9]00))?)(?:(?:normal|\1|\2|\3)\s*){0,3}((?:xx?-)?(?:small|large)|medium|smaller|larger|[.\d]+(?:\%|in|[cem]m|ex|p[ctx]))(?:\s*\/\s*(normal|[.\d]+(?:\%|in|[cem]m|ex|p[ctx])))?\s*([-,\'\"\sa-z0-9]+?)\s*$/i;
- var fontPart = regex.exec(this.font);
- var data = {
- style: fontPart[1] || 'normal',
- size: fontPart[4] || '10px',
- family: fontPart[6] || 'sans-serif',
- weight: fontPart[3] || 'normal',
- decoration: fontPart[2] || 'normal',
- href: null
- };
-
- //canvas doesn't support underline natively, but we can pass this attribute
- if (this.__fontUnderline === "underline") {
- data.decoration = "underline";
- }
-
- //canvas also doesn't support linking, but we can pass this as well
- if (this.__fontHref) {
- data.href = this.__fontHref;
- }
-
- return data
- };
-
- /**
- * Helper to link text fragments
- * @param font
- * @param element
- * @return {*}
- * @private
- */
- __wrapTextLink(font, element) {
- if (font.href) {
- var a = this.__createElement("a");
- a.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", font.href);
- a.appendChild(element);
- return a
- }
- return element
- };
-
- /**
- * Fills or strokes text
- * @param text
- * @param x
- * @param y
- * @param action - stroke or fill
- * @private
- */
- __applyText(text, x, y, action) {
- var font = this.__parseFont(),
- parent = this.__closestGroupOrSvg(),
- textElement = this.__createElement("text", {
- "font-family": font.family,
- "font-size": font.size,
- "font-style": font.style,
- "font-weight": font.weight,
- "text-decoration": font.decoration,
- "x": x,
- "y": y,
- "text-anchor": getTextAnchor(this.textAlign),
- "dominant-baseline": getDominantBaseline(this.textBaseline)
- }, true);
-
- textElement.appendChild(this.__document.createTextNode(text));
- this.__currentElement = textElement;
- this.__applyStyleToCurrentElement(action);
- parent.appendChild(this.__wrapTextLink(font, textElement));
- };
-
- /**
- * Creates a text element
- * @param text
- * @param x
- * @param y
- */
- fillText(text, x, y) {
- this.__applyText(text, x, y, "fill");
- };
-
- /**
- * Strokes text
- * @param text
- * @param x
- * @param y
- */
- strokeText(text, x, y) {
- this.__applyText(text, x, y, "stroke");
- };
-
- /**
- * No need to implement this for svg.
- * @param text
- * @return {TextMetrics}
- */
- measureText(text) {
- this.__ctx.font = this.font;
- return this.__ctx.measureText(text)
- };
-
- /**
- * Arc command!
- */
- arc(x, y, radius, startAngle, endAngle, counterClockwise) {
- // in canvas no circle is drawn if no angle is provided.
- if (startAngle === endAngle) {
- return
- }
- startAngle = startAngle % (2 * Math.PI);
- endAngle = endAngle % (2 * Math.PI);
- if (startAngle === endAngle) {
- //circle time! subtract some of the angle so svg is happy (svg elliptical arc can't draw a full circle)
- endAngle = ((endAngle + (2 * Math.PI)) - 0.001 * (counterClockwise ? -1 : 1)) % (2 * Math.PI);
- }
- var endX = x + radius * Math.cos(endAngle),
- endY = y + radius * Math.sin(endAngle),
- startX = x + radius * Math.cos(startAngle),
- startY = y + radius * Math.sin(startAngle),
- sweepFlag = counterClockwise ? 0 : 1,
- largeArcFlag = 0,
- diff = endAngle - startAngle;
-
- // https://github.com/gliffy/canvas2svg/issues/4
- if (diff < 0) {
- diff += 2 * Math.PI;
- }
-
- if (counterClockwise) {
- largeArcFlag = diff > Math.PI ? 0 : 1;
- } else {
- largeArcFlag = diff > Math.PI ? 1 : 0;
- }
-
- this.lineTo(startX, startY);
- this.__addPathCommand(format("A {rx} {ry} {xAxisRotation} {largeArcFlag} {sweepFlag} {endX} {endY}",
- {
- rx: radius,
- ry: radius,
- xAxisRotation: 0,
- largeArcFlag: largeArcFlag,
- sweepFlag: sweepFlag,
- endX: endX,
- endY: endY
- }));
-
- this.__currentPosition = {x: endX, y: endY};
- };
-
- /**
- * The ellipse() method creates an elliptical arc centered at (x, y) with the radii radiusX and radiusY. The path
- * starts at startAngle and ends at endAngle, and travels in the direction given by counterclockwise (defaulting to clockwise).
- */
-// ellipse (x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise) {
-// // TODO -- implement
-// }
-
- /**
- * Generates a ClipPath from the clip command.
- */
- clip() {
- var group = this.__closestGroupOrSvg(),
- clipPath = this.__createElement("clipPath"),
- id = randomString(this.__ids),
- newGroup = this.__createElement("g");
-
- this.__applyCurrentDefaultPath();
- group.removeChild(this.__currentElement);
- clipPath.setAttribute("id", id);
- clipPath.appendChild(this.__currentElement);
-
- this.__defs.appendChild(clipPath);
-
- //set the clip path to this group
- group.setAttribute("clip-path", format("url(#{id})", {id: id}));
-
- //clip paths can be scaled and transformed, we need to add another wrapper group to avoid later transformations
- // to this path
- group.appendChild(newGroup);
-
- this.__currentElement = newGroup;
-
- };
-
- /**
- * Draws a canvas, image or mock context to this canvas.
- * Note that all svg dom manipulation uses node.childNodes rather than node.children for IE support.
- * http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-drawimage
- */
- drawImage() {
- //convert arguments to a real array
- var args = Array.prototype.slice.call(arguments),
- image = args[0],
- dx, dy, dw, dh, sx = 0, sy = 0, sw, sh, parent, svg, defs, group,
- svgImage, canvas, context, id;
-
- if (args.length === 3) {
- dx = args[1];
- dy = args[2];
- sw = image.width;
- sh = image.height;
- dw = sw;
- dh = sh;
- } else if (args.length === 5) {
- dx = args[1];
- dy = args[2];
- dw = args[3];
- dh = args[4];
- sw = image.width;
- sh = image.height;
- } else if (args.length === 9) {
- sx = args[1];
- sy = args[2];
- sw = args[3];
- sh = args[4];
- dx = args[5];
- dy = args[6];
- dw = args[7];
- dh = args[8];
- } else {
- throw new Error("Invalid number of arguments passed to drawImage: " + arguments.length)
- }
-
- parent = this.__closestGroupOrSvg();
- this.__currentElement;
- var translateDirective = "translate(" + dx + ", " + dy + ")";
- if (image instanceof ctx) {
- //canvas2svg mock canvas context. In the future we may want to clone nodes instead.
- //also I'm currently ignoring dw, dh, sw, sh, sx, sy for a mock context.
- svg = image.getSvg().cloneNode(true);
- if (svg.childNodes && svg.childNodes.length > 1) {
- defs = svg.childNodes[0];
- while (defs.childNodes.length) {
- id = defs.childNodes[0].getAttribute("id");
- this.__ids[id] = id;
- this.__defs.appendChild(defs.childNodes[0]);
- }
- group = svg.childNodes[1];
- if (group) {
- //save original transform
- var originTransform = group.getAttribute("transform");
- var transformDirective;
- if (originTransform) {
- transformDirective = originTransform + " " + translateDirective;
- } else {
- transformDirective = translateDirective;
- }
- group.setAttribute("transform", transformDirective);
- parent.appendChild(group);
- }
- }
- } else if (image.nodeName === "CANVAS" || image.nodeName === "IMG") {
- //canvas or image
- svgImage = this.__createElement("image");
- svgImage.setAttribute("width", dw);
- svgImage.setAttribute("height", dh);
- svgImage.setAttribute("preserveAspectRatio", "none");
-
- if (sx || sy || sw !== image.width || sh !== image.height) {
- //crop the image using a temporary canvas
- canvas = this.__document.createElement("canvas");
- canvas.width = dw;
- canvas.height = dh;
- context = canvas.getContext("2d");
- context.drawImage(image, sx, sy, sw, sh, 0, 0, dw, dh);
- image = canvas;
- }
- svgImage.setAttribute("transform", translateDirective);
- svgImage.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href",
- image.nodeName === "CANVAS" ? image.toDataURL() : image.getAttribute("src"));
- parent.appendChild(svgImage);
- }
- };
-
- /**
- * Generates a pattern tag
- */
- createPattern(image, repetition) {
-
- let pattern = this.__document.__createElement("pattern");
- let id = randomString(this.__ids);
- let img;
-
- pattern.setAttribute("id", id);
- pattern.setAttribute("width", image.width);
- pattern.setAttribute("height", image.height);
- if (image.nodeName === "CANVAS" || image.nodeName === "IMG") {
- img = this.__createElement("image");
- img.setAttribute("width", image.width);
- img.setAttribute("height", image.height);
- img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href",
- image.nodeName === "CANVAS" ? image.toDataURL() : image.getAttribute("src"));
- pattern.appendChild(img);
- this.__defs.appendChild(pattern);
- } else if (image instanceof ctx) {
- pattern.appendChild(image.__root.childNodes[1]);
- this.__defs.appendChild(pattern);
- }
- return new CanvasPattern(pattern, this)
- };
-
- setLineDash(dashArray) {
- if (dashArray && dashArray.length > 0) {
- this.lineDash = dashArray.join(",");
- } else {
- this.lineDash = null;
- }
- };
-
- /**
- * Not yet implemented
- */
- drawFocusRing() {
- };
-
- createImageData() {
- };
-
- getImageData() {
- };
-
- putImageData() {
- };
-
- globalCompositeOperation() {
- };
-
- setTransform() {
- };
-}
-
-const Cytoband = function (start, end, name, typestain) {
- this.start = start;
- this.end = end;
- this.name = name;
- this.stain = 0;
-
- // Set the type, either p, n, or c
- if (typestain === 'acen') {
- this.type = 'c';
- } else {
- this.type = typestain.charAt(1);
- if (this.type === 'p') {
- this.stain = parseInt(typestain.substring(4));
- }
- }
-};
-
-const _version = "2.15.13";
-function version$2() {
- return _version
-}
-
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2014 Broad Institute
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
-
-const DEFAULT_GENOMES_URL = "https://igv.org/genomes/genomes.json";
-const BACKUP_GENOMES_URL = "https://s3.amazonaws.com/igv.org.genomes/genomes.json";
-
-const splitLines$1 = splitLines$5;
-
-const GenomeUtils = {
-
- loadGenome: async function (options) {
-
- const cytobandUrl = options.cytobandURL;
- const aliasURL = options.aliasURL;
- const sequence = await loadFasta(options);
-
- let aliases;
- if (aliasURL) {
- aliases = await loadAliases(aliasURL, sequence.config);
- }
-
- const genome = new Genome$1(options, sequence, aliases);
-
- // Delay loading cytbands untils after genome initialization to use chromosome aliases (1 vs chr1, etc).
- if (cytobandUrl) {
- genome.cytobands = await loadCytobands(cytobandUrl, sequence.config, genome);
- }
-
- return genome
- },
-
- initializeGenomes: async function (config) {
-
- if (!GenomeUtils.KNOWN_GENOMES) {
-
- const table = {};
-
- // Get default genomes
- if (config.loadDefaultGenomes !== false) {
- try {
- const url = DEFAULT_GENOMES_URL + `?randomSeed=${Math.random().toString(36)}&version=${version$2()}`; // prevent caching
- const jsonArray = await igvxhr.loadJson(url, {timeout: 5000});
- processJson(jsonArray);
- } catch (e) {
- console.error(e);
- try {
- const url = BACKUP_GENOMES_URL + `?randomSeed=${Math.random().toString(36)}&version=${version$2()}`; // prevent caching
- const jsonArray = await igvxhr.loadJson(url, {});
- processJson(jsonArray);
- } catch (e) {
- console.error(e);
- console.warn("Errors loading default genome definitions.");
- }
- }
- }
-
- // Add user-defined genomes
- const genomeList = config.genomeList || config.genomes;
- if (genomeList) {
- if (typeof genomeList === 'string') {
- const jsonArray = await igvxhr.loadJson(genomeList, {});
- processJson(jsonArray);
- } else {
- processJson(genomeList);
- }
- }
-
- GenomeUtils.KNOWN_GENOMES = table;
-
- function processJson(jsonArray) {
- jsonArray.forEach(function (json) {
- table[json.id] = json;
- });
- return table
- }
- }
- },
-
- isWholeGenomeView: function (chr) {
- return 'all' === chr.toLowerCase()
- },
-
- // Expand a genome id to a reference object, if needed
- expandReference: function (alert, idOrConfig) {
-
- // idOrConfig might be json
- if (isString$2(idOrConfig) && idOrConfig.startsWith("{")) {
- try {
- idOrConfig = JSON.parse(idOrConfig);
- } catch (e) {
- // Apparently its not json, could be an ID starting with "{". Unusual but legal.
- }
- }
-
- let genomeID;
- if (isString$2(idOrConfig)) {
- genomeID = idOrConfig;
- } else if (idOrConfig.genome) {
- genomeID = idOrConfig.genome;
- } else if (idOrConfig.id !== undefined && idOrConfig.fastaURL === undefined) {
- // Backward compatibility
- genomeID = idOrConfig.id;
- }
-
- if (genomeID) {
- const knownGenomes = GenomeUtils.KNOWN_GENOMES;
- const reference = knownGenomes[genomeID];
- if (!reference) {
- alert.present(new Error(`Unknown genome id: ${genomeID}`), undefined);
- }
- return reference
- } else {
- return idOrConfig
- }
- }
-};
-
-
-class Genome$1 {
-
- constructor(config, sequence, aliases) {
-
- this.config = config;
- this.id = config.id || generateGenomeID(config);
- this.sequence = sequence;
- this.chromosomeNames = sequence.chromosomeNames;
- this.chromosomes = sequence.chromosomes; // An object (functions as a dictionary)
- this.featureDB = new Map(); // Hash of name -> feature, used for search function.
-
- this.wholeGenomeView = config.wholeGenomeView === undefined || config.wholeGenomeView;
- if (this.wholeGenomeView && Object.keys(sequence.chromosomes).length > 1) {
- constructWG(this, config);
- } else {
- this.wgChromosomeNames = sequence.chromosomeNames;
- }
-
- /**
- * Return the official chromosome name for the (possibly) alias. Deals with
- * 1 <-> chr1, chrM <-> MT, IV <-> chr4, etc.
- * @param str
- */
- var chrAliasTable = {},
- self = this;
-
-
- // The standard mappings
- chrAliasTable["all"] = "all";
- this.chromosomeNames.forEach(function (name) {
- var alias = name.startsWith("chr") ? name.substring(3) : "chr" + name;
- chrAliasTable[alias.toLowerCase()] = name;
- if (name === "chrM") chrAliasTable["mt"] = "chrM";
- if (name === "MT") chrAliasTable["chrm"] = "MT";
- chrAliasTable[name.toLowerCase()] = name;
- });
-
- // Custom mappings
- if (aliases) {
- aliases.forEach(function (array) {
- // Find the official chr name
- var defName, i;
-
- for (i = 0; i < array.length; i++) {
- if (self.chromosomes[array[i]]) {
- defName = array[i];
- break
- }
- }
-
- if (defName) {
- array.forEach(function (alias) {
- if (alias !== defName) {
- chrAliasTable[alias.toLowerCase()] = defName;
- chrAliasTable[alias] = defName; // Should not be needed
- }
- });
- }
-
- });
- }
-
- this.chrAliasTable = chrAliasTable;
-
- }
-
- showWholeGenomeView() {
- return this.config.wholeGenomeView !== false
- }
-
- toJSON() {
- return Object.assign({}, this.config, {tracks: undefined})
- }
-
- getInitialLocus() {
-
- }
-
- getHomeChromosomeName() {
- if (this.showWholeGenomeView() && this.chromosomes.hasOwnProperty("all")) {
- return "all"
- } else {
- return this.chromosomeNames[0]
-
- }
- }
-
- getChromosomeName(str) {
- const chr = str ? this.chrAliasTable[str.toLowerCase()] : str;
- return chr ? chr : str
- }
-
- getChromosome(chr) {
- chr = this.getChromosomeName(chr);
- return this.chromosomes[chr]
- }
-
- getCytobands(chr) {
- return this.cytobands ? this.cytobands[chr] : null
- }
-
- getLongestChromosome() {
-
- var longestChr,
- chromosomes = this.chromosomes;
- for (let key in chromosomes) {
- if (chromosomes.hasOwnProperty(key)) {
- var chr = chromosomes[key];
- if (longestChr === undefined || chr.bpLength > longestChr.bpLength) {
- longestChr = chr;
- }
- }
- return longestChr
- }
- }
-
- getChromosomes() {
- return this.chromosomes
- }
-
- /**
- * Return the genome coordinate in kb for the give chromosome and position.
- * NOTE: This might return undefined if the chr is filtered from whole genome view.
- */
- getGenomeCoordinate(chr, bp) {
-
- var offset = this.getCumulativeOffset(chr);
- if (offset === undefined) return undefined
-
- return offset + bp
- }
-
- /**
- * Return the chromosome and coordinate in bp for the given genome coordinate
- */
- getChromosomeCoordinate(genomeCoordinate) {
-
- if (this.cumulativeOffsets === undefined) {
- this.cumulativeOffsets = computeCumulativeOffsets.call(this);
- }
-
- let lastChr = undefined;
- let lastCoord = 0;
- for (let name of this.wgChromosomeNames) {
-
- const cumulativeOffset = this.cumulativeOffsets[name];
- if (cumulativeOffset > genomeCoordinate) {
- const position = genomeCoordinate - lastCoord;
- return {chr: lastChr, position: position}
- }
- lastChr = name;
- lastCoord = cumulativeOffset;
- }
-
- // If we get here off the end
- return {chr: this.wgChromosomeNames[this.wgChromosomeNames.length - 1], position: 0}
-
- };
-
-
- /**
- * Return the offset in genome coordinates (kb) of the start of the given chromosome
- * NOTE: This might return undefined if the chromosome is filtered from whole genome view.
- */
- getCumulativeOffset(chr) {
-
- if (this.cumulativeOffsets === undefined) {
- this.cumulativeOffsets = computeCumulativeOffsets.call(this);
- }
-
- const queryChr = this.getChromosomeName(chr);
- return this.cumulativeOffsets[queryChr]
-
- function computeCumulativeOffsets() {
-
- let self = this;
- let acc = {};
- let offset = 0;
- for (let name of self.wgChromosomeNames) {
-
- acc[name] = Math.floor(offset);
-
- const chromosome = self.getChromosome(name);
-
- offset += chromosome.bpLength;
- }
-
- return acc
- }
- }
-
- /**
- * Return the nominal genome length, this is the length of the main chromosomes (no scaffolds, etc).
- */
- getGenomeLength() {
-
- let self = this;
-
- if (!this.bpLength) {
- let bpLength = 0;
- self.wgChromosomeNames.forEach(function (cname) {
- let c = self.chromosomes[cname];
- bpLength += c.bpLength;
- });
- this.bpLength = bpLength;
- }
- return this.bpLength
- }
-
- async getSequence(chr, start, end) {
- chr = this.getChromosomeName(chr);
- return this.sequence.getSequence(chr, start, end)
- }
-
- addFeaturesToDB(featureList, config) {
-
- const insertFeature = (name, feature) => {
- const current = this.featureDB.get(name);
- if (current) {
- feature = (feature.end - feature.start) > (current.end - current.start) ? feature : current;
-
- }
- this.featureDB.set(name, feature);
- };
-
- for (let feature of featureList) {
- if (feature.name) {
- insertFeature(feature.name.toUpperCase(), feature);
- }
- if (feature.gene && feature.gene.name) {
- insertFeature(feature.gene.name.toUpperCase(), feature);
- }
-
- if (config.searchableFields) {
- for (let f of config.searchableFields) {
- const value = feature.getAttributeValue(f);
- if (value) {
- if (value.indexOf(" ") > 0) {
- insertFeature(value.replaceAll(" ", "+").toUpperCase(), feature);
- } else {
- insertFeature(value.toUpperCase(), feature);
- }
- }
- }
- }
- }
- }
-}
-
-async function loadCytobands(cytobandUrl, config, genome) {
-
- let data;
- if (isDataURL(cytobandUrl)) {
- const plain = decodeDataURI$1(cytobandUrl);
- data = "";
- const len = plain.length;
- for (let i = 0; i < len; i++) {
- data += String.fromCharCode(plain[i]);
- }
- } else {
- data = await igvxhr.loadString(cytobandUrl, buildOptions$1(config));
- }
-
- // var bands = [],
- // lastChr,
- // n = 0,
- // c = 1,
- //
- // len = lines.length,
- const cytobands = {};
- let lastChr;
- let bands = [];
- const lines = splitLines$1(data);
- for (let line of lines) {
- var tokens = line.split("\t");
- var chr = genome.getChromosomeName(tokens[0]);
- if (!lastChr) lastChr = chr;
-
- if (chr !== lastChr) {
- cytobands[lastChr] = bands;
- bands = [];
- lastChr = chr;
- }
-
- if (tokens.length === 5) {
- //10 0 3000000 p15.3 gneg
- var start = parseInt(tokens[1]);
- var end = parseInt(tokens[2]);
- var name = tokens[3];
- var stain = tokens[4];
- bands.push(new Cytoband(start, end, name, stain));
- }
- }
-
- return cytobands
-}
-
-function loadAliases(aliasURL, config) {
-
- return igvxhr.loadString(aliasURL, buildOptions$1(config))
-
- .then(function (data) {
-
- var lines = splitLines$1(data),
- aliases = [];
-
- lines.forEach(function (line) {
- if (!line.startsWith("#") && line.length > 0) aliases.push(line.split("\t"));
- });
-
- return aliases
- })
-
-}
-
-function constructWG(genome, config) {
-
- let wgChromosomes;
- if (config.chromosomeOrder) {
- if (Array.isArray(config.chromosomeOrder)) {
- genome.wgChromosomeNames = config.chromosomeOrder;
- } else {
- genome.wgChromosomeNames = config.chromosomeOrder.split(',').map(nm => nm.trim());
- }
- wgChromosomes = genome.wgChromosomeNames.map(nm => genome.chromosomes[nm]).filter(chr => chr !== undefined);
-
- } else {
-
- // Trim small chromosomes.
- const lengths = Object.keys(genome.chromosomes).map(key => genome.chromosomes[key].bpLength);
- const median = lengths.reduce((a, b) => Math.max(a, b));
- const threshold = median / 50;
- wgChromosomes = Object.values(genome.chromosomes).filter(chr => chr.bpLength > threshold);
-
- // Sort chromosomes. First segregate numeric and alpha names, sort numeric, leave alpha as is
- const numericChromosomes = wgChromosomes.filter(chr => isDigit(chr.name.replace('chr', '')));
- const alphaChromosomes = wgChromosomes.filter(chr => !isDigit(chr.name.replace('chr', '')));
- numericChromosomes.sort((a, b) => Number.parseInt(a.name.replace('chr', '')) - Number.parseInt(b.name.replace('chr', '')));
-
- const wgChromosomeNames = numericChromosomes.map(chr => chr.name);
- for (let chr of alphaChromosomes) {
- wgChromosomeNames.push(chr.name);
- }
- genome.wgChromosomeNames = wgChromosomeNames;
- }
-
-
- // Compute psuedo-chromosome "all"
- const l = wgChromosomes.reduce((accumulator, currentValue) => accumulator += currentValue.bpLength, 0);
- genome.chromosomes["all"] = {
- name: "all",
- bpLength: l
- };
-
- function isDigit(val) {
- return /^\d+$/.test(val)
- }
-
-}
-
-function generateGenomeID(config) {
- if (config.id !== undefined) {
- return config.id
- } else if (config.fastaURL && isString$2(config.fastaURL)) {
- return config.fastaURL
- } else if (config.fastaURL && config.fastaURL.name) {
- return config.fastaURL.name
- } else {
- return ("0000" + (Math.random() * Math.pow(36, 4) << 0).toString(36)).slice(-4)
- }
-}
-
-/**
- * Created by dat on 9/16/16.
- */
-
-const NOT_LOADED_MESSAGE = 'Error loading track data';
-let lastClickTime = 0;
-let lastHoverUpdateTime = 0;
-let popupTimerID;
-
-class TrackViewport extends Viewport {
-
- constructor(trackView, viewportColumn, referenceFrame, width) {
- super(trackView, viewportColumn, referenceFrame, width);
- }
-
- initializationHelper() {
-
- this.$spinner = $$1('
', {class: 'igv-loading-spinner-container'});
- this.$viewport.append(this.$spinner);
- this.$spinner.append($$1('
'));
-
- const track = this.trackView.track;
- if ('sequence' !== track.type) {
- this.$zoomInNotice = this.createZoomInNotice(this.$viewport);
- }
-
- if (track.name && "sequence" !== track.id) {
- this.$trackLabel = $$1('
');
- this.$viewport.append(this.$trackLabel);
- this.setTrackLabel(track.name);
- if (false === this.browser.trackLabelsVisible) {
- this.$trackLabel.hide();
- }
- }
-
- this.stopSpinner();
- this.addMouseHandlers();
- }
-
- setContentHeight(contentHeight) {
- super.setContentHeight(contentHeight);
- if (this.featureCache) this.featureCache.redraw = true;
- }
-
- setTrackLabel(label) {
-
- this.$trackLabel.empty();
- this.$trackLabel.html(label);
-
- const txt = this.$trackLabel.text();
- this.$trackLabel.attr('title', txt);
- }
-
- startSpinner() {
- this.$spinner.show();
- }
-
- stopSpinner() {
- if (this.$spinner) {
- this.$spinner.hide();
- }
- }
-
- /**
- * Test to determine if we are zoomed in far enough to see features. Applicable to tracks with visibility windows.
- *
- * As a side effect the viewports canvas is removed if zoomed out.
- *
- * @returns {boolean} true if we are zoomed in past visibility window, false otherwise
- */
- checkZoomIn() {
-
- const zoomedOutOfWindow = () => {
- if (this.referenceFrame.chr.toLowerCase() === "all" && !this.trackView.track.supportsWholeGenome) {
- return true
- } else {
- const visibilityWindow = this.trackView.track.visibilityWindow;
- return (
- visibilityWindow !== undefined && visibilityWindow > 0 &&
- (this.referenceFrame.bpPerPixel * this.$viewport.width() > visibilityWindow))
- }
- };
-
- if (this.trackView.track && "sequence" === this.trackView.track.type && this.referenceFrame.bpPerPixel > bppFeatureFetchThreshold) {
- $$1(this.canvas).remove();
- this.canvas = undefined;
- //this.featureCache = undefined
- return false
- }
-
- if (!(this.viewIsReady())) {
- return false
- }
-
-
- if (zoomedOutOfWindow()) {
-
- // Out of visibility window
- if (this.canvas) {
- $$1(this.canvas).remove();
- this.canvas = undefined;
- //this.featureCache = undefined
- }
- if (this.trackView.track.autoHeight) {
- const minHeight = this.trackView.minHeight || 0;
- this.setContentHeight(minHeight);
- }
- if (this.$zoomInNotice) {
- this.$zoomInNotice.show();
- }
- return false
- } else {
- if (this.$zoomInNotice) {
- this.$zoomInNotice.hide();
- }
- return true
- }
-
- }
-
- /**
- * Adjust the canvas to the current genomic state.
- */
- shift() {
- const referenceFrame = this.referenceFrame;
- if (this.canvas &&
- this.canvas._data &&
- this.canvas._data.referenceFrame.chr === this.referenceFrame.chr &&
- this.canvas._data.bpPerPixel === referenceFrame.bpPerPixel) {
- const pixelOffset = Math.round((this.canvas._data.bpStart - referenceFrame.start) / referenceFrame.bpPerPixel);
- this.canvas.style.left = pixelOffset + "px";
- }
- }
-
- /**
- * Set the content top of the current view. This is triggered by scrolling. If the current canvas extent is not
- * sufficient to cover the new vertical range repaint.
- *
- * @param contentTop - the "top" property of the virtual content div, 0 unless track is scrolled vertically
- *
- *
- */
- setTop(contentTop) {
-
- super.setTop(contentTop);
-
- if (!this.canvas) {
- this.repaint();
- } else {
- // See if currently painted canvas covers the vertical range of the viewport. If not repaint
- const h = this.$viewport.height();
- const vt = contentTop + this.canvas._data.pixelTop;
- const vb = vt + this.canvas._data.pixelHeight;
- if (vt > 0 || vb < h) {
- this.repaint();
- }
- }
-
- // Now offset backing canvas to align with the contentTop visual offset.
- let offset = contentTop + this.canvas._data.pixelTop;
- this.canvas.style.top = `${offset}px`;
- }
-
- async loadFeatures() {
-
- const referenceFrame = this.referenceFrame;
- const chr = referenceFrame.chr;
-
- // Expand the requested range so we can pan a bit without reloading. But not beyond chromosome bounds
- const chrLength = this.browser.genome.getChromosome(chr).bpLength;
- const pixelWidth = this.$viewport.width();// * 3;
- const bpWidth = pixelWidth * referenceFrame.bpPerPixel;
- const bpStart = Math.floor(Math.max(0, referenceFrame.start - bpWidth));
- const bpEnd = Math.ceil(Math.min(chrLength, referenceFrame.start + bpWidth + bpWidth)); // Add one screen width to end
-
- if (this.loading && this.loading.start === bpStart && this.loading.end === bpEnd) {
- return undefined
- }
- this.loading = {start: bpStart, end: bpEnd};
- this.startSpinner();
-
- try {
- const track = this.trackView.track;
- const features = await this.getFeatures(track, chr, bpStart, bpEnd, referenceFrame.bpPerPixel);
- if (features) {
- let roiFeatures = [];
- if (track.roiSets && track.roiSets.length > 0) {
- for (let roiSet of track.roiSets) {
- const features = await roiSet.getFeatures(chr, bpStart, bpEnd, referenceFrame.bpPerPixel);
- roiFeatures.push({track: roiSet, features});
- }
- }
-
- const mr = track && ("wig" === track.type || "merged" === track.type); // wig tracks are potentially multiresolution (e.g. bigwig)
- this.featureCache = new FeatureCache(chr, bpStart, bpEnd, referenceFrame.bpPerPixel, features, roiFeatures, mr);
- this.loading = false;
- this.hideMessage();
- this.stopSpinner();
- return this.featureCache
- }
- } catch (error) {
- // Track might have been removed during load
- if (this.trackView && this.trackView.disposed !== true) {
- this.showMessage(NOT_LOADED_MESSAGE);
- this.browser.alert.present(error);
- console.error(error);
- }
- } finally {
- this.loading = false;
- this.stopSpinner();
- }
- }
-
- /**
- * Compute the genomic extent and needed pixelWidth to repaint the canvas for the current genomic state.
- * Normally the canvas is size 3X the width of the viewport, however there is no left-right panning for WGV so
- * canvas width is viewport width.
- * @returns {{bpEnd: *, pixelWidth: (*|number), bpStart: number}}
- */
- repaintDimensions() {
- const isWGV = GenomeUtils.isWholeGenomeView(this.referenceFrame.chr);
- const pixelWidth = isWGV ? this.$viewport.width() : 3 * this.$viewport.width();
- const bpPerPixel = this.referenceFrame.bpPerPixel;
- const bpStart = this.referenceFrame.start - (isWGV ? 0 : pixelWidth / 3 * bpPerPixel);
- const bpEnd = this.referenceFrame.end + (isWGV ? 0 : pixelWidth / 3 * bpPerPixel);
- return {
- bpStart, bpEnd, pixelWidth
- }
- }
-
- /**
- * Repaint the canvas using the cached features
- *
- */
- repaint() {
-
- if (undefined === this.featureCache) {
- return
- }
-
- const {features, roiFeatures} = this.featureCache;
-
- // Canvas dimensions.
- // For deep tracks we paint a canvas == 3*viewportHeight centered on the current vertical scroll position
- const {bpStart, bpEnd, pixelWidth} = this.repaintDimensions();
- const viewportHeight = this.$viewport.height();
- const contentHeight = this.getContentHeight();
- const maxHeight = roiFeatures ? Math.max(contentHeight, viewportHeight) : contentHeight; // Need to fill viewport for ROIs.
- const pixelHeight = Math.min(maxHeight, 3 * viewportHeight);
- if (0 === pixelWidth || 0 === pixelHeight) {
- if (this.canvas) {
- $$1(this.canvas).remove();
- }
- return
- }
- const pixelTop = Math.max(0, -this.contentTop - Math.floor(pixelHeight / 3));
-
- const bpPerPixel = this.referenceFrame.bpPerPixel;
- const pixelXOffset = Math.round((bpStart - this.referenceFrame.start) / bpPerPixel);
- const canvasTop = (this.contentTop || 0) + pixelTop;
- const newCanvas = document.createElement('canvas');// $('