Skip to content

Commit

Permalink
map + scope stuff (#142)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Brendonovich
Brendonovich authored Jun 15, 2023
1 parent 88660cd commit 9655cd1
Show file tree
Hide file tree
Showing 8 changed files with 370 additions and 75 deletions.
36 changes: 35 additions & 1 deletion app/src/components/Graph/Graph.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import clsx from "clsx";
import { Accessor, createContext, useContext } from "solid-js";
import { Graph as GraphModel } from "@macrograph/core";
import { Graph as GraphModel, XY } from "@macrograph/core";
import { createSignal, For, onCleanup, onMount, Show } from "solid-js";

import { Node } from "./Node";
Expand Down Expand Up @@ -67,6 +67,35 @@ export const Graph = (props: Props) => {

const [pan, setPan] = createSignal(PanState.None);

const [mousePos, setMousePos] = createSignal<null | XY>(null);

onMount(() => {
const handler = (e: KeyboardEvent) => {
if (e.key === "k" && (e.metaKey || e.ctrlKey) && e.shiftKey) {
e.preventDefault();

const currentPos = UI.state.schemaMenuPosition;
const pos = mousePos();
if (!pos) return;

if (currentPos && currentPos.x === pos.x && currentPos.y === pos.y)
UI.setSchemaMenuPosition();
else {
UI.setSchemaMenuPosition({
x: pos.x,
y: pos.y,
});
}
}
};

window.addEventListener("keydown", handler);

return () => {
window.removeEventListener("keydown", handler);
};
});

return (
<GraphContext.Provider value={graph}>
<div class="flex-1 relative overflow-hidden bg-mg-graph">
Expand Down Expand Up @@ -156,6 +185,11 @@ export const Graph = (props: Props) => {
}
}}
onMouseMove={(e) => {
setMousePos({
x: e.clientX,
y: e.clientY,
});

if (pan() === PanState.None) return;
if (pan() === PanState.Waiting) setPan(PanState.Active);

Expand Down
115 changes: 93 additions & 22 deletions app/src/components/Graph/IO/DataPin.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
DataOutput,
ListType,
OptionType,
t,
WildcardType,
} from "@macrograph/core";
import { usePin } from ".";
Expand Down Expand Up @@ -62,33 +63,103 @@ export const DataPin = (props: Props) => {
<Tooltip.Root>
<Tooltip.Trigger class="cursor-auto">
<Switch>
<Match
when={innerType.value instanceof OptionType && innerType.value}
>
<Match when={innerType.value instanceof t.Option && innerType.value}>
{(type) => {
const v = {
get type() {
const value = type();

if (value instanceof t.Wildcard) {
return value.wildcard.value.unwrapOr(value);
} else return value;
},
};

return (
<Switch>
<Match when={v.type instanceof t.Map && v.type}>
{(type) => (
<div
{...containerProps()}
class="w-3.5 h-3.5 flex flex-col justify-between"
>
{[0, 1].map(() => {
return (
<div
class={clsx(
"h-[0.1875rem] w-full flex flex-row space-x-0.5 justify-between",
colour(type())
)}
>
<div class="w-[0.1875rem] h-full bg-mg-string rounded-full" />
<div
class={clsx(
"h-full rounded-full bg-mg-current",
connected() || active()
? "flex-1"
: "w-1.5 ml-auto"
)}
/>
</div>
);
})}
</div>
)}
</Match>
<Match when={v.type}>
<div
{...containerProps()}
class={clsx(
`w-3.5 h-3.5 flex justify-center items-center border-mg-current`,
rounding(type()),
colour(type()),
connected() || active()
? "border-[2.5px]"
: "border-[1.5px]"
)}
>
<div
class={clsx(
"border-[1.5px] border-mg-current",
connected() || active()
? "w-1 h-1 bg-mg-current"
: "w-2 h-2",
!(type().getInner() instanceof ListType)
? "rounded-full"
: "rounded-[0.0625rem]"
)}
/>
</div>
</Match>
</Switch>
);
}}
</Match>
<Match when={innerType.value instanceof t.Map && innerType.value}>
{(type) => {
return (
<div
{...containerProps()}
class={clsx(
`w-3.5 h-3.5 flex justify-center items-center border-mg-current`,
rounding(type()),
colour(type()),
connected() || active()
? "border-[2.5px]"
: "border-[1.5px]"
)}
class="w-3.5 h-3.5 flex flex-col justify-between"
>
<div
class={clsx(
"border-[1.5px] border-mg-current",
connected() || active()
? "w-1 h-1 bg-mg-current"
: "w-2 h-2",
!(type().getInner() instanceof ListType)
? "rounded-full"
: "rounded-[0.0625rem]"
)}
/>
{[0, 1, 2].map(() => {
return (
<div
class={clsx(
"h-[0.1875rem] w-full flex flex-row space-x-0.5 justify-between",
colour(type())
)}
>
<div class="w-[0.1875rem] h-full bg-mg-string rounded-full" />
<div
class={clsx(
"h-full rounded-full bg-mg-current",
connected() || active() ? "flex-1" : "w-1.5 ml-auto"
)}
/>
</div>
);
})}
</div>
);
}}
Expand Down
6 changes: 3 additions & 3 deletions app/src/components/Graph/IO/ScopeInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@ export const ScopeInput = (props: Props) => {
style={{
"pointer-events": "all",
}}
viewBox="0 0 14 17.5"
class="w-3.5 text-transparent hover:text-white pointer-events-[all] rotate-45"
viewBox="0 0 16 13"
class="w-4 text-transparent hover:text-white pointer-events-[all]"
fill={
props.input.connection !== null || active()
? "white"
Expand All @@ -26,7 +26,7 @@ export const ScopeInput = (props: Props) => {
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.6667 8.53812C13.2689 9.03796 13.2689 9.96204 12.6667 10.4619L5.7983 16.1622C4.98369 16.8383 3.75 16.259 3.75 15.2003L3.75 3.79967C3.75 2.74104 4.98369 2.16171 5.79831 2.83779L12.6667 8.53812Z"
d="M9.08253 1.375L14.2787 10.375C14.7598 11.2083 14.1584 12.25 13.1962 12.25H2.80385C1.8416 12.25 1.24019 11.2083 1.72132 10.375L6.91747 1.375C7.39859 0.541667 8.60141 0.541668 9.08253 1.375Z"
stroke="white"
stroke-width="1.5"
/>
Expand Down
6 changes: 3 additions & 3 deletions app/src/components/Graph/IO/ScopeOutput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ export const ScopeOutput = (props: Props) => {
style={{
"pointer-events": "all",
}}
viewBox="0 0 14 17.5"
class="w-3.5 text-transparent hover:text-white pointer-events-[all] rotate-45"
viewBox="0 0 16 13"
class="w-4 text-transparent hover:text-white pointer-events-[all]"
fill={
props.output.connection !== null || active()
? "white"
Expand All @@ -27,7 +27,7 @@ export const ScopeOutput = (props: Props) => {
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.6667 8.53812C13.2689 9.03796 13.2689 9.96204 12.6667 10.4619L5.7983 16.1622C4.98369 16.8383 3.75 16.259 3.75 15.2003L3.75 3.79967C3.75 2.74104 4.98369 2.16171 5.79831 2.83779L12.6667 8.53812Z"
d="M9.08253 1.375L14.2787 10.375C14.7598 11.2083 14.1584 12.25 13.1962 12.25H2.80385C1.8416 12.25 1.24019 11.2083 1.72132 10.375L6.91747 1.375C7.39859 0.541667 8.60141 0.541668 9.08253 1.375Z"
stroke="white"
stroke-width="1.5"
/>
Expand Down
33 changes: 18 additions & 15 deletions core/src/types/wildcard.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,8 @@ import { batch } from "solid-js";
import { createMutable } from "solid-js/store";
import { z } from "zod";
import { BaseType } from "./base";
import { None, Option, OptionType, Some } from "./option";
import { ListType } from "./list";
import { AnyType, TypeVariant } from ".";
import { None, Option, Some } from "./option";
import { AnyType, t, TypeVariant } from ".";
import { DataInput, DataOutput } from "../models";

/**
Expand Down Expand Up @@ -117,30 +116,34 @@ export function connectWildcardsInIO(output: DataOutput, input: DataInput) {
connectWildcardsInTypes(output.type, input.type);
}

function connectWildcardsInTypes(t1: AnyType, t2: AnyType) {
if (t1 instanceof WildcardType || t2 instanceof WildcardType) {
if (t1 instanceof WildcardType) t1.addConnection(t2);
if (t2 instanceof WildcardType) t2.addConnection(t1);
} else if (t1 instanceof ListType && t2 instanceof ListType) {
function connectWildcardsInTypes(t1: t.Any, t2: t.Any) {
if (t1 instanceof t.Wildcard || t2 instanceof t.Wildcard) {
if (t1 instanceof t.Wildcard) t1.addConnection(t2);
if (t2 instanceof t.Wildcard) t2.addConnection(t1);
} else if (t1 instanceof t.List && t2 instanceof t.List) {
connectWildcardsInTypes(t1.inner, t2.inner);
} else if (t1 instanceof OptionType && t2 instanceof OptionType) {
} else if (t1 instanceof t.Option && t2 instanceof t.Option) {
connectWildcardsInTypes(t1.inner, t2.inner);
} else if (t1 instanceof t.Map && t2 instanceof t.Map) {
connectWildcardsInTypes(t1.value, t2.value);
}
}

export function disconnectWildcardsInIO(output: DataOutput, input: DataInput) {
disconnectWildcardsInTypes(output.type, input.type);
}

function disconnectWildcardsInTypes(t1: AnyType, t2: AnyType) {
function disconnectWildcardsInTypes(t1: t.Any, t2: t.Any) {
batch(() => {
if (t1 instanceof WildcardType || t2 instanceof WildcardType) {
if (t1 instanceof WildcardType) t1.removeConnection(t2);
if (t2 instanceof WildcardType) t2.removeConnection(t1);
} else if (t1 instanceof ListType && t2 instanceof ListType) {
if (t1 instanceof t.Wildcard || t2 instanceof t.Wildcard) {
if (t1 instanceof t.Wildcard) t1.removeConnection(t2);
if (t2 instanceof t.Wildcard) t2.removeConnection(t1);
} else if (t1 instanceof t.List && t2 instanceof t.List) {
disconnectWildcardsInTypes(t1.inner, t2.inner);
} else if (t1 instanceof OptionType && t2 instanceof OptionType) {
} else if (t1 instanceof t.Option && t2 instanceof t.Option) {
disconnectWildcardsInTypes(t1.inner, t2.inner);
} else if (t1 instanceof t.Map && t2 instanceof t.Map) {
disconnectWildcardsInTypes(t1.value, t2.value);
}
});
}
1 change: 1 addition & 0 deletions packages/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,4 @@ export * from "./httpRequests";
export * as discord from "./discord";
export * from "./localStorage";
export * from "./json";
export * from "./map";
Loading

0 comments on commit 9655cd1

Please sign in to comment.