Custom Annotation Tool - FreeHand Drawing.

[mhdzaid]

CONTEXT
Hi, I needed a freehand drawing tool for a project I'm working on. I looked at the annotorious-plugin-tools repository and forked it and was able to get what I wanted by using the implementation of Polygon ( RubberbandPolygon.svelte and PolygonEditor.svelte ).

const reversedPoints = [...points].reverse();
        const modifiedPoints = [...points, ...reversedPoints];
        const p = points;
        const shape: Polygon = {
          type: ShapeType.POLYGON,
          geometry: {
            bounds: boundsFromPoints(p),
            points: modifiedPoints,
          }
        };

        dispatch('create', shape);

Apologies for the rather jerry rigged implementation, I'm mainly a backend java developer and my experience in javascript and frontend in general is a bit low.

Now looking at the codebase I saw that I can register my own drawing tool here but was unable to find any place where I could do the same in stageRenderer.ts therefore resorting to hacking the Polygon implementation rather than monkey patching or creating my own module by forking Annotorious. As I mentioned, still getting used to typescript so I might have missed it, if something similar does exist.

ISSUE
Now, I'm only trying to drag the shape, not edit the structure (I'm not sure if doing that is even viable for a freehand tool). The problem I'm facing is when trying to move a shape after creating it, I can, but only after creating it for the first time. If create another shape and go back to the original one I created before, clicking on it won't make it go into the edit mode. My implementations are FreeHandEditor.svelte and RubberbandFreeHand.svelte

Creating the shape

Dragging/Editing the shape

Unable to Edit after clicking anywhere else in the canvas

[linuxbioinfoguy]

Hi, I actually want to do the same thing, and notice there maybe a bug in the version 2.7 (not sure 3.x as I don't want to change my code dramatically at this point), in 2.7 when use the freehand tool, it is not a enclosed polygon, so for my purpose I need to make it a enclose polygon (like smooth edge like what you show instead of the default polygon); so a hack for this is add steps after createAnnotation event is triggered and convert the svgpath object created by freehand to a polygon object. This works fine when there is no formatter involves, but whenever a formatter is used, even it is a very simple one like the colorformatter in the example, it error out like " OSDAnnotationLayer.js:695 Uncaught TypeError: Cannot read properties of null (reading 'element')", not sure what that actually caused by or means; once you convert that to a enclosed path object or a polygon, it can be edited/moved, but if it is a path object, even it is enclosed (by adding Z to the end of the coordinate), it still not able to be moved; doing this hack have some side effect, which is you may not be able to use the formatter (if color label or anything else does not matter to you), while it is kind of pissed to make it all works.

[rsimon]

I'm not sure what steps you are making exactly. But, yes, if you are hacking the SVG shape in place, then things will definitely break further down the line. I'm afraid the freehand tool does not support closed shapes. I freehand tool for v3 is on my wishlist.