Updates and zoom fiddling.

Author: anjackson

src/dataflows/bfi-na.md

@@ -26,7 +26,7 @@ A (emailed): Not intentional, just reflecting what I'd thought about, and my foc
 
 Note focus on acquisition of born digital material, digitisation is not covered in detail. This covers A/V and images, not documents, which are not currently preserved actively
 
-## Digital Preservation Infrastructure (DPI) Dataflow
+## Ingest & Preservation
 
 The following dataflow diagram summarises the flow of data into the BFI National Archive's Digital Preservation Infrastructure (DPI). This bitstream preservation dataflow is shared across all content streams.
 
@@ -197,23 +197,22 @@ end
 ```
 
 
-At the end of the ingest process, there are immediately accessible 'access copies' (DIPs) and the 'preservation copies' (AIPs) are stored on multiple tapes.  The Collections Information Database (CID) contains all metadata needed for management and discovery of content, along with the appropriate identifier for the information packages that contain the digital assets. The CID remains the master metadata store, and this metadata is preserved independently of the DPI.
+At the end of the ingest process, there are immediately accessible 'access copies' (DIPs) and the 'preservation copies' (AIPs) are stored on multiple tapes.  The Collections Information Database (CID) contains all metadata needed for management and discovery of content, along with the appropriate identifier for the information packages that contain the digital assets. CID remains the master metadata store, and this metadata is preserved independently of DPI (unique identifier is the join key).
 
 The code for the core `autoingest job` and related workflows is here: [bfidatadigipres/BFI_scripts](https://github.com/bfidatadigipres/BFI_scripts).
 
-## Access Dataflow
+## Internet Access For Public Users
 
 There are two different modes of access. Some content is available over the public web (rights clearance required), while virtually all collection material is discoverable via the collections search and is available on site, by submitting an access request. 
 
-### Internet Access
 
 Public internet access uses the 'access copies':
 
 ```dataflow
 dataflow 1.0
 title "BFI National Archive Public Access Workflow"
-zoom 0.84
-offset 0 0
+zoom 1.0
+offset 25 25
 height 300
 
 data request "User Request/Query" black
@@ -259,7 +258,7 @@ move dip@website dip@internet  "Deliver DIP"@W
 end 
 ```
 
-### On-Site Access
+## On-Premises Access For Public Users
 
 Only BFI staff are able to access the highest-quality (very high bitrate) 'preservation copies'. These copies are retrieved from tape on demand:
 
@@ -320,6 +319,10 @@ delete aip_tape@tape1 "Unload\nTape"
 end 
 ```
 
+## BFI Network Access For Staff Users
+
+...
+
 ## Content Streams
 
 Some links and notes about the details on the content stream variations are given below.

src/dataflows/dataflows.js

@@ -550,28 +550,36 @@ export async function generateDataflow(dfl) {
                 .attr('type', 'text/css')
                 .text("@import url('https://fonts.googleapis.com/css?family=Hammersmith+One');");
 
-    // Set up zoom:
-    const zoom = d3.zoom().scaleExtent([0.1, 6]).on("zoom", zoomed);
-    
-    var zoomContainer = svg.call(zoom);
-    var initialScale = wf.initialZoom || 0.75;
-    var initialTranslate = wf.initialOffset || undefined; // e.g. [100,10] percentages of the total w/h
+    const zoomToInit = function () {
+        // Set up zoom:
+        const zoom = d3.zoom().scaleExtent([0.2, 6]).on("zoom", zoomed);
+        
+        var zoomContainer = svg.call(zoom);
+        var initialScale = wf.initialZoom || 0.75;
+        var initialTranslate = wf.initialOffset || undefined; // e.g. [100,10] percentages of the total w/h
 
-    zoom.scaleTo(zoomContainer, initialScale);
-    if( initialTranslate ) {
-        zoom.translateTo(
-            zoomContainer,
-            (0.5-initialTranslate[0]/100)*width,
-            (0.5-initialTranslate[1]/100)*height
-        );
+        //console.log(width, height);
+        //console.log(div.offsetWidth, div.offsetHeight);
+        //console.log(zoomContainer, initialScale, initialTranslate);
+        zoom.scaleTo(zoomContainer, initialScale);
+        if( initialTranslate ) {
+            zoom.translateTo(
+                zoomContainer,
+                (0.5 - initialTranslate[0]/100.0)*width,
+                (0.5 - initialTranslate[1]/100.0)*height
+            );
+        }
     }
 
+zoomToInit();
+
     function zoomed(event) {
         svg.select("g").attr("transform", event.transform.toString());
     }
 
     // Attach a reference here so we can use it from the client: 
     div.svg = svg;
+    div.zoomToInit = zoomToInit;
 
 
     return div;
@@ -689,9 +697,9 @@ export function rasterize(svg) {
   }
 
 // Support full-screen mode:
-function toggleFullscreen(element) {
+function toggleFullscreen(dataflow) {
     if(!document.fullscreenElement) {
-        element.requestFullscreen();
+        dataflow.requestFullscreen();
     } else {
         document.exitFullscreen();
     }
@@ -736,18 +744,24 @@ export async function renderDataflows() {
         const save_button = Inputs.button("SVG", {value: serialize(dataflow.svg.node()), reduce: saveSvg, disabled: false });
         save_button.style.position = 'absolute';
         save_button.style.left = '3px';
-        save_button.style.top = '26px';
+        save_button.style.top = '1px';
+        save_button.style.width = 'auto';
         dataflow.insertAdjacentElement('afterBegin', save_button);
         const save_png_button = Inputs.button("PNG", {value: await rasterize(dataflow.svg.node()), reduce: saveImage, disabled: false });
         save_png_button.style.position = 'absolute';
-        save_png_button.style.left = '3px';
-        save_png_button.style.top = '51px';
+        save_png_button.style.left = '51px';
+        save_png_button.style.top = '1px';
+        save_png_button.style.width = 'auto';
         dataflow.insertAdjacentElement('afterBegin', save_png_button);
 
-        const fullscreen_button = Inputs.button("Toggle Fullscreen View", { value: dataflow, reduce: toggleFullscreen, disabled: false });
+        const fullscreen_button = Inputs.button("Toggle Fullscreen");
         fullscreen_button.style.position = 'absolute';
-        fullscreen_button.style.left = '3px';
+        fullscreen_button.style.left = '100px';
         fullscreen_button.style.top = '1px';
+        fullscreen_button.style.width = 'auto';
+        fullscreen_button.onclick = function() {
+            toggleFullscreen(dataflow);
+        }
         dataflow.insertAdjacentElement('afterBegin', fullscreen_button);
 
         // Support full-screen mode:
@@ -758,6 +772,12 @@ export async function renderDataflows() {
                 toggleFullscreen(dataflow);
             }
         });
+        // Reset zoom when fullscreen mode changes:
+        //dataflow.addEventListener("fullscreenchange", function () {
+        //    dataflow.zoomToInit();
+        //});
+
+
         // And ensure tooltips show...
         enableTooltips(dataflow);
     }