geomui 0.5.4

package/README.md

@@ -0,0 +1,58 @@
+# create-svelte
+
+Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+
+Read more about creating a library [in the docs](https://kit.svelte.dev/docs/packaging).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+
+## Building
+
+To build your library:
+
+```bash
+npm run package
+```
+
+To create a production version of your showcase app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+
+## Publishing
+
+Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+
+To publish your library to [npm](https://www.npmjs.com):
+
+```bash
+npm publish
+```

package/dist/Drawing.svelte

@@ -0,0 +1,303 @@
+<script>import TimeControl from "./TimeControl.svelte";
+import ZoomControl from "./ZoomControl.svelte";
+import LabelCheckbox from "./LabelCheckbox.svelte";
+import {
+  colors,
+  canvas2point,
+  adjustCenter,
+  adjustRect,
+  adjustScale,
+  adjustTranslate,
+  mergeFaces
+} from "geometrix";
+import { storePV } from "./storePVal";
+import { dLayers } from "./drawingLayers";
+import { onMount } from "svelte";
+export let pDef;
+export let fgeom;
+export let optFaces;
+export let selFace;
+export let simTime = 0;
+const c_ParametrixAll = "ParametrixAll";
+let windowWidth;
+let canvasFull;
+let canvasZoom;
+const canvas_size_min = 400;
+let aFigure;
+let cAdjust;
+let zAdjust;
+function canvasRedrawFull(iLayers) {
+  const ctx1 = canvasFull.getContext("2d");
+  ctx1.clearRect(0, 0, ctx1.canvas.width, ctx1.canvas.height);
+  try {
+    cAdjust = aFigure.getAdjustFull(ctx1.canvas.width, ctx1.canvas.height);
+    aFigure.draw(ctx1, cAdjust, iLayers);
+  } catch (emsg) {
+    console.log(emsg);
+  }
+}
+function canvasRedrawZoom(iLayers) {
+  const ctx2 = canvasZoom.getContext("2d");
+  ctx2.clearRect(0, 0, ctx2.canvas.width, ctx2.canvas.height);
+  try {
+    if (zAdjust === void 0 || zAdjust.init === 0) {
+      zAdjust = aFigure.getAdjustZoom(ctx2.canvas.width, ctx2.canvas.height);
+    }
+    aFigure.draw(ctx2, zAdjust, iLayers);
+  } catch (emsg) {
+    console.log(emsg);
+  }
+}
+function canvasSetSize() {
+  const ctx1 = canvasFull.getContext("2d");
+  const canvas_size = Math.max(0.4 * windowWidth, canvas_size_min);
+  ctx1.canvas.width = canvas_size;
+  ctx1.canvas.height = canvas_size;
+}
+function canvasResize() {
+  canvasSetSize();
+  canvasRedrawFull($dLayers);
+  canvasRedrawZoom($dLayers);
+}
+let domInit = 0;
+function checkFace(iFaces, iFace) {
+  let rFace = iFace;
+  if (iFaces.length === 0) {
+    console.log(`warn404: Drawing has an empty face list`);
+  } else {
+    const FaceList2 = iFaces.slice();
+    FaceList2.push(c_ParametrixAll);
+    if (!FaceList2.includes(rFace)) {
+      rFace = iFaces[0];
+    }
+  }
+  return rFace;
+}
+function geomRedrawSub(iSimTime, pVal, iFace, iLayers) {
+  const FigList = fgeom(iSimTime, pVal).fig;
+  const FigListKeys = Object.keys(FigList);
+  const sFace = checkFace(FigListKeys, iFace);
+  selFace = sFace;
+  if (FigListKeys.includes(sFace)) {
+    aFigure = FigList[sFace];
+  } else {
+    aFigure = mergeFaces(FigList);
+  }
+  canvasRedrawFull(iLayers);
+  canvasRedrawZoom(iLayers);
+}
+function geomRedraw(iSimTime, iFace) {
+  geomRedrawSub(iSimTime, $storePV[pDef.partName], iFace, $dLayers);
+}
+onMount(() => {
+  canvasSetSize();
+  geomRedraw(simTime, selFace);
+  domInit = 1;
+});
+$: {
+  if (domInit === 1) {
+    geomRedrawSub(simTime, $storePV[pDef.partName], selFace, $dLayers);
+  }
+}
+function zoomClick(event) {
+  switch (event.detail.action) {
+    case "zoomInit":
+      zAdjust.init = 0;
+      break;
+    case "zoomIn":
+      zAdjust = adjustScale(0.7, zAdjust);
+      break;
+    case "zoomOut":
+      zAdjust = adjustScale(1.3, zAdjust);
+      break;
+    case "moveLeft":
+      zAdjust.xMin += -0.2 * zAdjust.xyDiff;
+      break;
+    case "moveRight":
+      zAdjust.xMin += 0.2 * zAdjust.xyDiff;
+      break;
+    case "moveUp":
+      zAdjust.yMin += 0.2 * zAdjust.xyDiff;
+      break;
+    case "moveDown":
+      zAdjust.yMin += -0.2 * zAdjust.xyDiff;
+      break;
+    default:
+      console.log(`ERR423: ${event.detail.action} has no case!`);
+  }
+  canvasRedrawZoom($dLayers);
+}
+const mouseDelayMax = 3e3;
+const mouseDiffClick = 10;
+const mouseDiffRatioSelect = 3;
+let mouseF = { timestamp: 0, offsetX: 0, offsetY: 0 };
+function cFullMouseDn(eve) {
+  if (eve.button === 0) {
+    mouseF.timestamp = Date.now();
+    mouseF.offsetX = eve.offsetX;
+    mouseF.offsetY = eve.offsetY;
+  }
+}
+function cFullMouseUp(eve) {
+  if (eve.button === 0) {
+    if (Date.now() - mouseF.timestamp < mouseDelayMax) {
+      const diffX = Math.abs(mouseF.offsetX - eve.offsetX);
+      const diffY = Math.abs(mouseF.offsetY - eve.offsetY);
+      if (diffX < mouseDiffClick && diffY < mouseDiffClick) {
+        const [px, py] = canvas2point(eve.offsetX, eve.offsetY, cAdjust);
+        zAdjust = adjustCenter(px, py, zAdjust);
+        geomRedraw(simTime, selFace);
+      }
+      if (diffX > mouseDiffClick && diffY > mouseDiffClick) {
+        const diffRatio1 = diffX / diffY;
+        const diffRatio2 = 1 / diffRatio1;
+        if (diffRatio1 < mouseDiffRatioSelect && diffRatio2 < mouseDiffRatioSelect) {
+          const [p1x, p1y] = canvas2point(eve.offsetX, eve.offsetY, cAdjust);
+          const [p2x, p2y] = canvas2point(mouseF.offsetX, mouseF.offsetY, cAdjust);
+          zAdjust = adjustRect(p1x, p1y, p2x, p2y, canvas_size_min, canvas_size_min);
+          geomRedraw(simTime, selFace);
+        }
+      }
+    } else {
+      console.log(`Warn205: ignore ${eve.offsetX} ${eve.offsetY} because too slow`);
+    }
+  }
+}
+function cFullMouseMove(eve) {
+  const ctx1 = canvasFull.getContext("2d");
+  if (eve.buttons === 1) {
+    const diffX = eve.offsetX - mouseF.offsetX;
+    const diffY = eve.offsetY - mouseF.offsetY;
+    canvasRedrawFull($dLayers);
+    ctx1.beginPath();
+    ctx1.rect(mouseF.offsetX, mouseF.offsetY, diffX, diffY);
+    ctx1.strokeStyle = colors.mouse;
+    ctx1.stroke();
+  }
+  if ($dLayers.ruler) {
+    const [p1x, p1y] = canvas2point(eve.offsetX, eve.offsetY, cAdjust);
+    ctx1.clearRect(5, 5, 200, 25);
+    ctx1.font = "15px Arial";
+    ctx1.fillStyle = colors.ruler;
+    ctx1.fillText(`x: ${p1x.toFixed(4)} y: ${p1y.toFixed(4)}`, 5, 20);
+  }
+}
+let mouseZx;
+let mouseZy;
+let mouseZadjust;
+function cZoomMouseDn(eve) {
+  if (eve.button === 0) {
+    const [p1x, p1y] = canvas2point(eve.offsetX, eve.offsetY, zAdjust);
+    mouseZx = p1x;
+    mouseZy = p1y;
+    mouseZadjust = structuredClone(zAdjust);
+  }
+}
+function cZoomMouseMove(eve) {
+  if (eve.buttons === 1) {
+    const [p2x, p2y] = canvas2point(eve.offsetX, eve.offsetY, mouseZadjust);
+    zAdjust = adjustTranslate(mouseZx, mouseZy, p2x, p2y, mouseZadjust);
+    canvasRedrawZoom($dLayers);
+  } else {
+    if ($dLayers.ruler) {
+      const ctx2 = canvasZoom.getContext("2d");
+      const [p2x, p2y] = canvas2point(eve.offsetX, eve.offsetY, zAdjust);
+      ctx2.clearRect(5, 5, 200, 25);
+      ctx2.font = "15px Arial";
+      ctx2.fillStyle = colors.ruler;
+      ctx2.fillText(`x: ${p2x.toFixed(4)} y: ${p2y.toFixed(4)}`, 5, 20);
+    }
+  }
+}
+function cZoomWheel(eve) {
+  if (eve.deltaY > 0) {
+    zAdjust = adjustScale(0.7, zAdjust);
+  } else {
+    zAdjust = adjustScale(1.3, zAdjust);
+  }
+  canvasRedrawZoom($dLayers);
+}
+</script>
+
+<svelte:window bind:innerWidth={windowWidth} on:resize={canvasResize} />
+<section>
+	<h2>
+		Drawing
+		<select bind:value={selFace}>
+			{#each optFaces as optFace}
+				<option value={optFace}>{optFace}</option>
+			{/each}
+			<option value={c_ParametrixAll}>All faces merged</option>
+		</select>
+	</h2>
+	<LabelCheckbox />
+	<div class="rack">
+		<canvas
+			class="full"
+			width={canvas_size_min}
+			height={canvas_size_min}
+			bind:this={canvasFull}
+			on:mousedown={cFullMouseDn}
+			on:mouseup={cFullMouseUp}
+			on:mousemove={cFullMouseMove}
+		/>
+		<TimeControl
+			tMax={pDef.sim.tMax}
+			tStep={pDef.sim.tStep}
+			tUpdate={pDef.sim.tUpdate}
+			bind:simTime
+		/>
+	</div>
+	<div class="rack">
+		<canvas
+			class="zoom"
+			width={canvas_size_min}
+			height={canvas_size_min}
+			bind:this={canvasZoom}
+			on:mousedown={cZoomMouseDn}
+			on:mousemove={cZoomMouseMove}
+			on:wheel|preventDefault={cZoomWheel}
+		/>
+		<ZoomControl on:myevent={zoomClick} />
+	</div>
+</section>
+
+<style>/*
+$canvas-point: grey;
+
+// export to js
+:export {
+	colorCanvasPoint: $canvas-point;
+}
+*/
+section > h2 {
+  color: grey;
+  margin: 1rem 0.5rem 0;
+}
+
+section > h2 > 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;
+}
+
+section > div.rack {
+  display: inline-block;
+  margin: 0 1rem 0;
+  text-align: center;
+}
+
+section > div.rack > canvas {
+  background-color: pink;
+  margin: 0.2rem;
+}</style>

package/dist/Drawing.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import type { tParamDef, tGeomFunc } from 'geometrix';
+declare const __propDef: {
+    props: {
+        pDef: tParamDef;
+        fgeom: tGeomFunc;
+        optFaces: string[];
+        selFace: string;
+        simTime?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DrawingProps = typeof __propDef.props;
+export type DrawingEvents = typeof __propDef.events;
+export type DrawingSlots = typeof __propDef.slots;
+export default class Drawing extends SvelteComponent<DrawingProps, DrawingEvents, DrawingSlots> {
+}
+export {};

package/dist/DrawingList.svelte

@@ -0,0 +1,66 @@
+<script>import ModalImg from "./ModalImg.svelte";
+import { base } from "$app/paths";
+export let pDef;
+function getSvgList(ipDef) {
+  const rList = [];
+  for (const value of Object.values(ipDef.paramSvg)) {
+    if (!rList.includes(value)) {
+      rList.push(value);
+    }
+  }
+  return rList;
+}
+function getSvgList2(partName) {
+  if (partName === "impossible_part_name") {
+  }
+  const lList = getSvgList(pDef);
+  const rList2 = [];
+  for (const svg of lList) {
+    rList2.push(`${base}/${svg}`);
+  }
+  return rList2;
+}
+let lSvg = [];
+$:
+  lSvg = getSvgList2(pDef.partName);
+let modalImg = false;
+let svgPath;
+function showSvg(iSvgPath) {
+  svgPath = iSvgPath;
+  modalImg = true;
+}
+</script>
+
+<section>
+	<ModalImg bind:modalOpen={modalImg} {svgPath} />
+	{#each lSvg as iSvg}
+		<button on:click={() => showSvg(iSvg)}>
+			<img src={iSvg} alt={iSvg} />
+		</button>
+	{/each}
+</section>
+
+<style>/*
+$canvas-point: grey;
+
+// export to js
+:export {
+	colorCanvasPoint: $canvas-point;
+}
+*/
+section {
+  margin: 1rem;
+}
+
+section > button {
+  margin: 0.2rem;
+  border: none;
+  padding: 0;
+  font-size: 0.6rem;
+  background-color: white;
+}
+
+section > button > img {
+  max-width: 200px;
+  max-height: 200px;
+}</style>

package/dist/DrawingList.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import type { tParamDef } from 'geometrix';
+declare const __propDef: {
+    props: {
+        pDef: tParamDef;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DrawingListProps = typeof __propDef.props;
+export type DrawingListEvents = typeof __propDef.events;
+export type DrawingListSlots = typeof __propDef.slots;
+export default class DrawingList extends SvelteComponent<DrawingListProps, DrawingListEvents, DrawingListSlots> {
+}
+export {};