@jbrowse/plugin-wiggle 1.7.11 → 2.1.0

package/dist/XYPlotRenderer/index.d.ts

@@ -1,3 +1,7 @@
-export { default as ReactComponent } from '../WiggleRendering';
-export { default } from './XYPlotRenderer';
-export declare const configSchema: import("@jbrowse/core/configuration").AnyConfigurationSchemaType;
+import ReactComponent from '../WiggleRendering';
+import PluginManager from '@jbrowse/core/PluginManager';
+import XYPlotRenderer from './XYPlotRenderer';
+import configSchema from './configSchema';
+export { XYPlotRenderer, configSchema, ReactComponent };
+declare const _default: (pluginManager: PluginManager) => void;
+export default _default;

package/dist/XYPlotRenderer/index.js

@@ -1,34 +1,23 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactComponent = exports.configSchema = exports.XYPlotRenderer = void 0;
+var WiggleRendering_1 = __importDefault(require("../WiggleRendering"));
+exports.ReactComponent = WiggleRendering_1.default;
+var XYPlotRenderer_1 = __importDefault(require("./XYPlotRenderer"));
+exports.XYPlotRenderer = XYPlotRenderer_1.default;
+var configSchema_1 = __importDefault(require("./configSchema"));
+exports.configSchema = configSchema_1.default;
+exports.default = (function (pluginManager) {
+    pluginManager.addRendererType(function () {
+        return new XYPlotRenderer_1.default({
+            name: 'XYPlotRenderer',
+            ReactComponent: WiggleRendering_1.default,
+            configSchema: configSchema_1.default,
+            pluginManager: pluginManager,
+        });
+    });
 });
-Object.defineProperty(exports, "ReactComponent", {
-  enumerable: true,
-  get: function get() {
-    return _WiggleRendering.default;
-  }
-});
-exports.configSchema = void 0;
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function get() {
-    return _XYPlotRenderer.default;
-  }
-});
-
-var _configuration = require("@jbrowse/core/configuration");
-
-var _configSchema = _interopRequireDefault(require("../configSchema"));
-
-var _WiggleRendering = _interopRequireDefault(require("../WiggleRendering"));
-
-var _XYPlotRenderer = _interopRequireDefault(require("./XYPlotRenderer"));
-
-var configSchema = (0, _configuration.ConfigurationSchema)('XYPlotRenderer', {}, {
-  baseConfiguration: _configSchema.default,
-  explicitlyTyped: true
-});
-exports.configSchema = configSchema;
+//# sourceMappingURL=index.js.map

package/dist/XYPlotRenderer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/XYPlotRenderer/index.ts"],"names":[],"mappings":";;;;;;AAAA,uEAA+C;AAIR,yBAJhC,yBAAc,CAIgC;AAFrD,oEAA6C;AAEpC,yBAFF,wBAAc,CAEE;AADvB,gEAAyC;AAChB,uBADlB,sBAAY,CACkB;AAErC,mBAAe,UAAC,aAA4B;IAC1C,aAAa,CAAC,eAAe,CAC3B;QACE,OAAA,IAAI,wBAAc,CAAC;YACjB,IAAI,EAAE,gBAAgB;YACtB,cAAc,2BAAA;YACd,YAAY,wBAAA;YACZ,aAAa,eAAA;SACd,CAAC;IALF,CAKE,CACL,CAAA;AACH,CAAC,EAAA"}

package/dist/configSchema.js

