geomui 0.5.4

package/dist/LocStorTable.svelte

@@ -0,0 +1,167 @@
+<script>import ModalDiag from "./ModalDiag.svelte";
+import { browser } from "$app/environment";
+export let pageName;
+export let storeName;
+export let localKeys;
+function getLocalKey() {
+  let rKeyList = [];
+  const re = new RegExp(`^${pageName}_`);
+  if (browser) {
+    const keyList = Object.keys(window.localStorage).filter((k) => re.test(k));
+    rKeyList = keyList.map((k) => k.replace(re, ""));
+  }
+  return rKeyList;
+}
+localKeys = getLocalKey();
+function modifInput(iname) {
+  storeName = iname;
+}
+let localDate = {};
+function getLocalDate(iKeys) {
+  let rLocalDate = {};
+  if (browser) {
+    for (const k of iKeys) {
+      let lastModif = "";
+      const k2 = `${pageName}_${k}`;
+      const storeStr = window.localStorage.getItem(k2);
+      if (storeStr !== null) {
+        const val2 = JSON.parse(storeStr);
+        lastModif = val2.lastModif;
+      }
+      rLocalDate[k] = lastModif;
+    }
+  }
+  return rLocalDate;
+}
+localDate = getLocalDate(localKeys);
+let localDel = {};
+function getInitDel(iKeys) {
+  let rLocalDel = {};
+  for (const k of iKeys) {
+    rLocalDel[k] = false;
+  }
+  return rLocalDel;
+}
+localDel = getInitDel(localKeys);
+let globalDel = false;
+function setGlobalDel(iGlobalDel) {
+  for (const k of localKeys) {
+    localDel[k] = iGlobalDel;
+  }
+}
+$:
+  setGlobalDel(globalDel);
+function actionDel() {
+  if (browser) {
+    for (const k of localKeys) {
+      if (localDel[k]) {
+        const k2 = `${pageName}_${k}`;
+        window.localStorage.removeItem(k2);
+      }
+    }
+  }
+  localKeys = getLocalKey();
+}
+let modalDelConfirm = false;
+</script>
+
+<div class="deleteKeys">
+	<button
+		on:click={() => {
+			modalDelConfirm = true;
+		}}>Delete</button
+	>
+	<ModalDiag bind:modalOpen={modalDelConfirm} okName="Confirm" okFunc={actionDel}>
+		<p class="diagTitle">Do you really want to delete the following localStorage keys?</p>
+		{#each localKeys as kname}
+			{#if localDel[kname]}
+				<p class="diagItem">{kname}</p>
+			{/if}
+		{/each}
+	</ModalDiag>
+	<table>
+		<thead>
+			<tr>
+				<td>Delete</td>
+				<td>Key name</td>
+				<td>Last modification</td>
+			</tr>
+			<tr>
+				<td><input type="checkbox" bind:checked={globalDel} /></td>
+				<td class="instruction">delete all</td>
+				<td />
+			</tr>
+		</thead>
+		<tbody>
+			{#each localKeys as kname}
+				<tr>
+					<td><input type="checkbox" bind:checked={localDel[kname]} /></td>
+					<td><button on:click={() => modifInput(kname)}>{kname}</button></td>
+					<td>{localDate[kname]}</td>
+				</tr>
+			{/each}
+		</tbody>
+	</table>
+</div>
+
+<style>/*
+$canvas-point: grey;
+
+// export to js
+:export {
+	colorCanvasPoint: $canvas-point;
+}
+*/
+div.deleteKeys {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+div > 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;
+}
+
+div > table {
+  font-size: 0.8rem;
+  font-weight: 400;
+  margin: 0.5rem 2rem 0.5rem;
+}
+
+div > table > thead {
+  background-color: #ddd;
+}
+
+div > table > tbody {
+  background-color: #eee;
+}
+
+div > table > tbody > tr > td > button {
+  color: darkBlue;
+  background-color: transparent;
+  border: 0;
+}
+
+p.diagTitle {
+  font-size: 1rem;
+  font-weight: 400;
+  margin: 0.2rem;
+}
+
+p.diagItem {
+  font-size: 0.8rem;
+  font-weight: 400;
+  margin: 0;
+}</style>

package/dist/LocStorTable.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        pageName: string;
+        storeName: string;
+        localKeys: string[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type LocStorTableProps = typeof __propDef.props;
+export type LocStorTableEvents = typeof __propDef.events;
+export type LocStorTableSlots = typeof __propDef.slots;
+export default class LocStorTable extends SvelteComponent<LocStorTableProps, LocStorTableEvents, LocStorTableSlots> {
+}
+export {};

package/dist/LocStorWrite.svelte

@@ -0,0 +1,66 @@
+<script>import LocStorTable from "./LocStorTable.svelte";
+export let pageName;
+export let storeName;
+let localKeys = [];
+function defaultName(prefix) {
+  const re1 = /[-:]/g;
+  const re2 = /\..*$/;
+  const datestr = (/* @__PURE__ */ new Date()).toISOString().replace(re1, "").replace(re2, "").replace("T", "_");
+  const rname = `${prefix}_${datestr}`;
+  return rname;
+}
+storeName = defaultName(pageName);
+let warn = false;
+function checkWarning(iname) {
+  warn = localKeys.includes(iname);
+}
+function validInput(eve) {
+  const storeName2 = eve.target.value;
+  checkWarning(storeName2);
+}
+$:
+  checkWarning(storeName);
+</script>
+
+<LocStorTable {pageName} bind:storeName bind:localKeys />
+<div>
+	<label for="storName">Give a name to your parameter-set:</label>
+	<input
+		type="text"
+		id="storName"
+		bind:value={storeName}
+		required
+		minlength="4"
+		maxlength="30"
+		size="32"
+		on:input={validInput}
+	/>
+	{#if warn}
+		<p class="warnMsg">Warning: name {storeName} already used</p>
+	{/if}
+</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,
+div > p.warnMsg {
+  font-size: 1rem;
+  font-weight: 400;
+  margin: 0.2rem;
+  color: orange;
+}</style>

package/dist/LocStorWrite.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 LocStorWriteProps = typeof __propDef.props;
+export type LocStorWriteEvents = typeof __propDef.events;
+export type LocStorWriteSlots = typeof __propDef.slots;
+export default class LocStorWrite extends SvelteComponent<LocStorWriteProps, LocStorWriteEvents, LocStorWriteSlots> {
+}
+export {};

package/dist/ModalDiag.svelte

@@ -0,0 +1,100 @@
+<script context="module"></script>
+
+<script>export let okName = "Ok";
+export let okFunc;
+export let modalOpen;
+export let sizeLarge = false;
+function mCancel() {
+  modalOpen = false;
+}
+function mOk() {
+  okFunc();
+  modalOpen = false;
+}
+</script>
+
+{#if modalOpen}
+	<aside class="backdrop">
+		<div class="dialog" class:sizeLarge>
+			<article class="question">
+				<slot />
+			</article>
+			<footer>
+				<button class="cancel" on:click={mCancel}>Cancel</button>
+				<button class="ok" on:click={mOk}>{okName}</button>
+			</footer>
+		</div>
+	</aside>
+{/if}
+
+<style>/*
+$canvas-point: grey;
+
+// export to js
+:export {
+	colorCanvasPoint: $canvas-point;
+}
+*/
+aside.backdrop {
+  position: fixed;
+  z-index: 10;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+aside > div.dialog {
+  width: 40rem;
+  height: 20rem;
+  max-width: 80vw;
+  max-height: 80vh;
+  background-color: lightCyan;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: stretch;
+}
+
+aside > div.dialog.sizeLarge {
+  width: 60rem;
+  height: 30rem;
+}
+
+aside > div > article.question {
+  font-size: 1.2rem;
+  height: 80%;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+aside > div > footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+aside > div > footer > button {
+  /*display: inline-block;*/
+  /*height: 1.6rem;*/
+  /*width: 1.6rem;*/
+  color: darkBlue;
+  font-size: 1.2rem;
+  font-weight: 400;
+  padding: 0.6rem 2.2rem 0.6rem;
+  border-style: solid;
+  border-width: 0.1rem;
+  border-radius: 0.2rem;
+  border-color: darkBlue;
+  margin: 0.5rem;
+  margin-left: 3rem;
+  margin-right: 3rem;
+  background-color: lightBlue;
+}</style>

package/dist/ModalDiag.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+type tOkFunc = () => void;
+export type { tOkFunc };
+declare const __propDef: {
+    props: {
+        okName?: string | undefined;
+        okFunc: tOkFunc;
+        modalOpen: boolean;
+        sizeLarge?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ModalDiagProps = typeof __propDef.props;
+export type ModalDiagEvents = typeof __propDef.events;
+export type ModalDiagSlots = typeof __propDef.slots;
+export default class ModalDiag extends SvelteComponent<ModalDiagProps, ModalDiagEvents, ModalDiagSlots> {
+}

package/dist/ModalImg.svelte

@@ -0,0 +1,59 @@
+<script>export let svgPath;
+export let modalOpen;
+function mCancel() {
+  modalOpen = false;
+}
+</script>
+
+{#if modalOpen}
+	<aside class="backdrop">
+		<div class="dialog">
+			<button on:click={mCancel}>
+				<img src={svgPath} alt={svgPath} />
+			</button>
+		</div>
+	</aside>
+{/if}
+
+<style>/*
+$canvas-point: grey;
+
+// export to js
+:export {
+	colorCanvasPoint: $canvas-point;
+}
+*/
+aside.backdrop {
+  position: fixed;
+  z-index: 10;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+aside > div.dialog {
+  max-width: 80vw;
+  max-height: 80vh;
+  background-color: lightCyan;
+}
+
+aside > div > button {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  border: none;
+  padding: 0;
+  background-color: white;
+}
+
+/*
+aside > div > button > img {
+	max-width: 200px;
+	max-height: 200px;
+}
+*/</style>

package/dist/ModalImg.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        svgPath: string;
+        modalOpen: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ModalImgProps = typeof __propDef.props;
+export type ModalImgEvents = typeof __propDef.events;
+export type ModalImgSlots = typeof __propDef.slots;
+export default class ModalImg extends SvelteComponent<ModalImgProps, ModalImgEvents, ModalImgSlots> {
+}
+export {};

package/dist/OneDesign.svelte

@@ -0,0 +1,32 @@
+<script>import { incrStore } from "./initStore";
+import DrawingList from "./DrawingList.svelte";
+import ParamDrawExport from "./ParamDrawExport.svelte";
+export let pageDef;
+export let pLink;
+$:
+  incrStore(pageDef);
+</script>
+
+<h1>{pageDef.pTitle}</h1>
+<article>{pageDef.pDescription}</article>
+<DrawingList pDef={pageDef.pDef} />
+<ParamDrawExport pDef={pageDef.pDef} fgeom={pageDef.pGeom} {pLink} />
+
+<style>/*
+$canvas-point: grey;
+
+// export to js
+:export {
+	colorCanvasPoint: $canvas-point;
+}
+*/
+h1 {
+  margin: 1rem 1rem 0;
+}
+
+article {
+  font-size: 1rem;
+  font-weight: 400;
+  font-style: italic;
+  margin: 0 1rem 2rem;
+}</style>

package/dist/OneDesign.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+import type { tPageDef, tAllLink } from 'geometrix';
+declare const __propDef: {
+    props: {
+        pageDef: tPageDef;
+        pLink: tAllLink;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type OneDesignProps = typeof __propDef.props;
+export type OneDesignEvents = typeof __propDef.events;
+export type OneDesignSlots = typeof __propDef.slots;
+export default class OneDesign extends SvelteComponent<OneDesignProps, OneDesignEvents, OneDesignSlots> {
+}
+export {};