pict-section-form 1.0.129 → 1.0.131

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pict-section-form",
-    "version": "1.0.129",
+    "version": "1.0.131",
     "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.311",
         "pict-application": "^1.0.29",
         "pict-service-commandlineutility": "^1.0.15",
         "quackage": "^1.0.42",

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

@@ -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

@@ -489,6 +489,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.
 	 *

package/source/views/support/Pict-View-PSF-DebugViewer.js

@@ -10,26 +10,161 @@ const defaultViewConfiguration = (
 	RenderOnLoad: false,
 
 	CSS: /*css*/`
-	#Pict-Form-Extensions-Container { position: absolute; left: 75%; top: 0px; width: 25%; background-color: blanchedalmond; margin: 2px; }
-	#PSFDV-SectionList .PSFDV-Section { margin: 2px; padding: 2px; background-color: aliceblue; }
-	#PSFDV-DynamicInputSection .PSFDV-Section { margin: 2px; padding: 2px; background-color: #c8fe44; }
-	.PSFDV-Section-Group, .PSFDV-Section-Descriptors { margin-left: 5px; }
-	.PSFDV-Section-Buttons { font-face: orange; }
-	.PSFDV-Solver-Entry { margin-left: 10px; margin-left: 5px; font-family: "Courier New", "Lucida Console", monospace; white-space: nowrap; overflow: scroll; }
-	.PSFDV-Solver-Result { font-family: "Courier New", "Lucida Console", monospace; background-color: #eefaee; white-space: nowrap; overflow: scroll; }
-	.PSFDV-DataHeader { font-weight: bold; }
-	.PSFDV-DeEmphasize { font-weight: light; font-size: smaller; }
-	.PSFDV-Data { margin-left: 10px; line-height: 0.5; font-size: smaller; }
-	.PSFDV-Label { font-weight: light; min-width: 15%; color: #334481; }
-	.PSFDV-Hidden { display: none; }
+	:root{
+		--PSFDV-gutter-size: 5px;
+		--PSFDV-indentation-size: calc(2 * var(--PSFDV-gutter-size));
+		--PSFDV-Global-background-color: #dcdce5;
+		--PSFDV-Global-text-color: #333333;
+		--PSFDV-Section-background-color: #cacae8;
+		--PSFDV-Section-button-color: #5A52A3;
+		--PSFDV-Section-button-text-color: #D8D7E5;
+		--PSFDV-Section-Data-background-color: #e2e2f0;
+		--PSFDV-Section-DynamicInput-background-color: #a3ccd8;
+		--PSFDV-Section-DynamicInput-button-color: #2b89a4;
+		--PSFDV-Section-DynamicInput-button-text-color: #D8D7E5;
+	}
+	#Pict-Form-Extensions-Container { 
+		color: var(--PSFDV-Global-text-color);
+		background-color: var(--PSFDV-Global-background-color);
+		padding: var(--PSFDV-gutter-size);
+		font-family: Arial, sans-serif;
+		font-size: 14px;
+	}
+	.PSFDV-Extension-Header {
+		font-size: 10px;
+		font-weight: bold;
+		margin-bottom: var(--PSFDV-gutter-size);
+	}
+	.PSFDV-Global-Header {
+		margin: var(--PSFDV-gutter-size);
+	}
+	.PSFDV-Section-Header {
+		margin: var(--PSFDV-gutter-size);
+	}
+	.PSFDV-Content-Header {
+		margin: var(--PSFDV-gutter-size);
+	}
+	#PSFDV-SectionList .PSFDV-Section { 
+		margin: var(--PSFDV-gutter-size);
+		padding: var(--PSFDV-gutter-size);
+		background-color: var(--PSFDV-Section-background-color);
+	}
+	.PSFDV-Section-Descriptors { 
+		border-left: 5px solid var(--PSFDV-Section-background-color);
+		background-color: #ffffff;
+		padding: var(--PSFDV-gutter-size) 0;
+	}
+	.PSFDV-Section-Group { 
+		border-left: 5px solid var(--PSFDV-Section-button-color);
+		padding: var(--PSFDV-gutter-size);
+		background-color: #efefef;
+	}
+	.PSFDV-Section-Buttons {
+		list-style-type: none;
+		padding: 0;
+		margin: calc(var(--PSFDV-gutter-size) * 2) var(--PSFDV-gutter-size);
+	}
+	.PSFDV-Section-Button { 
+		display: inline;
+		margin-right: calc(var(--PSFDV-gutter-size) * 0.25);
+		text-decoration: none;
+		background-color: var(--PSFDV-Section-button-color);
+		padding: var(--PSFDV-gutter-size);
+		border-radius: var(--PSFDV-gutter-size);
+	}
+	.PSFDV-Section-Button a { 
+		text-decoration: none;
+		color: var(--PSFDV-Section-button-text-color);
+	}
+	.PSFDV-Section-Button a:hover { 
+		text-decoration: underline;
+	}
+	.PSFDV-Solver-Entry { 
+		padding-left: var(--PSFDV-indentation-size);
+		margin-left: var(--PSFDV-gutter-size);
+		font-family: "Courier New", "Lucida Console", monospace;
+		white-space: nowrap;
+		overflow: scroll;
+	}
+	.PSFDV-Solver-Result { 
+		font-family: "Courier New", "Lucida Console", monospace;
+		background-color: #dedede;
+		border: 1px solid #cccccc;
+		font-weight: bold;
+		border-radius: var(--PSFDV-gutter-size);
+		margin-top: var(--PSFDV-gutter-size);
+		display: inline-block;
+		white-space: nowrap;
+		overflow: scroll;
+		padding: var(--PSFDV-gutter-size);
+	}
+	.PSFDV-DataHeader {
+		font-weight: bold;
+		background-color: #f0f0f0;
+		padding: var(--PSFDV-gutter-size);
+	}
+	.PSFDV-Section-ExtraData {
+		margin-top: var(--PSFDV-gutter-size);
+		padding: var(--PSFDV-gutter-size);
+		background-color: var(--PSFDV-Section-Data-background-color);
+	}
+	.PSFDV-Section .PSFDV-DeEmphasize
+	{
+		color: var(--PSFDV-Section-button-color);
+	}
+	.PSFDV-DeEmphasize { 
+		font-weight: light;
+		font-size: smaller;
+		display: block;
+	}
+	.PSFDV-Data { 
+		margin-left: var(--PSFDV-indentation-size);
+		line-height: 0.85;
+		font-size: smaller;
+	}
+	.PSFDV-Label { 
+		font-weight: light;
+		min-width: 15%;
+		display: block;
+		color: var(--PSFDV-Section-button-color);
+		margin: var(--PSFDV-gutter-size) 0;
+	}
+	.PSFDV-Hidden { 
+		display: none;
+	}
+	.PSFDV-Section-Solver-DynamicInput {
+		background-color: #ffffff;
+	}
+	#PSFDV-DynamicInputSection .PSFDV-Section { 
+		margin: var(--PSFDV-gutter-size);
+		padding: var(--PSFDV-gutter-size);
+		background-color: var(--PSFDV-Section-DynamicInput-background-color);
+	}
+
+	#PSFDV-DynamicInputSection .PSFDV-Section .PSFDV-Section-Button { 
+		background-color: var(--PSFDV-Section-DynamicInput-button-color);
+	}
+	#PSFDV-DynamicInputSection .PSFDV-Section .PSFDV-Section-Button a { 
+		color: var(--PSFDV-Section-DynamicInput-button-text-color);
+	}
+	#PSFDV-DynamicInputSection .PSFDV-Section .PSFDV-Label,
+	#PSFDV-DynamicInputSection .PSFDV-Section .PSFDV-DeEmphasize { 
+		color: var(--PSFDV-Section-DynamicInput-button-color);
+	}
+	#PSFDV-DynamicInputSection .PSFDV-Section-Descriptors { 
+		border-left: 5px solid var(--PSFDV-Section-DynamicInput-background-color);
+	}
+	#PSFDV-DynamicInputSection .PSFDV-Section-Group { 
+		border-left: 5px solid var(--PSFDV-Section-DynamicInput-button-color);
+	}
 `,
 
 	Templates: [
 		{
 			Hash: "Pict-Form-DebugViewer-Content",
 			Template: /*html*/`
-<div>
-	<h2>Pict Inline Form Editor</h2>
+<div id="Pict-Form-DebugViewer-Content">
+	<h2 class="PSFDV-Global-Header">Pict Inline Form Editing Tool</h2>
 	{~T:Pict-Form-DebugViewer-MetacontrollerContainer~}
 </div>`
 		},
@@ -50,25 +185,37 @@ const defaultViewConfiguration = (
 			Hash: "Pict-Form-DebugViewer-SectionContainer",
 			Template: /*html*/`
 	<div id="PSFDV-Section-{~D:Record.Hash~}" class="PSFDV-Section">
-		<h3><span class="PSFDV-DeEmphasize">Section:</span> {~D:Record.sectionDefinition.Name~}</h3>
-		<div class="PSDV-Section-Buttons"><a href="#" onclick="{~P~}.views['{~D:Record.View.Hash~}'].render()">[ render ]</a> <a href="#" onclick="{~P~}.ContentAssignment.assignContent('{~D:Record.View.options.DefaultDestinationAddress~}','')">[ clear ]</a> <a href="#" onclick="{~P~}.ContentAssignment.removeClass('#PSFDV-{~D:Record.View.Hash~}-Extra', 'PSFDV-Hidden')">[ Extra Data ]</a></div>
-		<div id="PSFDV-{~D:Record.View.Hash~}-Extra" class="PSFDV-Hidden">
-			<p class="PSFDV-Data"><span class="PSFDV-Label">Description:</span> {~D:Record.sectionDefinition.Description~}</p>
-			<p class="PSFDV-Data"><span class="PSFDV-Label">Hash:</span> {~D:Record.View.Hash~}</p>
-			<p class="PSFDV-Data"><span class="PSFDV-Label">HTML ID:</span> {~D:Record.View.sectionDefinition.Macro.HTMLID~}</p>
-			<h4>Section Solvers:</h4>
+		<h3 class="PSFDV-Section-Header"><span class="PSFDV-DeEmphasize">Section:</span> {~D:Record.sectionDefinition.Name~}</h3>
+		<ul class="PSFDV-Section-Buttons">
+			<li class="PSFDV-Section-Button"><a href="javascript:void(0);" onclick="{~P~}.views['{~D:Record.View.Hash~}'].render()">Render</a></li>
+			<li class="PSFDV-Section-Button"><a href="javascript:void(0);" onclick="{~P~}.ContentAssignment.assignContent('{~D:Record.View.options.DefaultDestinationAddress~}','')">Clear</a></li>
+			<li class="PSFDV-Section-Button"><a href="javascript:void(0);" onclick="{~P~}.ContentAssignment.removeClass('#PSFDV-{~D:Record.View.Hash~}-Extra', 'PSFDV-Hidden')">Extra Data</a></li>
+		</ul>
+		<div id="PSFDV-{~D:Record.View.Hash~}-Extra" class="PSFDV-Hidden PSFDV-Section-ExtraData">
+			<p class="PSFDV-Data">
+				<span class="PSFDV-Label">Description:</span> {~D:Record.sectionDefinition.Description~}
+			</p>
+			<p class="PSFDV-Data">
+				<span class="PSFDV-Label">Hash:</span> {~D:Record.View.Hash~}
+			</p>
+			<p class="PSFDV-Data">
+				<span class="PSFDV-Label">HTML ID:</span> {~D:Record.View.sectionDefinition.Macro.HTMLID~}
+			</p>
+			<h4 class="PSFDV-Content-Header">Section Solvers:</h4>
 			<div class="PSFDV-Section-Solvers">
 				{~TS:Pict-Form-DebugViewer-SolverEntry:Record.Solvers[]<<~?ExpressionScope,==,Section?~>>~}
 			</div>
-			<h4>Tabular/RecordSet Solvers:</h4>
+			<h4 class="PSFDV-Content-Header">Tabular/RecordSet Solvers:</h4>
 			<div class="PSFDV-Group-Solvers">
 				{~TS:Pict-Form-DebugViewer-SolverEntry:Record.Solvers[]<<~?ExpressionScope,==,Group?~>>~}
 			</div>
-			<h4>Inputs:</h4>
+			<h4 class="PSFDV-Content-Header">Inputs:</h4>
 			<div class="PSFDV-Section-Solver-DynamicInput">
 				{~TS:Pict-Form-DebugViewer-GroupContainer:Record.View.sectionDefinition.Groups~}
 			</div>
-			<a href="#" onclick="{~P~}.ContentAssignment.addClass('#PSFDV-{~D:Record.View.Hash~}-Extra', 'PSFDV-Hidden')">[ Hide Extra Data for {~D:Record.View.Hash~} ]</a>
+			<ul class="PSFDV-Section-Buttons">
+				<li class="PSFDV-Section-Button"><a href="javascript:void(0);" onclick="{~P~}.ContentAssignment.addClass('#PSFDV-{~D:Record.View.Hash~}-Extra', 'PSFDV-Hidden')">Hide Extra Data for {~D:Record.View.Hash~}</a></li>
+			</ul>
 		</div>
 	</div>
 `
@@ -87,7 +234,7 @@ const defaultViewConfiguration = (
 			Hash: "Pict-Form-DebugViewer-GroupContainer",
 			Template: /*html*/`
 			<div class="PSFDV-Section-Group">
-				<h8><span class="PSFDV-DeEmphasize">Group:</span> {~D:Record.Name~} [idx <em>{~D:Record.GroupIndex~}</em>]</h8>
+				<h5 class="PSFDV-Content-Header"><span class="PSFDV-DeEmphasize">Group:</span> {~D:Record.Name~} [idx <em>{~D:Record.GroupIndex~}</em>]</h5>
 				<p class="PSFDV-Data"><span class="PSFDV-Label">Layout:</span> {~D:Record.Layout~}</p>
 				<div class="PSFDV-Section-Rows">
 					{~TS:Pict-Form-DebugViewer-RowContainer:Record.Rows~}
@@ -99,7 +246,7 @@ const defaultViewConfiguration = (
 			Hash: "Pict-Form-DebugViewer-RowContainer",
 			Template: /*html*/`
 					<div class="PSFDV-Section-Descriptors">
-						<h9>Row {~D:Record.Hash~}</h9>
+						<h6 class="PSFDV-Content-Header">Row {~D:Record.Hash~}</h6>
 						{~TS:Pict-Form-DebugViewer-DescriptorContainer:Record.Inputs~}
 					</div>
 `
@@ -117,23 +264,12 @@ const defaultViewConfiguration = (
 							<p class="PSFDV-Data"><span class="PSFDV-Label">HTML ID</span> {~D:Record.PictForm.Macro.HTMLID~}</p>
 						</div>
 					`
-		},
-		{
-			Hash: "Pict-Form-DebugViewer-Container",
-			Template: /*html*/`<div id="Pict-Form-Extensions-Container"></div>`
 		}
 	],
 	Renderables: [
 		{
 			RenderableHash: "Pict-Form-DebugViewer-Renderable",
 			TemplateHash: "Pict-Form-DebugViewer-Content"
-		},
-		{
-			RenderableHash: "Pict-Form-DebugViewer-Container",
-			TemplateHash: "Pict-Form-DebugViewer-Container",
-			ContentDestinationAddress: 'body',
-			RenderMethod: 'append_once',
-			TestAddress: "#Pict-Form-Extensions-Container",
 		}
 	]
 });

