style fixes + remove lastShared state
This commit is contained in:
parent
4c337a5114
commit
53484db768
4 changed files with 17 additions and 7 deletions
|
|
@ -108,7 +108,17 @@ export function initEditor({ initialCode = '', onChange, onEvaluate, onStop, roo
|
||||||
|
|
||||||
export class StrudelMirror {
|
export class StrudelMirror {
|
||||||
constructor(options) {
|
constructor(options) {
|
||||||
const { root, id, initialCode = '', onDraw, drawTime = [-2, 2], autodraw, prebake, ...replOptions } = options;
|
const {
|
||||||
|
root,
|
||||||
|
id,
|
||||||
|
initialCode = '',
|
||||||
|
onDraw,
|
||||||
|
drawTime = [-2, 2],
|
||||||
|
autodraw,
|
||||||
|
prebake,
|
||||||
|
bgFill = true,
|
||||||
|
...replOptions
|
||||||
|
} = options;
|
||||||
this.code = initialCode;
|
this.code = initialCode;
|
||||||
this.root = root;
|
this.root = root;
|
||||||
this.miniLocations = [];
|
this.miniLocations = [];
|
||||||
|
|
@ -183,7 +193,9 @@ export class StrudelMirror {
|
||||||
const cmEditor = this.root.querySelector('.cm-editor');
|
const cmEditor = this.root.querySelector('.cm-editor');
|
||||||
if (cmEditor) {
|
if (cmEditor) {
|
||||||
this.root.style.display = 'block';
|
this.root.style.display = 'block';
|
||||||
this.root.style.backgroundColor = 'var(--background)';
|
if (bgFill) {
|
||||||
|
this.root.style.backgroundColor = 'var(--background)';
|
||||||
|
}
|
||||||
cmEditor.style.backgroundColor = 'transparent';
|
cmEditor.style.backgroundColor = 'transparent';
|
||||||
}
|
}
|
||||||
const settings = codemirrorSettings.get();
|
const settings = codemirrorSettings.get();
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,6 @@ export function Header({ context }) {
|
||||||
started,
|
started,
|
||||||
pending,
|
pending,
|
||||||
isDirty,
|
isDirty,
|
||||||
lastShared,
|
|
||||||
activeCode,
|
activeCode,
|
||||||
handleTogglePlay,
|
handleTogglePlay,
|
||||||
handleUpdate,
|
handleUpdate,
|
||||||
|
|
@ -119,7 +118,7 @@ export function Header({ context }) {
|
||||||
onClick={handleShare}
|
onClick={handleShare}
|
||||||
>
|
>
|
||||||
<LinkIcon className="w-6 h-6" />
|
<LinkIcon className="w-6 h-6" />
|
||||||
<span>share{lastShared && lastShared === (activeCode || code) ? 'd!' : ''}</span>
|
<span>share</span>
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
{!isEmbedded && (
|
{!isEmbedded && (
|
||||||
|
|
|
||||||
|
|
@ -209,7 +209,6 @@ export function Repl({ embedded = false }) {
|
||||||
started,
|
started,
|
||||||
pending,
|
pending,
|
||||||
isDirty,
|
isDirty,
|
||||||
lastShared,
|
|
||||||
activeCode,
|
activeCode,
|
||||||
handleChangeCode,
|
handleChangeCode,
|
||||||
handleTogglePlay,
|
handleTogglePlay,
|
||||||
|
|
|
||||||
|
|
@ -28,6 +28,7 @@ import { Panel } from './panel/Panel';
|
||||||
import { useStore } from '@nanostores/react';
|
import { useStore } from '@nanostores/react';
|
||||||
import { prebake /* , resetSounds */ } from './prebake.mjs';
|
import { prebake /* , resetSounds */ } from './prebake.mjs';
|
||||||
import { getRandomTune, initCode, loadModules, shareCode } from './util.mjs';
|
import { getRandomTune, initCode, loadModules, shareCode } from './util.mjs';
|
||||||
|
import './Repl.css';
|
||||||
|
|
||||||
const { code: randomTune, name } = getRandomTune();
|
const { code: randomTune, name } = getRandomTune();
|
||||||
export const ReplContext = createContext(null);
|
export const ReplContext = createContext(null);
|
||||||
|
|
@ -50,7 +51,6 @@ if (typeof window !== 'undefined') {
|
||||||
export function Repl2({ embedded = false }) {
|
export function Repl2({ embedded = false }) {
|
||||||
//const isEmbedded = embedded || window.location !== window.parent.location;
|
//const isEmbedded = embedded || window.location !== window.parent.location;
|
||||||
const isEmbedded = false;
|
const isEmbedded = false;
|
||||||
const [lastShared, setLastShared] = useState();
|
|
||||||
const { panelPosition, isZen } = useSettings();
|
const { panelPosition, isZen } = useSettings();
|
||||||
/* const replState = useStore($replstate);
|
/* const replState = useStore($replstate);
|
||||||
const isDirty = useStore($repldirty); */
|
const isDirty = useStore($repldirty); */
|
||||||
|
|
@ -89,6 +89,7 @@ export function Repl2({ embedded = false }) {
|
||||||
setLatestCode(code);
|
setLatestCode(code);
|
||||||
window.location.hash = '#' + code2hash(code);
|
window.location.hash = '#' + code2hash(code);
|
||||||
},
|
},
|
||||||
|
bgFill: false,
|
||||||
});
|
});
|
||||||
// init settings
|
// init settings
|
||||||
initCode().then((decoded) => {
|
initCode().then((decoded) => {
|
||||||
|
|
@ -185,7 +186,6 @@ export function Repl2({ embedded = false }) {
|
||||||
started,
|
started,
|
||||||
pending,
|
pending,
|
||||||
isDirty,
|
isDirty,
|
||||||
lastShared,
|
|
||||||
activeCode,
|
activeCode,
|
||||||
handleTogglePlay,
|
handleTogglePlay,
|
||||||
handleUpdate,
|
handleUpdate,
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue