Skip to content

Commit

Permalink
fixup! Add export Button
Browse files Browse the repository at this point in the history
  • Loading branch information
@madil4
madil4 committed Dec 9, 2023
1 parent a6409db commit fbecea4
Show file tree
Hide file tree
Showing 6 changed files with 59 additions and 112 deletions.
33 changes: 8 additions & 25 deletions src/App/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ import { EditorBar } from "../EditorBar/EditorBar";
import { Parameters, ParametersType } from "../Parameters/Parameters";
import { Login, supabase } from "../Login/Login";
import { Axes } from "../Viewer/objects/Axes";
import { Upgrade } from "../Upgrade/Upgrade";
import { Export } from "../Export/Export";

export const staging = localStorage.getItem("staging") ? true : false;
Expand Down Expand Up @@ -80,7 +79,6 @@ export const analysisResults = analyzing(nodes, elements, assignments);`;
deformedShape: true,
elementResults: "none",
nodeResults: "none",
hideEditor: false,
};
const settings = createMutable<SettingsType>(defaultSettings);
const [script, setScript] = createSignal("");
Expand Down Expand Up @@ -186,19 +184,6 @@ export const analysisResults = analyzing(nodes, elements, assignments);`;
)
);

// on settings.hideEditor change: hide the editor based on both settings and project-user ownership
createEffect(
on([() => settings.hideEditor], async () => {
const projectUserID = new URL(window.location.href).searchParams.get(
"user_id"
);
const currentUserID = (await supabase.auth.getSession()).data.session
?.user?.id;
settings.hideEditor =
settings.hideEditor && projectUserID != currentUserID;
})
);

