npm - pict-section-form - Versions diffs - 1.0.130 → 1.0.132 - Mend

pict-section-form 1.0.130 → 1.0.132

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (30) hide show

package/example_applications/complex_table/Complex-Tabular-Application.js CHANGED Viewed

@@ -88,7 +88,7 @@ module.exports.default_configuration.pict_configuration = {
 					{
 						//onclick="{~D:Record.Macro.DataRequestFunction~}"
 						"HashPostfix": "-Template-Wrap-Prefix",
-						"Template": "<h1>Rectangular Area Solver Micro-app</h1><div><a href=\"#\" onclick=\"{~Pict~}.PictApplication.solve()\">[ solve ]</a> <a href=\"#\" onclick=\"{~P~}.views.PictFormMetacontroller.showSupportViewInlineEditor()\">[ editor ]</a></div><hr />"
+						"Template": "<h1>Rectangular Area Solver Micro-app</h1><div><a href=\"#\" onclick=\"{~Pict~}.PictApplication.solve()\">[ solve ]</a> <a href=\"#\" onclick=\"{~P~}.views.PictFormMetacontroller.showSupportViewInlineEditor()\">[ debug ]</a></div><hr />"
 					}
 				],

package/example_applications/complex_table/html/index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 	<head>
 		<title>Complex Table.</title>
 		<style id="PICT-CSS"></style>
-		<script src="./pict.min.js" type="text/javascript"></script>
+		<script src="./pict.js" type="text/javascript"></script>
 		<script type="text/javascript">Pict.safeOnDocumentReady(() => { Pict.safeLoadPictApplication(ComplexTabularApplication, 0)});</script>
 		<!-- CSS placed here to simulate an external collection where we can leverage existing class names/patterns -->
 		<style type="text/css">

package/example_applications/simple_form/Simple-Form_Default_Manifest.json CHANGED Viewed

@@ -30,7 +30,7 @@
 				[
 					{
 						"HashPostfix": "-Template-Wrap-Prefix",
-						"Template": "<h1>Rectangular Area Solver Micro-app</h1><div><a href=\"#\" onclick=\"{~P~}.PictApplication.solve()\">[ solve ]</a> <a href=\"#\" onclick=\"{~P~}.views.PictFormMetacontroller.showSupportViewInlineEditor()\">[ editor ]</a></div><hr />"
+						"Template": "<h1>Rectangular Area Solver Micro-app</h1><div><a href=\"#\" onclick=\"{~P~}.PictApplication.solve()\">[ solve ]</a> <a href=\"#\" onclick=\"{~P~}.views.PictFormMetacontroller.showSupportViewInlineEditor()\">[ debug ]</a></div><hr />"
 					}
 				]
 		}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "pict-section-form",
-    "version": "1.0.130",
+    "version": "1.0.132",
     "description": "Pict dynamic form sections",
     "main": "source/Pict-Section-Form.js",
     "directories": {
@@ -31,7 +31,7 @@
         "browser-env": "^3.3.0",
         "eslint": "^9.36.0",
         "jquery": "^3.7.1",
-        "pict": "^1.0.310",
+        "pict": "^1.0.312",
         "pict-application": "^1.0.29",
         "pict-service-commandlineutility": "^1.0.15",
         "quackage": "^1.0.42",

package/source/providers/Pict-Provider-DynamicTabularData.js CHANGED Viewed

@@ -172,7 +172,8 @@ class DynamicTabularData extends libPictProvider
 				{
 					tmpRowPrototype = JSON.parse(JSON.stringify(tmpGroup.DefaultRows[tmpDestinationObject.length]));
 				}
-				tmpDestinationObject.push(tmpGroup.supportingManifest.populateDefaults(tmpRowPrototype))
+				tmpDestinationObject.push(tmpGroup.supportingManifest.populateDefaults(tmpRowPrototype));
+				this.pict.providers.DynamicSolver.solveViews();
 				pView.render();
 				pView.marshalToView();
 			}
@@ -180,6 +181,7 @@ class DynamicTabularData extends libPictProvider
 			{
 				let tmpRowIndex = pView.fable.getUUID();
 				tmpDestinationObject[tmpRowIndex] = tmpGroup.supportingManifest.populateDefaults({});
+				this.pict.providers.DynamicSolver.solveViews();
 				pView.render();
 				pView.marshalToView();
 			}