@@ -1,75 +1,43 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _configuration = require("@jbrowse/core/configuration");
-
-var _mobxStateTree = require("mobx-state-tree");
-
-var _default = (0, _configuration.ConfigurationSchema)('WiggleRenderer', {
-  color: {
-    type: 'color',
-    description: 'the color of track, overrides posColor and negColor',
-    defaultValue: '#f0f'
-  },
-  posColor: {
-    type: 'color',
-    description: 'the color to use when the score is positive',
-    defaultValue: 'blue'
-  },
-  negColor: {
-    type: 'color',
-    description: 'the color to use when the score is negative',
-    defaultValue: 'red'
-  },
-  highlightColor: {
-    type: 'color',
-    description: 'the color of highlights over the wiggle track',
-    defaultValue: 'rgba(255,255,0,0.5)'
-  },
-  clipColor: {
-    type: 'color',
-    description: 'the color of the clipping marker',
-    defaultValue: 'red'
-  },
-  renderType: {
-    type: 'stringEnum',
-    model: _mobxStateTree.types.enumeration('Rendering type', ['xyplot', 'density', 'line']),
-    description: 'The type of rendering for wiggle data to use',
-    defaultValue: 'xyplot'
-  },
-  filled: {
-    type: 'boolean',
-    description: 'fill in histogram',
-    defaultValue: true
-  },
-  bicolorPivot: {
-    type: 'stringEnum',
-    model: _mobxStateTree.types.enumeration('Scale type', ['numeric', 'mean', 'z_score', 'none']),
-    description: 'type of bicolor pivot',
-    defaultValue: 'numeric'
-  },
-  bicolorPivotValue: {
-    type: 'number',
-    defaultValue: 0,
-    description: 'value to use for bicolor pivot'
-  },
-  summaryScoreMode: {
-    type: 'stringEnum',
-    model: _mobxStateTree.types.enumeration('Score type', ['max', 'min', 'avg', 'whiskers']),
-    description: 'choose whether to use max/min/average or whiskers which combines all three into the same rendering',
-    defaultValue: 'whiskers'
-  },
-  displayCrossHatches: {
-    type: 'boolean',
-    description: 'choose to draw cross hatches (sideways lines)',
-    defaultValue: false
-  }
-}, {
-  explicitlyTyped: true
-});
-
-exports.default = _default;
+Object.defineProperty(exports, "__esModule", { value: true });
+var configuration_1 = require("@jbrowse/core/configuration");
+var mobx_state_tree_1 = require("mobx-state-tree");
+exports.default = (0, configuration_1.ConfigurationSchema)('WiggleRenderer', {
+    color: {
+        type: 'color',
+        description: 'the color of track, overrides posColor and negColor',
+        defaultValue: '#f0f',
+    },
+    posColor: {
+        type: 'color',
+        description: 'the color to use when the score is positive',
+        defaultValue: 'blue',
+    },
+    negColor: {
+        type: 'color',
+        description: 'the color to use when the score is negative',
+        defaultValue: 'red',
+    },
+    clipColor: {
+        type: 'color',
+        description: 'the color of the clipping marker',
+        defaultValue: 'red',
+    },
+    bicolorPivot: {
+        type: 'stringEnum',
+        model: mobx_state_tree_1.types.enumeration('Scale type', [
+            'numeric',
+            'mean',
+            'z_score',
+            'none',
+        ]),
+        description: 'type of bicolor pivot',
+        defaultValue: 'numeric',
+    },
+    bicolorPivotValue: {
+        type: 'number',
+        defaultValue: 0,
+        description: 'value to use for bicolor pivot',
+    },
+}, { explicitlyTyped: true });
+//# sourceMappingURL=configSchema.js.map

package/dist/configSchema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"configSchema.js","sourceRoot":"","sources":["../src/configSchema.ts"],"names":[],"mappings":";;AAAA,6DAAiE;AACjE,mDAAuC;AAEvC,kBAAe,IAAA,mCAAmB,EAChC,gBAAgB,EAChB;IACE,KAAK,EAAE;QACL,IAAI,EAAE,OAAO;QACb,WAAW,EAAE,qDAAqD;QAClE,YAAY,EAAE,MAAM;KACrB;IACD,QAAQ,EAAE;QACR,IAAI,EAAE,OAAO;QACb,WAAW,EAAE,6CAA6C;QAC1D,YAAY,EAAE,MAAM;KACrB;IACD,QAAQ,EAAE;QACR,IAAI,EAAE,OAAO;QACb,WAAW,EAAE,6CAA6C;QAC1D,YAAY,EAAE,KAAK;KACpB;IACD,SAAS,EAAE;QACT,IAAI,EAAE,OAAO;QACb,WAAW,EAAE,kCAAkC;QAC/C,YAAY,EAAE,KAAK;KACpB;IACD,YAAY,EAAE;QACZ,IAAI,EAAE,YAAY;QAClB,KAAK,EAAE,uBAAK,CAAC,WAAW,CAAC,YAAY,EAAE;YACrC,SAAS;YACT,MAAM;YACN,SAAS;YACT,MAAM;SACP,CAAC;QACF,WAAW,EAAE,uBAAuB;QACpC,YAAY,EAAE,SAAS;KACxB;IACD,iBAAiB,EAAE;QACjB,IAAI,EAAE,QAAQ;QACd,YAAY,EAAE,CAAC;QACf,WAAW,EAAE,gCAAgC;KAC9C;CACF,EACD,EAAE,eAAe,EAAE,IAAI,EAAE,CAC1B,CAAA"}

