Refactoring: put all special visualisations into their own class, add their location into the documentation

src/UI/SpecialVisualisations/NoteVisualisations.ts

@@ -19,7 +19,7 @@ import { VariableUiElement } from "../Base/VariableUIElement"
 import Combine from "../Base/Combine"
 import NoteCommentElement from "../Popup/Notes/NoteCommentElement.svelte"
 
-class CloseNoteViz implements SpecialVisualizationSvelte {
+class CloseNoteViz extends SpecialVisualizationSvelte {
     public readonly funcName = "close_note"
     public readonly needsUrls = [Constants.osmAuthConfig.url]
     public readonly docs =
@@ -53,16 +53,16 @@ class CloseNoteViz implements SpecialVisualizationSvelte {
             doc: "Text to show if not zoomed in enough",
         },
     ]
-    public readonly group: "notes"
+    public readonly group = "notes"
 
     public constr(
         state: SpecialVisualizationState,
         tags: UIEventSource<Record<string, string>>,
-        args: string[]
+        args: string[],
     ): SvelteUIElement {
         const { text, icon, idkey, comment, minZoom, zoomButton } = Utils.ParseVisArgs(
             this.args,
-            args
+            args,
         )
 
         return new SvelteUIElement(CloseNoteButton, {
@@ -78,7 +78,7 @@ class CloseNoteViz implements SpecialVisualizationSvelte {
     }
 }
 
-class AddNoteCommentViz implements SpecialVisualizationSvelte {
+class AddNoteCommentViz extends SpecialVisualizationSvelte {
     funcName = "add_note_comment"
     needsUrls = [Constants.osmAuthConfig.url]
     docs = "A textfield to add a comment to a node (with the option to close the note)."
@@ -89,100 +89,109 @@ class AddNoteCommentViz implements SpecialVisualizationSvelte {
             defaultValue: "id",
         },
     ]
-    public readonly group: "notes"
+    public readonly group = "notes"
 
     public constr(
         state: SpecialVisualizationState,
-        tags: UIEventSource<Record<string, string>>
+        tags: UIEventSource<Record<string, string>>,
     ): SvelteUIElement {
         return new SvelteUIElement(AddNoteComment, { state, tags })
     }
 }
 
+class OpenNote extends SpecialVisualizationSvelte {
+    funcName = "open_note"
+    args = []
+    group = "notes"
+    needsUrls = [Constants.osmAuthConfig.url]
+    docs = "Creates a new map note on the given location. This options is placed in the 'last_click'-popup automatically if the 'notes'-layer is enabled"
+
+    constr(
+        state: SpecialVisualizationState,
+        tagSource: UIEventSource<Record<string, string>>,
+        argument: string[],
+        feature: Feature,
+    ): SvelteUIElement {
+        const [lon, lat] = GeoOperations.centerpointCoordinates(feature)
+        return new SvelteUIElement(CreateNewNote, {
+            state,
+            coordinate: new UIEventSource({ lon, lat }),
+        })
+    }
+}
+
+class AddImageToNote extends SpecialVisualizationSvelte {
+    funcName = "add_image_to_note"
+    docs = "Adds an image to a node"
+    args = [
+        {
+            name: "Id-key",
+            doc: "The property name where the ID of the note to close can be found",
+            defaultValue: "id",
+        },
+    ]
+    group = "notes"
+    needsUrls = [Imgur.apiUrl, ...Imgur.supportingUrls]
+
+    constr(state, tags, args, feature) {
+        const id = tags.data[args[0] ?? "id"]
+        tags = state.featureProperties.getStore(id)
+        return new SvelteUIElement(UploadImage, { state, tags, feature })
+    }
+}
+
+class VisualiseNoteComment extends SpecialVisualization {
+    funcName = "visualize_note_comments"
+    group = "notes"
+    docs = "Visualises the comments for notes"
+    args = [
+        {
+            name: "commentsKey",
+            doc: "The property name of the comments, which should be stringified json",
+            defaultValue: "comments",
+        },
+        {
+            name: "start",
+            doc: "Drop the first 'start' comments",
+            defaultValue: "0",
+        },
+    ]
+    needsUrls = [Constants.osmAuthConfig.url]
+
+    constr(state, tags, args) {
+        return new VariableUiElement(
+            tags
+                .map((tags) => tags[args[0]])
+                .map((commentsStr) => {
+                    const comments: { text: string }[] = JSON.parse(commentsStr)
+                    const startLoc = Number(args[1] ?? 0)
+                    if (!isNaN(startLoc) && startLoc > 0) {
+                        comments.splice(0, startLoc)
+                    }
+                    return new Combine(
+                        comments
+                            .filter((c) => c.text !== "")
+                            .map(
+                                (comment) =>
+                                    new SvelteUIElement(NoteCommentElement, {
+                                        comment,
+                                        state,
+                                    }),
+                            ),
+                    ).SetClass("flex flex-col")
+                }),
+        )
+    }
+}
+
 export class NoteVisualisations {
     public static initList(): (SpecialVisualization & { group })[] {
         return [
             new AddNoteCommentViz(),
             new CloseNoteViz(),
-            {
-                funcName: "open_note",
-                args: [],
-                group: "notes",
-                needsUrls: [Constants.osmAuthConfig.url],
-                docs: "Creates a new map note on the given location. This options is placed in the 'last_click'-popup automatically if the 'notes'-layer is enabled",
-                constr(
-                    state: SpecialVisualizationState,
-                    tagSource: UIEventSource<Record<string, string>>,
-                    argument: string[],
-                    feature: Feature
-                ): SvelteUIElement {
-                    const [lon, lat] = GeoOperations.centerpointCoordinates(feature)
-                    return new SvelteUIElement(CreateNewNote, {
-                        state,
-                        coordinate: new UIEventSource({ lon, lat }),
-                    })
-                },
-            },
-            {
-                funcName: "add_image_to_note",
-                docs: "Adds an image to a node",
-                args: [
-                    {
-                        name: "Id-key",
-                        doc: "The property name where the ID of the note to close can be found",
-                        defaultValue: "id",
-                    },
-                ],
-                group: "notes",
-                needsUrls: [Imgur.apiUrl, ...Imgur.supportingUrls],
-
-                constr: (state, tags, args, feature) => {
-                    const id = tags.data[args[0] ?? "id"]
-                    tags = state.featureProperties.getStore(id)
-                    return new SvelteUIElement(UploadImage, { state, tags, feature })
-                },
-            },
-            {
-                funcName: "visualize_note_comments",
-                group: "notes",
-                docs: "Visualises the comments for notes",
-                args: [
-                    {
-                        name: "commentsKey",
-                        doc: "The property name of the comments, which should be stringified json",
-                        defaultValue: "comments",
-                    },
-                    {
-                        name: "start",
-                        doc: "Drop the first 'start' comments",
-                        defaultValue: "0",
-                    },
-                ],
-                needsUrls: [Constants.osmAuthConfig.url],
-                constr: (state, tags, args) =>
-                    new VariableUiElement(
-                        tags
-                            .map((tags) => tags[args[0]])
-                            .map((commentsStr) => {
-                                const comments: { text: string }[] = JSON.parse(commentsStr)
-                                const startLoc = Number(args[1] ?? 0)
-                                if (!isNaN(startLoc) && startLoc > 0) {
-                                    comments.splice(0, startLoc)
-                                }
-                                return new Combine(
-                                    comments
-                                        .filter((c) => c.text !== "")
-                                        .map(
-                                            (comment) =>
-                                                new SvelteUIElement(NoteCommentElement, {
-                                                    comment,
-                                                    state,
-                                                })
-                                        )
-                                ).SetClass("flex flex-col")
-                            })
-                    ),
-            },
+            new OpenNote(),
+            new AddImageToNote(),
+            new VisualiseNoteComment(),
         ]
     }
 }