@@ -253,8 +255,11 @@ class DynamicTabularData extends libPictProvider
 				}
 				let tmpElementToBeMoved = tmpDestinationObject.splice(tmpRowIndex, 1);
 				tmpDestinationObject.splice(tmpNewRowIndex, 0, tmpElementToBeMoved[0]);
+				this.pict.providers.DynamicSolver.solveViews();
 				pView.render();
-				pView.marshalToView();
+				//pView.marshalToView();
+				// We've re-rendered but we don't know what needs to be marshaled based on the solve that ran above so marshal everything
+				this.pict.views.PictFormMetacontroller.marshalFormSections();
 			}
 			else if (typeof(tmpDestinationObject) === 'object')
 			{
@@ -289,8 +294,11 @@ class DynamicTabularData extends libPictProvider
 				}
 				let tmpElementToBeMoved = tmpDestinationObject.splice(tmpRowIndex, 1);
 				tmpDestinationObject.splice(tmpRowIndex + 1, 0, tmpElementToBeMoved[0]);
+				this.pict.providers.DynamicSolver.solveViews();
 				pView.render();
-				pView.marshalToView();
+				//pView.marshalToView();
+				// We've re-rendered but we don't know what needs to be marshaled based on the solve that ran above so marshal everything
+				this.pict.views.PictFormMetacontroller.marshalFormSections();
 			}
 			else if (typeof(tmpDestinationObject) === 'object')
 			{
@@ -330,8 +338,11 @@ class DynamicTabularData extends libPictProvider
 				}
 				let tmpElementToBeMoved = tmpDestinationObject.splice(tmpRowIndex, 1);
 				tmpDestinationObject.splice(tmpRowIndex - 1, 0, tmpElementToBeMoved[0]);
+				this.pict.providers.DynamicSolver.solveViews();
 				pView.render();
-				pView.marshalToView();
+				//pView.marshalToView();
+				// We've re-rendered but we don't know what needs to be marshaled based on the solve that ran above so marshal everything
+				this.pict.views.PictFormMetacontroller.marshalFormSections();
 			}
 			else if (typeof(tmpDestinationObject) === 'object')
 			{
@@ -372,8 +383,11 @@ class DynamicTabularData extends libPictProvider
 					return false;
 				}
 				tmpDestinationObject.splice(tmpRowIndex, 1);
+				this.pict.providers.DynamicSolver.solveViews();
 				pView.render();
-				pView.marshalToView();
+				//pView.marshalToView();
+				// We've re-rendered but we don't know what needs to be marshaled based on the solve that ran above so marshal everything
+				this.pict.views.PictFormMetacontroller.marshalFormSections();
 			}
 			else if (typeof(tmpDestinationObject) === 'object')
 			{
@@ -384,8 +398,11 @@ class DynamicTabularData extends libPictProvider
 					return false;
 				}
 				delete tmpDestinationObject[tmpRowIndex]
+				this.pict.providers.DynamicSolver.solveViews();
 				pView.render();
-				pView.marshalToView();
+				//pView.marshalToView();
+				// We've re-rendered but we don't know what needs to be marshaled based on the solve that ran above so marshal everything
+				this.pict.views.PictFormMetacontroller.marshalFormSections();
 			}
 		}
 	}

package/source/views/Pict-View-Form-Metacontroller.js CHANGED Viewed

@@ -41,7 +41,10 @@ class PictFormMetacontroller extends libPictViewClass
 		this.SupportViewPrototypes = (
 		{
 			LifecycleVisualization: require('./support/Pict-View-PSF-LifeCycle-Visualization.js'),
-			DebugViewer: require('./support/Pict-View-PSF-DebugViewer.js')
+			DebugViewer: require('./support/Pict-View-PSF-DebugViewer.js'),
+			AppDataViewer: require('./support/Pict-View-PSF-AppData-Visualization.js'),
+			SolverVisualization: require('./support/Pict-View-PSF-Solver-Visualization.js'),
+			SpecificSolveVisualization: require('./support/Pict-View-PSF-SpecificSolve-Visualization.js'),
 		});
 	}
@@ -489,6 +492,27 @@ class PictFormMetacontroller extends libPictViewClass
 		}
 	}
