geomui 0.5.4

package/dist/ParamDrawExport.svelte

@@ -0,0 +1,195 @@
+<script>import {
+  EFormat,
+  fileBinContent,
+  fileTextContent,
+  fileSuffix,
+  fileMime,
+  fileBin
+} from "geometrix";
+import InputParams from "./InputParams.svelte";
+import Drawing from "./Drawing.svelte";
+import SubDesign from "./SubDesign.svelte";
+import { storePV } from "./storePVal";
+export let pDef;
+export let fgeom;
+export let pLink;
+function checkWarn(txt) {
+  let rWarn = true;
+  const re = /warn/i;
+  if (txt.search(re) < 0) {
+    rWarn = false;
+  }
+  return rWarn;
+}
+let optFaces = [];
+let exportFace;
+let selFace;
+let simTime = 0;
+let logValue = "Dummy initial\nWill be replaced during onMount\n";
+let calcErr = false;
+let calcWarn = false;
+let subD = {};
+function paramChange2(iPageName) {
+  const mydate = (/* @__PURE__ */ new Date()).toLocaleTimeString();
+  logValue = `Geometry ${iPageName} computed at ${mydate}
+`;
+  const geome = fgeom(simTime, $storePV[pDef.partName]);
+  logValue += geome.logstr;
+  calcErr = geome.calcErr;
+  calcWarn = checkWarn(geome.logstr);
+  optFaces = Object.keys(geome.fig);
+  exportFace = "zip";
+  subD = geome.sub;
+}
+function paramChange() {
+  paramChange2(pDef.partName);
+}
+$:
+  paramChange2(pDef.partName);
+function download_binFile(fName, fContent) {
+  const elem_a_download = document.createElement("a");
+  const payload = URL.createObjectURL(fContent);
+  elem_a_download.setAttribute("href", payload);
+  elem_a_download.setAttribute("download", fName);
+  elem_a_download.click();
+  elem_a_download.remove();
+  URL.revokeObjectURL(payload);
+}
+function download_textFile(fName, fContent, fMime) {
+  const elem_a_download = document.createElement("a");
+  const payload = "data:" + fMime + ";utf-8," + encodeURIComponent(fContent);
+  elem_a_download.setAttribute("href", payload);
+  elem_a_download.setAttribute("download", fName);
+  elem_a_download.click();
+  elem_a_download.remove();
+}
+function dateString() {
+  const re1 = /[-:]/g;
+  const re2 = /\..*$/;
+  const rDateStr = (/* @__PURE__ */ new Date()).toISOString().replace(re1, "").replace(re2, "").replace("T", "_");
+  return rDateStr;
+}
+async function downloadExport(iExportFace) {
+  const reSvg = /^svg_/;
+  const reDxf = /^dxf_/;
+  let exportFormat = EFormat.eSVG;
+  let nFace = "all";
+  if (iExportFace.match(reSvg)) {
+    exportFormat = EFormat.eSVG;
+    nFace = iExportFace.replace(reSvg, "");
+  } else if (iExportFace.match(reDxf)) {
+    exportFormat = EFormat.eDXF;
+    nFace = iExportFace.replace(reDxf, "");
+  } else if (iExportFace === "allsvg") {
+    exportFormat = EFormat.eSVGALL;
+  } else if (iExportFace === "alldxf") {
+    exportFormat = EFormat.eDXFALL;
+  } else if (iExportFace === "pax") {
+    exportFormat = EFormat.ePAX;
+  } else if (iExportFace === "oscad") {
+    exportFormat = EFormat.eOPENSCAD;
+  } else if (iExportFace === "ojscad") {
+    exportFormat = EFormat.eJSCAD;
+  } else if (iExportFace === "zip") {
+    exportFormat = EFormat.eZIP;
+  } else {
+    console.log(`err883: downloadExport iExportFace ${iExportFace} invalid`);
+  }
+  const fSuffix = fileSuffix(exportFormat);
+  const fMime = fileMime(exportFormat);
+  const fBin = fileBin(exportFormat);
+  const fName = pDef.partName + "_" + nFace + "_" + dateString() + fSuffix;
+  if (fBin) {
+    const fContent = await fileBinContent(
+      fgeom,
+      simTime,
+      $storePV[pDef.partName],
+      exportFormat
+    );
+    download_binFile(fName, fContent);
+  } else {
+    const fContent = fileTextContent(fgeom, $storePV[pDef.partName], nFace, exportFormat);
+    download_textFile(fName, fContent, fMime);
+  }
+}
+async function downloadExport2() {
+  await downloadExport(exportFace);
+}
+</script>
+
+<InputParams {pDef} on:paramChg={paramChange} {fgeom} {selFace} {simTime} />
+<section>
+	<h2>Log</h2>
+	<textarea
+		rows="5"
+		cols="94"
+		readonly
+		wrap="off"
+		value={logValue}
+		class:colorErr={calcErr}
+		class:colorWarn={calcWarn}
+	/>
+</section>
+<Drawing {pDef} {fgeom} {optFaces} bind:selFace bind:simTime />
+<section>
+	<h2>Export</h2>
+	<select bind:value={exportFace}>
+		{#each optFaces as optFace}
+			<option value="svg_{optFace}">face {optFace} as svg</option>
+		{/each}
+		<option value="allsvg">all faces merged as svg</option>
+		{#each optFaces as optFace}
+			<option value="dxf_{optFace}">face {optFace} as dxf</option>
+		{/each}
+		<option value="alldxf">all faces merged as dxf</option>
+		<option value="pax">all faces as pax.json</option>
+		<option value="oscad">all faces as openscad.scad</option>
+		<option value="ojscad">all faces as OpenJScad.js</option>
+		<option value="zip">all faces and more as zip</option>
+	</select>
+	<button on:click={downloadExport2}>Save to File</button>
+	<SubDesign {subD} origPartName={pDef.partName} {pLink} />
+</section>
+
+<style>/*
+$canvas-point: grey;
+
+// export to js
+:export {
+	colorCanvasPoint: $canvas-point;
+}
+*/
+section > h2 {
+  color: grey;
+  margin: 1rem 0.5rem 0;
+}
+
+section > textarea {
+  /*resize: horizontal;*/
+  margin-left: 0.5rem;
+}
+
+section > textarea.colorWarn {
+  background-color: orange;
+}
+
+section > textarea.colorErr {
+  background-color: violet;
+}
+
+section > button,
+section > select {
+  /*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;
+}</style>

package/dist/ParamDrawExport.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { tParamDef, tGeomFunc, tAllLink } from 'geometrix';
+declare const __propDef: {
+    props: {
+        pDef: tParamDef;
+        fgeom: tGeomFunc;
+        pLink: tAllLink;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ParamDrawExportProps = typeof __propDef.props;
+export type ParamDrawExportEvents = typeof __propDef.events;
+export type ParamDrawExportSlots = typeof __propDef.slots;
+export default class ParamDrawExport extends SvelteComponent<ParamDrawExportProps, ParamDrawExportEvents, ParamDrawExportSlots> {
+}
+export {};

package/dist/SimpleDrawing.svelte

@@ -0,0 +1,58 @@
+<script>import { copyLayers, mergeFaces } from "geometrix";
+import { storePV } from "./storePVal";
+import { dLayers } from "./drawingLayers";
+import { onMount } from "svelte";
+export let pageName;
+export let fgeom;
+export let selFace;
+export let simTime = 0;
+let canvasMini;
+const canvas_size_mini = 200;
+let mAdjust;
+function canvasRedrawMini(aFigure, iLayers) {
+  const sLayers = copyLayers(iLayers);
+  sLayers.ruler = false;
+  const ctx1 = canvasMini.getContext("2d");
+  ctx1.clearRect(0, 0, ctx1.canvas.width, ctx1.canvas.height);
+  try {
+    mAdjust = aFigure.getAdjustFull(ctx1.canvas.width, ctx1.canvas.height);
+    aFigure.draw(ctx1, mAdjust, sLayers);
+  } catch (emsg) {
+    console.log(emsg);
+  }
+}
+let domInit = 0;
+function geomRedraw(iSimTime, ipVal, iFace, iLayers) {
+  const FigList = fgeom(iSimTime, ipVal).fig;
+  if (Object.keys(FigList).includes(iFace)) {
+    const aFigure = FigList[iFace];
+    canvasRedrawMini(aFigure, iLayers);
+  } else {
+    const aFigure = mergeFaces(FigList);
+    canvasRedrawMini(aFigure, iLayers);
+  }
+}
+onMount(() => {
+  geomRedraw(simTime, $storePV[pageName], selFace, $dLayers);
+  domInit = 1;
+});
+$: {
+  if (domInit === 1) {
+    geomRedraw(simTime, $storePV[pageName], selFace, $dLayers);
+  }
+}
+</script>
+
+<canvas class="mini" width={canvas_size_mini} height={canvas_size_mini} bind:this={canvasMini} />
+
+<style>/*
+$canvas-point: grey;
+
+// export to js
+:export {
+	colorCanvasPoint: $canvas-point;
+}
+*/
+canvas {
+  background-color: pink;
+}</style>

package/dist/SimpleDrawing.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { tGeomFunc } from 'geometrix';
+declare const __propDef: {
+    props: {
+        pageName: string;
+        fgeom: tGeomFunc;
+        selFace: string;
+        simTime?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SimpleDrawingProps = typeof __propDef.props;
+export type SimpleDrawingEvents = typeof __propDef.events;
+export type SimpleDrawingSlots = typeof __propDef.slots;
+export default class SimpleDrawing extends SvelteComponent<SimpleDrawingProps, SimpleDrawingEvents, SimpleDrawingSlots> {
+}
+export {};

package/dist/SubDesign.svelte

@@ -0,0 +1,202 @@
+<script>import { ffix, radToDeg, paramListToVal } from "geometrix";
+import { downloadParams } from "./downloadParams";
+import { updateStore } from "./initStore";
+import { base } from "$app/paths";
+import { goto } from "$app/navigation";
+export let subD = {};
+export let origPartName = "";
+export let pLink;
+let subInsts = [];
+$:
+  subInsts = Object.keys(subD);
+async function goToUrl(subInstName) {
+  const subObj = subD[subInstName];
+  updateStore(subObj.partName, paramListToVal(subObj.dparam), true);
+  const rUrl = `${base}${pLink[subObj.partName]}`;
+  goto(rUrl);
+}
+function dwnParams2(subInstName) {
+  const iPartName = subD[subInstName].partName;
+  const idparams = subD[subInstName].dparam;
+  const aComment = `sub-design parameters of ${iPartName} from ${origPartName}`;
+  downloadParams(iPartName, paramListToVal(idparams), aComment);
+}
+function printOrientation(vec) {
+  let rStr = "[ ";
+  rStr += `${ffix(radToDeg(vec[0]))}, `;
+  rStr += `${ffix(radToDeg(vec[1]))}, `;
+  rStr += `${ffix(radToDeg(vec[2]))} ]`;
+  return rStr;
+}
+function printPosition(vec) {
+  let rStr = "[ ";
+  rStr += `${ffix(vec[0])}, `;
+  rStr += `${ffix(vec[1])}, `;
+  rStr += `${ffix(vec[2])} ]`;
+  return rStr;
+}
+function printSet(changed) {
+  const rStr = changed ? "Yes" : "";
+  return rStr;
+}
+</script>
+
+<section>
+	<h2>
+		Sub-designs
+		<span>(Number of sub-instances: {subInsts.length})</span>
+	</h2>
+	<ol>
+		{#each subInsts as subInst}
+			<li>
+				<input type="checkbox" id="cb_{subInst}" class="toggle" checked={false} />
+				<label for="cb_{subInst}" class="label">
+					<div class="arrow" />
+					{subInst}
+				</label>
+				<button on:click={() => goToUrl(subInst)}
+					>Go to {pLink[subD[subInst].partName]}</button
+				>
+				<button on:click={() => dwnParams2(subInst)}>Export parameters</button>
+				<div class="nested">
+					<article>
+						{Object.keys(subD[subInst].dparam).length} parameters of
+						<strong>{subD[subInst].partName}</strong>
+						with orientation {printOrientation(subD[subInst].orientation)} (degree) at position
+						{printPosition(subD[subInst].position)} (mm)
+					</article>
+					<table>
+						<thead>
+							<tr>
+								<td>Num</td>
+								<td>Name</td>
+								<td>Value</td>
+								<td>Init</td>
+								<td>Set?</td>
+							</tr>
+						</thead>
+						<tbody>
+							{#each Object.keys(subD[subInst].dparam) as param, pIdx}
+								<tr class:changed={subD[subInst].dparam[param].chg}>
+									<td>{pIdx + 1}</td>
+									<td>{param}</td>
+									<td>{subD[subInst].dparam[param].val}</td>
+									<td><i>{subD[subInst].dparam[param].init}</i></td>
+									<td><i>{printSet(subD[subInst].dparam[param].chg)}</i></td>
+								</tr>
+							{/each}
+						</tbody>
+					</table>
+				</div>
+			</li>
+		{/each}
+	</ol>
+</section>
+
+<style>/*
+$canvas-point: grey;
+
+// export to js
+:export {
+	colorCanvasPoint: $canvas-point;
+}
+*/
+section {
+  margin-left: 0.25rem;
+  margin-right: 1rem;
+  border-radius: 0.5rem;
+  background-color: LightGrey;
+}
+
+section > h2 {
+  color: grey;
+  margin: 1rem 0.5rem 0;
+  margin-left: 0.25rem;
+}
+
+section > h2 > span {
+  color: white;
+  font-size: 1rem;
+  font-weight: 400;
+  margin-left: 1rem;
+}
+
+section > ol > li {
+  color: black;
+  font-size: 1rem;
+  font-weight: 400;
+}
+
+section > ol > li > 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;
+}
+
+input.toggle {
+  display: none;
+}
+
+div.nested {
+  /*
+  margin: 0;
+  padding: 0;
+  padding-left: 2rem;
+  */
+  padding-left: 1rem;
+  display: none;
+}
+
+input.toggle:checked ~ div.nested {
+  display: block;
+}
+
+div.arrow {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  border-top: 0.4rem solid transparent;
+  border-bottom: 0.4rem solid transparent;
+  border-left: 0.72rem solid DarkOrange;
+  margin-left: 0.5rem;
+}
+
+input.toggle:checked ~ label > div.arrow {
+  border-left: 0.4rem solid transparent;
+  border-right: 0.4rem solid transparent;
+  border-top: 0.72rem solid DarkOrange;
+  border-bottom: 0;
+}
+
+div > article {
+  margin: 0.5rem;
+}
+
+div > table {
+  font-size: 0.8rem;
+  font-weight: 400;
+  padding-bottom: 1rem;
+  margin-left: 1rem;
+}
+
+div > table > thead {
+  background-color: #ddd;
+}
+
+div > table > tbody {
+  background-color: #eee;
+}
+
+div > table > tbody > tr.changed {
+  background-color: #ded;
+}</style>

package/dist/SubDesign.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { tSubDesign, tAllLink } from 'geometrix';
+declare const __propDef: {
+    props: {
+        subD?: tSubDesign | undefined;
+        origPartName?: string | undefined;
+        pLink: tAllLink;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SubDesignProps = typeof __propDef.props;
+export type SubDesignEvents = typeof __propDef.events;
+export type SubDesignSlots = typeof __propDef.slots;
+export default class SubDesign extends SvelteComponent<SubDesignProps, SubDesignEvents, SubDesignSlots> {
+}
+export {};

package/dist/TimeControl.svelte

@@ -0,0 +1,107 @@
+<script>import { onDestroy } from "svelte";
+export let tMax = 10;
+export let tStep = 0.1;
+export let tUpdate = 500;
+export let simTime = 0;
+let intervalID = null;
+let speed = 0;
+let inc;
+const speedMax = 4;
+function clearInterval2() {
+  if (intervalID !== null) {
+    clearInterval(intervalID);
+    intervalID = null;
+  }
+}
+function simRoutine() {
+  if (inc < 0 && simTime <= 0) {
+    simTime = tMax;
+  } else if (inc > 0 && simTime >= tMax) {
+    simTime = 0;
+  } else {
+    simTime += inc;
+  }
+}
+function setInterval2() {
+  const delay = tUpdate / 2 ** (Math.abs(speed) - 1);
+  inc = speed < 0 ? -tStep : tStep;
+  intervalID = setInterval(simRoutine, delay);
+}
+function simZero() {
+  clearInterval2();
+  simTime = 0;
+  speed = 0;
+}
+function simDecrem() {
+  clearInterval2();
+  speed = 0;
+  inc = -tStep;
+  simRoutine();
+}
+function simIncrem() {
+  clearInterval2();
+  speed = 0;
+  inc = tStep;
+  simRoutine();
+}
+function simPlayBackward() {
+  clearInterval2();
+  speed = Math.max(speed - 1, -speedMax);
+  setInterval2();
+}
+function simPlayForward() {
+  clearInterval2();
+  speed = Math.min(speed + 1, speedMax);
+  setInterval2();
+}
+function simPause() {
+  clearInterval2();
+  speed = 0;
+}
+onDestroy(() => {
+  clearInterval2;
+});
+</script>
+
+<nav>
+	<button on:click={simZero}>0</button>
+	<button on:click={simPlayBackward}>&lt-</button>
+	<button on:click={simDecrem}>|&lt</button>
+	<button on:click={simPause}>||</button>
+	<button on:click={simIncrem}>&gt|</button>
+	<button on:click={simPlayForward}>-&gt</button>
+	<input type="range" bind:value={simTime} min="0" max={tMax} step={tStep} />
+	<input type="number" bind:value={simTime} min="0" max={tMax} step={tStep} />
+</nav>
+
+<style>/*
+$canvas-point: grey;
+
+// export to js
+:export {
+	colorCanvasPoint: $canvas-point;
+}
+*/
+nav > button {
+  height: 1.6rem;
+  width: 1.6rem;
+  color: darkBlue;
+  font-size: 1.1rem;
+  font-weight: 900;
+  border-style: solid;
+  border-width: 0.1rem;
+  border-radius: 0.2rem;
+  border-color: darkBlue;
+  margin: 0;
+  background-color: lightBlue;
+}
+
+nav > input[type=range] {
+  width: 8rem;
+}
+
+nav > input[type=number] {
+  width: 3rem;
+  border-color: darkBlue;
+  background-color: lightBlue;
+}</style>

package/dist/TimeControl.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        tMax?: number | undefined;
+        tStep?: number | undefined;
+        tUpdate?: number | undefined;
+        simTime?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TimeControlProps = typeof __propDef.props;
+export type TimeControlEvents = typeof __propDef.events;
+export type TimeControlSlots = typeof __propDef.slots;
+export default class TimeControl extends SvelteComponent<TimeControlProps, TimeControlEvents, TimeControlSlots> {
+}
+export {};