@sschmidTU for example some variables
// protected zoomUpdated: boolean = false;
// protected needBackendUpdate: boolean = false;
// protected rules!: EngravingRules;
// protected sheet?: MusicSheet;
// protected graphic?: GraphicalMusicSheet;
// protected drawer!: VexFlowMusicSheetDrawer;
// protected drawingParameters!: DrawingParameters;and the private function reset
I create a class which extends the OpenSheetMusicDisplay.ts and need override some function and needs call these variable. It's wonderful if the lib change the private to protected for extend
for now at least for the variables you can use e.g.
(sheet as any).member to access them.
there is nothing private anymore in OpenSheetMusicDisplay.ts
you're welcome! by the way, it would be fantastic if you considered becoming our sponsor on github :)
https://github.com/sponsors/opensheetmusicdisplay
https://github.com/sponsors/opensheetmusicdisplay
I think I have seen a method with a promising name, but I ended up doing something like this:
let graphicalMeasure = osmdInstance.graphic.getGraphicalMeasureFromSourceMeasureAndIndex(
measure,
0
);
let rect = document.createElementNS(SVGNS, 'rect');
if (graphicalMeasure && graphicalMeasure.stave) {
['x', 'y', 'width', 'height'].forEach(prop => {
rect.setAttribute(prop, graphicalMeasure.stave[prop]);
}
svg.appendChild(rect);and styling the rect appropriately.
I'm sort of happy with the above solution, only complaint is that the lower border is below the bottom line of the system - sort of makes sense because you get the noteheads below the bottom line inside your frame, but it also looks a bit odd.
(This of course requires using the SVG backend too, I don't know how to do it if you use Canvas)
@sschmidTU I think I saw a "render until measure X" parameter mentioned somewhere. Would that be a step towards rendering parts at a time?
I mean #937 by the way
@zhong_yi_ta_gitlab do you want this?
@zhong_yi_ta_gitlab
public moveToGraphicalMeasure(graphicalMeasure?: GraphicalMeasure, forceShow?: boolean): this {
if (!graphicalMeasure) return this;
const musicSystem: MusicSystem = graphicalMeasure.ParentMusicSystem;
if (!musicSystem) return this;
const nextMusicSystem = musicSystem.NextSystem;
const bboxMusicSystem = musicSystem.PositionAndShape;
const bboxMeasure = graphicalMeasure.PositionAndShape;
const x = bboxMeasure.AbsolutePosition.x + bboxMeasure.BorderMarginLeft;
const width = bboxMeasure.Size.width;
const y = bboxMusicSystem.AbsolutePosition.y + bboxMusicSystem.BorderMarginTop;
let height = 0;
if (!nextMusicSystem) {
height = bboxMusicSystem.Size.height;
} else {
const bboxNextMusicSystem = nextMusicSystem.PositionAndShape;
height = bboxNextMusicSystem.AbsolutePosition.y + bboxNextMusicSystem.BorderMarginTop - y;
}
const offsetHaftHeight = 0.1;
const offsetHaftWidth = 0.2;
const tmpRect = new RectangleF2D(
x - offsetHaftWidth,
y - offsetHaftHeight,
width + offsetHaftWidth * 2,
height + offsetHaftHeight * 2
);
const rect = this.controller.applyScreenTransformationForRect(tmpRect);
this.currentGraphicalMeasure = graphicalMeasure;
// console.log(graphicalMeasure)
// console.log((graphicalMeasure as any).stave, x, y, width, height)
if (forceShow && this.hidden) {
return this.updateStyle(rect).show();
} {
return this.updateStyle(rect);
}
}
basically like this, you get the
rect then you add custom cursor svg like @hallvors
while i draw a rect on sheet, the x position seems not correct. What's wrong with my code?
```
let graphicalMeasure = this.osmd.graphic.getGraphicalMeasureFromSourceMeasureAndIndex(this.getCurrentCursorMeasure(), 1);
var svgns = "http://www.w3.org/2000/svg";
var svg = document.getElementById('svg');
var shape = document.createElementNS(svgns, "rect");
shape.setAttributeNS(null, "x", graphicalMeasure.stave['x']);
shape.setAttributeNS(null, "y", graphicalMeasure.stave['y']);
shape.setAttributeNS(null, "width", graphicalMeasure.stave['width']);
shape.setAttributeNS(null, "height", graphicalMeasure.stave['height']);
shape.setAttributeNS(null, "fill", "blue");
svg.appendChild(shape);
``` 
also with transparency:
#32cfeb66
at the moment I have a version that works for uncompressed xml files, by reading them into a string and passing that to OSMD, but is there a way to do the same with the compressed files without unzipping them
@norppa have you seen our React example project?
https://github.com/opensheetmusicdisplay/react-opensheetmusicdisplay
also, OSMD can read mxl files (which is zipped musicxml) and unzip them, so you should be able to pass in the compressed file to osmd.load().
but if you really want OSMD to handle the filestream directly, i don't know that there's a universal filestream API for javascript/typescript, so you'll probably have to convert the stream to string anyways. (and pass that to OSMD)