fixed create and duplicate behavior

This commit is contained in:
Jade (Rose) Rowland 2024-01-06 23:49:37 -05:00
parent 4e0a60db00
commit 0355c358b8
3 changed files with 26 additions and 22 deletions

View File

@ -157,9 +157,9 @@ export function Repl({ embedded = false }) {
const handleTogglePlay = async () => editorRef.current?.toggle(); const handleTogglePlay = async () => editorRef.current?.toggle();
// payload = {reset?: boolean, code?: string, evaluate?: boolean, patternID?: string } // payload = {reset?: boolean, code?: string, evaluate?: boolean, pattern?: string }
const handleUpdate = async (payload) => { const handleUpdate = async (payload) => {
const { reset = false, code = null, evaluate = true, patternID = null } = payload; const { reset = false, code = null, evaluate = true, pattern = null } = payload;
if (reset) { if (reset) {
clearCanvas(); clearCanvas();
@ -167,9 +167,9 @@ export function Repl({ embedded = false }) {
editorRef.current.repl.setCps(1); editorRef.current.repl.setCps(1);
await prebake(); // declare default samples await prebake(); // declare default samples
} }
if (code != null) { if (code != null && pattern != null) {
editorRef.current.setCode(code); editorRef.current.setCode(code);
setViewingPattern(patternID); setViewingPattern(pattern);
} }
if (evaluate) { if (evaluate) {
editorRef.current.evaluate(); editorRef.current.evaluate();

View File

@ -1,13 +1,13 @@
import { DocumentDuplicateIcon, PencilSquareIcon, TrashIcon } from '@heroicons/react/20/solid'; import { DocumentDuplicateIcon, PencilSquareIcon, TrashIcon } from '@heroicons/react/20/solid';
import { useMemo } from 'react';
import { import {
clearUserPatterns, clearUserPatterns,
deletePattern, deletePattern,
duplicatePattern, createDuplicatePattern,
exportPatterns, exportPatterns,
getUserPattern, addUserPattern,
importPatterns, importPatterns,
newUserPattern, createNewUserPattern,
renamePattern, renamePattern,
useActivePattern, useActivePattern,
useViewingPattern, useViewingPattern,
@ -55,9 +55,14 @@ export function PatternsTab({ context }) {
const activePattern = useActivePattern(); const activePattern = useActivePattern();
const viewingPattern = useViewingPattern(); const viewingPattern = useViewingPattern();
// const isExample = useMemo(() => activePattern && !!tunes[activePattern], [activePattern]); // const isExample = useMemo(() => activePattern && !!tunes[activePattern], [activePattern]);
const onPatternClick = (key, data) => { const onPatternClick = (pattern, data) => {
// display selected pattern code in the window // display selected pattern code in the window
context.handleUpdate({ patternID: key, code: data.code, evaluate: false }); context.handleUpdate({ pattern, code: data.code, evaluate: false });
};
const addPattern = ({ pattern, code }) => {
addUserPattern(pattern, { code });
context.handleUpdate({ code, pattern, evaluate: false });
}; };
const examplePatterns = {}; const examplePatterns = {};
@ -76,7 +81,11 @@ export function PatternsTab({ context }) {
{/* <PencilIcon className="w-5 h-5" /> */} {/* <PencilIcon className="w-5 h-5" /> */}
</button> </button>
)} )}
<button className="hover:opacity-50" onClick={() => duplicatePattern(viewingPattern)} title="Duplicate"> <button
className="hover:opacity-50"
onClick={() => addPattern(createDuplicatePattern(viewingPattern))}
title="Duplicate"
>
<DocumentDuplicateIcon className="w-5 h-5" /> <DocumentDuplicateIcon className="w-5 h-5" />
</button> </button>
{!isExample && ( {!isExample && (
@ -97,9 +106,7 @@ export function PatternsTab({ context }) {
<button <button
className="hover:opacity-50" className="hover:opacity-50"
onClick={() => { onClick={() => {
const name = newUserPattern(); addPattern(createNewUserPattern());
const { code } = getUserPattern(name);
context.handleUpdate({ code, evaluate: false });
}} }}
> >
new new

View File

@ -120,15 +120,14 @@ export function addUserPattern(name, config) {
setUserPatterns({ ...userPatterns, [name]: config }); setUserPatterns({ ...userPatterns, [name]: config });
} }
export function newUserPattern() { export function createNewUserPattern() {
const userPatterns = getUserPatterns(); const userPatterns = getUserPatterns();
const date = new Date().toISOString().split('T')[0]; const date = new Date().toISOString().split('T')[0];
const todays = Object.entries(userPatterns).filter(([name]) => name.startsWith(date)); const todays = Object.entries(userPatterns).filter(([name]) => name.startsWith(date));
const num = String(todays.length + 1).padStart(3, '0'); const num = String(todays.length + 1).padStart(3, '0');
const name = date + '_' + num; const pattern = date + '_' + num;
const code = 's("hh")'; const code = 's("hh")';
setUserPatterns({ ...userPatterns, [name]: { code } }); return {pattern, code}
setViewingPattern(name);
} }
export function clearUserPatterns() { export function clearUserPatterns() {
@ -194,16 +193,14 @@ export function deletePattern(pattern) {
setViewingPattern(''); setViewingPattern('');
} }
export function duplicatePattern(pattern) { export function createDuplicatePattern(pattern) {
let latestCode = getSetting('latestCode'); let latestCode = getSetting('latestCode');
if (!pattern) { if (!pattern) {
console.warn('cannot duplicate: no pattern selected'); console.warn('cannot duplicate: no pattern selected');
return; return;
} }
const userPatterns = getUserPatterns();
const newPattern = getNextCloneName(pattern); const newPattern = getNextCloneName(pattern);
setUserPatterns({ ...userPatterns, [newPattern]: { code: latestCode } }); return {pattern: newPattern, code: latestCode}
setViewingPattern(newPattern);
} }
export async function importPatterns(fileList) { export async function importPatterns(fileList) {