[WIP] Imagemap

ipywidgets/widgets/__init__.py

@@ -23,7 +23,7 @@
 from .interaction import interact, interactive, fixed, interact_manual, interactive_output
 from .widget_link import jslink, jsdlink
 from .widget_layout import Layout
-from .widget_media import Image, Video, Audio
+from .widget_media import Image, MapArea, MappedImage, Video, Audio
 from .widget_style import Style
 from .widget_templates import TwoByTwoLayout, AppLayout, GridspecLayout
 from .widget_upload import FileUpload

ipywidgets/widgets/widget_media.py

@@ -4,11 +4,12 @@
 import mimetypes
 
 from .widget_core import CoreWidget
+from .widget_string import HTML
 from .domwidget import DOMWidget
 from .valuewidget import ValueWidget
-from .widget import register
-from traitlets import Unicode, CUnicode, Bool
-from .trait_types import CByteMemoryView
+from .widget import register, widget_serialization
+from traitlets import Unicode, CUnicode, Bytes, Bool, Instance, observe
+from .trait_types import CByteMemoryView, TypedTuple, bytes_serialization
 
 
 @register
@@ -164,6 +165,52 @@ def __repr__(self):
         return self._get_repr(Image)
 
 
+@register
+class MapArea(HTML):
+    r"""
+    An <area> tag, part of an image map <map>.
+    """
+    tagname = Unicode('area')
+    name = Unicode('')
+    shape = Unicode('')
+    coords = Unicode('')
+    href = Unicode(None, allow_none=True)
+
+    def __init__(self, name='noname', shape='rect', coords='', href=''):
+        """
+        Parameters
+        ----------
+        name: str
+            Area name. Will be used as 'alt' attribute.
+
+        shape: str
+            Area shape: rect/circle/poly/default.
+
+        coords: str
+            Area coordinates: tuple of integers, string represented.
+
+        href: str
+            URL to load when area is clicked.
+        """
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, tagname='area', **kwargs)
+        self._compute_value(self.name, self.shape, self.coords, self.href)
+
+    def _compute_value(self, name, shape, coords, href):
+        self.value = '<area alt="{}" shape="{}" coords="{}" href="{}">' . format(name, shape, coords, href)
+
+    @observe('name', 'shape', 'coords', 'href')
+    def _attr_changed(self, change):
+        self._compute_value(self.name, self.shape, self.coords, self.href)
+
+
+@register
+class MappedImage(Image):
+    _view_name = Unicode('MappedImageView').tag(sync=True)
+    _model_name = Unicode('MappedImageModel').tag(sync=True)
+    areas = TypedTuple(trait=Instance(MapArea), help="List of mapped shapes").tag(sync=True, **widget_serialization)
+
+
 @register
 class Video(_Media):
     """Displays a video as a widget.

ipywidgets/widgets/widget_string.py

@@ -40,6 +40,7 @@ class HTML(_String):
     _view_name = Unicode('HTMLView').tag(sync=True)
     _model_name = Unicode('HTMLModel').tag(sync=True)
 
+
 @register
 class HTMLMath(_String):
     """Renders the string `value` as HTML, and render mathematics."""

packages/base/src/widget.ts

@@ -948,15 +948,6 @@ export class DOMWidgetView extends WidgetView {
     }
   }
 
-  updateTooltip(): void {
-    const title = this.model.get('tooltip');
-    if (!title) {
-      this.el.removeAttribute('title');
-    } else if (this.model.get('description').length === 0) {
-      this.el.setAttribute('title', title);
-    }
-  }
-
   /**
    * Update the DOM classes applied to an element, default to this.el.
    */
@@ -1033,6 +1024,26 @@ export class DOMWidgetView extends WidgetView {
     this.update_classes([], new_classes, el || this.el);
   }
 
+  updateTabindex(): void {
+    const tabbable = this.model.get('tabbable');
+    if (tabbable === true) {
+      this.el.setAttribute('tabIndex', '0');
+    } else if (tabbable === false) {
+      this.el.setAttribute('tabIndex', '-1');
+    } else if (tabbable === null) {
+      this.el.removeAttribute('tabIndex');
+    }
+  }
+
+  updateTooltip(): void {
+    const title = this.model.get('tooltip');
+    if (!title) {
+      this.el.removeAttribute('title');
+    } else if (this.model.get('description').length === 0) {
+      this.el.setAttribute('title', title);
+    }
+  }
+
   _setElement(el: HTMLElement): void {
     if (this.pWidget) {
       this.pWidget.dispose();
@@ -1069,16 +1080,28 @@ export class DOMWidgetView extends WidgetView {
     }
   }
 
-  updateTabindex(): void {
-    const tabbable = this.model.get('tabbable');
-    if (tabbable === true) {
-      this.el.setAttribute('tabIndex', '0');
-    } else if (tabbable === false) {
-      this.el.setAttribute('tabIndex', '-1');
-    } else if (tabbable === null) {
-      this.el.removeAttribute('tabIndex');
+ /**
+  * Return something like the event position relative to the widget view
+  * This is essentially what layerX and layerY are supposed to be (and are in chrome) but those event properties have
+  * red box warnings in the MDN documentation that they are not part of any
+  * standard and are not on any standards tracks, so get what we need here.
+  * (Code copied from `ipyevents` by M. Craig)
+  *
+  * Parameters
+  * ----------
+  * event: mouse event object.
+  */
+
+  _get_relative_xy(event: MouseEvent): {[i: string]: number} {
+    const bounding_rect = this.el.getBoundingClientRect();
+    const y_offset = bounding_rect.top;
+    const x_offset = bounding_rect.left;
+    return {
+        'x': Math.round(event.clientX - x_offset),
+        'y': Math.round(event.clientY - y_offset)
     }
   }
+
   el: HTMLElement; // Override typing
   '$el': any;
   pWidget: Widget;

packages/controls/src/widget_button.ts

@@ -118,7 +118,8 @@ export class ButtonView extends DOMWidgetView {
    */
   _handle_click(event: MouseEvent): void {
     event.preventDefault();
-    this.send({ event: 'click' });
+    const relative_xy = this._get_relative_xy(event);
+    this.send({event: 'click', click_pos: JSON.stringify(relative_xy)});
   }
 
   /**

packages/controls/src/widget_image.ts

@@ -1,10 +1,12 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import { DOMWidgetView } from '@jupyter-widgets/base';
+import { DOMWidgetView, unpack_models } from '@jupyter-widgets/base';
 
 import { CoreDOMWidgetModel } from './widget_core';
 
+import { uuid } from './utils';
+
 export class ImageModel extends CoreDOMWidgetModel {
   defaults(): Backbone.ObjectHash {
     return {
@@ -88,6 +90,22 @@ export class ImageView extends DOMWidgetView {
     super.remove();
   }
 
+  /**
+   * Dictionary of events and handlers
+   */
+  events(): { [e: string]: string } {
+    return { click: '_handle_click' };
+  }
+
+  /**
+   * Handles when the image is clicked.
+   */
+  _handle_click(event: MouseEvent): void {
+    event.preventDefault();
+    const relative_xy = this._get_relative_xy(event);
+    this.send({ event: 'click', click_pos: JSON.stringify(relative_xy) });
+  }
+
   /**
    * The default tag name.
    *
@@ -103,3 +121,61 @@ export class ImageView extends DOMWidgetView {
 
   el: HTMLImageElement;
 }
+
+export class MappedImageModel extends ImageModel {
+  defaults(): Backbone.ObjectHash {
+    return {
+      ...super.defaults(),
+      _model_name: 'MappedImageModel',
+      _view_name: 'MappedImageView',
+      areas: null
+    };
+  }
+
+  static serializers = {
+    ...ImageModel.serializers,
+    areas: { deserialize: unpack_models }
+  };
+}
+
+export class MappedImageView extends ImageView {
+  render(): void {
+    /**
+     * Called when view is rendered.
+     */
+    this.pWidget.addClass('jupyter-widgets');
+    this.pWidget.addClass('widget-mapped-image');
+    const map_name = uuid();
+    this.el.setAttribute('usemap', '#' + map_name);
+    this.map = document.createElement('map');
+    this.map.setAttribute('name', map_name);
+    this.el.appendChild(this.map);
+    this.update(); // Set defaults.
+  }
+
+  update(): void {
+    /**
+     * Update the contents of this view
+     *
+     * Called when the model is changed.  The model may have been
+     * changed by another view or by a state update from the back-end.
+     */
+    super.update(); // Render image
+    const areas = this.model.get('areas');
+    for (let i = 0; i < areas.length; i++) {
+      const area = document.createElement('area');
+      this.map.appendChild(area);
+      area.outerHTML = areas[i].get('value');
+    }
+  }
+
+  /**
+   * Handles when the image is clicked.
+   * Let the browser do it!
+   */
+  _handle_click(event: MouseEvent): void {
+    return;
+  }
+
+  map: HTMLMapElement;
+}

packages/controls/src/widget_selection.ts

@@ -385,7 +385,7 @@ export class RadioButtonsView extends DescriptionView {
     const cStyles = window.getComputedStyle(e.container);
     const containerMargin = parseInt(cStyles.marginBottom, 10);
 
-    // How far we are off from a multiple of single windget lines
+    // How far we are off from a multiple of single widget lines
     const diff = (e.el.offsetHeight + margins - containerMargin) % lineHeight;
 
     // Apply the new adjustment

packages/controls/src/widget_string.ts

@@ -34,13 +34,6 @@ export class StringView extends DescriptionView {
     this.el.classList.add('widget-inline-hbox');
   }
 
-  /**
-   * Update the contents of this view
-   *
-   * Called when the model is changed.  The model may have been
-   * changed by another view or by a state update from the back-end.
-   */
-
   content: HTMLDivElement;
 }