Better editing

2023-04-27 17:09:27 -07:00
parent f2fb491183
commit 8453b831a1
8 changed files with 79 additions and 181 deletions
--- a/package.json
+++ b/package.json
@@ -46,8 +46,6 @@
    "@litegraph-ts/nodes-basic": "workspace:*",
    "@litegraph-ts/tsconfig": "workspace:*",
    "events": "^3.3.0",
-    "framework7": "^8.0.3",
-    "framework7-svelte": "^8.0.3",
    "pollen-css": "^4.6.2",
    "radix-icons-svelte": "^1.2.1",
    "svelte-preprocess": "^5.0.3",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -43,12 +43,6 @@ importers:
      events:
        specifier: ^3.3.0
        version: 3.3.0
-      framework7:
-        specifier: ^8.0.3
-        version: 8.0.3
-      framework7-svelte:
-        specifier: ^8.0.3
-        version: 8.0.3
      pollen-css:
        specifier: ^4.6.2
        version: 4.6.2
@@ -3152,12 +3146,6 @@ packages:
      esutils: 2.0.3
    dev: true

-  /dom7@4.0.6:
-    resolution: {integrity: sha512-emjdpPLhpNubapLFdjNL9tP06Sr+GZkrIHEXLWvOGsytACUrkbeIdjO5g77m00BrHTznnlcNqgmn7pCN192TBA==}
-    dependencies:
-      ssr-window: 4.0.2
-    dev: false
-
  /ecc-jsbn@0.1.2:
    resolution: {integrity: sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==}
    dependencies:
@@ -3813,21 +3801,6 @@ packages:
    resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==}
    dev: true

-  /framework7-svelte@8.0.3:
-    resolution: {integrity: sha512-SHirFqZBvm9E989Gyy59+pdBZdamZmqxLc/hklvorsY8llKpPuPBXbcS+fGvujvuhDq0fHHmN5tbLqYUPJ9Cyg==}
-    dev: false
-
-  /framework7@8.0.3:
-    resolution: {integrity: sha512-5DGd9J4OdTUn9hfrRaxDXYXF4hx2RAV+xy+9tzq0+R5d6DgjeE/WkqJ5ElDToww9IVAsafZcRwZodd+4a0wr/Q==}
-    dependencies:
-      dom7: 4.0.6
-      htm: 3.1.1
-      path-to-regexp: 6.2.1
-      skeleton-elements: 4.0.1
-      ssr-window: 4.0.2
-      swiper: 9.2.4
-    dev: false
-
  /fs-extra@10.1.0:
    resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==}
    engines: {node: '>=12'}
@@ -4019,10 +3992,6 @@ packages:
    dependencies:
      function-bind: 1.1.1

-  /htm@3.1.1:
-    resolution: {integrity: sha512-983Vyg8NwUE7JkZ6NmOqpCZ+sh1bKv2iYTlUkzlWmA5JD2acKoxd4KVxbMmxX/85mtfdnDmTFoNKcg5DGAvxNQ==}
-    dev: false
-
  /html-escaper@2.0.2:
    resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
    dev: true
@@ -5174,10 +5143,6 @@ packages:
  /path-parse@1.0.7:
    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}

-  /path-to-regexp@6.2.1:
-    resolution: {integrity: sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==}
-    dev: false
-
  /path-type@4.0.0:
    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
    engines: {node: '>=8'}
@@ -5683,10 +5648,6 @@ packages:
    resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
    dev: true

-  /skeleton-elements@4.0.1:
-    resolution: {integrity: sha512-T7YSF/Vu/raUcM6v3HiE4VSY/OvrNflg8Dur3Zza6VVJkq4slxm4pJRpGLNhoOfblIPZLQKh1cu7ADKveyqm/Q==}
-    dev: false
-
  /slash@3.0.0:
    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
    engines: {node: '>=8'}
@@ -5755,10 +5716,6 @@ packages:
      tweetnacl: 0.14.5
    dev: false

-  /ssr-window@4.0.2:
-    resolution: {integrity: sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==}
-    dev: false
-
  /stack-utils@2.0.6:
    resolution: {integrity: sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==}
    engines: {node: '>=10'}
@@ -6177,13 +6134,6 @@ packages:
    resolution: {integrity: sha512-brIBNNB76mXFmU/Kerm4wFnkskBbluBDCjx/8TcpYRb298Yh2dztS2kQ6bhtjMcvUhd5ynClfwpz5h2gnzdQ1A==}
    engines: {node: '>= 8'}

-  /swiper@9.2.4:
-    resolution: {integrity: sha512-L7y3K/iiMXNYQ94FbfcJn7jex4QPnS4+voXGupTdC+UHW4XrR40QDdm4c9hXJ+Br0Il7PP0vP1W3goM9/Ly6Sg==}
-    engines: {node: '>= 4.7.0'}
-    dependencies:
-      ssr-window: 4.0.2
-    dev: false
-
  /sync-request@6.1.0:
    resolution: {integrity: sha512-8fjNkrNlNCrVc/av+Jn+xxqfCjYaBoHqCsDz6mt030UMxJGr+GSfCV1dQt2gRtlL63+VPidwDVLr7V2OcTSdRw==}
    engines: {node: '>=8.0.0'}
