Bug: Interface issues after update.

[awmasakityan]

Describe the issue

After updating from version 1.23.1 to 1.28.0, I've encountered the following issues:

Steps to reproduce the issue

let canvas = document.querySelector('#drawingCanvas') as HTMLElement;

  this.editor = new Editor(canvas, {
    iconProvider: new MaterialIconProvider(),
    wheelEventsEnabled: 'only-if-focused'
  });

  this.editor.dispatch(this.editor.setBackgroundStyle({autoresize: true, type: (this.activeDentalChartBackground) 
    ? jsdraw.BackgroundComponentBackgroundType.SolidColor : jsdraw.BackgroundComponentBackgroundType.Grid, 
    color: (this.activeDentalChartBackground) ? jsdraw.Color4.fromHex('#E9F5F2') : jsdraw.Color4.transparent}), false);      


  this.editor.getRootElement().style.height = `${this.drawingContent.clientHeight}px`;
  this.editor.getRootElement().style.width = `${this.drawingContent.clientWidth}px`;          

  //Tool Controller
  const toolController = this.editor.toolController;

  //Set New Text Tool
  const textTools = toolController.getMatchingTools(TextTool);
  const fontFamily = ['Times New Roman', 'Arial', 'Calibri', 'Cambria', 'Verdana', 'Tahoma', 'Georgia', 'Palatino Linotype', 'Courier New', 'Trebuchet MS', 'Book Antiqua', 'Century Gothic', 'Garamond', 'Impact', 'Comic Sans MS'];
  textTools[0].setColor(Color4.black);

  // Add a new pen after the existing
  const originalPenTools = toolController.getMatchingTools(PenTool);      
  
  const penStyle: jsdraw.PenStyle = {
    color: Color4.black,
    factory: makePressureSensitiveFreehandLineBuilder,  
    thickness: 8
  };

  const newPen = new PenTool(this.editor, 'Pen', penStyle);

  // Add after the first pre-existing pen tool
  toolController.insertToolsAfter(originalPenTools[0], [ newPen ]);

  // Remove the previous pen tools
  toolController.removeAndDestroyTools(originalPenTools);

  // Make the new pen a primary tool -- it disables other primary tools
  // when the user first enables it (like the default eraser/text tool/pens)
  toolController.addPrimaryTool(newPen);

  // Must be done after changing the tools:
  // Add a toolbar
  const toolbar = makeEdgeToolbar(this.editor);

  // ...with the default elements
  toolbar.addDefaults();             

Expected behavior

No response

Observed behavior

No response

Version information

1.28.0

Platform

No response

Logs

Additional information

No response

[personalizedrefrigerator]

I'm assuming the issue is that the grid isn't filling the editor.

I'm having trouble reproducing this locally, based on what was posted above. Here's the HTML I'm testing with (based on the code provided above):

HTML & JS

<script src="https://cdn.jsdelivr.net/npm/js-draw@1.28.0/dist/bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@js-draw/material-icons@1.28.0/dist/bundle.js"></script>
<div id="drawingCanvas"></div>

<!-- The drawing to be loaded in the editor -->
<svg id="test-drawing"  viewBox="-245.37 -130.7575 727.8975 794.75" width="727.8975" height="794.75" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" class="js-draw--autoresize"><path d="M482.5275,663.9925l0-794.75l-727.8975-2.842170943040401e-14l0,794.75l727.8975,0" fill="#1f1f1f" class="js-draw-image-background"></path><path d="M-122.4175,663.9925l7.48-.935q-.935-11.22 -2.805-25.245q-54.6975-174.3775 -120.1475-387.09l-7.48,1.87q65.45,213.18 119.68,387.09q2.3375,13.09 3.2725,24.31 M482.5275,-125.615l-6.0775-5.1425q-44.88,50.0225 -100.045,111.7325q-151.47,177.65 -332.3925,397.8425q-151.9375,203.3625 -160.82,257.5925q-2.805,16.83 -5.61,26.18l7.48,.4675l-7.48,.935q10.285-8.8825 13.09-26.18q8.415-51.8925 159.885-253.8525q180.455-220.1925 331.925-397.8425q54.6975-61.2425 100.045-111.7325 M467.1,-121.4075l5.61,5.61q6.0775-6.0775 9.35-9.35l-5.61-5.61l6.0775,5.1425q-9.35-1.87 -15.4275,4.2075 M475.515,-120.005l-5.61-4.675q-2.3375,2.3375 -3.2725,3.74l6.0775,5.1425l-5.61-5.61q6.545,3.74 8.415,1.4025" fill="#9ea0a5"></path><text style="transform: matrix(3.82454, -3.8276, 3.8276, 3.82454, 20.4038, 543.261); font-family: sans-serif; font-size: 24px; fill: rgba(255, 255, 255, 0.73);" data-highp-transform="matrix(3.824538944379187,-3.8275998000402,3.8275998000402,3.824538944379187,20.40374999999986,543.260625)">Testing!!!</text></svg>