+	/**
+	 * Marshals data to the form sections based on the provided filter and sort functions
+	 *
+	 * If no filter and sort functions are provided, render all form sections.
+	 *
+	 * @param {Function} [fFilterFunction] - The filter function used to filter the views.
+	 * @param {SortFunction} [fSortFunction] - The sort function used to sort the views.
+	 */
+	marshalFormSections(fFilterFunction, fSortFunction)
+	{
+		let tmpViewList = this.filterViews(fFilterFunction, fSortFunction);
+		for (let i = 0; i < tmpViewList.length; i++)
+		{
+			if (tmpViewList[i] === this)
+			{
+				continue;
+			}
+			tmpViewList[i].marshalToView();
+		}
+	}
 	/**
 	 * Regenerates the DyunamicForm section templates based on the provided filter and sort function.
 	 *
@@ -1092,12 +1116,13 @@ class PictFormMetacontroller extends libPictViewClass
 	showSupportViewInlineEditor()
 	{
-		// 1. See if the Inline Editor support view is loaded
-		if (!("Pict-Form-DebugViewer" in this.pict.views))
-		{
-			// 2. Load the support view if it isn't
-			this.pict.addView("Pict-Form-DebugViewer", {}, this.SupportViewPrototypes.DebugViewer);
-		}
+		// 1. See if the Support views are loaded
+		// 2. Load the support view if it isn't
+		this.pict.addViewSingleton("Pict-Form-DebugViewer", {}, this.SupportViewPrototypes.DebugViewer);
+		this.pict.addViewSingleton("Pict-Form-AppDataViewer", {}, this.SupportViewPrototypes.AppDataViewer);
+//		this.pict.addViewSingleton("Pict-Form-LifecycleVisualization", {}, this.SupportViewPrototypes.LifecycleVisualization);
+		this.pict.addViewSingleton("Pict-Form-SolverVisualization", {}, this.SupportViewPrototypes.SolverVisualization);
+//		this.pict.addViewSingleton("Pict-Form-SpecificSolveVisualization", {}, this.SupportViewPrototypes.SpecificSolveVisualization);
 		// 3. See if the container for the support view is loaded
 		// 4. Render the container for the support view if it isn't loaded

package/source/views/support/Pict-Provider-PSF-Support.js ADDED Viewed

@@ -0,0 +1,314 @@
+const libPictProvider = require('pict-provider');
+/** @type {Record<string, any>} */
+const _DefaultProviderConfiguration = (
+{
+	"ProviderIdentifier": "Pict-Form-SupportExtensions",
+	"AutoInitialize": true,
+	"AutoInitializeOrdinal": 0,
+	"AutoSolveWithApp": false
+});
+/**
+ * Represents a class that provides dynamic templates for the Pict form section provider.
+ * @extends libPictProvider
+ */
+class PictSupportExtension extends libPictProvider
+{
+	/**
+	 * Constructs a new instance of the PictProviderDynamicTemplates class.
+	 * @param {Object} pFable - The pFable object.
+	 * @param {Object} pOptions - The options object.
+	 * @param {Object} pServiceHash - The service hash object.
+	 */
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		let tmpOptions = Object.assign({}, JSON.parse(JSON.stringify(_DefaultProviderConfiguration)), pOptions);
+		super(pFable, tmpOptions, pServiceHash);
+		// These next blocks of code manually do what views often do, to support sharing of this across multiple views.
+		// Only add this css if it doesn't exist already in the css map
+		if (!('Pict-Support' in this.pict.CSSMap.inlineCSSMap))
+		{
+			this.pict.CSSMap.addCSS('Pict-Support',
+				/*css*/`
+					:root{
+						--PSF-Global-background-color: #dcdce5;
+						--PSF-Global-text-color: #333333;
+						--PSFExt-gutter-size: 5px;
+						--PSFExt-indentation-size: calc(2 * var(--PSFExt-gutter-size));
+						--PSFExt-Global-background-color: #dedede;
+						--PSFExt-Global-text-color: #333333;
+						--PSFExt-Section-background-color: #efefef;
+						--PSFExt-Section-button-color: #5A52A3;
+						--PSFExt-Section-button-text-color: #D8D7E5;
+						--PSFExt-Section-token-color: #eAf3a2;
+						--PSFExt-Section-label-color: #999;
+						--PSFExt-Section-Data-background-color: #fafafa;
+						--PSFExt-Section-Group-Header-background-color: #ebebff;
+						--PSFExt-Section-Group-Row-Header-background-color: #dcf0f0;
+						--PSFExt-Solver-Entry-text-color: #bb4a9c;
+						--PSFExt-Section-DynamicInput-background-color: #a3ccd8;
+						--PSFExt-Section-DynamicInput-button-color: #2b89a4;
+						--PSFExt-Section-DynamicInput-button-text-color: #D8D7E5;
+					}
+					/** Wrapping container	*/
+					#Pict-Form-Extensions-Wrap {
+						display:flex;
+						flex-direction: column;
+						height: 75vh;
+						overflow: hidden;
+						position: absolute;
+						left: 50%;
+						top: 0px;
+						width: 20vw;
+						min-width: 340px;
+						min-height: 200px;
+					}
+					#Pict-Form-Extension-DragControl {
+						background-color: #eae;
+						cursor: move;
+						padding: 4px 6px;
+						border-radius: 3px;
+						border: 1px solid #111;
+					}
+					#Pict-Form-Extensions-Container {
+						flex-grow: 1;
+						overflow: auto;
+						margin-top: 2px;
+						color: var(--PSF-Global-text-color);
+						background-color: var(--PSF-Global-background-color);
+						padding: 10px;
+						border: 4px double #111;
+						border-radius: 8px;
+						box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
+						font-size: 14px;
+						font-family: Arial, sans-serif;
+						font-size: 14px;
+					}
+					#Pict-Form-Extension-ResizeControl {
+						background-color: #eae;
+						cursor: move;
+						padding: 4px 4px;
+						border-radius: 3px;
+						border: 1px solid #111;
+					}
+					.PSFExt-Extension-Footer {
+						text-align: right;
+						font-size: 10px;
+						font-weight: bold;
+						margin-top: 8px;
+					}
+					/** Headers	*/
+					.PSFExt-Extension-Header {
+						font-size: 10px;
+						font-weight: bold;
+						margin-bottom: var(--PSFExt-gutter-size);
+					}
+					.PSFExt-Global-Header {
+						padding: var(--PSFExt-gutter-size);
+						margin: 0;
+					}
+					.PSFExt-Section-Header {
+						padding: var(--PSFExt-gutter-size);
+						margin: 0;
+					}
+					.PSFExt-Content-Header {
+						padding: var(--PSFExt-gutter-size);
+						margin: 0;
+						background-color: var(--PSFExt-Section-background-color);
+					}
+					.PSFExt-Data-Header {
+						font-weight: bold;
+						border-bottom: 1px dotted #ccc;
+						padding: var(--PSFExt-gutter-size);
+					}
+					/** Section content */
+					.PSFExt-Section {
+						margin: var(--PSFExt-gutter-size);
+						padding: var(--PSFExt-gutter-size);
+						background-color: var(--PSFExt-Section-background-color);
+						border-radius: 4px;
+					}
+					.PSFExt-Section-Descriptors {
+						padding: var(--PSFExt-gutter-size) 0;
+					}
+					.PSFExt-Section-Group {
+						padding: var(--PSFExt-gutter-size);
+					}
+					.PSFExt-Section-Buttons {
+						list-style-type: none;
+						padding: 0;
+						padding-bottom: var(--PSFExt-gutter-size);
+						margin: calc(var(--PSFExt-gutter-size) * 2) var(--PSFExt-gutter-size);
+					}
+					.PSFExt-Section-Button {
+						display: inline;
+						margin-right: calc(var(--PSFExt-gutter-size) * 0.25);
+						text-decoration: none;
+						background-color: var(--PSFExt-Section-button-color);
+						padding: var(--PSFExt-gutter-size);
+						border-radius: var(--PSFExt-gutter-size);
+					}
+					.PSFExt-Section-Button a {
+						text-decoration: none;
+						color: var(--PSFExt-Section-button-text-color);
+					}
+					.PSFExt-Section-Button a:hover {
+						text-decoration: underline;
+					}
+					.PSFExt-Section-Solver-Entry:not(:last-child) {
+						border-bottom: 1px solid #ccc;
+					}
+					.PSFExt-Solver-Entry {
+						font-family: "Courier New", "Lucida Console", monospace;
+						font-weight: bold;
+						margin-top: var(--PSFExt-gutter-size);
+						padding: var(--PSFExt-gutter-size);
+						line-height: 1.2;
+						color: var(--PSFExt-Solver-Entry-text-color);
+						border-bottom: 1px dotted #ccc;
+					}
+					.PSFExt-Solver-Result {
+						font-family: "Courier New", "Lucida Console", monospace;
+						font-weight: bold;
+						margin-top: var(--PSFExt-gutter-size);
+						padding: 0 var(--PSFExt-gutter-size);
+						line-height: 1.2;
+					}
+					.PSFExt-Section-ExtraData {
+						padding-top: calc(var(--PSFExt-gutter-size) / 2);
+						padding-bottom: calc(var(--PSFExt-gutter-size) / 2);
+						background-color: var(--PSFExt-Section-Data-background-color);
+					}
+					.PSFExt-Section-Group .PSFExt-Content-Header.PSFExt-Section-Group-Header {
+						background-color: var(--PSFExt-Section-Group-Header-background-color);
+					}
+					.PSFExt-Section-Group .PSFExt-Content-Header.PSFExt-Section-Group-Row-Header {
+						background-color: var(--PSFExt-Section-Group-Row-Header-background-color);
+					}
+					.PSFExt-DeEmphasize {
+						color: var(--PSFExt-Section-label-color);
+						font-size: smaller;
+					}
+					.PSFExt-Data {
+						margin-left: var(--PSFExt-indentation-size);
+						line-height: 0.85;
+						font-size: smaller;
+					}
+					.PSFExt-Data-Table {
+						width: 100%;
+						border-collapse: collapse;
+						margin-left: var(--PSFExt-indentation-size);
+						margin-top: var(--PSFExt-gutter-size);
+						margin-bottom: var(--PSFExt-gutter-size);
+						overflow-x: auto;
+					}
+					.PSFExt-Label {
+						min-width: 15%;
+						color: var(--PSFExt-Section-label-color);
+						margin: var(--PSFExt-gutter-size) 0;
+					}
+					.PSFExt-Label::after {
+						content: ": ";
+					}
+					.PSFExt-Hidden {
+						display: none;
+					}
+					.PSFExt-Section-Solver-DynamicInput {
+						background-color: #ffffff;
+					}
+					/** empty states */
+					.PSFExt-Section-Solvers:empty::before {
+						content: "No Section Solvers Defined";
+						font-style: italic;
+						color: var(--PSFExt-Section-label-color);
+						margin-left: var(--PSFExt-indentation-size);
+						text-align: center;
+						padding: var(--PSFExt-gutter-size);
+						display: block;
+						font-size: smaller;
+					}
+					.PSFExt-Group-Solvers:empty::before {
+						content: "No Group/RecordSet Solvers Defined";
+						font-style: italic;
+						color: var(--PSFExt-Section-label-color);
+						margin-left: var(--PSFExt-indentation-size);
+						text-align: center;
+						padding: var(--PSFExt-gutter-size);
+						display: block;
+						font-size: smaller;
+					}
+					.PSFExt-ExpressionEditbox {
+						width: calc(100% - 20px);
+						resize: vertical;
+						min-height: 80px;
+						font-family: monospace;
+						font-size: 0.9em;
+					}
+					.PSFExt-Token {
+						background-color: var(--PSFExt-Section-token-color);
+					}
+				`, 1000, 'Pict-Form-SupportBase');
+		}
+		// Only add these templates if they doesn't exist
+		if (this.pict.TemplateProvider.getTemplate('Pict-Form-Support-Container') == null)
+		{
+			this.pict.TemplateProvider.addTemplate('Pict-Form-Support-Container',
+				/*html*/`
+			<div id="Pict-Form-Extensions-Wrap">
+				<p class="PSFExt-Extension-Header"><span id="Pict-Form-Extension-DragControl" class="PSDV-Extension-Header-Controlbar">Pict.Extensions {~TS:Pict-Form-Support-Container-Link:Pict.providers[Pict-Form-SupportExtensions].getSupportViewLinks()~} <a href="javascript:void(0);" onclick="{~P~}.ContentAssignment.toggleClass('#Pict-Form-Extensions-Container', 'PSFExt-Hidden');{~P~}.ContentAssignment.toggleClass('#Pict-Form-Extensions-Footer', 'PSFExt-Hidden');">toggle</a></span></p>
+				<div id="Pict-Form-Extensions-Container"></div>
+				<p id="Pict-Form-Extensions-Footer" class="PSFExt-Extension-Footer"><span id="Pict-Form-Extension-ResizeControl">Pict.Extensions Resize</span></p>
+			</div>
+				`);
+		}
+		if (this.pict.TemplateProvider.getTemplate('Pict-Form-Support-Container-Link') == null)
+		{
+			this.pict.TemplateProvider.addTemplate('Pict-Form-Support-Container-Link',
+				/*html*/` [ <a href="{~D:Record.Link~}" onclick="{~D:Record.OnClick~}" data-shortname="{~D:Record.ShortName~}" data-longname="{~D:Record.LongName~}">{~D:Record.ShortName~}</a> ] `);
+		}
+		this.SupportViews = {};
+	}
+	registerSupportView(pView)
+	{
+		this.pict.log.info(`Registering support view ${pView.Hash} with Pict Support Extension provider.`);
+		this.SupportViews[pView.Hash] = pView;
+	}
+	getSupportViewLinks()
+	{
+		let tmpLinks = [];
+		let tmpSupportViewHashes = Object.keys(this.SupportViews);
+		for (let i = 0; i < tmpSupportViewHashes.length; i++)
+		{
+			let tmpViewHash = tmpSupportViewHashes[i];
+			let tmpView = this.SupportViews[tmpViewHash];
+			tmpLinks.push(
+				{
+					Hash: tmpView.Hash,
+					Link: `javascript:void(0);`,
+					ShortName: tmpView.DisplayShortName,
+					LongName: tmpView.DisplayLongName,
+					OnClick: `${this.pict.browserAddress}.views['${tmpView.Hash}'].render()`
+				}
+			);
+		}
+		return tmpLinks;
+	}
+}
+module.exports = PictSupportExtension;
+module.exports.default_configuration = _DefaultProviderConfiguration;

