@rcsb/rcsb-saguaro
Version:
RCSB 1D Feature Viewer
173 lines (172 loc) • 7.84 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.RcsbD3Manager = void 0;
const tslib_1 = require("tslib");
const RcsbD3Constants_1 = require("./RcsbD3Constants");
const d3_selection_1 = require("d3-selection");
const classes = tslib_1.__importStar(require("../../scss/RcsbBoard.module.scss"));
class RcsbD3Manager {
constructor() {
this._trackHeightPosition = 0;
}
svgG() {
return this._svgG;
}
zoomG() {
return this._zoomG;
}
buildSvgNode(config) {
this._dom = (0, d3_selection_1.select)(document.getElementById(config.elementId));
this._dom.classed(config.domClass, true)
.style(RcsbD3Constants_1.RcsbD3Constants.WIDTH, config.width + "px");
this._svg = this._dom.append(RcsbD3Constants_1.RcsbD3Constants.SVG)
.attr(RcsbD3Constants_1.RcsbD3Constants.CLASS, config.svgClass)
.attr(RcsbD3Constants_1.RcsbD3Constants.WIDTH, config.width)
.attr(RcsbD3Constants_1.RcsbD3Constants.POINTER_EVENTS, config.pointerEvents);
this.addBoardEvents(config);
this._width = config.width;
}
addBoardEvents(config) {
this._svg.on(RcsbD3Constants_1.RcsbD3Constants.CONTEXT_MENU, (event) => {
event.preventDefault();
})
.on(RcsbD3Constants_1.RcsbD3Constants.MOUSE_WHEEL, (event) => {
event.preventDefault();
}, {
passive: true
}).on(RcsbD3Constants_1.RcsbD3Constants.MOUSE_MOVE, (event) => {
config.boardSubject.mousemove.next({
e: event,
n: Math.round(config.xScale.invert((0, d3_selection_1.pointer)(event, this.getPane())[0]))
});
})
.on(RcsbD3Constants_1.RcsbD3Constants.MOUSE_ENTER, (event) => {
config.boardSubject.mouseenter.next(event);
})
.on(RcsbD3Constants_1.RcsbD3Constants.MOUSE_LEAVE, (event) => {
config.boardSubject.mouseleave.next(event);
});
}
addMainG(config) {
this._zoomG = this._svg.append(RcsbD3Constants_1.RcsbD3Constants.G);
this._svgG = this._zoomG.attr(RcsbD3Constants_1.RcsbD3Constants.CLASS, config.masterClass)
.append(RcsbD3Constants_1.RcsbD3Constants.G)
.attr(RcsbD3Constants_1.RcsbD3Constants.CLASS, config.innerClass)
.on(RcsbD3Constants_1.RcsbD3Constants.DBL_CLICK, config.dblClick)
.on(RcsbD3Constants_1.RcsbD3Constants.MOUSE_DOWN, config.mouseDown)
.on(RcsbD3Constants_1.RcsbD3Constants.MOUSE_UP, config.mouseUp)
.on(RcsbD3Constants_1.RcsbD3Constants.MOUSE_ENTER, config.mouseEnter)
.on(RcsbD3Constants_1.RcsbD3Constants.MOUSE_LEAVE, config.mouseLeave);
}
addPane(config) {
this._pane = this._svgG
.append(RcsbD3Constants_1.RcsbD3Constants.RECT)
.attr(RcsbD3Constants_1.RcsbD3Constants.CLASS, config.paneClass)
.attr(RcsbD3Constants_1.RcsbD3Constants.ID, config.elementId)
.attr(RcsbD3Constants_1.RcsbD3Constants.WIDTH, this._width)
.style(RcsbD3Constants_1.RcsbD3Constants.FILL, config.bgColor);
}
getPane() {
const out = this._pane.node();
if (out == null)
throw "SVG main panel is null";
return out;
}
resetAllTracks() {
this._trackHeightPosition = 0;
this._svgG.selectAll("." + classes.rcsbTrack).remove();
}
addTrack(config) {
//TODO why color filling is setup here ? (Line 141 should be enough)
this._pane.style(RcsbD3Constants_1.RcsbD3Constants.FILL, config.bgColor);
const trackG = this._svgG
.append(RcsbD3Constants_1.RcsbD3Constants.G)
.attr(RcsbD3Constants_1.RcsbD3Constants.CLASS, config.trackClass)
.attr(RcsbD3Constants_1.RcsbD3Constants.TRANSFORM, "translate(0," + (this._trackHeightPosition + config.compositeHeight) + ")");
this._trackHeightPosition += config.height;
return trackG;
}
setBoardHeight(height) {
this._dom.style(RcsbD3Constants_1.RcsbD3Constants.HEIGHT, height + "px");
this._svg.attr(RcsbD3Constants_1.RcsbD3Constants.HEIGHT, height);
this._pane.attr(RcsbD3Constants_1.RcsbD3Constants.HEIGHT, height);
}
addZoom(config) {
this._zoomG.call(config.zoomEventHandler.on(RcsbD3Constants_1.RcsbD3Constants.ZOOM, config.zoomCallback)).on(RcsbD3Constants_1.RcsbD3Constants.DBLCLIK_ZOOM, null);
}
highlightRegion(hlConfig) {
const elementsToSelect = new Array();
const hlRegion = (begin, end) => {
return { begin: begin, end: end };
};
const minWidth = (begin, end) => {
var _a, _b;
let w = ((_a = hlConfig.xScale(end + 0.5)) !== null && _a !== void 0 ? _a : 0) - ((_b = hlConfig.xScale(begin - 0.5)) !== null && _b !== void 0 ? _b : 0);
if (w < 2)
w = 2;
return w;
};
hlConfig.elements.forEach(e => {
var _a;
const end = (_a = e.end) !== null && _a !== void 0 ? _a : e.begin;
if (e.isEmpty) {
elementsToSelect.push(hlRegion(e.begin, e.begin));
elementsToSelect.push(hlRegion(end, end));
}
else if (e.gaps != null && e.gaps.length > 0) {
let begin = e.begin;
e.gaps.forEach(gap => {
let end = gap.begin;
elementsToSelect.push(hlRegion(begin, end));
begin = gap.end;
});
elementsToSelect.push(hlRegion(begin, end));
}
else {
elementsToSelect.push(hlRegion(e.begin, end));
}
});
const elements = hlConfig.trackG
.selectAll("." + hlConfig.rectClass)
.data(elementsToSelect, (d) => { return d.begin + ":" + d.end; });
elements.enter()
.append(RcsbD3Constants_1.RcsbD3Constants.G)
.attr(RcsbD3Constants_1.RcsbD3Constants.CLASS, hlConfig.rectClass)
.call((e) => {
var _a;
e.append(RcsbD3Constants_1.RcsbD3Constants.RECT)
.attr(RcsbD3Constants_1.RcsbD3Constants.X, (d) => {
var _a;
return (_a = hlConfig.xScale(d.begin - 0.5)) !== null && _a !== void 0 ? _a : 0;
})
.attr(RcsbD3Constants_1.RcsbD3Constants.Y, 0)
.attr(RcsbD3Constants_1.RcsbD3Constants.WIDTH, (d) => {
return minWidth(d.begin, d.end);
})
.attr(RcsbD3Constants_1.RcsbD3Constants.HEIGHT, hlConfig.height)
.attr(RcsbD3Constants_1.RcsbD3Constants.FILL, (_a = hlConfig.color) !== null && _a !== void 0 ? _a : "#faf3c0")
.attr(RcsbD3Constants_1.RcsbD3Constants.FILL_OPACITY, 0.75);
})
.lower();
elements.exit().remove();
}
moveSelection(config) {
const minWidth = (begin, end) => {
var _a, _b;
let w = ((_a = config.xScale(end + 0.5)) !== null && _a !== void 0 ? _a : 0) - ((_b = config.xScale(begin - 0.5)) !== null && _b !== void 0 ? _b : 0);
if (w < 2)
w = 2;
return w;
};
const selectRect = config.trackG.selectAll("." + config.rectClass);
selectRect.select(RcsbD3Constants_1.RcsbD3Constants.RECT)
.attr(RcsbD3Constants_1.RcsbD3Constants.X, (d) => {
var _a;
return (_a = config.xScale(d.begin - 0.5)) !== null && _a !== void 0 ? _a : 0;
})
.attr(RcsbD3Constants_1.RcsbD3Constants.WIDTH, (d) => {
return minWidth(d.begin, d.end);
});
}
}
exports.RcsbD3Manager = RcsbD3Manager;