Skip to content

Commit

Permalink
Allow more cut down interface for embedding
Browse files Browse the repository at this point in the history
  • Loading branch information
@cyderize
cyderize committed Jul 7, 2023
1 parent 7b9a392 commit bda81ab
Show file tree
Hide file tree
Showing 6 changed files with 210 additions and 146 deletions.
36 changes: 18 additions & 18 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,15 @@
"@sveltejs/vite-plugin-svelte": "^2.4.2",
"minizinc": "^4.1.0",
"sass": "^1.63.6",
"svelte": "^4.0.0",
"svelte": "^4.0.4",
"vite": "^4.3.9"
},
"dependencies": {
"@codemirror/lang-html": "^6.4.5",
"@codemirror/lang-json": "^6.0.1",
"@fortawesome/free-solid-svg-icons": "^6.4.0",
"@lezer/highlight": "^1.1.6",
"@lezer/lr": "^1.3.7",
"@lezer/lr": "^1.3.9",
"bulma": "^0.9.4",
"codemirror": "^6.0.1",
"file-saver": "^2.0.5",
Expand Down
3 changes: 0 additions & 3 deletions src/embed.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,4 @@
import './style.scss';
import Playground from './lib/Playground.svelte';
import Modal from './lib/Modal.svelte';
import SplitPanel from './lib/SplitPanel.svelte';

export { Modal, SplitPanel };
export default Playground;
226 changes: 124 additions & 102 deletions src/lib/Output.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,11 @@
export let output;
export let autoClearOutput = false;
export let showClearOutput = true;
export let showAutoClearOutput = true;
export let showSectionToggles = true;
export let showRightControls = true;
export let isTab = false;
let outputElement;
let showStatistics = true;
Expand Down Expand Up @@ -127,118 +132,127 @@
</script>

<div class="stack">
<div class="top">
<button
class="button is-small section-toggle"
on:click={() => toggleAllSections()}
disabled={userSections.length === 0}
>
{#if hiddenSections.length === 0}
Hide all
{:else}
Show all
{/if}
</button>
{#each userSections as section}
<button
class="button is-small section-toggle"
class:is-primary={hiddenSections.indexOf(section) === -1}
class:is-light={hiddenSections.indexOf(section) !== -1}
title={`Click to ${
hiddenSections.indexOf(section) === -1 ? 'hide' : 'show'
} ${section} output`}
on:click={() => toggleSection(section)}
>
{section}
</button>
{/each}
<div class="spacer" />
{#if hasStatistics}
<button
class="button is-small section-toggle"
class:is-primary={showStatistics}
class:is-light={!showStatistics}
title={`Click to ${
showStatistics ? 'hide' : 'show'
} statistics information`}
on:click={() => (showStatistics = !showStatistics)}
>
Statistics
</button>
{/if}
{#if hasStderr}
<button
class="button is-small section-toggle"
class:is-primary={showStderr}
class:is-light={!showStderr}
title={`Click to ${
showStderr ? 'hide' : 'show'
} standard error output`}
on:click={() => (showStderr = !showStderr)}
>
Standard error
</button>
{/if}
{#if hasTiming}
<button
class="button is-small section-toggle"
class:is-primary={showTiming}
class:is-light={!showTiming}
title={`Click to ${
showTiming ? 'hide' : 'show'
} timing information`}
on:click={() => (showTiming = !showTiming)}
>
Timing
</button>
{/if}
{#if hasWarnings}
<button
class="button is-small section-toggle"
class:is-primary={showWarnings}
class:is-light={!showWarnings}
title={`Click to ${showTiming ? 'hide' : 'show'} warnings`}
on:click={() => (showWarnings = !showWarnings)}
>
Warnings
</button>
{/if}
{#if hasErrors}
<div class="top" class:is-empty={!showSectionToggles && !showRightControls} class:is-tab={isTab}>
{#if showSectionToggles}
<button
class="button is-small section-toggle"
class:is-primary={showErrors}
class:is-light={!showErrors}
title={`Click to ${showTiming ? 'hide' : 'show'} errors`}
on:click={() => (showErrors = !showErrors)}
on:click={() => toggleAllSections()}
disabled={userSections.length === 0}
>
Errors
{#if hiddenSections.length === 0}
Hide all
{:else}
Show all
{/if}
</button>
{/if}
<div class="field has-addons">
<slot name="before-right-controls" />

<p class="control">
{#each userSections as section}
<button
class="button is-small"
class:is-primary={autoClearOutput}
class:is-light={!autoClearOutput}
title="Clear output on each run"
on:click={() => (autoClearOutput = !autoClearOutput)}
class="button is-small section-toggle"
class:is-primary={hiddenSections.indexOf(section) === -1}
class:is-light={hiddenSections.indexOf(section) !== -1}
title={`Click to ${
hiddenSections.indexOf(section) === -1 ? 'hide' : 'show'
} ${section} output`}
on:click={() => toggleSection(section)}
>
<span class="icon"><Fa icon={faEraser} /></span>
{section}
</button>
</p>

<p class="control">
{/each}
<div class="spacer" />
{#if hasStatistics}
<button
class="button is-small is-danger"
title="Clear output"
on:click={() => dispatch('clear')}
class="button is-small section-toggle"
class:is-primary={showStatistics}
class:is-light={!showStatistics}
title={`Click to ${
showStatistics ? 'hide' : 'show'
} statistics information`}
on:click={() => (showStatistics = !showStatistics)}
>
<span class="icon"><Fa icon={faTrash} /></span>
Statistics
</button>
</p>
</div>
{/if}
{#if hasStderr}
<button
class="button is-small section-toggle"
class:is-primary={showStderr}
class:is-light={!showStderr}
title={`Click to ${
showStderr ? 'hide' : 'show'
} standard error output`}
on:click={() => (showStderr = !showStderr)}
>
Standard error
</button>
{/if}
{#if hasTiming}
<button
class="button is-small section-toggle"
class:is-primary={showTiming}
class:is-light={!showTiming}
title={`Click to ${
showTiming ? 'hide' : 'show'
} timing information`}
on:click={() => (showTiming = !showTiming)}
>
Timing
</button>
{/if}
{#if hasWarnings}
<button
class="button is-small section-toggle"
class:is-primary={showWarnings}
class:is-light={!showWarnings}
title={`Click to ${showTiming ? 'hide' : 'show'} warnings`}
on:click={() => (showWarnings = !showWarnings)}
>
Warnings
</button>
{/if}
{#if hasErrors}
<button
class="button is-small section-toggle"
class:is-primary={showErrors}
class:is-light={!showErrors}
title={`Click to ${showTiming ? 'hide' : 'show'} errors`}
on:click={() => (showErrors = !showErrors)}
>
Errors
</button>
{/if}
{/if}
{#if showRightControls}
<div class="field has-addons">
<slot name="before-right-controls" />

{#if showAutoClearOutput}
<p class="control">
<button
class="button is-small"
class:is-primary={autoClearOutput}
class:is-light={!autoClearOutput}
title="Clear output on each run"
on:click={() =>
(autoClearOutput = !autoClearOutput)}
>
<span class="icon"><Fa icon={faEraser} /></span>
</button>
</p>
{/if}

{#if showClearOutput}
<p class="control">
<button
class="button is-small is-danger"
title="Clear output"
on:click={() => dispatch('clear')}
>
<span class="icon"><Fa icon={faTrash} /></span>
</button>
</p>
{/if}
</div>
{/if}
</div>
<div class="grow">
<div bind:this={outputElement} class="output-window">
Expand Down Expand Up @@ -448,6 +462,14 @@
border-bottom: solid 1px var(--mzn-playground-border);
}
.stack > .top.is-empty {
padding: 0;
}
.stack > .top.is-empty.is-tab {
border-bottom: 0;
}
.top > .field {
margin-bottom: 0;
}
Expand Down
Loading

0 comments on commit bda81ab

Please sign in to comment.