[RoadMap] Image map question feature #8111

packages/survey-core/entries/chunks/model.ts

@@ -228,6 +228,7 @@ export {
   QuestionImagePickerModel,
   ImageItemValue
 } from "../../src/question_imagepicker";
+export { QuestionImageMapModel } from "../../src/question_imagemap";
 export { QuestionImageModel } from "../../src/question_image";
 export { QuestionSignaturePadModel } from "../../src/question_signaturepad";
 export {

packages/survey-core/src/default-theme/blocks/sd-imagemap.scss

@@ -0,0 +1,38 @@
+.sd-imagemap {
+    position: relative;
+}
+
+.sd-imagemap-background {
+    display: block;
+    width: 100%;
+}
+
+.sd-imagemap-canvas-preview {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+}
+
+.sd-imagemap-canvas-selected {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+}
+
+.sd-imagemap-canvas-hover {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+}
+
+.sd-imagemap-map {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+}

packages/survey-core/src/default-theme/default.fontless.scss

@@ -70,6 +70,7 @@
 @use "blocks/sd-components-container.scss";
 @use "blocks/sd-breadcrumbs.scss";
 @use "blocks/sd-summary.scss";
+@use "blocks/sd-imagemap.scss";
 @use "./default.m600.scss";
 
 body {
@@ -162,4 +163,4 @@ body {
 .sv-components-container-right,
 .sv-components-container-left {
   width: fit-content;
-}
+}

packages/survey-core/src/defaultCss/defaultCss.ts

@@ -944,6 +944,16 @@ export var defaultCss = {
     hintSuffix: "sd-dropdown__hint-suffix sd-tagbox__hint-suffix",
     hintSuffixWrapper: "sd-tagbox__hint-suffix-wrapper"
   },
+  imagemap: {
+    root: "sd-imagemap",
+    background: "sd-imagemap-background",
+    map: "sd-imagemap-map",
+    canvas: {
+      preview: "sd-imagemap-canvas-preview",
+      selected: "sd-imagemap-canvas-selected",
+      hover: "sd-imagemap-canvas-hover",
+    }
+  }
 };
 
 export const defaultThemeName = "default";

packages/survey-core/src/propertyNameArray.ts

@@ -0,0 +1,65 @@
+
+export class PropertyNameArray {
+
+  public val;
+  private name;
+
+  constructor(val: any[] | undefined, name?: string) {
+    this.val = val ?? [];
+    this.name = name;
+  }
+
+  public add(val: any): any[] {
+    if (this.contains(val)) return this.val;
+    if (!this.name) {
+      this.val.push(val);
+    } else {
+      this.val.push({ [this.name]: val });
+    }
+    return this.val;
+  }
+
+  public indexOf(val: any): number {
+
+    for (let i = 0; i < this.val.length; i++) {
+      let item = this.val[i];
+      if (this.name && typeof item === "object") {
+        if (item[this.name] === val) return i;
+      } else {
+        if (item === val) return i;
+      }
+    }
+    return -1;
+  }
+
+  public contains(val: any): boolean {
+    return this.indexOf(val) > -1;
+  }
+
+  public toggle(val: any, max: number = 0): any[] {
+    if (this.contains(val)) return this.remove(val);
+    if (max > 0 && this.val.length >= max) return this.val;
+    return this.add(val);
+  }
+
+  public remove(val: any): any[] {
+    const index = this.indexOf(val);
+    if (index > -1) {
+      this.val.splice(index, 1);
+    }
+    return this.val;
+  }
+
+  public convert(val: any): any[] {
+    if (val === undefined || val === null) return val;
+    if (!Array.isArray(val)) val = [val];
+    if (!this.name) return val;
+    return val.map((item: any) => {
+      if (item && typeof item === "object" && this.name in item) {
+        return item;
+      } else {
+        return { [this.name]: item };
+      }
+    });
+  }
+}