Skip to content

Commit

Permalink
linking mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@joonarafael
joonarafael committed Jan 21, 2024
1 parent 607dd73 commit b5ddf63
Show file tree
Hide file tree
Showing 5 changed files with 144 additions and 105 deletions.
35 changes: 22 additions & 13 deletions app/calc/calculator.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
"use client";

import { useEffect, useState } from 'react';
import { useEffect, useState } from "react";

import PageError from '@/app/components/pageerror';
import PageError from "@/app/components/pageerror";

import Container from '../components/container';
import LatencyChange from './latencychange';
import Matrix from './matrix';
import Menu from './menu';
import eraseAdjacentConnections from './supports/connections/eraseadjacentconnections';
import initConnection from './supports/initconnection';
import replaceOldEntry from './supports/replaceoldentry';
import ToolBar from './toolbar';
import Container from "../components/container";
import LatencyChange from "./latencychange";
import Matrix from "./matrix";
import Menu from "./menu";
import eraseAdjacentConnections from "./supports/connections/eraseadjacentconnections";
import initConnection from "./supports/initconnection";
import replaceOldEntry from "./supports/replaceoldentry";
import ToolBar from "./toolbar";

interface CalculatorProps {
width: number;
Expand All @@ -21,6 +21,7 @@ interface CalculatorProps {
const Calculator: React.FC<CalculatorProps> = ({ width, height }) => {
const [latencyChangeView, setLatencyChangeView] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [isLinking, setIsLinking] = useState(true);
const [zoom, setZoom] = useState(4);
const [tool, setTool] = useState("cursor");
const [selectedBoreHole, setSelectedBoreHole] = useState<number | null>(null);
Expand Down Expand Up @@ -70,7 +71,7 @@ const Calculator: React.FC<CalculatorProps> = ({ width, height }) => {
const resetField = () => {
if (!isLoading) {
setSelectedBoreHole(null);
setTool("entry");
setTool("cursor");
setFieldStatus(
Array.from({ length: height * 2 - 1 }, (_, rowIndex) =>
Array.from({ length: width * 2 - 1 }, (_, colIndex) => -1)
Expand Down Expand Up @@ -151,7 +152,11 @@ const Calculator: React.FC<CalculatorProps> = ({ width, height }) => {
tool
);

setSelectedBoreHole(position[2]);
if (isLinking) {
setSelectedBoreHole(position[2]);
} else {
setSelectedBoreHole(null);
}
}
}

Expand All @@ -178,7 +183,7 @@ const Calculator: React.FC<CalculatorProps> = ({ width, height }) => {

useEffect(() => {
setSelectedBoreHole(null);
}, [tool]);
}, [tool, isLinking]);

if (latencyChangeView) {
return (
Expand Down Expand Up @@ -210,6 +215,8 @@ const Calculator: React.FC<CalculatorProps> = ({ width, height }) => {
setSelectedBoreHole={setSelectedBoreHole}
setTool={setTool}
latencySelection={latencySelection}
isLinking={isLinking}
setIsLinking={setIsLinking}
/>
<div className="flex flex-row gap-4">
<div className="border rounded-lg w-5/6 h-[80svh] overflow-scroll">
Expand All @@ -231,6 +238,8 @@ const Calculator: React.FC<CalculatorProps> = ({ width, height }) => {
<ToolBar
tool={tool}
setTool={setTool}
setIsLinking={setIsLinking}
isLinking={isLinking}
latencySelection={latencySelection}
setLatencyChangeView={setLatencyChangeView}
/>
Expand Down
58 changes: 20 additions & 38 deletions app/calc/connection.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
"use client";

import {
BsArrowDown,
BsArrowDownLeft,
BsArrowDownRight,
BsArrowLeft,
BsArrowRight,
BsArrowUp,
BsArrowUpLeft,
BsArrowUpRight,
} from "react-icons/bs";
TbArrowDownCircle,
TbArrowDownLeftCircle,
TbArrowDownRightCircle,
TbArrowLeftCircle,
TbArrowRightCircle,
TbArrowUpCircle,
TbArrowUpLeftCircle,
TbArrowUpRightCircle,
} from "react-icons/tb";

interface ConnectionProps {
index: number;
Expand Down Expand Up @@ -54,10 +54,10 @@ const Connection: React.FC<ConnectionProps> = ({
size = "text-sm min-w-14 min-h-14";
icon = 48;
} else if (zoom === 3) {
size = "text-base min-w-20 min-h-20";
size = "text-sm min-w-20 min-h-20";
icon = 78;
} else if (zoom === 4) {
size = "text-lg min-w-24 min-h-24";
size = "text-base min-w-24 min-h-24";
icon = 90;
} else if (zoom === 5) {
size = "text-xl min-w-28 min-h-28";
Expand All @@ -69,42 +69,24 @@ const Connection: React.FC<ConnectionProps> = ({

const arrowElement = (orientation: number) => {
if (orientation === 0) {
return <BsArrowUp size={icon} />;
return <TbArrowUpCircle size={icon} />;
} else if (orientation === 1) {
return <BsArrowUpRight size={icon} />;
return <TbArrowUpRightCircle size={icon} />;
} else if (orientation === 2) {
return <BsArrowRight size={icon} />;
return <TbArrowRightCircle size={icon} />;
} else if (orientation === 3) {
return <BsArrowDownRight size={icon} />;
return <TbArrowDownRightCircle size={icon} />;
} else if (orientation === 4) {
return <BsArrowDown size={icon} />;
return <TbArrowDownCircle size={icon} />;
} else if (orientation === 5) {
return <BsArrowDownLeft size={icon} />;
return <TbArrowDownLeftCircle size={icon} />;
} else if (orientation === 6) {
return <BsArrowLeft size={icon} />;
return <TbArrowLeftCircle size={icon} />;
}

return <BsArrowUpLeft size={icon} />;
return <TbArrowUpLeftCircle size={icon} />;
};

let labelTransforms = "bottom-0 left-2/4 -translate-x-2/4";

if (value === 1) {
labelTransforms = "bottom-0 left-0";
} else if (value === 2) {
labelTransforms = "top-2/4 left-0 -translate-y-2/4";
} else if (value === 3) {
labelTransforms = "top-0 left-0";
} else if (value === 4) {
labelTransforms = "top-0 left-2/4 -translate-x-2/4";
} else if (value === 5) {
labelTransforms = "top-0 right-0";
} else if (value === 6) {
labelTransforms = "top-2/4 right-0 -translate-y-2/4";
} else if (value === 7) {
labelTransforms = "bottom-0 right-0";
}

return (
<div className={`${commonCSS} ${size} group`} onClick={handleClick}>
<div>
Expand All @@ -113,7 +95,7 @@ const Connection: React.FC<ConnectionProps> = ({
<div>{arrowElement(value)}</div>
{zoom > 2 ? (
<div
className={`z-99 absolute bg-zinc-900 p-1 rounded-xl ${labelTransforms}`}
className={`z-99 absolute bg-zinc-900 p-1 rounded-xl top-2/4 left-2/4 -translate-x-2/4 -translate-y-2/4`}
>
{status}
</div>
Expand Down
43 changes: 28 additions & 15 deletions app/calc/latencychange.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
"use client";

import { toast } from "sonner";
import { useState } from 'react';
import { toast } from 'sonner';

import { Button } from "../components/ui/button";
import { Input } from "../components/ui/input";
import { Button } from '../components/ui/button';
import { Input } from '../components/ui/input';

interface LatencyChangeProps {
latencySelection: number[];
Expand All @@ -16,6 +17,8 @@ const LatencyChange: React.FC<LatencyChangeProps> = ({
setLatencySelection,
setLatencyChangeView,
}) => {
const [oldSelection, setOldSelection] = useState([...latencySelection]);

const handleLatencyChange = (index: number, value: string) => {
try {
const asNumber = parseInt(value, 10);
Expand Down Expand Up @@ -67,6 +70,12 @@ const LatencyChange: React.FC<LatencyChangeProps> = ({
toast("At least one latency should be available.");
};

const counts: Record<number, number> = {};

for (const num of latencySelection) {
counts[num] = counts[num] ? counts[num] + 1 : 1;
}

const handleSaveChanges = () => {
const keys = Object.keys(counts);

Expand All @@ -89,32 +98,29 @@ const LatencyChange: React.FC<LatencyChangeProps> = ({
setLatencyChangeView(false);
};

const counts: Record<number, number> = {};

for (const num of latencySelection) {
counts[num] = counts[num] ? counts[num] + 1 : 1;
}
const handleRevertChanges = () => {
setLatencySelection(oldSelection);
};

return (
<div className="w-full flex flex-col text-center max-w-[1080px]">
<div className="font-bold text-4xl mb-4">CONFIGURE LATENCY SELECTION</div>
<div className="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-4 gap-4 rounded-lg p-4">
<div className="flex flex-col gap-2 border rounded p-2 border-emerald-500">
<div className="flex flex-col gap-2 border rounded p-2 border-indigo-500">
<Button onClick={handleResetDefaults} className="h-full">
<p className="font-bold text-lg">RESET DEFAULTS</p>
</Button>
</div>
<div className="flex flex-col gap-2 border rounded p-2 border-emerald-500">
<Button onClick={handleRevertChanges} className="h-full">
<p className="font-bold text-lg">REVERT CHANGES</p>
</Button>
</div>
<div className="flex flex-col gap-2 border rounded p-2 border-sky-500">
<Button onClick={handleSort} className="h-full">
<p className="font-bold text-lg">SORT LIST</p>
</Button>
</div>

<div className="flex flex-col gap-2 border rounded p-2 border-fuchsia-500 h-full">
<Button onClick={handleAddNew} className="h-full">
<p className="font-bold text-lg">ADD NEW</p>
</Button>
</div>
<div className="flex flex-col gap-2 border rounded p-2 border-green-500 h-full">
<Button onClick={handleSaveChanges} className="h-full">
<p className="font-bold text-lg">SAVE CHANGES</p>
Expand Down Expand Up @@ -150,6 +156,13 @@ const LatencyChange: React.FC<LatencyChangeProps> = ({
</Button>
</div>
))}
{latencySelection.length < 16 && (
<div className="flex flex-col gap-2 border rounded p-2 border-fuchsia-500 h-full">
<Button onClick={handleAddNew} className="h-full">
<p className="font-bold text-lg">ADD NEW</p>
</Button>
</div>
)}
</div>
</div>
);
Expand Down
22 changes: 17 additions & 5 deletions app/calc/menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ interface MenuProps {
setSelectedBoreHole: (value: number | null) => void;
latencySelection: number[];
setTool: (tool: string) => void;
isLinking: boolean;
setIsLinking: (value: boolean) => void;
}

const Menu: React.FC<MenuProps> = ({
Expand All @@ -34,6 +36,8 @@ const Menu: React.FC<MenuProps> = ({
debugStates,
setSelectedBoreHole,
setTool,
isLinking,
setIsLinking,
latencySelection,
}) => {
const zoomIn = () => {
Expand All @@ -60,6 +64,10 @@ const Menu: React.FC<MenuProps> = ({
setZoom(6);
};

const toggleIsLinking = () => {
setIsLinking(!isLinking);
};

const toggleFullscreen = () => {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
Expand All @@ -78,10 +86,10 @@ const Menu: React.FC<MenuProps> = ({
New Plan
</MenubarItem>
<MenubarSeparator />
<MenubarItem>Analyze</MenubarItem>
<MenubarItem disabled>Analyze</MenubarItem>
<MenubarSeparator />
<MenubarItem>Share</MenubarItem>
<MenubarItem>Print</MenubarItem>
<MenubarItem disabled>Get Save Code</MenubarItem>
<MenubarItem disabled>Print</MenubarItem>
<MenubarSeparator />
<MenubarSub>
<MenubarSubTrigger>Reset Field</MenubarSubTrigger>
Expand Down Expand Up @@ -144,15 +152,19 @@ const Menu: React.FC<MenuProps> = ({
</MenubarSubContent>
</MenubarSub>
<MenubarSeparator />
<MenubarItem onClick={toggleIsLinking}>
Toggle Borehole Linking
</MenubarItem>
<MenubarSeparator />
<MenubarItem onClick={() => setTool("cursor")}>
Clear tool selection
Clear Tool Selection
</MenubarItem>
<MenubarItem
onClick={() => {
setSelectedBoreHole(null);
}}
>
Clear borehole selection
Clear Borehole Selection
</MenubarItem>
</MenubarContent>
</MenubarMenu>
Expand Down
Loading

0 comments on commit b5ddf63

Please sign in to comment.