geomui 0.5.4

package/dist/InputParams.svelte

@@ -0,0 +1,453 @@
+<script>import ModalDiag from "./ModalDiag.svelte";
+import ModalImg from "./ModalImg.svelte";
+import LocStorWrite from "./LocStorWrite.svelte";
+import LocStorRead from "./LocStorRead.svelte";
+import SimpleDrawing from "./SimpleDrawing.svelte";
+import { PType, parseParamFile, createParamFile } from "geometrix";
+import { storePV } from "./storePVal";
+import { downloadParams, generateUrl } from "./downloadParams";
+import { onMount, createEventDispatcher } from "svelte";
+import { browser } from "$app/environment";
+import { page } from "$app/stores";
+import { base } from "$app/paths";
+const dispatch = createEventDispatcher();
+export let pDef;
+export let fgeom;
+export let selFace;
+export let simTime = 0;
+let inputComment = "";
+function paramChange() {
+  dispatch("paramChg", { foo: "bla" });
+}
+function tolerantApply(ipVal) {
+  let rMsg = "";
+  let cover = 0;
+  let uncover = 0;
+  let equal = 0;
+  const pNameList = [];
+  for (const p of pDef.params) {
+    pNameList.push(p.name);
+    if (Object.hasOwn(ipVal, p.name)) {
+      cover += 1;
+      if ($storePV[pDef.partName][p.name] === ipVal[p.name]) {
+        equal += 1;
+      } else {
+        $storePV[pDef.partName][p.name] = ipVal[p.name];
+      }
+    } else {
+      uncover += 1;
+    }
+  }
+  let notInScope = 0;
+  for (const pa of Object.keys(ipVal)) {
+    if (!pNameList.includes(pa)) {
+      notInScope += 1;
+      rMsg += `warn363: parameter ${pa} not in the scope of the design (${notInScope})
+`;
+    }
+  }
+  const rApplyWarn = notInScope > 0 ? true : false;
+  const loadDate = (/* @__PURE__ */ new Date()).toLocaleTimeString();
+  rMsg += `Params loaded at ${loadDate} :`;
+  rMsg += ` def-nb: ${Object.keys(pDef.params).length}`;
+  rMsg += `, cover-nb: ${cover}, uncover-nb: ${uncover}
+`;
+  rMsg += ` load-nb: ${Object.keys(ipVal).length}`;
+  rMsg += `, equal-nb: ${equal}, changed-nb: ${cover - equal}`;
+  rMsg += `, out-of-scope: ${notInScope}`;
+  return [rMsg, rApplyWarn];
+}
+let loadMsg = "";
+let applyWarn = false;
+function initParams2() {
+  if (browser) {
+    const searchParams = new URLSearchParams($page.url.search);
+    const pVal2 = {};
+    for (const [kk, vv] of searchParams) {
+      const vvn = Number(vv);
+      if (!isNaN(vvn)) {
+        pVal2[kk] = vvn;
+      }
+    }
+    if (Object.keys(pVal2).length > 0) {
+      [loadMsg, applyWarn] = tolerantApply(pVal2);
+    }
+  }
+}
+function forceInit() {
+  initParams2();
+  paramChange();
+}
+onMount(() => {
+  forceInit();
+});
+function loadParams(iStr) {
+  try {
+    const [paramJson] = parseParamFile(iStr);
+    [loadMsg, applyWarn] = tolerantApply(paramJson.pVal);
+    inputComment = paramJson.comment;
+    paramChange();
+  } catch (emsg) {
+    let errMsg = "err723: error by parsing parameter file\n";
+    errMsg += emsg;
+    loadMsg = errMsg;
+    applyWarn = true;
+  }
+}
+function loadFile(fileP) {
+  const reader = new FileReader();
+  reader.addEventListener("loadend", () => {
+    loadParams(reader.result);
+  });
+  reader.readAsText(fileP);
+}
+function loadParamFromFile(eve) {
+  if (eve.target) {
+    const paramFiles = eve.target.files;
+    if (paramFiles) {
+      loadFile(paramFiles[0]);
+    }
+  }
+}
+function downloadParams2() {
+  downloadParams(pDef.partName, $storePV[pDef.partName], inputComment);
+}
+let modalLoadDefault = false;
+let modalLoadLocal = false;
+let modalSaveUrl = false;
+let modalSaveLocal = false;
+function loadDefaults() {
+  const pInit = {};
+  for (const p of pDef.params) {
+    pInit[p.name] = p.init;
+  }
+  [loadMsg, applyWarn] = tolerantApply(pInit);
+}
+let locStorRname;
+function loadLocStor() {
+  if (locStorRname !== void 0 && locStorRname !== "") {
+    const storeKey = `${pDef.partName}_${locStorRname}`;
+    if (browser) {
+      const storeStr = window.localStorage.getItem(storeKey);
+      if (storeStr === null) {
+        loadMsg = `Warn157: localStorage key ${storeKey} is null`;
+        applyWarn = true;
+      } else {
+        loadParams(storeStr);
+      }
+    }
+  } else {
+    loadMsg = "Warn239: No valid name for loading from localStorage!";
+    applyWarn = true;
+  }
+}
+let locStorWname;
+function saveInLocStor() {
+  if (locStorWname !== void 0 && locStorWname !== "") {
+    const storeKey = `${pDef.partName}_${locStorWname}`;
+    const re2 = /\..*$/;
+    const lastModif = (/* @__PURE__ */ new Date()).toISOString().replace(re2, "");
+    const storeAllStr = createParamFile(lastModif, $storePV[pDef.partName], inputComment);
+    if (browser) {
+      window.localStorage.setItem(storeKey, storeAllStr);
+    }
+  } else {
+    console.log("Warn639: No valid name for writing to localStorage!");
+  }
+}
+let pUrl = "";
+function generateUrl2() {
+  const url1 = generateUrl($page.url.href, $storePV[pDef.partName], false);
+  return url1.toString();
+}
+function openModalUrl() {
+  pUrl = generateUrl2();
+  modalSaveUrl = true;
+}
+function saveAsUrl() {
+}
+let paramSvg = `${base}/default_param_blank.svg`;
+function paramPict(keyName) {
+  paramSvg = `${base}/default_param_blank.svg`;
+  if (Object.keys(pDef.paramSvg).includes(keyName)) {
+    paramSvg = `${base}/${pDef.paramSvg[keyName]}`;
+  }
+}
+function paramPict2(idx, pDef_page) {
+  const paramNb = Object.keys($storePV[pDef_page]).length;
+  if (idx < paramNb) {
+    paramPict(Object.keys($storePV[pDef_page])[idx]);
+  }
+}
+$:
+  paramPict2(0, pDef.partName);
+let modalImg = false;
+function showSvg() {
+  modalImg = true;
+}
+</script>
+
+<section>
+	<h2>Parameters</h2>
+	<main>
+		<label for="loadFParams" class="fileUpload">Load Params from File</label>
+		<input
+			id="loadFParams"
+			type="file"
+			accept="text/plain, application/json"
+			on:change={loadParamFromFile}
+		/>
+		<button
+			on:click={() => {
+				modalLoadDefault = true;
+			}}>Set Params Default</button
+		>
+		<button
+			on:click={() => {
+				modalLoadLocal = true;
+			}}>Load Params from localStorage</button
+		>
+		<ModalDiag
+			bind:modalOpen={modalLoadDefault}
+			okName="Overwrite Parameters"
+			okFunc={loadDefaults}>Load the default parameters ?</ModalDiag
+		>
+		<ModalDiag bind:modalOpen={modalLoadLocal} okName="Load Parameters" okFunc={loadLocStor}
+			><LocStorRead pageName={pDef.partName} bind:storeName={locStorRname} /></ModalDiag
+		>
+		<textarea
+			rows="3"
+			cols="80"
+			readonly
+			wrap="off"
+			value={loadMsg}
+			class:colorWarn={applyWarn}
+		/>
+		<table>
+			<thead>
+				<tr>
+					<td>Parameter name</td>
+					<td>Value</td>
+					<td>Unit</td>
+					<td>Default</td>
+					<td>Min</td>
+					<td>Max</td>
+					<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
+						>
+						<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>
+		</table>
+		<div class="comment">
+			<label for="inComment">Comment:</label>
+			<input type="text" id="inComment" bind:value={inputComment} maxlength="150" size="70" />
+		</div>
+		<button on:click={downloadParams2}>Save Parameters to File</button>
+		<button on:click={openModalUrl}>Save Parameters as URL</button>
+		<button
+			on:click={() => {
+				modalSaveLocal = true;
+			}}>Save Parameters to localStorage</button
+		>
+		<ModalDiag bind:modalOpen={modalSaveUrl} okName="Done" okFunc={saveAsUrl} sizeLarge={true}
+			><p>Copy this URL and send it to your friends!</p>
+			<p class="cUrl">{pUrl}</p></ModalDiag
+		>
+		<ModalDiag
+			bind:modalOpen={modalSaveLocal}
+			okName="Save into localStorage"
+			okFunc={saveInLocStor}
+			><LocStorWrite pageName={pDef.partName} bind:storeName={locStorWname} /></ModalDiag
+		>
+	</main>
+	<ModalImg bind:modalOpen={modalImg} svgPath={paramSvg} />
+	<button on:click={showSvg} class="side-img">
+		<img src={paramSvg} alt={paramSvg} />
+	</button>
+	<div class="mini-canvas">
+		<SimpleDrawing pageName={pDef.partName} {fgeom} {selFace} {simTime} />
+	</div>
+</section>
+
+<style>/*
+$canvas-point: grey;
+
+// export to js
+:export {
+	colorCanvasPoint: $canvas-point;
+}
+*/
+section > h2 {
+  color: grey;
+  margin: 1rem 0.5rem 0;
+}
+
+section > main {
+  display: inline-block;
+}
+
+section > main > label.fileUpload {
+  display: inline-block;
+  height: 1.2rem;
+  /*width: 1.6rem;*/
+  color: darkBlue;
+  font-size: 0.8rem;
+  font-weight: 400;
+  padding: 0.1rem 0.4rem 0.1rem;
+  border-style: solid;
+  border-width: 0.1rem;
+  border-radius: 0.2rem;
+  border-color: darkBlue;
+  margin: 0.5rem;
+  background-color: lightBlue;
+}
+
+section > main > input[type=file] {
+  display: none;
+}
+
+section > main > textarea {
+  display: block;
+  /*resize: horizontal;*/
+  font-size: 0.8rem;
+  font-weight: 400;
+  margin: 0.2rem;
+  margin-left: 0.5rem;
+}
+
+section > main > textarea.colorWarn {
+  background-color: orange;
+}
+
+section > main > table {
+  font-size: 0.8rem;
+  font-weight: 400;
+  margin: 0.2rem 0.5rem 0.2rem;
+}
+
+section > main > table > thead {
+  background-color: #ddd;
+}
+
+section > main > table > tbody {
+  background-color: #eee;
+}
+
+section > main > table > tbody > tr.changed {
+  background-color: #ded;
+}
+
+section > main > table > thead > tr > td,
+section > main > table > tbody > tr > td {
+  padding-left: 0.4rem;
+  padding-right: 0.4rem;
+}
+
+section > main > table > tbody > tr > td > button {
+  color: darkBlue;
+  background-color: transparent;
+  border: 0;
+}
+
+section > main > table > tbody > tr > td > input {
+  height: 0.8rem;
+}
+
+section > main > table > tbody > tr > td > input.input-number {
+  width: 5rem;
+}
+
+section > main > div.comment {
+  font-size: 0.8rem;
+  margin-left: 0.5rem;
+}
+
+section > main > button {
+  /*display: inline-block;*/
+  height: 1.6rem;
+  /*width: 1.6rem;*/
+  color: darkBlue;
+  font-size: 0.8rem;
+  font-weight: 400;
+  padding: 0.2rem 0.4rem 0.2rem;
+  border-style: solid;
+  border-width: 0.1rem;
+  border-radius: 0.2rem;
+  border-color: darkBlue;
+  margin: 0.5rem;
+  background-color: lightBlue;
+}
+
+p.cUrl {
+  margin: 0 1rem 0;
+}
+
+section > button.side-img {
+  margin: 0.2rem;
+  border: none;
+  padding: 0;
+  font-size: 0.6rem;
+  background-color: white;
+  vertical-align: top;
+  position: sticky;
+  z-index: 1;
+  top: 0.5rem;
+}
+
+section > button.side-img > img {
+  max-width: 200px;
+  max-height: 200px;
+}
+
+section > div.mini-canvas {
+  display: inline-block;
+  margin: 0.2rem;
+  vertical-align: top;
+  position: sticky;
+  z-index: 1;
+  top: 0.5rem;
+}</style>

