some feedback from building ChartView - web support and a few language notes

madru

Hi Garry,

While working on CharView, I’ve come across a few things that would make building this sort of component easier. I’ve listed them roughly in order of importance.

Web

Custom Canvas subclasses on web pages. A class ChartView Inherits Canvas compiles in a web project, but can’t be placed on a page: "unknown control type 'ChartView'; supported types are Button, …, Canvas, …".

At the moment, the workaround is a plain Canvas plus chart.Draw(g, …) in its Paint event, with all mouse events forwarded by hand. Allowing Canvas subclasses in the web layout, as on desktop, would make reusable web controls possible.

Conditional compilation for the target. Symbols such as TargetDesktop / TargetWeb (and perhaps TargetMacOS / TargetWindows) for @If would allow one source file to serve both targets.

At present I use a manually set constant for desktop-only calls such as PrintJob, Clipboard and Keyboard, which works, but is a little clunky.

Modifier keys in web Canvas mouse events. Keyboard isn’t available on the web, so things like Shift+drag can’t be detected in MouseDown.

A Keyboard.ShiftDown equivalent, or modifier flags on the mouse events, would be useful.

Desktop

Canvas.Refresh() paints synchronously on desktop. In a test, 20 Refresh() calls in a row resulted in 20 full paints.

During a mouse drag, every MouseDrag therefore triggers a redraw, events queue up, and the display starts to lag behind the mouse. I currently merge repaints using a 15 ms timer.

The web Canvas documentation says repeated refreshes are coalesced there. The same behaviour on desktop, or a separate Invalidate() that paints once on the next frame, would remove the need for that workaround.

Language / compiler

Whole numbers in a Double array literal remain Integer at runtime.

Var a() As Double = [12, 8, 0]
Var v As Double = a[0]
If a[0].IsNaN() Then ...

The last line gives a runtime error: "Only instances have methods".

I currently store values as d + 0.0 to avoid this. Given that the array is declared As Double, converting the elements to Double would seem the expected behaviour.

Var d As New DateTime(…) is rejected with "Expected class name after 'New'", while:

Var d As DateTime = New DateTime(…)

works. This is slightly surprising, since As New works for classes.

A local variable can silently hide a method. Identifiers are case-insensitive, so a local fmt hid my Fmt() method, and calls then failed with a rather confusing error.

A warning such as “local variable shadows a method of the same name” would help.

Module variables can’t have a visibility modifier. Private Var x As Integer inside a module gives "Expected declaration after modifier".

Allowing Private / Public on module variables, as with methods and constants, would make encapsulation cleaner.

Best

Garry

Thanks madru, this is really useful feedback - exactly the kind of report that comes from building something real rather than poking at examples, and I appreciate you writing it up. I went through every item against the current build. Here's where each one stands.

Web

Placing custom Canvas subclasses on web pages. You're right that this is the hard one. A web page layout is built from a fixed vocabulary of built-in control types: the layout format, the generated page code, the deployment manifest and the browser client all work from that fixed set, and the browser renders each control with its own hand-written JavaScript renderer. Because web Canvas painting happens on the server (the server runs your Paint handler and ships the drawn frames to the browser), letting you place your own Canvas subclass would not need new browser code, but it does need the layout format, code generation, runtime and designer to all learn what a project-defined control is, at the same time. I've logged it as feature/1818, but I want to think the design through properly before committing to it, in particular alongside the reusable web container work already on the board (feature/1702). Until then your plain-Canvas-plus-Draw workaround is exactly the pattern I'd recommend.
Conditional compilation targets. Good news: this shipped in 26.10.2. @If TargetDesktop, TargetWeb, TargetCommandLine and TargetWorker all work today, so you can delete the manual constant:

@If TargetDesktop Then
  # Desktop-only calls here
@EndIf

(There are no per-OS symbols such as TargetMacOS; the four targets are desktop, web, command line and worker.)

Modifier keys in web mouse events. This should already work in 26.10.2: Keyboard.ShiftDown, ControlDown, AltDown and CommandDown are available in web projects and reflect the live modifier state during mouse events, including each MouseDrag event, so Shift+drag detection in MouseDown is just Keyboard.ShiftDown. The docs currently present Keyboard as desktop-only, which is my fault and I'll correct that. If you tried it and hit an error, tell me which version you're on and I'll dig in.

Desktop