// on undeformed node change: compute deformed nodes
createEffect(
on(undeformedNodes, () => {
Expand Down Expand Up @@ -264,7 +249,7 @@ export const analysisResults = analyzing(nodes, elements, assignments);`;
}

return (
<Layouter hideEditor={settings.hideEditor}>
<Layouter>
<EditorBar
error={error()}
userPlan={userPlan()}
Expand Down Expand Up @@ -394,21 +379,19 @@ export const analysisResults = analyzing(nodes, elements, assignments);`;

<Settings settings={settings} />

<Show when={staging}>
<Export
elements={elements()}
assignments={assignments()}
nodes={undeformedNodes()}
analysisResults={elementResults()}
/>
</Show>

<Parameters
parameters={parameters()}
onChange={(e) =>
solveModel({ key: (e.target as any).tag, value: e.value })
}
/>

<Export
elements={elements()}
assignments={assignments()}
nodes={undeformedNodes()}
analysisResults={elementResults()}
/>
</Layouter>
);
}
26 changes: 7 additions & 19 deletions src/Export/Export.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { For, Ref, Show, createEffect, createSignal, onMount } from "solid-js";
import { For, createSignal } from "solid-js";
import { createStore } from "solid-js/store";
import { exportToJSON } from "./exportToJSON";
import FileSaver from "file-saver";
Expand All @@ -11,7 +11,6 @@ import {
import { CheckBoxWithLabel } from "./CheckBoxWithLabel";

export function Export(props: exportProps) {
const [fileName, setFileName] = createSignal("awatif-file");
const [fileType, setFileType] = createSignal<FileType>(FileType.JSON);
const [exportOptions, SetExportOptions] = createStore<ExportOptions>({
nodes: true,
Expand All @@ -32,7 +31,7 @@ export function Export(props: exportProps) {
);

var blob = new Blob([jsonObject], { type: "text/plain;charset=utf-8" });
FileSaver.saveAs(blob, `${fileName()}.${fileType()}`);
FileSaver.saveAs(blob, `awatif-model.${fileType()}`);

document?.getElementById("ExportModal_closeButton")?.click();
}
Expand Down Expand Up @@ -74,32 +73,20 @@ export function Export(props: exportProps) {
<button
/* @ts-ignore */
onclick="ExportModal.showModal()"
class="flex align-baseline items-center justify-center gap-1 absolute top-1 right-5 "
class="flex align-baseline items-center justify-center gap-1 absolute top-1 right-3"
>
<span class="text-sm uppercase ">Export</span>
<span class="text-sm">Export</span>
</button>

<dialog id="ExportModal" class="modal ">
<form method="dialog" class="w-8/12 modal-box max-w-2xl">
<form method="dialog" class="w-8/12 modal-box max-w-2xl">
<button
id="ExportModal_closeButton"
class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
>
✕
</button>

<label class="form-control w-full max-w-xs">
<div class="label">
<span class="label-text">File Name:</span>
</div>
<input
type="text"
value={fileName()}
oninput={(e) => setFileName(e.target.value)}
placeholder="awatif-file-1"
class="input input-bordered w-full max-w-xs"
/>
</label>
<div class="orm-control w-full max-w-xs">
<div class="label">
<span class="label-text">File Type:</span>
Expand All @@ -121,7 +108,7 @@ export function Export(props: exportProps) {
<span class="label-text">Include:</span>
</div>

<div class="grid grid-cols-2">
<div class="grid grid-cols-2">
<CheckBoxWithLabel
Label={ExportOptionsEnum.Nodes}
Property={exportOptions.nodes}
Expand Down Expand Up @@ -172,6 +159,7 @@ export function Export(props: exportProps) {
</label>
</div>
</form>

<form method="dialog" class="modal-backdrop">
<button />
</form>
Expand Down
1 change: 0 additions & 1 deletion src/Export/export.types.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
export enum FileType {
JSON = "JSON",
DXF = "DXF",
}
export type exportProps = {
nodes: any;
Expand Down
4 changes: 3 additions & 1 deletion src/Layouter/Layouter.stories-dev.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,15 @@ export const Default: StoryObj = {};
export default {
title: "Layouter",
render: () => (
<Layouter hideEditor={false}>
<Layouter>
<div>EditorBar</div>
<div>Editor</div>
<div>Login</div>

<div>Viewer</div>
<div>Setting</div>
<div>Parameters</div>
<div>Export</div>
</Layouter>
),
} as Meta;
106 changes: 41 additions & 65 deletions src/Layouter/Layouter.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import { children, onMount, ParentComponent, Show } from "solid-js";
import { children, onMount } from "solid-js";

type LayouterProps = {
children: any;
hideEditor: boolean;
};

export function Layouter(props: LayouterProps) {
Expand All @@ -13,74 +12,51 @@ export function Layouter(props: LayouterProps) {
const c = children(() => props.children).toArray();

onMount(() => {
if (!props.hideEditor) {
let x = 0;
let dx = 0;
let leftViewWidth = 0;

// on pointer down
resizerHorizontal.addEventListener("pointerdown", (e) => {
x = e.clientX;
leftViewWidth = leftView.getBoundingClientRect().width;

document.addEventListener("pointermove", pointerMoveHandlerHorizontal);
});

// on pointer move
const pointerMoveHandlerHorizontal = (e: PointerEvent): void => {
dx = e.clientX - x;
leftView.style.width = `${leftViewWidth + dx}px`;
document.body.style.cursor = "col-resize";
resizerHorizontal.style.cursor = "col-resize";

container.style.userSelect = "none";
container.style.pointerEvents = "none";
};

// on pointer up
document.addEventListener("pointerup", () => {
document.body.style.removeProperty("cursor");
document.removeEventListener(
"pointermove",
pointerMoveHandlerHorizontal
);
container.style.removeProperty("user-select");
container.style.removeProperty("pointer-events");
});
}
let x = 0;
let dx = 0;
let leftViewWidth = 0;

// on pointer down
resizerHorizontal.addEventListener("pointerdown", (e) => {
x = e.clientX;
leftViewWidth = leftView.getBoundingClientRect().width;

document.addEventListener("pointermove", pointerMoveHandlerHorizontal);
});

// on pointer move
const pointerMoveHandlerHorizontal = (e: PointerEvent): void => {
dx = e.clientX - x;
leftView.style.width = `${leftViewWidth + dx}px`;
document.body.style.cursor = "col-resize";
resizerHorizontal.style.cursor = "col-resize";

container.style.userSelect = "none";
container.style.pointerEvents = "none";
};

// on pointer up
document.addEventListener("pointerup", () => {
document.body.style.removeProperty("cursor");
document.removeEventListener("pointermove", pointerMoveHandlerHorizontal);
container.style.removeProperty("user-select");
container.style.removeProperty("pointer-events");
});
});

return (
<div class="flex flex-col-reverse md:flex-row h-screen" ref={container!}>
<Show
when={props.hideEditor}
fallback={
<>
<div
class="flex flex-col w-full md:w-1/2 min-w-[350px] min-h-[200px]"
ref={leftView!}
>
{c[0]}
{c[1]}
{c[2]}
</div>
<div
class="bg-primary w-[2px] cursor-ew-resize"
ref={resizerHorizontal!}
></div>
<div class="relative flex-1 min-w-[350px]">
{c.slice(2)}

</div>
</>
}
<div
class="flex flex-col w-full md:w-1/2 min-w-[350px] min-h-[200px]"
ref={leftView!}
>
<div class="relative flex-1 min-w-[350px]">
{c[3]}
{c[4]}
{c[5]}
</div>
</Show>
{c.slice(0, 2)}
</div>
<div
class="bg-primary w-[2px] cursor-ew-resize"
ref={resizerHorizontal!}
></div>
<div class="relative flex-1 min-w-[350px]">{c.slice(3)}</div>
</div>
);
}
1 change: 0 additions & 1 deletion src/Settings/Settings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ export type SettingsType = {
deformedShape: boolean;
elementResults: string;
nodeResults: string;
hideEditor: boolean;
};

export type SettingsProps = {
Expand Down

0 comments on commit fbecea4

Please sign in to comment.