package/dist/InputParams.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import type { tParamDef, tGeomFunc } from 'geometrix';
+declare const __propDef: {
+    props: {
+        pDef: tParamDef;
+        fgeom: tGeomFunc;
+        selFace: string;
+        simTime?: number | undefined;
+    };
+    events: {
+        paramChg: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InputParamsProps = typeof __propDef.props;
+export type InputParamsEvents = typeof __propDef.events;
+export type InputParamsSlots = typeof __propDef.slots;
+export default class InputParams extends SvelteComponent<InputParamsProps, InputParamsEvents, InputParamsSlots> {
+}
+export {};

package/dist/LabelCheckbox.svelte

@@ -0,0 +1,27 @@
+<script>import { dLayers } from "./drawingLayers";
+</script>
+
+<div>
+	<label><input type="checkbox" bind:checked={$dLayers.main} />main part</label>
+	<label><input type="checkbox" bind:checked={$dLayers.mainB} />main skeleton</label>
+	<label><input type="checkbox" bind:checked={$dLayers.second} />second parts</label>
+	<label><input type="checkbox" bind:checked={$dLayers.secondB} />second skeletons</label>
+	<label><input type="checkbox" bind:checked={$dLayers.dynamics} />dynamics</label>
+	<label><input type="checkbox" bind:checked={$dLayers.ruler} />ruler</label>
+	<label><input type="checkbox" bind:checked={$dLayers.refframe} />frame of reference</label>
+	<label><input type="checkbox" bind:checked={$dLayers.points} />points</label>
+	<label><input type="checkbox" bind:checked={$dLayers.lines} />lines</label>
+	<label><input type="checkbox" bind:checked={$dLayers.vectors} />vectors</label>
+</div>
+
+<style>/*
+$canvas-point: grey;
+
+// export to js
+:export {
+	colorCanvasPoint: $canvas-point;
+}
+*/
+div > label > input {
+  margin-left: 1rem;
+}</style>

package/dist/LabelCheckbox.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type LabelCheckboxProps = typeof __propDef.props;
+export type LabelCheckboxEvents = typeof __propDef.events;
+export type LabelCheckboxSlots = typeof __propDef.slots;
+export default class LabelCheckbox extends SvelteComponent<LabelCheckboxProps, LabelCheckboxEvents, LabelCheckboxSlots> {
+}
+export {};

package/dist/LocStorRead.svelte

@@ -0,0 +1,56 @@
+<script>import LocStorTable from "./LocStorTable.svelte";
+export let pageName;
+export let storeName;
+let localKeys = [];
+function defaultName(ilocalKeys) {
+  let rname = storeName;
+  const nameUpdate = !ilocalKeys.includes(rname);
+  if (nameUpdate) {
+    if (ilocalKeys.length > 0) {
+      rname = ilocalKeys[0];
+    } else {
+      rname = "";
+    }
+  }
+  return rname;
+}
+$:
+  storeName = defaultName(localKeys);
+</script>
+
+<LocStorTable {pageName} bind:storeName bind:localKeys />
+<div>
+	<label for="storName">Select a parameter-set:</label>
+	<input
+		type="text"
+		id="storName"
+		value={storeName}
+		readonly
+		minlength="4"
+		maxlength="30"
+		size="32"
+	/>
+</div>
+
+<style>/*
+$canvas-point: grey;
+
+// export to js
+:export {
+	colorCanvasPoint: $canvas-point;
+}
+*/
+div {
+  min-height: 6rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+div > label,
+div > input {
+  font-size: 1rem;
+  font-weight: 400;
+  margin: 0.2rem;
+}</style>

package/dist/LocStorRead.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        pageName: string;
+        storeName: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type LocStorReadProps = typeof __propDef.props;
+export type LocStorReadEvents = typeof __propDef.events;
+export type LocStorReadSlots = typeof __propDef.slots;
+export default class LocStorRead extends SvelteComponent<LocStorReadProps, LocStorReadEvents, LocStorReadSlots> {
+}
+export {};