When using in smaller window, viewport resizes and becomes glichy [minor? ;) ]

[JulianVolodia]

What happened?

Cursor warps to another place when auto-resize event of viewport comes into play.
Resizing is because of doc view shows large amount of text and proportions are not locked when writing (should be imho only when window resizing).

Steps to reproduce problem

Write code in small window. Move cursor around, with intention to edit code.

Here is video how that works.
without blockers https://youtu.be/KX-JE1DxWxg
with blockers https://youtu.be/D2Z2-T_kjkg

Additional info

Browser

Browser: Chrome

Version: 80.0.3987.163

Are you using any extensions/plugins that affect website behavior
(particularly those that affect iframes, such as ad blockers)?
Check both with and without

Are there any warnings or errors in your browser's JavaScript console?
If so, paste them below:

Machine

Operating system: Windows 10

Version: 1909 (comp. 18363.752)

Your code

What code was in the editor, if any, when the failure occurred? You
can paste it in below:

(this is only wip code but reproductible on it so pasted it)

import 'dart:math';

abstract class IShape2D {
  circumference();
  area();
}

abstract class IShape3D extends IShape2D {
  volume();
}

class CCircle implements IShape2D {
  double _radius;
  
  CCircle(this._radius);
  
  circumference() {
    return 2 * pi * _radius;
  }
  
  area() {
    return pi * _radius * _radius;
  }
}

class CSquare implements IShape2D {
  double _length;
  
  CSquare(this._length);
  
  circumference() {
    return 4 * _length;
  }
  
  area() {
    return _length * _length;
  }
}

class CAreaCalculator {
  List<dynamic> shapes;
  
  CAreaCalculator(this.shapes);
  
  sum() {
    double sumVal = 0;
    
    for (var shape in shapes) {
      sumVal += shape.area();
    }
    
    return sumVal;
  }
}

class CCalculatorOutputter {
  
  CCalculatorOutputter() {
    
  }
  
  ToJSON() {
    return '{ \'' + this.name + '\': ' + this.value + '}\n';
  }
  
  ToXML() {
    return '{ \'' + this.name + '\': ' + this.value + '}\n';
  }
}

int main() {
  var shapes = [CCircle(2), CSquare(5), CSquare(7)];
  
  var areas  = CAreaCalculator(shapes);
  var output = CCalculatorOutputter(areas);
  
  print(output.ToJSON());
  print(output.ToXML());
  print(output.ToString());
  
  return 0;
}

DartPad's output

Did DartPad print anything to the console pane? If so, paste it below:

Only these warining level err msgs

DevTools failed to parse SourceMap: https://dartpad.dev/scripts/playground.dart.js.map
DevTools failed to parse SourceMap: https://dartpad.dev/split.min.js.map

[RedBrogdon]

Weird. I can verify that the cursor does appear to jump around when the window gets that small with that code. When I resume typing, though, new characters are inserted in the correct locations.

This could be a CodeMirror issue, though we'd have to do more digging to be sure.

[JulianVolodia]

Weird. I can verify that the cursor does appear to jump around when the window gets that small with that code. When I resume typing, though, new characters are inserted in the correct locations.

This could be a CodeMirror issue, though we'd have to do more digging to be sure.

Hi @RedBrogdon Thanks for verifying.

If you tell me where I could dig to see what causing the thing, or could point directly which dart internals docs could I read that would be great :) Maybe that is good for some first playing around with contribution here.

[RedBrogdon]

To be honest, I don't have much to go on here, as I'm not terribly familiar with the internals of CodeMirror, which is the editor we use. I'd probably start by just getting DartPad into the state you describe, opening the inspector, and seeing what the DOM looks like. From there you can try to work back to whether it's CSS or JS that's causing the issue. Our code is in Dart, but we import CodeMirror as a JS library, so its code is intact as JavaScript.

[parlough]

Thanks again for the report, the reproduction details, and videos!

I'm going to close this issue as stale as the implementation of DartPad has changed significantly since this issue was reported, and before investing too much in CodeMirror or the interaction with it, we'd likely switch to another text editor (#2743).

If anyone is still experiencing issues like this or otherwise, please open a new issue with new reproduction details. Thanks so much :D