pict-section-formeditor 1.0.6 → 1.0.7

package/example_applications/form_editor_flex/FormEditorFlex-Example-Application.js

@@ -0,0 +1,345 @@
+const libPict = require('pict');
+const libPictApplication = require('pict-application');
+const libPictSectionFormEditor = require('../../source/Pict-Section-FormEditor.js');
+
+// The list of available manifests for the selector
+const _ManifestList =
+[
+	{ Name: 'New Form', File: false },
+	{ Name: 'Patient Intake (large)', File: 'manifests/Patient-Intake.json' },
+	{ Name: 'Project Proposal (large)', File: 'manifests/Project-Proposal.json' },
+	{ Name: 'Complex Table', File: 'manifests/Complex-Table.json' },
+	{ Name: 'Manyfest Editor', File: 'manifests/Manyfest-Editor.json' },
+	{ Name: 'Simple Form', File: 'manifests/Simple-Form.json' },
+	{ Name: 'Gradebook - Student', File: 'manifests/Gradebook-Student.json' },
+	{ Name: 'Gradebook - Assignment', File: 'manifests/Gradebook-Assignment.json' },
+	{ Name: 'Distill (Entity Bundles)', File: 'manifests/Distill-Example.json' }
+];
+
+class FormEditorFlexExampleApplication extends libPictApplication
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+
+		this._ManifestList = _ManifestList;
+		this._FormEditorView = null;
+		this._DragDropEnabled = false;
+		this._ShowHashes = false;
+	}
+
+	onAfterInitializeAsync(fCallback)
+	{
+		// Start with an empty manifest; the first sample will be loaded after render
+		this.pict.AppData.FormConfig =
+		{
+			Scope: 'NewForm',
+			Sections: [],
+			Descriptors: {}
+		};
+
+		// Store the manifest list for the selector template
+		this.pict.AppData.ManifestList = this._ManifestList;
+
+		// Override the default CSS to remove the fixed height and use natural flow
+		let tmpDefaultConfig = JSON.parse(JSON.stringify(libPictSectionFormEditor.default_configuration));
+
+		// Replace the fixed-height .pict-formeditor rule with a flow-friendly version
+		// The key change: remove `height: calc(100vh - 120px)` and `overflow: hidden`
+		// so the editor flows with the page.  The properties panel gets `position: sticky`.
+		let tmpCSS = tmpDefaultConfig.CSS;
+
+		// Patch: .pict-formeditor — remove fixed height, allow natural flow
+		tmpCSS = tmpCSS.replace(
+			/\.pict-formeditor\s*\{[^}]*\}/,
+			`.pict-formeditor
+{
+	position: relative;
+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+	font-size: 14px;
+	color: #3D3229;
+	background: #FDFCFA;
+	border: 1px solid #E8E3DA;
+	border-radius: 6px;
+	display: flex;
+	flex-direction: column;
+}`
+		);
+
+		// Patch: .pict-fe-editor-layout — remove overflow:hidden and min-height:0
+		// so the two-column layout can grow naturally
+		tmpCSS = tmpCSS.replace(
+			/\.pict-fe-editor-layout\s*\{[^}]*\}/,
+			`.pict-fe-editor-layout
+{
+	display: flex;
+	gap: 0;
+	flex: 1;
+	position: relative;
+}`
+		);
+
+		// Patch: .pict-fe-editor-content — let it grow naturally
+		tmpCSS = tmpCSS.replace(
+			/\.pict-fe-editor-content\s*\{[^}]*\}/,
+			`.pict-fe-editor-content
+{
+	flex: 1;
+	min-width: 300px;
+	display: flex;
+	flex-direction: column;
+}`
+		);
+
+		// Patch: .pict-fe-tabcontent — remove min-height:0 and overflow:auto
+		// so content flows naturally instead of scrolling internally
+		tmpCSS = tmpCSS.replace(
+			/\.pict-fe-tabcontent\s*\{[^}]*\}/,
+			`.pict-fe-tabcontent
+{
+	display: none;
+	padding: 16px;
+	flex: 1;
+}`
+		);
+
+		// Add sticky properties panel CSS
+		tmpCSS += `
+
+/* === Flex-height sticky panel overrides === */
+.pict-fe-properties-panel-open
+{
+	position: sticky;
+	top: 0;
+	align-self: flex-start;
+	max-height: 100vh;
+	overflow-y: auto;
+}
+`;
+
+		tmpDefaultConfig.CSS = tmpCSS;
+
+		// Add the FormEditor view with our patched configuration
+		this._FormEditorView = this.pict.addView('FormEditor',
+		Object.assign({}, tmpDefaultConfig,
+		{
+			ViewIdentifier: 'FormEditor',
+			ManifestDataAddress: 'AppData.FormConfig',
+			DefaultDestinationAddress: '#FormEditor-Container',
+			ActiveTab: 'visual',
+			Renderables:
+			[
+				{
+					RenderableHash: 'FormEditor-Container',
+					TemplateHash: 'FormEditor-Container-Template',
+					DestinationAddress: '#FormEditor-Container',
+					RenderMethod: 'replace'
+				}
+			]
+		}), libPictSectionFormEditor);
+
+		this._FormEditorView.initialize();
+		this._FormEditorView.render();
+
+		// Wire up the import event
+		let tmpSelf = this;
+		this._FormEditorView.onImport = function(pManifests, pFileName)
+		{
+			tmpSelf._handleImportedManifests(pManifests, pFileName);
+		};
+
+		// Render the selector bar
+		this.renderSelector();
+
+		// Load the first file-based sample by default
+		let tmpDefaultIndex = 1;
+		let tmpSelect = document.getElementById('FormEditor-ManifestSelect');
+		if (tmpSelect)
+		{
+			tmpSelect.value = String(tmpDefaultIndex);
+		}
+		this.loadManifest(tmpDefaultIndex);
+
+		return super.onAfterInitializeAsync(fCallback);
+	}
+
+	renderSelector()
+	{
+		let tmpHTML = '';
+		tmpHTML += '<div class="pict-fe-selector-bar">';
+		tmpHTML += '<label class="pict-fe-selector-label" for="FormEditor-ManifestSelect">Load Configuration:</label>';
+		tmpHTML += '<select class="pict-fe-selector-select" id="FormEditor-ManifestSelect">';
+		for (let i = 0; i < this._ManifestList.length; i++)
+		{
+			tmpHTML += `<option value="${i}">${this._escapeHTML(this._ManifestList[i].Name)}</option>`;
+		}
+		tmpHTML += '</select>';
+		tmpHTML += `<button class="pict-fe-selector-btn" onclick="${this.pict.browserAddress}.PictApplication.loadSelectedManifest()">Load</button>`;
+		tmpHTML += `<button class="pict-fe-selector-btn" id="FormEditor-DragDropToggle" onclick="${this.pict.browserAddress}.PictApplication.toggleDragAndDrop()" style="margin-left:auto; background:#8A7F72;">Enable Drag &amp; Drop</button>`;
+		tmpHTML += `<button class="pict-fe-selector-btn" id="FormEditor-DisplayModeToggle" onclick="${this.pict.browserAddress}.PictApplication.toggleDisplayMode()" style="background:#8A7F72;">Show Hashes</button>`;
+		tmpHTML += '</div>';
+
+		this.pict.ContentAssignment.assignContent('#FormEditor-Selector', tmpHTML);
+	}
+
+	toggleDragAndDrop()
+	{
+		this._DragDropEnabled = !this._DragDropEnabled;
+
+		if (this._FormEditorView)
+		{
+			this._FormEditorView._DragDropProvider.setDragAndDropEnabled(this._DragDropEnabled);
+		}
+
+		let tmpToggleBtn = document.getElementById('FormEditor-DragDropToggle');
+		if (tmpToggleBtn)
+		{
+			tmpToggleBtn.textContent = this._DragDropEnabled ? 'Disable Drag & Drop' : 'Enable Drag & Drop';
+			tmpToggleBtn.style.background = this._DragDropEnabled ? '#E76F51' : '#8A7F72';
+		}
+	}
+
+	toggleDisplayMode()
+	{
+		this._ShowHashes = !this._ShowHashes;
+
+		if (this._FormEditorView)
+		{
+			this._FormEditorView._UtilitiesProvider.setInputDisplayMode(this._ShowHashes ? 'hash' : 'name');
+		}
+
+		let tmpToggleBtn = document.getElementById('FormEditor-DisplayModeToggle');
+		if (tmpToggleBtn)
+		{
+			tmpToggleBtn.textContent = this._ShowHashes ? 'Show Names' : 'Show Hashes';
+			tmpToggleBtn.style.background = this._ShowHashes ? '#5B6E5D' : '#8A7F72';
+		}
+	}
+
+	loadSelectedManifest()
+	{
+		let tmpSelect = document.getElementById('FormEditor-ManifestSelect');
+		if (tmpSelect)
+		{
+			this.loadManifest(parseInt(tmpSelect.value, 10));
+		}
+	}
+
+	loadManifest(pIndex)
+	{
+		if (pIndex < 0 || pIndex >= this._ManifestList.length)
+		{
+			return;
+		}
+
+		let tmpEntry = this._ManifestList[pIndex];
+
+		if (tmpEntry.ManifestData)
+		{
+			this.pict.AppData.FormConfig = tmpEntry.ManifestData;
+			this._refreshEditor();
+			return;
+		}
+
+		if (!tmpEntry.File)
+		{
+			this.pict.AppData.FormConfig =
+			{
+				Scope: 'NewForm',
+				Sections: [],
+				Descriptors: {}
+			};
+			this._refreshEditor();
+			return;
+		}
+
+		let tmpXHR = new XMLHttpRequest();
+		tmpXHR.open('GET', tmpEntry.File, true);
+		tmpXHR.onreadystatechange = () =>
+		{
+			if (tmpXHR.readyState === 4)
+			{
+				if (tmpXHR.status === 200)
+				{
+					try
+					{
+						this.pict.AppData.FormConfig = JSON.parse(tmpXHR.responseText);
+						this._refreshEditor();
+					}
+					catch (pError)
+					{
+						this.log.error(`Error parsing manifest JSON from ${tmpEntry.File}: ${pError.message}`);
+					}
+				}
+				else
+				{
+					this.log.error(`Error loading manifest from ${tmpEntry.File}: HTTP ${tmpXHR.status}`);
+				}
+			}
+		};
+		tmpXHR.send();
+	}
+
+	_handleImportedManifests(pManifests, pFileName)
+	{
+		let tmpManifestKeys = Object.keys(pManifests);
+		if (tmpManifestKeys.length <= 1)
+		{
+			return;
+		}
+
+		let tmpSourceLabel = pFileName.toLowerCase().endsWith('.json') ? 'JSON' : 'CSV';
+
+		for (let i = 1; i < tmpManifestKeys.length; i++)
+		{
+			let tmpKey = tmpManifestKeys[i];
+			let tmpFormName = pManifests[tmpKey].FormName || tmpKey;
+			let tmpEntry = { Name: `${tmpSourceLabel}: ${tmpFormName}`, File: false, ManifestData: pManifests[tmpKey] };
+			this._ManifestList.push(tmpEntry);
+		}
+
+		this.renderSelector();
+	}
+
+	loadManifestDirect(pManifestData)
+	{
+		this.pict.AppData.FormConfig = pManifestData;
+		this._refreshEditor();
+	}
+
+	_refreshEditor()
+	{
+		if (this._FormEditorView)
+		{
+			this._FormEditorView.render();
+		}
+	}
+
+	_escapeHTML(pString)
+	{
+		if (typeof pString !== 'string')
+		{
+			return '';
+		}
+		return pString
+			.replace(/&/g, '&amp;')
+			.replace(/</g, '&lt;')
+			.replace(/>/g, '&gt;')
+			.replace(/"/g, '&quot;');
+	}
+}
+
+module.exports = FormEditorFlexExampleApplication;
+
+module.exports.default_configuration = (
+{
+	Name: 'FormEditorFlexExample',
+	Hash: 'FormEditorFlexExample',
+	MainViewportViewIdentifier: 'FormEditor',
+	AutoSolveAfterInitialize: false,
+	AutoRenderMainViewportViewAfterInitialize: false,
+	pict_configuration:
+	{
+		Product: 'FormEditorFlexExample'
+	}
+});