package/dist/drawxy.d.ts

@@ -0,0 +1,50 @@
+import { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import { Feature, Region } from '@jbrowse/core/util';
+import { ScaleOpts } from './util';
+export declare function drawXY(ctx: CanvasRenderingContext2D, props: {
+    features: Map<string, Feature> | Feature[];
+    bpPerPx: number;
+    regions: Region[];
+    scaleOpts: ScaleOpts;
+    height: number;
+    ticks: {
+        values: number[];
+    };
+    config: AnyConfigurationModel;
+    displayCrossHatches: boolean;
+    offset?: number;
+    colorCallback: (f: Feature, score: number) => string;
+    Color: typeof import('color');
+}): {
+    reducedFeatures: Feature[];
+};
+export declare function drawLine(ctx: CanvasRenderingContext2D, props: {
+    features: Map<string, Feature> | Feature[];
+    regions: Region[];
+    bpPerPx: number;
+    scaleOpts: ScaleOpts;
+    height: number;
+    ticks: {
+        values: number[];
+    };
+    displayCrossHatches: boolean;
+    colorCallback: (f: Feature, score: number) => string;
+    config: AnyConfigurationModel;
+    offset?: number;
+}): {
+    reducedFeatures: Feature[];
+};
+export declare function drawDensity(ctx: CanvasRenderingContext2D, props: {
+    features: Map<string, Feature> | Feature[];
+    regions: Region[];
+    bpPerPx: number;
+    scaleOpts: ScaleOpts;
+    height: number;
+    ticks: {
+        values: number[];
+    };
+    displayCrossHatches: boolean;
+    config: AnyConfigurationModel;
+}): {
+    reducedFeatures: Feature[];
+};

package/dist/drawxy.js

@@ -0,0 +1,411 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.drawDensity = exports.drawLine = exports.drawXY = void 0;
+var configuration_1 = require("@jbrowse/core/configuration");
+var util_1 = require("@jbrowse/core/util");
+var util_2 = require("./util");
+function fillRectCtx(x, y, width, height, ctx, color) {
+    if (width < 0) {
+        x += width;
+        width = -width;
+    }
+    if (height < 0) {
+        y += height;
+        height = -height;
+    }
+    if (color) {
+        ctx.fillStyle = color;
+    }
+    ctx.fillRect(x, y, width, height);
+}
+var fudgeFactor = 0.4;
+var clipHeight = 2;
+function drawXY(ctx, props) {
+    var e_1, _a, e_2, _b, e_3, _c, e_4, _d, e_5, _e;
+    var features = props.features, bpPerPx = props.bpPerPx, regions = props.regions, scaleOpts = props.scaleOpts, unadjustedHeight = props.height, config = props.config, ticks = props.ticks, displayCrossHatches = props.displayCrossHatches, _f = props.offset, offset = _f === void 0 ? 0 : _f, colorCallback = props.colorCallback, Color = props.Color;
+    var _g = __read(regions, 1), region = _g[0];
+    var width = (region.end - region.start) / bpPerPx;
+    // the adjusted height takes into account YSCALEBAR_LABEL_OFFSET from the
+    // wiggle display, and makes the height of the actual drawn area add
+    // "padding" to the top and bottom of the display
+    var height = unadjustedHeight - offset * 2;
+    var filled = (0, configuration_1.readConfObject)(config, 'filled');
+    var clipColor = (0, configuration_1.readConfObject)(config, 'clipColor');
+    var summaryScoreMode = (0, configuration_1.readConfObject)(config, 'summaryScoreMode');
+    var pivotValue = (0, configuration_1.readConfObject)(config, 'bicolorPivotValue');
+    var minSize = (0, configuration_1.readConfObject)(config, 'minSize');
+    var scale = (0, util_2.getScale)(__assign(__assign({}, scaleOpts), { range: [0, height] }));
+    var originY = (0, util_2.getOrigin)(scaleOpts.scaleType);
+    var _h = __read(scale.domain(), 2), niceMin = _h[0], niceMax = _h[1];
+    var toY = function (n) { return (0, util_1.clamp)(height - (scale(n) || 0), 0, height) + offset; };
+    var toOrigin = function (n) { return toY(originY) - toY(n); };
+    var getHeight = function (n) { return (filled ? toOrigin(n) : Math.max(minSize, 1)); };
+    var hasClipping = false;
+    var prevLeftPx = 0;
+    var reducedFeatures = [];
+    var crossingOrigin = niceMin < pivotValue && niceMax > pivotValue;
+    // we handle whiskers separately to render max row, min row, and avg in three
+    // passes. this reduces subpixel rendering issues. note: for stylistic
+    // reasons, clipping indicator is only drawn for score, not min/max score
+    if (summaryScoreMode === 'whiskers') {
+        var lastCol = void 0;
+        var lastMix = void 0;
+        try {
+            for (var _j = __values(features.values()), _k = _j.next(); !_k.done; _k = _j.next()) {
+                var feature = _k.value;
+                var _l = __read((0, util_1.featureSpanPx)(feature, region, bpPerPx), 2), leftPx = _l[0], rightPx = _l[1];
+                if (feature.get('summary')) {
+                    var w = rightPx - leftPx + fudgeFactor;
+                    var max = feature.get('maxScore');
+                    var c = colorCallback(feature, max);
+                    var effectiveC = crossingOrigin
+                        ? c
+                        : c === lastCol
+                            ? lastMix
+                            : (lastMix = Color(c).lighten(0.4).toString());
+                    fillRectCtx(leftPx, toY(max), w, getHeight(max), ctx, effectiveC);
+                    lastCol = c;
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_k && !_k.done && (_a = _j.return)) _a.call(_j);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        lastMix = undefined;
+        lastCol = undefined;
+        try {
+            for (var _m = __values(features.values()), _o = _m.next(); !_o.done; _o = _m.next()) {
+                var feature = _o.value;
+                var _p = __read((0, util_1.featureSpanPx)(feature, region, bpPerPx), 2), leftPx = _p[0], rightPx = _p[1];
+                var score = feature.get('score');
+                var max = feature.get('maxScore');
+                var min = feature.get('minScore');
+                var summary = feature.get('summary');
+                var c = colorCallback(feature, score);
+                var effectiveC = crossingOrigin && summary
+                    ? c === lastCol
+                        ? lastMix
+                        : (lastMix = Color(colorCallback(feature, max))
+                            .mix(Color(colorCallback(feature, min)))
+                            .toString())
+                    : c;
+                var w = Math.max(rightPx - leftPx + fudgeFactor, minSize);
+                // create reduced features, avoiding multiple features per px
+                if (Math.floor(leftPx) !== Math.floor(prevLeftPx)) {
+                    reducedFeatures.push(feature);
+                    prevLeftPx = leftPx;
+                }
+                hasClipping = hasClipping || score < niceMin || score > niceMax;
+                fillRectCtx(leftPx, toY(score), w, getHeight(score), ctx, effectiveC);
+                lastCol = c;
+            }
+        }
+        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        finally {
+            try {
+                if (_o && !_o.done && (_b = _m.return)) _b.call(_m);
+            }
+            finally { if (e_2) throw e_2.error; }
+        }
+        lastMix = undefined;
+        lastCol = undefined;
+        try {
+            for (var _q = __values(features.values()), _r = _q.next(); !_r.done; _r = _q.next()) {
+                var feature = _r.value;
+                var _s = __read((0, util_1.featureSpanPx)(feature, region, bpPerPx), 2), leftPx = _s[0], rightPx = _s[1];
+                if (feature.get('summary')) {
+                    var min = feature.get('minScore');
+                    var c = colorCallback(feature, min);
+                    var w = Math.max(rightPx - leftPx + fudgeFactor, minSize);
+                    var effectiveC = crossingOrigin
+                        ? c
+                        : c === lastCol
+                            ? lastMix
+                            : (lastMix = Color(c).darken(0.4).toString());
+                    fillRectCtx(leftPx, toY(min), w, getHeight(min), ctx, effectiveC);
+                    lastCol = c;
+                }
+            }
+        }
+        catch (e_3_1) { e_3 = { error: e_3_1 }; }
+        finally {
+            try {
+                if (_r && !_r.done && (_c = _q.return)) _c.call(_q);
+            }
+            finally { if (e_3) throw e_3.error; }
+        }
+    }
+    else {
+        try {
+            for (var _t = __values(features.values()), _u = _t.next(); !_u.done; _u = _t.next()) {
+                var feature = _u.value;
+                var _v = __read((0, util_1.featureSpanPx)(feature, region, bpPerPx), 2), leftPx = _v[0], rightPx = _v[1];
+                // create reduced features, avoiding multiple features per px
+                if (Math.floor(leftPx) !== Math.floor(prevLeftPx)) {
+                    reducedFeatures.push(feature);
+                    prevLeftPx = leftPx;
+                }
+                var score = feature.get('score');
+                var c = colorCallback(feature, score);
+                hasClipping = hasClipping || score < niceMin || score > niceMax;
+                var w = Math.max(rightPx - leftPx + fudgeFactor, minSize);
+                if (summaryScoreMode === 'max') {
+                    var s = feature.get('summary') ? feature.get('maxScore') : score;
+                    fillRectCtx(leftPx, toY(s), w, getHeight(s), ctx, c);
+                }
+                else if (summaryScoreMode === 'min') {
+                    var s = feature.get('summary') ? feature.get('minScore') : score;
+                    fillRectCtx(leftPx, toY(s), w, getHeight(s), ctx, c);
+                }
+                else {
+                    fillRectCtx(leftPx, toY(score), w, getHeight(score), ctx, c);
+                }
+            }
+        }
+        catch (e_4_1) { e_4 = { error: e_4_1 }; }
+        finally {
+            try {
+                if (_u && !_u.done && (_d = _t.return)) _d.call(_t);
+            }
+            finally { if (e_4) throw e_4.error; }
+        }
+    }
+    // second pass: draw clipping
+    // avoid persisting the red fillstyle with save/restore
+    ctx.save();
+    if (hasClipping) {
+        ctx.fillStyle = clipColor;
+        try {
+            for (var _w = __values(features.values()), _x = _w.next(); !_x.done; _x = _w.next()) {
+                var feature = _x.value;
+                var _y = __read((0, util_1.featureSpanPx)(feature, region, bpPerPx), 2), leftPx = _y[0], rightPx = _y[1];
+                var w = rightPx - leftPx + fudgeFactor;
+                var score = feature.get('score');
+                if (score > niceMax) {
+                    fillRectCtx(leftPx, offset, w, clipHeight, ctx);
+                }
+                else if (score < niceMin && scaleOpts.scaleType !== 'log') {
+                    fillRectCtx(leftPx, unadjustedHeight, w, clipHeight, ctx);
+                }
+            }
+        }
+        catch (e_5_1) { e_5 = { error: e_5_1 }; }
+        finally {
+            try {
+                if (_x && !_x.done && (_e = _w.return)) _e.call(_w);
+            }
+            finally { if (e_5) throw e_5.error; }
+        }
+    }
+    ctx.restore();
+    if (displayCrossHatches) {
+        ctx.lineWidth = 1;
+        ctx.strokeStyle = 'rgba(200,200,200,0.5)';
+        ticks.values.forEach(function (tick) {
+            ctx.beginPath();
+            ctx.moveTo(0, Math.round(toY(tick)));
+            ctx.lineTo(width, Math.round(toY(tick)));
+            ctx.stroke();
+        });
+    }
+    return { reducedFeatures: reducedFeatures };
+}
+exports.drawXY = drawXY;
+function drawLine(ctx, props) {
+    var e_6, _a;
+    var features = props.features, regions = props.regions, bpPerPx = props.bpPerPx, scaleOpts = props.scaleOpts, unadjustedHeight = props.height, values = props.ticks.values, displayCrossHatches = props.displayCrossHatches, colorCallback = props.colorCallback, config = props.config, _b = props.offset, offset = _b === void 0 ? 0 : _b;
+    var _c = __read(regions, 1), region = _c[0];
+    var width = (region.end - region.start) / bpPerPx;
+    // the adjusted height takes into account YSCALEBAR_LABEL_OFFSET from the
+    // wiggle display, and makes the height of the actual drawn area add
+    // "padding" to the top and bottom of the display
+    var height = unadjustedHeight - offset * 2;
+    var clipColor = (0, configuration_1.readConfObject)(config, 'clipColor');
+    var scale = (0, util_2.getScale)(__assign(__assign({}, scaleOpts), { range: [0, height] }));
+    var _d = __read(scale.domain(), 2), niceMin = _d[0], niceMax = _d[1];
+    var toY = function (n) { return (0, util_1.clamp)(height - (scale(n) || 0), 0, height) + offset; };
+    var lastVal;
+    var prevLeftPx = 0;
+    var reducedFeatures = [];
+    try {
+        for (var _e = __values(features.values()), _f = _e.next(); !_f.done; _f = _e.next()) {
+            var feature = _f.value;
+            var _g = __read((0, util_1.featureSpanPx)(feature, region, bpPerPx), 2), leftPx = _g[0], rightPx = _g[1];
+            // create reduced features, avoiding multiple features per px
+            if (Math.floor(leftPx) !== Math.floor(prevLeftPx)) {
+                reducedFeatures.push(feature);
+                prevLeftPx = leftPx;
+            }
+            var score = feature.get('score');
+            var lowClipping = score < niceMin;
+            var highClipping = score > niceMax;
+            var w = rightPx - leftPx + fudgeFactor;
+            var c = colorCallback(feature, score);
+            ctx.beginPath();
+            ctx.strokeStyle = c;
+            var startPos = typeof lastVal !== 'undefined' ? lastVal : score;
+            if (!region.reversed) {
+                ctx.moveTo(leftPx, toY(startPos));
+                ctx.lineTo(leftPx, toY(score));
+                ctx.lineTo(rightPx, toY(score));
+            }
+            else {
+                ctx.moveTo(rightPx, toY(startPos));
+                ctx.lineTo(rightPx, toY(score));
+                ctx.lineTo(leftPx, toY(score));
+            }
+            ctx.stroke();
+            lastVal = score;
+            if (highClipping) {
+                ctx.fillStyle = clipColor;
+                ctx.fillRect(leftPx, offset, w, clipHeight);
+            }
+            else if (lowClipping && scaleOpts.scaleType !== 'log') {
+                ctx.fillStyle = clipColor;
+                ctx.fillRect(leftPx, height - clipHeight, w, height);
+            }
+        }
+    }
+    catch (e_6_1) { e_6 = { error: e_6_1 }; }
+    finally {
+        try {
+            if (_f && !_f.done && (_a = _e.return)) _a.call(_e);
+        }
+        finally { if (e_6) throw e_6.error; }
+    }
+    if (displayCrossHatches) {
+        ctx.lineWidth = 1;
+        ctx.strokeStyle = 'rgba(200,200,200,0.5)';
+        values.forEach(function (tick) {
+            ctx.beginPath();
+            ctx.moveTo(0, Math.round(toY(tick)));
+            ctx.lineTo(width, Math.round(toY(tick)));
+            ctx.stroke();
+        });
+    }
+    return { reducedFeatures: reducedFeatures };
+}
+exports.drawLine = drawLine;
+function drawDensity(ctx, props) {
+    var e_7, _a, e_8, _b;
+    var features = props.features, regions = props.regions, bpPerPx = props.bpPerPx, scaleOpts = props.scaleOpts, height = props.height, config = props.config;
+    var _c = __read(regions, 1), region = _c[0];
+    var pivot = (0, configuration_1.readConfObject)(config, 'bicolorPivot');
+    var pivotValue = (0, configuration_1.readConfObject)(config, 'bicolorPivotValue');
+    var negColor = (0, configuration_1.readConfObject)(config, 'negColor');
+    var posColor = (0, configuration_1.readConfObject)(config, 'posColor');
+    var color = (0, configuration_1.readConfObject)(config, 'color');
+    var clipColor = (0, configuration_1.readConfObject)(config, 'clipColor');
+    var crossing = pivot !== 'none' && scaleOpts.scaleType !== 'log';
+    var scale = (0, util_2.getScale)(__assign(__assign({}, scaleOpts), { pivotValue: crossing ? pivotValue : undefined, range: crossing ? [negColor, 'white', posColor] : ['white', posColor] }));
+    var scale2 = (0, util_2.getScale)(__assign(__assign({}, scaleOpts), { range: [0, height] }));
+    var cb;
+    if (color === '#f0f') {
+        cb = function (_feature, score) { return scale(score); };
+    }
+    else {
+        cb = function (feature, score) {
+            return (0, configuration_1.readConfObject)(config, 'color', { feature: feature, score: score });
+        };
+    }
+    var _d = __read(scale2.domain(), 2), niceMin = _d[0], niceMax = _d[1];
+    var prevLeftPx = 0;
+    var hasClipping = false;
+    var reducedFeatures = [];
+    try {
+        for (var _e = __values(features.values()), _f = _e.next(); !_f.done; _f = _e.next()) {
+            var feature = _f.value;
+            var _g = __read((0, util_1.featureSpanPx)(feature, region, bpPerPx), 2), leftPx = _g[0], rightPx = _g[1];
+            // create reduced features, avoiding multiple features per px
+            if (Math.floor(leftPx) !== Math.floor(prevLeftPx)) {
+                reducedFeatures.push(feature);
+                prevLeftPx = leftPx;
+            }
+            var score = feature.get('score');
+            hasClipping = hasClipping || score > niceMax || score < niceMin;
+            var w = rightPx - leftPx + fudgeFactor;
+            ctx.fillStyle = cb(feature, score);
+            ctx.fillRect(leftPx, 0, w, height);
+        }
+    }
+    catch (e_7_1) { e_7 = { error: e_7_1 }; }
+    finally {
+        try {
+            if (_f && !_f.done && (_a = _e.return)) _a.call(_e);
+        }
+        finally { if (e_7) throw e_7.error; }
+    }
+    // second pass: draw clipping
+    // avoid persisting the red fillstyle with save/restore
+    ctx.save();
+    if (hasClipping) {
+        ctx.fillStyle = clipColor;
+        try {
+            for (var _h = __values(features.values()), _j = _h.next(); !_j.done; _j = _h.next()) {
+                var feature = _j.value;
+                var _k = __read((0, util_1.featureSpanPx)(feature, region, bpPerPx), 2), leftPx = _k[0], rightPx = _k[1];
+                var w = rightPx - leftPx + fudgeFactor;
+                var score = feature.get('score');
+                if (score > niceMax) {
+                    fillRectCtx(leftPx, 0, w, clipHeight, ctx);
+                }
+                else if (score < niceMin && scaleOpts.scaleType !== 'log') {
+                    fillRectCtx(leftPx, 0, w, clipHeight, ctx);
+                }
+            }
+        }
+        catch (e_8_1) { e_8 = { error: e_8_1 }; }
+        finally {
+            try {
+                if (_j && !_j.done && (_b = _h.return)) _b.call(_h);
+            }
+            finally { if (e_8) throw e_8.error; }
+        }
+    }
+    ctx.restore();
+    return { reducedFeatures: reducedFeatures };
+}
+exports.drawDensity = drawDensity;
+//# sourceMappingURL=drawxy.js.map