Add handling of unconfined

packages/outputarea/style/index.css

@@ -51,12 +51,6 @@
 }
 
 
-.jp-OutputArea-output img.jp-mod-unconfined,
-.jp-OutputArea-output svg.jp-mod-unconfined {
-  max-width: none;
-}
-
-
 /* Hide the gutter in case of
  *  - nested output areas (e.g. in the case of output widgets)
  *  - mirrored output areas

packages/rendermime/src/renderers.ts

@@ -142,7 +142,7 @@ namespace renderHTML {
 export
 function renderImage(options: renderImage.IRenderOptions): Promise<void> {
   // Unpack the options.
-  let { host, mimeType, source, width, height } = options;
+  let { host, mimeType, source, width, height, unconfined } = options;
 
   // Clear the content in the host.
   host.textContent = '';
@@ -161,6 +161,10 @@ function renderImage(options: renderImage.IRenderOptions): Promise<void> {
     img.width = width;
   }
 
+  if (unconfined === true) {
+    img.classList.add('jp-mod-unconfined');
+  }
+
   // Add the image to the host.
   host.appendChild(img);
 
@@ -203,6 +207,11 @@ namespace renderImage {
      * The optional height for the image.
      */
     height?: number;
+
+    /**
+     * Whether the image should be unconfined.
+     */
+    unconfined?: boolean;
   }
 }
 
@@ -320,7 +329,7 @@ function renderMarkdown(options: renderMarkdown.IRenderOptions): Promise<void> {
 
     // Return the rendered promise.
     return promise;
-  }).then(() => { if (shouldTypeset) { typeset(host) } });
+  }).then(() => { if (shouldTypeset) { typeset(host); } });
 }
 
 
@@ -444,7 +453,7 @@ export
 function renderSVG(options: renderSVG.IRenderOptions): Promise<void> {
   // Unpack the options.
   let {
-    host, source, trusted, resolver, linkHandler, shouldTypeset
+    host, source, trusted, resolver, linkHandler, shouldTypeset, unconfined
   } = options;
 
   // Clear the content if there is no source.
@@ -462,6 +471,10 @@ function renderSVG(options: renderSVG.IRenderOptions): Promise<void> {
   // Set the inner HTML of the host.
   host.innerHTML = source;
 
+  if (unconfined === true) {
+    host.classList.add('jp-mod-unconfined');
+  }
+
   // TODO
   // what about script tags inside the svg?
 
@@ -517,6 +530,11 @@ namespace renderSVG {
      * Whether the node should be typeset.
      */
     shouldTypeset: boolean;
+
+    /**
+     * Whether the svg should be unconfined.
+     */
+    unconfined?: boolean;
   }
 }
 

packages/rendermime/src/widgets.ts

@@ -221,7 +221,8 @@ class RenderedImage extends RenderedCommon {
       mimeType: this.mimeType,
       source: String(model.data[this.mimeType]),
       width: metadata && metadata.width as number | undefined,
-      height: metadata && metadata.height as number | undefined
+      height: metadata && metadata.height as number | undefined,
+      unconfined: metadata && metadata.unconfined as boolean | undefined
     });
   }
 }
@@ -321,13 +322,15 @@ class RenderedSVG extends RenderedCommon {
    * @returns A promise which resolves when rendering is complete.
    */
   render(model: IRenderMime.IMimeModel): Promise<void> {
+    let metadata = model.metadata[this.mimeType] as ReadonlyJSONObject;
     return renderers.renderSVG({
       host: this.node,
       source: String(model.data[this.mimeType]),
       trusted: model.trusted,
       resolver: this.resolver,
       linkHandler: this.linkHandler,
-      shouldTypeset: this.isAttached
+      shouldTypeset: this.isAttached,
+      unconfined: metadata && metadata.unconfined as boolean | undefined
     });
   }
 

packages/rendermime/style/index.css

@@ -378,6 +378,14 @@ margin-top = 14, 14, 14, 14, 8, 8
 }
 
 
+.jp-RenderedHTMLCommon img.jp-mod-unconfined,
+.jp-RenderedImage img.jp-mod-unconfined,
+.jp-RenderedHTMLCommon svg.jp-mod-unconfined,
+.jp-RenderedSVG svg.jp-mod-unconfined {
+  max-width: none;
+}
+
+
 .jp-RenderedHTMLCommon .alert {
   margin-bottom: initial;
 }