package/example_applications/form_editor_flex/html/index.html

@@ -0,0 +1,65 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<title>Form Editor - Flex Height Reference</title>
+		<!-- PICT Dynamic View CSS Container -->
+		<style id="PICT-CSS"></style>
+		<!-- Red Rock Mesa Theme — Flex Height Reference App -->
+		<style>
+			*, *::before, *::after { box-sizing: border-box; }
+			html { margin: 0; padding: 0; }
+			body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: #FAEDCD; color: #264653; }
+
+			/* --- Header Bar (sticky at top of page) --- */
+			.pict-example-header { position: sticky; top: 0; z-index: 100; display: flex; align-items: stretch; background: #264653; border-bottom: 3px solid #E76F51; }
+			.pict-example-badge { background: #E76F51; color: #fff; padding: 0.6rem 1rem; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; display: flex; align-items: center; gap: 0.5rem; }
+			.pict-example-badge svg { width: 14px; height: 14px; fill: #fff; flex-shrink: 0; }
+			.pict-example-app-name { padding: 0.6rem 1rem; color: #FAEDCD; font-size: 1.1rem; font-weight: 600; display: flex; align-items: center; }
+			.pict-example-module { margin-left: auto; padding: 0.6rem 1rem; color: #D4A373; font-size: 0.75rem; display: flex; align-items: center; letter-spacing: 0.03em; }
+
+			/* --- Content Area — flows naturally, no fixed height --- */
+			.pict-example-content { padding: 1.5rem; }
+
+			/* --- Selector Bar --- */
+			.pict-fe-selector-bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: #fff; border: 1px solid #D4A373; border-radius: 6px; margin-bottom: 1rem; }
+			.pict-fe-selector-label { font-size: 0.85rem; font-weight: 600; color: #264653; white-space: nowrap; }
+			.pict-fe-selector-select { flex: 1; max-width: 320px; padding: 0.4rem 0.6rem; border: 1px solid #D4C4A8; border-radius: 4px; font-size: 0.9rem; color: #264653; background: #FFFCF7; }
+			.pict-fe-selector-select:focus { outline: none; border-color: #E76F51; box-shadow: 0 0 0 2px rgba(231,111,81,0.15); }
+			.pict-fe-selector-btn { padding: 0.4rem 1rem; border: none; border-radius: 4px; font-size: 0.85rem; font-weight: 600; color: #fff; background: #E76F51; cursor: pointer; white-space: nowrap; }
+			.pict-fe-selector-btn:hover { background: #C45A3E; }
+
+			/* --- Info Banner --- */
+			.pict-example-info { background: #fff; border: 1px solid #D4A373; border-radius: 6px; padding: 1rem 1.25rem; margin-bottom: 1rem; font-size: 0.85rem; line-height: 1.6; color: #3D3229; }
+			.pict-example-info h3 { margin: 0 0 0.5rem 0; font-size: 0.95rem; color: #9E6B47; }
+			.pict-example-info code { background: #F5F0E8; padding: 0.15em 0.4em; border-radius: 3px; font-size: 0.8rem; }
+		</style>
+		<script src="./pict.js" type="text/javascript"></script>
+		<script src="./codejar.js" type="text/javascript"></script>
+		<script type="text/javascript">Pict.safeOnDocumentReady(() => { Pict.safeLoadPictApplication(FormEditorFlexExample, 1)});</script>
+	</head>
+	<body>
+		<div class="pict-example-header">
+			<div class="pict-example-badge">
+				<svg viewBox="0 0 16 16"><polygon points="8,1 10,6 16,6 11,9.5 13,15 8,11.5 3,15 5,9.5 0,6 6,6"/></svg>
+				Pict Example
+			</div>
+			<div class="pict-example-app-name">Form Editor — Flex Height</div>
+			<div class="pict-example-module">pict-section-formeditor (sticky panel reference)</div>
+		</div>
+		<div class="pict-example-content">
+			<div class="pict-example-info">
+				<h3>Flex-Height Layout with Sticky Properties Panel</h3>
+				This reference app demonstrates the form editor embedded in a page that scrolls
+				naturally (no fixed viewport height). The properties panel on the right uses
+				<code>position: sticky</code> so it stays visible as you scroll through long
+				manifests. Load the <strong>Patient Intake</strong> or <strong>Project Proposal</strong>
+				manifests for large forms that exercise vertical scrolling.
+			</div>
+			<div id="FormEditor-Selector"></div>
+			<div id="FormEditor-Container"></div>
+		</div>
+		<script src="./form_editor_flex_example.js" type="text/javascript"></script>
+	</body>
+</html>