Canvas.Refresh painting synchronously. Confirmed. Refresh fires Paint synchronously on purpose, so code that reads the canvas back immediately afterwards sees fresh content, but in a drag loop that means one full repaint per event, exactly as you describe. I've logged feature/1815: an Invalidate method that coalesces repaints to the next drawing opportunity, matching the Refresh/Invalidate split Xojo users know. Your 15 ms timer is the right stopgap until then.

Language

Whole numbers in Double array literals. Confirmed as a bug and logged as bug/1813. The compiler accepts the widening on purpose, but the elements never convert at runtime, which is why a[0].IsNaN() fails while Print(a[0]) looks fine. Your d + 0.0 workaround remains the safe form until it's fixed.
As New DateTime. Also a bug, logged as bug/1814: the As New form accepts class names only, while the New expression also recognises the DateTime and Decimal keywords. The explicit Var d As DateTime = New DateTime(...) spelling you found is correct until it's fixed.
Locals hiding methods. Agreed this bites, especially with case-insensitive names. Logged as feature/1816: a compiler warning when a local or parameter hides a method, property or computed property of its enclosing class or module.
Visibility on module variables. Logged as feature/1817: Private and Public on module Vars, with public staying the default so existing code is unaffected.

Both bugs are queued for a future release. Thanks again - ChartView's web port is exactly the sort of workout the web canvas needs, and this list has already made the product better.

madru

Hi Garry,

thanks a lot for going through everything so quickly. @If TargetDesktop / TargetWeb work perfectly. ChartView (one of the next releases) will use them, and one file serves desktop and web without any manual constant.

Three follow-ups, each with a minimal repro:

Keyboard in web projects (objo 26.10.2)

In a web project, with a plain Canvas Canvas1 on Page1:

Sub Canvas1_MouseDown(x As Double, y As Double, button As MouseButton)
  If Keyboard.ShiftDown Then Return
End Sub

objo check reports:

Error: Page1:43:4: Undefined identifier 'Keyboard'.

The same line compiles in a desktop project.

Scaled pictures: a clip followed by text disturbs all later drawing

With a scale factor above 1, everything drawn after the first clipped block and text comes out enlarged and shifted, and the orange bar at the end is missing. At scale 1 the same code is correct: four gradient squares, each labelled "12", and an orange bar below.

Var p As New Picture(300, 120, 2)          # scale factor 2; with 1 it is correct
Var g As Graphics = p.Graphics
g.DrawingColour = Colour.White
g.FillRectangle(0, 0, 300, 120)
For k As Integer = 0 To 3
  Var x As Double = 10 + k * 70
  g.SaveState()
  g.Clip(x, 10, 50, 50)                    # ClipToPath behaves the same
  g.FillLinearGradient(x, 10, 50, 50, Colour.RGB(120, 160, 210), Colour.RGB(64, 105, 156), 90)
  g.RestoreState()
  g.DrawingColour = Colour.Black
  g.FontSize = 11
  g.DrawText("12", x + 18, 62)
Next k
g.DrawingColour = Colour.RGB(230, 120, 0)
g.FillRectangle(10, 80, 280, 30)
p.Save(SpecialFolder.Desktop.Child("scale2.png").Path)

Scaled pictures: a shadow followed by a clip

The same effect occurs without any text, when a fill with a shadow is followed by a clip:

Var p As New Picture(300, 120, 2)
Var g As Graphics = p.Graphics
g.DrawingColour = Colour.White
g.FillRectangle(0, 0, 300, 120)
For k As Integer = 0 To 3
  Var x As Double = 10 + k * 70
  Var path As New GraphicsPath
  path.MoveToPoint(x, 60)
  path.AddLineToPoint(x, 10)
  path.AddLineToPoint(x + 50, 10)
  path.AddLineToPoint(x + 50, 60)
  path.Close()
  g.SaveState()
  g.ShadowColour = Colour.RGBA(20, 30, 50, 70)
  g.ShadowBlur = 6
  g.ShadowOffsetY = 2
  g.DrawingColour = Colour.RGB(64, 105, 156)
  g.FillPath(path)
  g.RestoreState()
  g.SaveState()
  g.ClipToPath(path)
  g.FillLinearGradient(x, 10, 50, 50, Colour.RGB(120, 160, 210), Colour.RGB(64, 105, 156), 90)
  g.RestoreState()
Next k
g.DrawingColour = Colour.RGB(230, 120, 0)
g.FillRectangle(10, 80, 280, 30)
p.Save(SpecialFolder.Desktop.Child("scale2-shadow.png").Path)

