sveltekit-ui 1.0.0

package/src/lib/Components/FunctionInput/index.svelte

@@ -0,0 +1,356 @@
+<script>
+  import Button from "$lib/Components/Button/index.svelte"
+  import Popover from "$lib/Components/Popover/index.svelte"
+  import TextInput from "$lib/Components/TextInput/index.svelte"
+  import InfoBox from "$lib/Components/InfoBox/index.svelte"
+  import { goto } from "$app/navigation"
+  import Node from "./Node/index.svelte"
+  import Icon from "$lib/Components/Icon/index.svelte"
+
+  let { manager } = $props()
+</script>
+
+<div class="container" style="max-height: 100%;">
+  <div class="head_panel">
+    <div style="display: flex; flex: 1; gap: 1rem; flex-wrap: wrap; align-items: center;">
+      <!-- {@render header_pre()} -->
+      <div style="display: flex;">
+        <Button manager={manager?.undo_version_button_manager} />
+        <Button manager={manager?.redo_version_button_manager} />
+      </div>
+      <!-- {@render header_post()} -->
+      <!-- <Popover
+        type="center"
+        min_width={280}
+        target_width={380}
+        min_height={280}
+        target_height={380}
+        header="Edit Function Name"
+      >
+        <div slot="toggle_button">
+          <Button
+            type="plain"
+            support_icon="edit"
+            ml={0.5}
+            icon_sw={40}
+            icon_size={1.6}
+            font_size={1.2}
+            is_uniform={true}
+            min_height={2}
+            border_radius={0.5}
+            onclick={() => (name_loc = $name)}
+          />
+        </div>
+        <div slot="popover_content" let:toggle_popover>
+          <TextInput label="Function Name" placeholder="name" bind:val={name_loc} is_bind_val={true} />
+        </div>
+        <div slot="footer" let:toggle_popover>
+          <Button text="Set Name" mb={1} onclick={() => set_name(toggle_popover)} />
+        </div>
+      </Popover> -->
+      <!-- <p>{manager?.description}</p> -->
+      <!-- <Popover
+        type="center"
+        min_width={280}
+        target_width={380}
+        min_height={280}
+        target_height={380}
+        header="Edit Function Description"
+      >
+        <div slot="toggle_button">
+          <Button
+            type="plain"
+            support_icon="edit"
+            ml={0.5}
+            icon_sw={40}
+            icon_size={1.6}
+            font_size={1.2}
+            is_uniform={true}
+            min_height={2}
+            border_radius={0.5}
+            onclick={() => (description_loc = $description)}
+          />
+        </div>
+        <div slot="popover_content" let:toggle_popover>
+          <TextInput
+            label="Function Description"
+            placeholder="description"
+            bind:val={description_loc}
+            is_bind_val={true}
+          />
+        </div>
+        <div slot="footer" let:toggle_popover>
+          <Button text="Set Description" mb={1} onclick={() => set_description(toggle_popover)} />
+        </div>
+      </Popover> -->
+      <!-- <p>{format_date(manager?.db_epoch_updated)}</p>
+      <p>{format_date(manager?.db_epoch_created)}</p> -->
+    </div>
+    <InfoBox message={manager?.update_function_error_message} />
+  </div>
+  <div class="builder_container">
+    <div class="support_container">
+      <div class="toolbox">
+        <div class="node_categories">
+          {#if Array.isArray(manager?.node_category_buttons)}
+            {#each manager?.node_category_buttons as node_category_button}
+              <div class:is_category_selected={node_category_button?.selected_type == "selected"}>
+                <Button manager={node_category_button?.button_manager} />
+              </div>
+            {/each}
+          {/if}
+        </div>
+        <div class="node_types_container">
+          {#if Array.isArray(manager?.node_toolbox_items)}
+            {#each manager?.node_toolbox_items as node_toolbox_item}
+              <!-- aaa|{node_toolbox_item} -->
+              <!-- <pre>{JSON.stringify(node_toolbox_item, null, 2)}</pre> -->
+              <Node manager={node_toolbox_item} />
+            {/each}
+          {/if}
+        </div>
+      </div>
+      <div class="consolelog_container" style="height: {manager?.is_console_large ? 'calc(100% - 1rem)' : '20rem'}">
+        <div class="console_header">
+          <p class="label" style="font-size: 1.4rem ">Console</p>
+          <div style="display: flex; gap: .5rem">
+            <!-- <Button
+              type="outlined"
+              onclick={() => (manager?.is_console_large = !manager?.is_console_large)}
+              support_icon="arrow"
+              border_radius={0.5}
+              icon_deg={manager?.is_console_large ? 180 : 0}
+              is_uniform={true}
+              min_height={2.5}
+              icon_size={1.4}
+              icon_sw={50}
+              h={14}
+              c={1}
+              l={6}
+              icon_movement_damping={1}
+              pt={0.3}
+              pb={0.3}
+              pl={0.8}
+              pr={0.8}
+            /> -->
+            <!-- <Button
+              onclick={() => run_selected_function_structure()}
+              support_icon="play"
+              text="Run Function"
+              border_radius={0.5}
+              is_compressed={true}
+              min_height={2}
+              icon_size={1.4}
+              icon_sw={50}
+              pt={0.3}
+              pb={0.3}
+              pl={0.8}
+              pr={0.8}
+            /> -->
+          </div>
+        </div>
+        <div class="console_body">
+          {#if manager?.console_logs && Array.isArray(manager?.console_logs)}
+            <p class="label">Logs:</p>
+            {#each manager?.console_logs as log}
+              <div style="display: flex; flex: 1; gap: 1rem; margin: .5rem;">
+                <div
+                  class="log_frame"
+                  style="--color: {log?.kind == 'error'
+                    ? 'var(--error-t)'
+                    : log?.kind == 'warning'
+                      ? 'var(--warning-t)'
+                      : 'var(--g14-t)'};"
+                ></div>
+                <div style="padding-bottom: .5rem;">
+                  {#if log?.label}
+                    <p class="label">{log?.label}</p>
+                  {/if}
+                  {#if typeof log?.value == "object"}
+                    <pre style="margin-top: 0;">{JSON.stringify(log?.value, null, 2)}</pre>
+                  {:else}
+                    <p style="margin-top: 0;">{log?.value}</p>
+                  {/if}
+                </div>
+              </div>
+            {/each}
+          {/if}
+          <div>
+            <p class="label">Result:</p>
+            {#if typeof manager?.console_result == "object"}
+              <pre style="margin-top: 0;">{JSON.stringify(manager?.console_result, null, 2)}</pre>
+            {:else}
+              <p style="margin-top: 0;">{manager?.console_result}</p>
+            {/if}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="workspace_container">
+      <div class="workspace_bg">
+        <div class="main_function_container">
+          <Node manager={manager?.root_node_manager} />
+        </div>
+        <pre>{JSON.stringify(manager?.dragging_node, null, 2)}</pre>
+        {#if manager?.dragging_node?.node_path}
+          <div
+            class="node_trash"
+            class:draggedover={manager?.is_drag_enter}
+            role="button"
+            tabindex="0"
+            aria-label="Drop area"
+            ondragenter={() => manager?.handle_drag_enter()}
+            ondragleave={() => manager?.handle_drag_leave()}
+            ondragover={(e) => e.preventDefault()}
+            ondrop={() => manager?.drag_or_select_node(null, null, false, null, true)}
+          >
+            <div>
+              <Icon manager={manager?.trashcan_icon_manager} />
+              <p class="trash_text">Trash</p>
+            </div>
+          </div>
+        {/if}
+        <div class="node_trash_tbd">
+          <!-- <InfoBox message={$error_message} /> -->
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .container {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: hidden;
+  }
+  .builder_container {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+  }
+  .support_container {
+    position: relative;
+    width: 50rem;
+  }
+  .toolbox {
+    display: flex;
+    max-height: 100%;
+    margin: 0.5rem;
+  }
+  .node_categories {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 0.5rem;
+  }
+  .is_category_selected {
+    box-shadow:
+      0 0.1rem 1rem 0.3rem var(--shadow8-t),
+      0 0 0 0.1rem var(--g5-t);
+    border-radius: 1rem;
+  }
+  .node_types_container {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding-bottom: 30rem;
+    overflow: scroll;
+  }
+  .consolelog_container {
+    position: absolute;
+    left: 0.5rem;
+    right: 0.5rem;
+    bottom: 0.5rem;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    background-color: var(--bg);
+    box-shadow: 0 0 1rem var(--shadow8);
+    border: 1px solid var(--shadow5-t);
+    border-radius: 1rem;
+    z-index: 5;
+    transition: height 1s;
+  }
+  .log_frame {
+    width: 0.5rem;
+    border-top-left-radius: 2px;
+    border-bottom-left-radius: 2px;
+    border-left: 1px solid var(--color);
+    border-top: 1px solid var(--color);
+    border-bottom: 1px solid var(--color);
+  }
+  .console_header {
+    background-color: var(--shadow1-t);
+    border-bottom: 1px solid var(--shadow3-t);
+    padding: 0.5rem;
+    margin-bottom: 0.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .console_body {
+    padding: 0.5rem;
+    overflow: scroll;
+  }
+  .workspace_container {
+    display: flex;
+    flex: 1;
+    max-width: 100%;
+    margin: 0.5rem;
+    overflow: scroll;
+  }
+  .workspace_bg {
+    position: relative;
+    margin: 1px;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: scroll;
+    max-width: 100%;
+    max-height: 100%;
+    box-shadow: 0 0 1px var(--g9-t);
+    border-radius: 1rem;
+    background-image: linear-gradient(to right, var(--g20-t) 1px, transparent 1px),
+      linear-gradient(to bottom, var(--g20-t) 1px, transparent 1px);
+    background-size: 10px 10px;
+    background-position: -1px -1px;
+  }
+  .main_function_container {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    overflow: scroll;
+    max-width: 100%;
+    max-height: 100%;
+  }
+  .node_trash_tbd {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+  }
+  .node_trash {
+    position: absolute;
+    bottom: 1rem;
+    right: 1rem;
+    min-height: 15rem;
+    min-width: 15rem;
+    border-radius: 1rem;
+    background-color: oklch(var(--l5-t) var(--c7) var(--h1) / var(--o8));
+    border: 1px solid oklch(var(--l7-t) var(--c14) var(--h1));
+    display: grid;
+    place-items: center;
+    z-index: 2;
+  }
+  .draggedover {
+    background-color: oklch(var(--l5-t) var(--c7) var(--h1) / var(--o10));
+    border: 1px solid oklch(var(--l5-t) var(--c14) var(--h1));
+  }
+  .trash_text {
+    color: oklch(var(--l10-t) var(--c11) var(--h1));
+    font-size: 2.4rem;
+    text-align: center;
+  }
+</style>