geomui 0.5.25 → 0.5.27

package/dist/InputParams.svelte

@@ -19,8 +19,14 @@ let inputComment = "";
 function paramChange() {
   dispatch("paramChg", { foo: "bla" });
 }
-function tolerantApply(ipVal) {
+function tolerantApply(iPartName, ipVal) {
   let rMsg = "";
+  let applyWarn1 = false;
+  if (iPartName !== pDef.partName) {
+    rMsg += `warn361: read partName: '${iPartName}'  expected partName: '${pDef.partName}'
+`;
+    applyWarn1 = true;
+  }
   let cover = 0;
   let uncover = 0;
   let equal = 0;
@@ -46,7 +52,7 @@ function tolerantApply(ipVal) {
 `;
     }
   }
-  const rApplyWarn = notInScope > 0 ? true : false;
+  const applyWarn2 = notInScope > 0 ? true : false;
   const loadDate = (/* @__PURE__ */ new Date()).toLocaleTimeString();
   rMsg += `Params loaded at ${loadDate} :`;
   rMsg += ` def-nb: ${Object.keys(pDef.params).length}`;
@@ -55,6 +61,7 @@ function tolerantApply(ipVal) {
   rMsg += ` load-nb: ${Object.keys(ipVal).length}`;
   rMsg += `, equal-nb: ${equal}, changed-nb: ${cover - equal}`;
   rMsg += `, out-of-scope: ${notInScope}`;
+  const rApplyWarn = applyWarn1 || applyWarn2;
   return [rMsg, rApplyWarn];
 }
 let loadMsg = "";
@@ -70,7 +77,7 @@ function initParams2() {
       }
     }
     if (Object.keys(pVal2).length > 0) {
-      [loadMsg, applyWarn] = tolerantApply(pVal2);
+      [loadMsg, applyWarn] = tolerantApply(pDef.partName, pVal2);
     }
   }
 }
@@ -84,7 +91,7 @@ onMount(() => {
 function loadParams(iStr) {
   try {
     const [paramJson] = parseParamFile(iStr);
-    [loadMsg, applyWarn] = tolerantApply(paramJson.pVal);
+    [loadMsg, applyWarn] = tolerantApply(paramJson.partName, paramJson.pVal);
     inputComment = paramJson.comment;
     paramChange();
   } catch (emsg) {
@@ -118,7 +125,7 @@ function loadDefaults() {
   for (const p of pDef.params) {
     pInit[p.name] = p.init;
   }
-  [loadMsg, applyWarn] = tolerantApply(pInit);
+  [loadMsg, applyWarn] = tolerantApply(pDef.partName, pInit);
 }
 let locStorRname;
 function loadLocStor() {
@@ -144,7 +151,12 @@ function saveInLocStor() {
     const storeKey = `${pDef.partName}_${locStorWname}`;
     const re2 = /\..*$/;
     const lastModif = (/* @__PURE__ */ new Date()).toISOString().replace(re2, "");
-    const storeAllStr = createParamFile(lastModif, $storePV[pDef.partName], inputComment);
+    const storeAllStr = createParamFile(
+      lastModif,
+      pDef.partName,
+      $storePV[pDef.partName],
+      inputComment
+    );
     if (browser) {
       window.localStorage.setItem(storeKey, storeAllStr);
     }
@@ -182,6 +194,51 @@ let modalImg = false;
 function showSvg() {
   modalImg = true;
 }
+function makeHTable(iParams) {
+  const rHTable = [];
+  const sectionMain = {
+    sectionName: "main",
+    sectionID: "g0main",
+    sectionVisible: false,
+    params: []
+  };
+  let section = sectionMain;
+  let sectionID = 0;
+  for (const param of iParams) {
+    if (param.pType === PType.eSectionSeparator) {
+      rHTable.push(section);
+      sectionID += 1;
+      const sectionNew = {
+        sectionName: param.name,
+        sectionID: `g${sectionID}${param.name}`,
+        sectionVisible: true,
+        params: []
+      };
+      section = sectionNew;
+    } else {
+      section.params.push(param);
+    }
+  }
+  rHTable.push(section);
+  return rHTable;
+}
+function makeHTableVis(iHTable) {
+  const rVis = {};
+  for (const section of iHTable) {
+    rVis[section.sectionID] = section.sectionVisible;
+  }
+  return rVis;
+}
+let htable;
+let htableVis;
+let prePartName = "";
+$: {
+  htable = makeHTable(pDef.params);
+  if (prePartName !== pDef.partName) {
+    prePartName = pDef.partName;
+    htableVis = makeHTableVis(htable);
+  }
+}
 </script>
 
 <section>
@@ -223,6 +280,7 @@ function showSvg() {
 		<table>
 			<thead>
 				<tr>
+					<td>&#35;</td>
 					<td>Parameter name</td>
 					<td>Value</td>
 					<td>Unit</td>
@@ -232,52 +290,69 @@ function showSvg() {
 					<td>Step</td>
 				</tr>
 			</thead>
-			<tbody>
-				{#each pDef.params as param}
-					<tr class:changed={$storePV[pDef.partName][param.name] !== param.init}>
-						<td><button on:click={() => paramPict(param.name)}>{param.name}</button></td
+			{#each htable as sect, sidx}
+				<tr class="separator">
+					<td>{sidx + 1}</td>
+					<td colspan="4">{sect.sectionName}</td>
+					<td colspan="3">
+						<label>
+							<input type="checkbox" bind:checked={htableVis[sect.sectionID]} />
+							<span> </span></label
 						>
-						<td>
-							{#if param.pType === PType.eNumber}
-								<input
-									type="number"
-									bind:value={$storePV[pDef.partName][param.name]}
-									min={param.min}
-									max={param.max}
-									step={param.step}
-									on:change={paramChange}
-									class="input-number"
-								/>
-								<input
-									type="range"
-									bind:value={$storePV[pDef.partName][param.name]}
-									min={param.min}
-									max={param.max}
-									step={param.step}
-									on:change={paramChange}
-								/>
-							{:else if param.pType === PType.eCheckbox}
-								<select bind:value={$storePV[pDef.partName][param.name]}>
-									{#each ['Off', 'On'] as one, idx}
-										<option value={idx}>{one}</option>
-									{/each}
-								</select>
-							{:else}
-								<select bind:value={$storePV[pDef.partName][param.name]}>
-									{#each param.dropdown as one, idx}
-										<option value={idx}>{one}</option>
-									{/each}
-								</select>
-							{/if}
-						</td>
-						<td>{param.unit}</td>
-						<td>{param.init}</td>
-						<td>{param.min}</td>
-						<td>{param.max}</td>
-						<td>{param.step}</td>
-					</tr>
-				{/each}
-			</tbody>
+					</td>
+				</tr>
+				<tbody class:collaps={htableVis[sect.sectionID]}>
+					{#each sect.params as param, pidx}
+						<tr class:changed={$storePV[pDef.partName][param.name] !== param.init}>
+							<td>{sidx + 1}.{pidx + 1}</td>
+							<td
+								><button on:click={() => paramPict(param.name)}>{param.name}</button
+								></td
+							>
+							<td>
+								{#if param.pType === PType.eNumber}
+									<input
+										type="number"
+										bind:value={$storePV[pDef.partName][param.name]}
+										min={param.min}
+										max={param.max}
+										step={param.step}
+										on:change={paramChange}
+										class="input-number"
+									/>
+									<input
+										type="range"
+										bind:value={$storePV[pDef.partName][param.name]}
+										min={param.min}
+										max={param.max}
+										step={param.step}
+										on:change={paramChange}
+									/>
+								{:else if param.pType === PType.eCheckbox}
+									<select bind:value={$storePV[pDef.partName][param.name]}>
+										{#each ['Off', 'On'] as one, idx}
+											<option value={idx}>{one}</option>
+										{/each}
+									</select>
+								{:else if param.pType === PType.eDropdown}
+									<select bind:value={$storePV[pDef.partName][param.name]}>
+										{#each param.dropdown as one, idx}
+											<option value={idx}>{one}</option>
+										{/each}
+									</select>
+								{:else}
+									unknown
+								{/if}
+							</td>
+							<td>{param.unit}</td>
+							<td>{param.init}</td>
+							<td>{param.min}</td>
+							<td>{param.max}</td>
+							<td>{param.step}</td>
+						</tr>
+					{/each}
+				</tbody>
+			{/each}
 		</table>
 		<div class="comment">
 			<label for="inComment">Comment:</label>
@@ -374,11 +449,59 @@ section > main > table > tbody {
   background-color: #eee;
 }
 
+section > main > table > tbody.collaps {
+  visibility: collapse;
+}
+
 section > main > table > tbody > tr.changed {
   background-color: #ded;
 }
 
+section > main > table > tr.separator {
+  font-weight: 700;
+  background-color: Tan;
+}
+
+tr.separator > td {
+  text-align: center;
+}
+
+tr.separator > td > label > input[type=checkbox] {
+  display: none;
+}
+
+tr.separator > td > label > span {
+  height: 8px;
+  width: 50px;
+  border: 1px solid grey;
+  border-radius: 6px;
+  background-color: LightBlue;
+  position: relative;
+  display: inline-block;
+}
+
+tr.separator > td > label > span::after {
+  content: "";
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: grey;
+  top: 0;
+  left: 1px;
+  display: inline-block;
+}
+
+tr.separator > td > label > input[type=checkbox]:checked + span {
+  background: DarkBlue;
+}
+
+tr.separator > td > label > input[type=checkbox]:checked + span::after {
+  left: 37px;
+}
+
 section > main > table > thead > tr > td,
+section > main > table > tr > td,
 section > main > table > tbody > tr > td {
   padding-left: 0.4rem;
   padding-right: 0.4rem;

package/dist/ParamDrawExport.svelte

@@ -104,11 +104,18 @@ async function downloadExport(iExportFace) {
       fgeom,
       simTime,
       $storePV[pDef.partName],
+      pDef,
       exportFormat
     );
     download_binFile(fName, fContent);
   } else {
-    const fContent = fileTextContent(fgeom, $storePV[pDef.partName], nFace, exportFormat);
+    const fContent = fileTextContent(
+      fgeom,
+      $storePV[pDef.partName],
+      pDef,
+      nFace,
+      exportFormat
+    );
     download_textFile(fName, fContent, fMime);
   }
 }

package/dist/downloadParams.js

@@ -15,7 +15,7 @@ function downloadParams(iPartName, idparams, iComment) {
     const re2 = /\..*$/;
     const datestr = new Date().toISOString().replace(re1, '').replace(re2, '').replace('T', '_');
     const file_name = `px_${iPartName}_${datestr}.json`;
-    const file_content = createParamFile(datestr, idparams, iComment);
+    const file_content = createParamFile(datestr, iPartName, idparams, iComment);
     download_file(file_name, file_content);
     //console.log(`dbg343: ${file_name}`);
 }

package/dist/style/colors.scss

@@ -34,6 +34,7 @@ $table-head: #ddd;
 //$table-body: lightSkyBlue;
 $table-body: #eee;
 $table-line-changed: #ded;
+$table-line-separator: Tan;
 
 $warning-message: orange;
 $warn-calc-warning: orange;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "geomui",
-	"version": "0.5.25",
+	"version": "0.5.27",
 	"description": "The svelte-library of the webapp-UI of Parametrix",
 	"private": false,
 	"repository": {
@@ -39,32 +39,32 @@
 		"svelte": "^4.0.0"
 	},
 	"dependencies": {
-		"geometrix": "^0.5.20"
+		"geometrix": "^0.5.24"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^3.1.1",
 		"@sveltejs/adapter-static": "^3.0.1",
-		"@sveltejs/kit": "^2.5.1",
-		"@sveltejs/package": "^2.2.7",
+		"@sveltejs/kit": "^2.5.4",
+		"@sveltejs/package": "^2.3.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.2",
 		"@typescript-eslint/eslint-plugin": "^7.0.1",
 		"@typescript-eslint/parser": "^7.0.1",
-		"designix": "^0.5.21",
-		"eslint": "^8.56.0",
+		"designix": "^0.5.25",
+		"eslint": "^8.57.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.35.1",
 		"npm-run-all": "^4.1.5",
 		"prettier": "^3.2.5",
-		"prettier-plugin-svelte": "^3.2.1",
+		"prettier-plugin-svelte": "^3.2.2",
 		"publint": "^0.2.7",
-		"sass": "^1.71.1",
+		"sass": "^1.72.0",
 		"shx": "^0.3.4",
-		"svelte": "^4.2.11",
-		"svelte-check": "^3.6.4",
+		"svelte": "^4.2.12",
+		"svelte-check": "^3.6.8",
 		"tslib": "^2.6.2",
-		"typescript": "^5.3.3",
-		"vite": "^5.1.4",
-		"vitest": "^1.3.1"
+		"typescript": "^5.4.3",
+		"vite": "^5.2.2",
+		"vitest": "^1.4.0"
 	},
 	"exports": {
 		".": {