<script>
	let canvas = document.querySelector('#drawingCanvas');
	const MaterialIconProvider = jsdrawMaterialIcons.makeMaterialIconProviderClass(jsdraw);
	const { TextTool, Color4, PenTool, makePressureSensitiveFreehandLineBuilder, makeEdgeToolbar } = jsdraw;

	class Test {
		constructor() {
			// I'm assuming that this is what's going to be loaded
			// in the editor:
			this.drawingContent = document.querySelector('#test-drawing');

			this.editor = new jsdraw.Editor(canvas, {
				iconProvider: new MaterialIconProvider(),
				wheelEventsEnabled: 'only-if-focused'
			});

			this.editor.dispatch(
				this.editor.setBackgroundStyle({
					autoresize: true,
					type: (this.activeDentalChartBackground) 
			? jsdraw.BackgroundComponentBackgroundType.SolidColor : jsdraw.BackgroundComponentBackgroundType.Grid, 
					color: (this.activeDentalChartBackground) ? jsdraw.Color4.fromHex('#E9F5F2') : jsdraw.Color4.transparent
				}), false);		
		
		
			this.editor.getRootElement().style.height = `${this.drawingContent.clientHeight}px`;
			this.editor.getRootElement().style.width = `${this.drawingContent.clientWidth}px`;
				
		
			//Tool Controller
			const toolController = this.editor.toolController;
		
			//Set New Text Tool
			const textTools = toolController.getMatchingTools(TextTool);
			const fontFamily = ['Times New Roman', 'Arial', 'Calibri', 'Cambria', 'Verdana', 'Tahoma', 'Georgia', 'Palatino Linotype', 'Courier New', 'Trebuchet MS', 'Book Antiqua', 'Century Gothic', 'Garamond', 'Impact', 'Comic Sans MS'];
			textTools[0].setColor(jsdraw.Color4.black);
		
			// Add a new pen after the existing
			const originalPenTools = toolController.getMatchingTools(PenTool);		
			
			const penStyle = {
				color: Color4.black,
				factory: makePressureSensitiveFreehandLineBuilder,	
				thickness: 8
			};
		
			const newPen = new PenTool(this.editor, 'Pen', penStyle);
		
			// Add after the first pre-existing pen tool
			toolController.insertToolsAfter(originalPenTools[0], [ newPen ]);
		
			// Remove the previous pen tools
			toolController.removeAndDestroyTools(originalPenTools);
		
			// Make the new pen a primary tool -- it disables other primary tools
			// when the user first enables it (like the default eraser/text tool/pens)
			toolController.addPrimaryTool(newPen);
		
			// Must be done after changing the tools:
			// Add a toolbar
			const toolbar = makeEdgeToolbar(this.editor);
		
			// ...with the default elements
			toolbar.addDefaults();
		}
	}

	new Test();
</script>

Here are some things to check:

• Is any CSS styling the drawing canvas to be smaller than it should? Both the canvas.dryInkCanvas and canvas.wetInkCanvas should fill the div.imageEditorRenderArea.
• Which is the first minor version (e.g. 1.24, 1.25, 1.26, 1.27) that breaks?

For reference, this is a list of the changes between the two versions.

[awmasakityan]

Thank you for your response.

• None, please see the image below both dryInkCanvas and wetInkCanvas fill the imageEditorRenderArea

• 1.24.1 is the first minor version where the code breaks.

[personalizedrefrigerator]

• 1.24.1 is the first minor version where the code breaks.

The change that's most likely to be relevant is changes to the text tool in this commit:

• From the development tools, does deleting the div.anchored-element-overlay help? (This is to test the hypothesis that the text tool changes are related to the issue).
• Does the .imageEditorRenderArea div fill the full image editor?