pepperplus/pepperplus-ui
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Merging dev into main #49

Merged
8464960 merged 260 commits from dev into main 2026-01-28 10:48:52 +00:00
Conversation 3 Commits 260 Files Changed 145 +53 -11
3 changed files with 53 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 59a38a3a12 - Show all commits

40
src/visualProgrammingUI/VisProgUI.css
View File

@@ -36,4 +36,44 @@
border-radius: 5pt;
outline: red solid 2pt;
filter: drop-shadow(0 0 0.25rem red);
}
.draggable-node {
padding: 3px 10px;
background-color: canvas;
border-radius: 5pt;
outline: black solid 2pt;
filter: drop-shadow(0 0 0.75rem black);
}
.draggable-node__norm {
padding: 3px 10px;
background-color: canvas;
border-radius: 5pt;
outline: forestgreen solid 2pt;
filter: drop-shadow(0 0 0.25rem forestgreen);
}
.draggable-node__phase {
padding: 3px 10px;
background-color: canvas;
border-radius: 5pt;
outline: dodgerblue solid 2pt;
filter: drop-shadow(0 0 0.25rem dodgerblue);
}
.draggable-node__start {
padding: 3px 10px;
background-color: canvas;
border-radius: 5pt;
outline: orange solid 2pt;
filter: drop-shadow(0 0 0.25rem orange);
}
.draggable-node__end {
padding: 3px 10px;
background-color: canvas;
border-radius: 5pt;
outline: red solid 2pt;
filter: drop-shadow(0 0 0.25rem red);
}

6
src/visualProgrammingUI/VisProgUI.tsx
View File

@@ -104,8 +104,8 @@ const VisProgUI = ()=> {
}, [setEdges]);
return (
<div style={{marginInline: 'auto',display: 'flex',justifySelf: 'center', padding:'10px', alignItems: 'center', width: '80vw', height: '60vh'}}>
<div style={{outlineStyle: 'solid', borderRadius: '10pt', marginInline: '1em',width: '70%', height:'100%' }}>
<div style={{marginInline: 'auto',display: 'flex',justifySelf: 'center', padding:'10px', alignItems: 'center', width: '80vw', height: '80vh'}}>
<div style={{outlineStyle: 'solid', borderRadius: '10pt',width: '90%', height:'100%' }}>
<ReactFlow
nodes={nodes}
edges={edges}
@@ -121,7 +121,7 @@ const VisProgUI = ()=> {
fitView
proOptions={{hideAttribution: true }}
>
<Panel position="center-right" style={{marginInlineStart: 'auto', marginInlineEnd:'0.5em',backgroundColor: 'canvas' ,marginBottom: 'auto', marginTop:'auto', width: '20%'}}>
<Panel position="top-center" style={{marginInlineStart: 'auto', marginInlineEnd:'auto',backgroundColor: 'canvas' ,marginBottom: '0.5rem', marginTop:'auto', width: '50%', height:'7%'}}>
<Sidebar />
</Panel>
<Controls />

18
src/visualProgrammingUI/components/DragDropSidebar.tsx
View File

@@ -48,7 +48,7 @@ function DraggableNode({ className, children, nodeType, onDrop }: DraggableNodeP
});
return (
<div className={className === "default" ? "default-node" : "default-node" + "__" + className} ref={draggableRef}>
<div className={className === "default" ? "draggable-node" : "draggable-node" + "__" + className} ref={draggableRef}>
{children}
</div>
);
@@ -120,16 +120,18 @@ export function Sidebar() {
);
return (
<aside style={{padding: '10px 10px',outline: '2.5pt solid black',borderRadius: '5pt', borderColor:'dimgrey', display:'flex', flexDirection: 'column', gap: '1rem'}}>
<aside style={{padding: '10px 10px',outline: '2.5pt solid black',borderRadius: '0pt 0pt 5pt 5pt', borderColor:'dimgrey', backgroundColor:'canvas', display:'flex', flexDirection: 'column', gap: '1rem'}}>
<div className="description">
You can drag these nodes to the pane to create new nodes.
</div>
<DraggableNode className="phase" nodeType="phase" onDrop={handleNodeDrop}>
phase Node
</DraggableNode>
<DraggableNode className="norm" nodeType="norm" onDrop={handleNodeDrop}>
norm Node
</DraggableNode>
<div className="DraggableNodeContainer" style={{backgroundColor:'canvas', display: 'flex', flexDirection: 'row', gap: '1rem', justifyContent: 'center'}}>
<DraggableNode className="phase" nodeType="phase" onDrop={handleNodeDrop}>
phase Node
</DraggableNode>
<DraggableNode className="norm" nodeType="norm" onDrop={handleNodeDrop}>
norm Node
</DraggableNode>
</div>
</aside>
);
}