Shadow alone and clip alone are both fine; only the combination breaks. I haven't seen either effect on screen (Retina Canvas), only in Picture objects with a scale factor. ChartView works around it by drawing at scale 1 into a double-size picture.

A small question: return values of own events

The docs show events with a return type (Event Validate(input As String) As Boolean), but I found no way for the class that declares the event to read the handler's result:

Class ChartView Inherits Canvas
  Event AxisLabelText(axis As String, value As Double, text As String) As String

  Private Function AxisText(axis As String, value As Double, text As String) As String
    Var own As String = RaiseEvent AxisLabelText(axis, value, text)   # "Expected expression after '='"
    ...
  End Function
End Class

Calling the event by name (AxisLabelText(...)) gives "Undefined identifier". For now ChartView uses properties that hold a function (AddressOf or an inline Function(...)), which works nicely. If there's an intended way to get a value back from RaiseEvent, I'd be glad to know. If not, it might be worth a sentence in the events docs.

THX

Garry

Thanks for the follow-up, and glad @If TargetDesktop / TargetWeb are doing the job.

Keyboard in web projects: I owe you a correction here. My earlier reply said Keyboard.ShiftDown should already work in a web project in 26.10.2, and that was wrong. The web runtime side is complete, but the compiler's web catalogue was never taught about the Keyboard module, so any reference fails with Undefined identifier 'Keyboard', exactly as you saw. I've logged it as a bug and it will be fixed in a future release: https://feedback.objo.dev/bug/1821

Two notes for when it lands: the modifier properties reflect the event being handled, so they are accurate inside handlers such as MouseDown but stale outside them, and the Startup* properties always return False on the web because a browser session has no launch-time snapshot.

Scaled pictures: I reproduced both failures here, thank you for the detailed reports. What's happening is that at scale factors above one, drawing that follows a restored clip ends up with the picture's scale applied twice, so everything after that point comes out enlarged and shifted, and later drawing can fall off the picture entirely. Your two cases are two roads into the same state corruption: a restored clip followed by DrawText, and a shadowed FillPath followed by ClipToPath, both corrupt. Text without a clip, a restored clip without text, and a shadowed rectangle fill all stay clean, and scale 1 and the Retina Canvas path are unaffected, matching what you found. Logged here: https://feedback.objo.dev/bug/1822

Your workaround of drawing at scale 1 into a double-size picture remains the right stopgap until the fix ships.

Reading a handler's return value: that's by design. RaiseEvent is a statement rather than an expression, so it cannot appear in an assignment and any value a handler returns is discarded. There are two supported ways to get information back, and I've updated the events documentation to describe both: give the event a ByRef parameter and read the variable after RaiseEvent, or store the function in a property typed As Object, assigned with AddressOf or an inline Function, and call it through an Object-typed value. The second is essentially the pattern you've arrived at in ChartView.

madru

Hi Garry,

Thanks for the quick and thorough follow-up, and for confirming both bugs. It’s very helpful to understand what’s behind the scaled-picture issue. The workaround will stay in ChartView until the fix ships, and the reference images in my test suite should tell me straight away when it does.

The function-in-a-property pattern is what ChartView uses, so it’s good to see that documented now.

One small suggestion for the web docs, based on setting up a test server on our local network: a web Canvas only renders in a secure context (HTTPS or localhost), because the browser’s crypto.subtle is otherwise unavailable. When opened over plain HTTP via the server’s IP address, the page loads, but every Canvas remains empty without any indication of the cause, and it took us a while to track that down. A sentence in the web Canvas and deployment docs, or a console message from the Canvas client, would save others the same investigation.

Thanks again!

Garry

Thanks and good catch.

You're right that web Canvases need HTTPS or localhost today, but having dug into it I'd rather not just document it, because it isn't a deliberate requirement. The web client uses two browser features that only exist in secure contexts, and when they're missing over plain HTTP several features fail silently: Canvas stays blank as you saw, and Chart, MarkdownViewer, TreeView, ListBox, ComboBox and TagField autocomplete, and FileUpload are all affected the same way. Nothing reports an error because the failures happen inside the browser.

I've logged it as a bug and it will be fixed in a future release: https://feedback.objo.dev/bug/1823

One part won't change: some browser features genuinely do require a secure context, clipboard access and native notifications among them, so serving web apps over HTTPS or localhost remains the general recommendation.

Garry

These issues have all been fixed in the next release.