3 Years of VueJS (2021)

Annotation Focused Modules

Example — Drawing a Polygon

Overview of the Instance List Component

Code
for (var i in this.instance_list) {   this.draw_single_instance(ctx, i)}

Conditioning on type

else if ([“polygon”, “line”].includes(instance.type)) { ctx.beginPath() this.draw_polygon(instance, ctx, i)}

is_mouse_in_path?

User control

draw_circle: function (x, y, ctx) { ctx.arc(x, y, this.$props.vertex_size, 0, 2 * Math.PI); ctx.moveTo(x, y) // reset},

Why such deep control? Why not use a higher level drawing library?

Problems

Code in JS — Presentation Layer in Vue

Each Instance Type has its Own Class

User Interaction Paradigm

Drawable Canvas — Divide Canvas and rest of Annotation UI

Make Error Propagation Easy — Regular Error

.catch(error => { this.error = this.$route_api_errors(error) })
<v_error_multiple :error=”error”> </v_error_multiple>

Wrap Library Components

Why regular components

Vuex — a comment

What I have found success using Vuex:

WET & DRY

Closing thoughts

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store