From 6da57d63bbf981923502d974c6d64de4c31af328 Mon Sep 17 00:00:00 2001 From: Jordan Date: Sat, 2 Mar 2024 09:13:21 -0800 Subject: [PATCH] solve library insert issue. also added mute functionality. now working on draggable. --- package.json | 1 + pnpm-lock.yaml | 40 +++++++++++++++++++++++++++++ src/components/Nugget.tsx | 18 +++++++++++-- src/components/Operation.tsx | 22 +++++++++++++--- src/components/PromptComposer.tsx | 23 +++++++---------- src/components/PromptItem.css | 4 +++ src/components/PromptLibrary.tsx | 11 ++++++-- src/lib/operator.ts | 2 +- src/lib/prompt.tsx | 42 +++++++++++++++++++++---------- src/store/prompt-dnd.tsx | 2 ++ 10 files changed, 130 insertions(+), 35 deletions(-) diff --git a/package.json b/package.json index fb1762f..1e6388a 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "react-dropzone": "^14.2.3", "react-redux": "^9.1.0", "react-scripts": "5.0.1", + "sortable": "^2.0.0", "typescript": "^4.9.5", "uuid": "^9.0.1", "vite": "^5.1.4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 32c9c2c..e88747c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -83,6 +83,9 @@ dependencies: react-scripts: specifier: 5.0.1 version: 5.0.1(@babel/plugin-syntax-flow@7.23.3)(@babel/plugin-transform-react-jsx@7.23.4)(eslint@8.56.0)(react@18.2.0)(typescript@4.9.5) + sortable: + specifier: ^2.0.0 + version: 2.0.0 typescript: specifier: ^4.9.5 version: 4.9.5 @@ -4930,6 +4933,10 @@ packages: resolve: 1.1.7 dev: true + /browser-split@0.0.0: + resolution: {integrity: sha512-CNXO3AXAS1H/kOGQkPjucm1161/XoF3aVkMfujqwk85XN/D/MkQMvoB81lXyX/2rerZS+hPAYYRR3mAW05awjQ==} + dev: false + /browserslist@4.23.0: resolution: {integrity: sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==} engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} @@ -5107,6 +5114,12 @@ packages: resolution: {integrity: sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==} dev: false + /class-list@0.1.1: + resolution: {integrity: sha512-zqR0uW+VsLtyQhixBhkdQ+z6B8+Y8HTh28kdSVjJ4zTTKM7Xz2asAQSya9VI6m/34F6N6Ktm0mrchKB+E5a8Xw==} + dependencies: + indexof: 0.0.1 + dev: false + /class-utils@0.3.6: resolution: {integrity: sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==} engines: {node: '>=0.10.0'} @@ -7511,6 +7524,13 @@ packages: engines: {node: '>=10.17.0'} dev: false + /hyperscript@1.0.7: + resolution: {integrity: sha512-dyfX683lwCsXiVUnmfnO6xji30exAUtr2yWWfCDz6FXjD+qNXwGsBKgSfFTEKNg+MArVI25ZdadfqBgsA32NMw==} + dependencies: + browser-split: 0.0.0 + class-list: 0.1.1 + dev: false + /hyphenate-style-name@1.0.4: resolution: {integrity: sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==} dev: false @@ -7586,6 +7606,10 @@ packages: engines: {node: '>=8'} dev: true + /indexof@0.0.1: + resolution: {integrity: sha512-i0G7hLJ1z0DE8dsqJa2rycj9dBmNKgXBvotXtZYXakU9oivfB9Uj2ZBC27qqef2U58/ZLwalxa1X/RDCdkHtVg==} + dev: false + /inflight@1.0.6: resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==} dependencies: @@ -9006,6 +9030,10 @@ packages: hasBin: true dev: false + /jquery-browserify@1.8.1: + resolution: {integrity: sha512-IDMCKuU5padhYWP21juFL10BOySPnlihoX7R1dHKeCcwl/JdeO3trDbimKQdPXtQsWIdYMwkAyxQ3+ksEj1iMQ==} + dev: false + /js-tokens@4.0.0: resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==} @@ -9861,6 +9889,10 @@ packages: es-abstract: 1.22.4 dev: false + /observable@1.3.1: + resolution: {integrity: sha512-n1QLn+I5eo/4TJxdrC54mHPYwDPvCZQ9FwwM2VE/jVkXf7aodqb0XImZnLbAIeSbnsWm1BzGcwjxeKktD/rb9g==} + dev: false + /obuf@1.1.2: resolution: {integrity: sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==} dev: false @@ -12024,6 +12056,14 @@ packages: websocket-driver: 0.7.4 dev: false + /sortable@2.0.0: + resolution: {integrity: sha512-VB3IABlS7TQDd2sRE5zSqW6pPqDsuduyuJZ5vcuGpR9gPQKtFrh1Y3xUAPfxhJ6djF1HYZEfXSO9mFs2eldJ3w==} + dependencies: + hyperscript: 1.0.7 + jquery-browserify: 1.8.1 + observable: 1.3.1 + dev: false + /source-list-map@2.0.1: resolution: {integrity: sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==} dev: false diff --git a/src/components/Nugget.tsx b/src/components/Nugget.tsx index 05c2f64..bb78d17 100644 --- a/src/components/Nugget.tsx +++ b/src/components/Nugget.tsx @@ -2,12 +2,13 @@ import { Button, ButtonGroup, Chip, Divider } from '@material-ui/core'; import React, { Component, DragEvent, useEffect, useState } from 'react'; import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'; import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowUp'; -import { $composition, Nugget as NuggetType, decreaseNuggetScore, increaseNuggetScore } from '../lib/prompt'; +import { $composition, Nugget as NuggetType, decreaseNuggetScore, increaseNuggetScore, togglePromptItemMute } from '../lib/prompt'; import "./Nugget.css"; import "./PromptItem.css" import { $sourceItem, cancelDrop, completeDrop, isPromptItemDropTarget, startDrag, startHoverOver } from '../store/prompt-dnd'; import { PromptItemProps } from './PromptItem'; import { useStore } from '@nanostores/react'; +import { VolumeMute, VolumeOff, VolumeUp } from '@mui/icons-material'; export interface NuggetProps extends PromptItemProps { nugget: NuggetType, @@ -28,7 +29,13 @@ export default function Nugget(props: NuggetProps) { const composition = useStore($composition) const thisId = `prompt-item-${nugget.id}` - const className = isTopLevel ? 'nugget toplevel prompt-item' : 'nugget child prompt-item'; + const className = [...(nugget.muted === true ? ["muted"] : []), ...[ + isTopLevel ? "toplevel" : "child", + "nugget", + "prompt-item", + ]].join(" "); + + console.log("nugget classname: %s", className); const handleOnDragStart = () => { onDragStart ? onDragStart(nugget) : null; @@ -89,6 +96,13 @@ export default function Nugget(props: NuggetProps) { + {isTopLevel && + + + + } ); } \ No newline at end of file diff --git a/src/components/Operation.tsx b/src/components/Operation.tsx index 387b636..09ec87b 100644 --- a/src/components/Operation.tsx +++ b/src/components/Operation.tsx @@ -1,13 +1,14 @@ -import { Menu, MenuItem } from "@material-ui/core"; +import { Button, Menu, MenuItem } from "@material-ui/core"; import React, { Children, DragEvent, ReactNode, useEffect } from 'react'; import "./Operation.css"; import { Op } from "../lib/operator"; import { v4 as randomUUID } from "uuid"; -import { $composition, Operation as OperationType, changeOperationOp } from "../lib/prompt"; +import { $composition, Operation as OperationType, changeOperationOp, togglePromptItemMute } from "../lib/prompt"; import Nugget from "./Nugget"; import { PromptItemProps } from "./PromptItem"; import { useStore } from "@nanostores/react"; import { $sourceItem, cancelDrop, completeDrop, startHoverOver } from "../store/prompt-dnd"; +import { VolumeUp, VolumeOff } from "@mui/icons-material"; interface OperationProps extends PromptItemProps { operation: OperationType @@ -84,6 +85,16 @@ function Operation(props: OperationProps) { handleClose(); } + + const className = [...(operation.muted === true ? ["muted"] : []), ...[ + "operation", + operation.op, + "prompt-item", + ]].join(" "); + + console.log("operation classname: %s", className); + + return (
@@ -104,6 +115,11 @@ function Operation(props: OperationProps) { }) }
+ + + { setOpen(true); @@ -28,20 +28,15 @@ export default function PromptComposer(props: PromptComposerProps) { setOpen(false); }; - const handleOnInsertItem = (item: LibraryItem) => { - insertIntoComposition(item); - } + const composition = useStore($composition); - - // const composition = useStore($composition); - const [composition, setComposition] = useState($composition.get()) - useEffect(() => { - $composition.subscribe((comp) => { - console.log("composition changed!"); - setComposition(comp as Composition); - }); - console.log("subscribe -- composition") - }) + // const [composition, setComposition] = useState(compStore); + + const handleOnInsertItem = (item: LibraryItem) => { + console.log("INSERT %x INTO %s", item, composition) + insertIntoComposition(item); + console.log(composition) + } /** * diff --git a/src/components/PromptItem.css b/src/components/PromptItem.css index 80993f6..373afc7 100644 --- a/src/components/PromptItem.css +++ b/src/components/PromptItem.css @@ -4,4 +4,8 @@ .prompt-item .drag-target-hover { border: 1px solid blue; +} + +.prompt-item.muted, .operation.muted .nugget { + color: gray; } \ No newline at end of file diff --git a/src/components/PromptLibrary.tsx b/src/components/PromptLibrary.tsx index 458e71d..e170422 100644 --- a/src/components/PromptLibrary.tsx +++ b/src/components/PromptLibrary.tsx @@ -47,7 +47,7 @@ export function PromptLibrary(props: SimpleDialogProps) { $e.stopPropagation(); const libItem = library.find(l => l.id === params.id) as LibItemType; console.log("Inserting %o into composition", libItem); - libItem ?? onInsertItem(libItem); + if (libItem) onInsertItem(libItem); } return (