--- a/src/lib/components/ComfyPane.svelte
+++ b/src/lib/components/ComfyPane.svelte
@@ -17,15 +17,17 @@
 // notice - fade in works fine but don't add svelte's fade-out (known issue)
 import {cubicIn} from 'svelte/easing';
 import { flip } from 'svelte/animate';
-	import ComfyApp from "./ComfyApp";
-	import type { LGraphNode } from "@litegraph-ts/core";
-	import type { DragItem } from "./ComfyUIPane";
+ import ComfyApp from "./ComfyApp";
+ import type { LGraphNode } from "@litegraph-ts/core";
+ import type { DragItem } from "./ComfyUIPane";

 export let dragItems: DragItem[] = [];
 let dragDisabled = true;
 let unlockUI = false;
 const flipDurationMs = 200;

+ $: dragDisabled = !$uiState.unlocked;
+
 const handleConsider = evt => {
     dragItems = evt.detail.items;
     // console.log(dragItems);
@@ -37,9 +39,13 @@
 };

 const startDrag = () => {
+     if (!$uiState.unlocked)
+         return
     dragDisabled = false;
 };
 const stopDrag = () => {
+     if (!$uiState.unlocked)
+         return
     dragDisabled = true;
 };

@@ -94,29 +100,27 @@
        {@const id = node.id}
        <div class="animation-wrapper" class:is-executing={dragItem.isNodeExecuting} animate:flip={{duration:flipDurationMs}}>
            <Block>