package/source/views/support/Pict-View-PSF-SupportBase.js

@@ -22,6 +22,40 @@ class PictFormsSupportBase extends libPictView
 	constructor(pFable, pOptions, pServiceHash)
 	{
 		super(pFable, pOptions, pServiceHash);
+
+		// Only add this css if it doesn't exist
+		if (!('Pict-Support' in this.pict.CSSMap.inlineCSSMap))
+		{
+			this.pict.CSSMap.addCSS('Pict-Support',
+				/*css*/`
+					#Pict-Form-Extensions-Wrap {
+						position: absolute;
+						left: 50%;
+						top: 0px;
+						width: 50vw;
+						max-height: 75vh;
+						overflow: auto;
+					}
+					#Pict-Form-Extension-DragControl {
+						background-color: #eae;
+						cursor: move;
+						padding: 2px 4px;
+						border-radius: 3px;
+						
+					}
+				`, 1000, 'Pict-Form-SupportBase');
+		}
+		// Only add this template if it 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="PSFDV-Extension-Header"><span id="Pict-Form-Extension-DragControl" class="PSDV-Extension-Header-Controlbar">Pict.Extensions <a href="javascript:void(0);" onclick="{~P~}.views.PictFormMetacontroller.showSupportViewInlineEditor()">reload</a> <a href="javascript:void(0);" onclick="{~P~}.ContentAssignment.toggleClass('#Pict-Form-Extensions-Container', 'PSFDV-Hidden')">toggle</a></span></p>
+				<div id="Pict-Form-Extensions-Container"></div>
+			</div>
+				`);
+		}
 	}
 
 	getDynamicState()
@@ -229,10 +263,68 @@ class PictFormsSupportBase extends libPictView
 		}
 
 		// 4. Render the container for the support view if it isn't loaded
-		let tmpContainerRenderableHash = 'Pict-Form-DebugViewer-Container';
+		let tmpContainerRenderableHash = 'Pict-Form-Support-Container';
+
+		// Check if the renderable exists -- if not, create it dynamically
+		// This just appends itself to the body once, and creates a simple container for extensions to load into.
+		if (!(tmpContainerRenderableHash in this.renderables))
+		{
+			this.renderables[tmpContainerRenderableHash] = (
+				{
+					RenderableHash: "Pict-Form-Support-Container",
+					TemplateHash: "Pict-Form-Support-Container",
+					ContentDestinationAddress: 'body',
+					RenderMethod: 'append_once',
+					TestAddress: "#Pict-Form-Extensions-Container",
+				});
+		}
+
 		this.renderables[tmpContainerRenderableHash].TestAddress = tmpContainerTest;
 		this.pict.CSSMap.injectCSS();
+
 		this.render(tmpContainerRenderableHash);
+
+		// 5. Make the container draggable
+		// Setup the draggable behavior for the window
+		let tmpDraggableElement = document.getElementById('Pict-Form-Extensions-Wrap'); // What we are dragging
+		let tmpDragInteractiveControl = document.getElementById('Pict-Form-Extension-DragControl'); // The control you click on to drag
+		if (tmpDraggableElement && tmpDragInteractiveControl)
+		{
+			tmpDragInteractiveControl.addEventListener('mousedown',
+				/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+				* BEGIN of browser event code block
+				*
+				* The below code is meant to run in response to a browser event.
+				* --> Therefore the "this" context is the element that fired the event.
+				* --> Happy trails.
+				*/
+				function (pEvent)
+				{
+					let tmpOffsetX = pEvent.offsetX + tmpDragInteractiveControl.clientLeft;
+					let tmpOffsetY = pEvent.offsetY + tmpDragInteractiveControl.clientTop;
+					function dragHandler(pEvent)
+					{
+						pEvent.stopPropagation();
+						
+						tmpDraggableElement.style.left = (pEvent.clientX - tmpOffsetX) + 'px';
+						tmpDraggableElement.style.top = (pEvent.clientY - tmpOffsetY) + 'px';
+					}
+					function dragStop(pEvent)
+					{
+						window.removeEventListener('pointermove', dragHandler);
+						window.removeEventListener('pointerup', dragStop);
+					}
+					window.addEventListener('pointermove', dragHandler);
+					window.addEventListener('pointerup', dragStop);
+
+					// Prevent janky selection behaviors in the browser
+					pEvent.preventDefault();
+				});
+				/*
+				* END of browser event code block
+				* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+		}
+
 	}
 }
 

package/types/source/services/Fable-Service-TransactionTracking.d.ts

@@ -1,21 +0,0 @@
-export = TransactionTracking;
-declare class TransactionTracking {
-    constructor(pFable: any, pOptions: any, pServiceHash: any);
-    /** @type {import('pict') & { addAndInstantiateSingletonService: (hash: string, options: any, prototype: any) => any }} */
-    fable: import("pict") & {
-        addAndInstantiateSingletonService: (hash: string, options: any, prototype: any) => any;
-    };
-    /** @type {any} */
-    log: any;
-    /** @type {string} */
-    UUID: string;
-    transactionMap: {};
-    get transactions(): {};
-    logToTransaction(pKey: any, pMessage: any, pCategory: any): boolean;
-    registerTransaction(pKey: any): any;
-    checkEvent(pKey: any, pEvent: any, pHash: any): boolean;
-}
-declare namespace TransactionTracking {
-    let default_configuration: Record<string, any>;
-}
-//# sourceMappingURL=Fable-Service-TransactionTracking.d.ts.map

package/types/source/services/Fable-Service-TransactionTracking.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Fable-Service-TransactionTracking.d.ts","sourceRoot":"","sources":["../../../source/services/Fable-Service-TransactionTracking.js"],"names":[],"mappings":";AAMA;IAEC,2DAaC;IARA,0HAA0H;IAC1H,OADW,OAAO,MAAM,CAAC,GAAG;QAAE,iCAAiC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,KAAK,GAAG,CAAA;KAAE,CAC5G;IACV,kBAAkB;IAClB,KADW,GAAG,CACN;IACR,qBAAqB;IACrB,MADW,MAAM,CACR;IAET,mBAAwB;IAGzB,uBAGC;IAED,oEAgBC;IAED,oCAeC;IAED,wDA2BC;CACD;;+BAIU,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC"}