package/source/views/support/Pict-View-PSF-AppData-Visualization.js ADDED Viewed

@@ -0,0 +1,137 @@
+const libPictViewFormSupportBase = require(`./Pict-View-PSF-SupportBase.js`);
+const defaultViewConfiguration = (
+{
+	ViewIdentifier: "Pict-Form-AppData",
+	DefaultRenderable: 'Pict-Form-AppData-Renderable',
+	DefaultDestinationAddress: "#Pict-Form-Extensions-Container",
+	RenderOnLoad: false,
+	CSS: /*css*/``,
+	Templates: [
+		{
+			Hash: "Pict-Form-AppData-Content",
+			Template: /*html*/`
+<div id="Pict-Form-AppData-Content">
+	<h2 class="PSFAD-Global-Header">Pict Form Data Visualization</h2>
+	<p class="PSFExt-Data">
+		<span class="PSFExt-Label">Form Marshal Destination</span> {~D:Pict.views.PictFormMetacontroller.viewMarshalDestination~}
+	</p>
+	<p class="PSFExt-Data">
+		<span class="PSFExt-Label">Form Data</span> [<a href="javascript:void(0);" onclick="{~P~}.views['{~D:Context[0].Hash~}'].downloadJSONObjectAsFile('Pict.{~D:Pict.views.PictFormMetacontroller.viewMarshalDestination~}')">Download JSON</a>]
+	</p>
+	<p class="PSFExt-Data">
+		<span class="PSFExt-Label">AppData</span> [<a href="javascript:void(0);" onclick="{~P~}.views['{~D:Context[0].Hash~}'].downloadJSONObjectAsFile('Pict.AppData')">Download AppData JSON</a>]
+	</p>
+	<p class="PSFExt-Data">
+		<span class="PSFExt-Label">Fable Settings</span> [<a href="javascript:void(0);" onclick="{~P~}.views['{~D:Context[0].Hash~}'].downloadJSONObjectAsFile('Pict.settings')">Download fable settings JSON</a>]
+	</p>
+	<p class="PSFExt-Data">
+		<span class="PSFExt-Label">Application Options</span> [<a href="javascript:void(0);" onclick="{~P~}.views['{~D:Context[0].Hash~}'].downloadJSONObjectAsFile('Pict.PictApplication.options')">Download Application options JSON</a>]
+	</p>
+	<div id="PSFExt-Data-Browser" class="PSFExt-Section">
+		{~TVS:Pict-Form-AppData:Context[0].flattenMarshalDestination()~}
+	</div>
+`
+		},
+		{
+			Hash: "Pict-Form-AppData",
+			Template: /*html*/`
+	<div class="PSFExt-Section">
+		<h3 class="PSFExt-Section-Header"><span class="PSFExt-DeEmphasize">Address:</span>
+			{~D:Record.Key~}
+		</h3>
+		<div id="PSFExt-AD-{~D:Record.Key~}-Extra" class="PSFExt-Section-ExtraData">
+			{~TIfAbs:Pict-Form-AppData-ObjectValueDisplay:Record:Record.Value.DataType^==^Object~}
+			{~TIfAbs:Pict-Form-AppData-NotObjectValueDisplay:Record:Record.Value.DataType^!=^Object~}
+		</div>
+	</div>
+`
+		},
+		{
+			Hash: "Pict-Form-AppData-NotObjectValueDisplay",
+			Template: /*html*/`
+				<!-- Not Object Value Display -->
+				{~TIfAbs:Pict-Form-AppData-ArrayValueDisplay:Record:Record.Value.DataType^==^Array~}
+				{~TIfAbs:Pict-Form-AppData-PrimitiveValueDisplay:Record:Record.Value.DataType^!=^Array~}
+`
+		},
+		{
+			Hash: "Pict-Form-AppData-ObjectValueDisplay",
+			Template: /*html*/`
+			<!-- Object Value Display -->
+			<p class="PSFExt-Data">
+				<span class="PSFExt-Label">Type</span> Javascript Object {~T:Pict-Form-AppData-ObjectDownloadLink~}
+			</p>
+`
+		},
+		{
+			Hash: "Pict-Form-AppData-ArrayValueDisplay",
+			Template: /*html*/`
+			<!-- Array Value Display -->
+			<p class="PSFExt-Data">
+				<span class="PSFExt-Label">Type</span> Array {~TIfAbs:Pict-Form-AppData-ArrayDownloadLink~}
+			</p>
+`
+		},
+		{
+			Hash: "Pict-Form-AppData-PrimitiveValueDisplay",
+			Template: /*html*/`
+			<!-- Primitive Value Display -->
+			<p class="PSFExt-Data">
+				<span class="PSFExt-Label">Value</span> {~D:Record.Value.Default~}
+			</p>
+`
+		},
+		{
+			Hash: "Pict-Form-AppData-ObjectDownloadLink",
+			Template: /*html*/`[<a href="javascript:void(0);" onclick="{~P~}.views['{~D:Context[0].Hash~}'].downloadJSONObjectAsFile('Pict.{~D:Pict.views.PictFormMetacontroller.viewMarshalDestination~}')">Download JSON</a>]`
+		},
+		{
+			Hash: "Pict-Form-AppData-ArrayDownloadLink",
+			Template: /*html*/`[<a href="javascript:void(0);" onclick="{~P~}.views['{~D:Context[0].Hash~}'].downloadJSONObjectAsFile('Pict.{~D:Pict.views.PictFormMetacontroller.viewMarshalDestination~}')">Download Array</a>]`
+		}
+	],
+	Renderables: [
+		{
+			RenderableHash: "Pict-Form-AppData-Renderable",
+			TemplateHash: "Pict-Form-AppData-Content"
+		}
+	]
+});
+class PictFormsAppData extends libPictViewFormSupportBase
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+		this.DisplayShortName = 'FD';
+		this.DisplayLongName = 'FormData';
+	}
+	flattenMarshalDestination()
+	{
+		return this.flattenAddress(this.pict.views.PictFormMetacontroller.viewMarshalDestination);
+	}
+	flattenAppData()
+	{
+		return this.flattenAddress('AppData');
+	}
+	flattenAddress(pAddress)
+	{
+		let tmpData = this.pict.resolveStateFromAddress(pAddress);
+		// Now flatten the entire data structure...
+		return this.pict.manifest.objectAddressGeneration.generateAddressses(tmpData);
+	}
+}
+module.exports = PictFormsAppData;
+module.exports.default_configuration = defaultViewConfiguration;