-                {#if $uiState.unlocked}
-                    <div class="handle" on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}>
-                        <Move/>
-                    </div>
-                {/if}
-                <label for={String(id)}>
-                    <BlockTitle>
-                        {#if $uiState.unlocked}
-                            <input bind:value={dragItem.node.title} type="text" minlength="1" on:input="{(v) => { updateNodeName(node, v) }}"/>
-                        {:else}
-                            {node.title}
+                    <label for={String(id)} class={$uiState.unlocked ? "edit-title-label" : ""}>
+                        <BlockTitle>
+                            {#if $uiState.unlocked}
+                                <input class="edit-title" bind:value={dragItem.node.title} type="text" minlength="1" on:input="{(v) => { updateNodeName(node, v) }}"/>
+                            {:else}
+                                {node.title}
+                            {/if}
+                            {#if node.title !== node.type}
+                                <span class="node-type">({node.type})</span>
+                            {/if}
+                        </BlockTitle>
+                    </label>
+                    {#each $widgetState[id] as item}
+                        <svelte:component this={getComponentForWidgetState(item)} {item} />
+                        {#if dragItem[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
+                            <div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
                        {/if}
-                        {#if node.title !== node.type}
-                            <span class="node-type">({node.type})</span>
-                        {/if}
-                    </BlockTitle>
-                </label>
-                {#each $widgetState[id] as item}
-                    <svelte:component this={getComponentForWidgetState(item)} {item} />
-                    {#if dragItem[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
-                        <div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
+                    {/each}
+                    {#if $uiState.unlocked}
+                        <div class="handle" on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}/>
                    {/if}
-                {/each}
            </Block>
        </div>
    {/each}
@@ -138,18 +142,16 @@

 .handle {
     cursor: grab;
+     z-index: 99999;
     position: absolute;
-     top: 0;
     right: 0;
-     width: 32px;
-     height: 32px;
-     padding: 0.5em;
-     margin-right: 0.5em;
-     margin-top: 0.25em;
+     top: 0;
+     width: 100%;
+     height: 100%;
 }

 .handle:hover {
-     background-color: lightblue;
+     background-color: #add8e680;
 }

 .drag-item-shadow {
@@ -166,4 +168,35 @@
     font-size: smaller;
     color: var(--neutral-400);
 }
+
+ .edit-title-label {
+     position: relative;
+     z-index: 100000;
+ }
+
+ .edit-title {
+     z-index: 100000;
+     display: block;
+     position: relative;
+     outline: none !important;
+     box-shadow: var(--input-shadow);
+     border: var(--input-border-width) solid var(--input-border-color);
+     border-radius: var(--input-radius);
+     background: var(--input-background-fill);
+     padding: var(--input-padding);
+     width: 100%;
+     color: var(--body-text-color);
+     font-weight: var(--input-text-weight);
+     font-size: var(--input-text-size);
+     line-height: var(--line-sm);
+ }
+
+ .edit-title:focus {
+     box-shadow: var(--input-shadow-focus);
+     border-color: var(--input-border-color-focus);
+ }
+
+ .edit-title::placeholder {
+     color: var(--input-placeholder-color);
+ }
 </style>
--- a/src/lib/stores/uiState.ts
+++ b/src/lib/stores/uiState.ts
@@ -2,10 +2,13 @@ import { writable } from 'svelte/store';
 import type { Readable, Writable } from 'svelte/store';

 export type UIState = {
+    nodesLocked: boolean,
+    graphLocked: boolean,
    unlocked: boolean,
 }

-const store: Writable<UIState> = writable({ unlocked: false })
+export type WritableUIStateStore = Writable<UIState>;
+const store: WritableUIStateStore = writable({ unlocked: false, graphLocked: true, nodesLocked:false })

 const uiStateStore: WritableUIStateStore =
 {
--- a/src/lib/widgets/RangeWidget.svelte
+++ b/src/lib/widgets/RangeWidget.svelte
@@ -1,15 +1,11 @@
 <script lang="ts">
 import type { WidgetUIState, WidgetUIStateStore } from "$lib/stores/widgetState";
- import { Range } from "framework7-svelte";
- import { BlockTitle } from "@gradio/atoms";
- import { createEventDispatcher } from "svelte"
+ import { Range } from "@gradio/form";
 import { get } from "svelte/store";
 export let item: WidgetUIState | null = null;
 let itemValue: WidgetUIStateStore | null = null;
 let option: number | null = null;

- const dispatch = createEventDispatcher();
-
 $: if (item) {
     itemValue = item.value;
     updateOption(); // don't react on option
@@ -19,89 +15,29 @@
     option = get(itemValue);
 }

- function onMouseup(value: number) {
-     $itemValue = option
- }
-
- function onChange(e: Event) {
-     option = e.detail[0]
- }
-
 function onRelease(e: Event) {
-     option = e.detail[0]
-     $itemValue = option
- }
-
- const clamp = () => {
     if (itemValue && option) {
-         onMouseup();
-         option = Math.min(Math.max(option, item.widget.options.min), item.widget.options.max);
+         $itemValue = option
     }
- };
-
+ }
 </script>

 <div class="wrapper">
-    {#if item !== null && option !== undefined}
-        <div class="wrap">
-            <div class="head">
-                <BlockTitle>{item.widget.name}</BlockTitle>
-                <input
-                    type="number"
-                    bind:value={option}
-                    min={item.widget.options.min}
-                    max={item.widget.options.max}
-                    step={item.widget.options.step}
-                    on:blur={clamp}
-                    on:mouseup={onMouseup}
-                />
-            </div>
-        </div>
+    {#if item && option}
        <Range
            bind:value={option}
-            min={item.widget.options.min}
-            max={item.widget.options.max}
+            minimum={item.widget.options.min}
+            maximum={item.widget.options.max}
            step={item.widget.options.step}
-            label={false}
-            on:rangeChanged={onRelease}
-            on:rangeChange={onChange}
+            label={item.widget.name}
+            show_label={true}
+            on:release={onRelease}
+            on:change
        />
    {/if}
 </div>

 <style>
- .wrap {
-     display: flex;
-     flex-direction: column;
-     width: 100%;
- }
- .head {
-     display: flex;
-     justify-content: space-between;
- }
- input[type="number"] {
-     display: block;
-     position: relative;
-     outline: none !important;
-     box-shadow: var(--input-shadow);
-     border: var(--input-border-width) solid var(--input-border-color);
-     border-radius: var(--input-radius);
-     background: var(--input-background-fill);
-     padding: var(--size-2) var(--size-2);
-     height: var(--size-6);
-     color: var(--body-text-color);
-     font-size: var(--input-text-size);
-     line-height: var(--line-sm);
-     text-align: center;
- }
- input::placeholder {
-     color: var(--input-placeholder-color);
- }
-
- input[type="number"]:focus {
-     box-shadow: var(--input-shadow-focus);
-     border-color: var(--input-border-color-focus);
- }
 .wrapper {
     padding: 2px;
     width: 100%;
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,22 +1,12 @@
 <script lang="ts">
 import ComfyApp from "$lib/components/ComfyApp.svelte"
 import "@litegraph-ts/core/css/litegraph.css";
- import "framework7/css/bundle";
 import "../scss/global.scss";

 import { onMount } from 'svelte';
- import { f7, f7ready, App } from 'framework7-svelte';
- onMount(() => {
-     f7ready(() => {
-         // Framework7 initialized
-         f7.theme = "ios";
-     })
- })
 </script>

-<App>
-    <ComfyApp/>
-</App>
+<ComfyApp/>

 <style>
 :root {
--- a/src/routes/+page.ts
+++ b/src/routes/+page.ts
@@ -1,10 +1,5 @@
 import type { PageLoad } from "./$types"

-import Framework7 from 'framework7/lite-bundle';
-import Framework7Svelte from 'framework7-svelte';
-
-Framework7.use(Framework7Svelte)
-
 // `PageServerData` will contain everything from the layouts and also the
 // `data` from the `+page.server.ts` file.
 type OutputProps = {}
--- a/src/scss/global.scss
+++ b/src/scss/global.scss
@@ -1,8 +1 @@
-button {
-    width: auto !important;
-}

-:root {
-    --f7-block-margin-vertical: 10px;
-    --f7-block-padding-horizontal: 0px;
-}