Skip to content

Commit

Permalink
Daily Push
Browse files Browse the repository at this point in the history
  • Loading branch information
elsoazemelet committed May 9, 2023
1 parent 6efa7c0 commit 66c2670
Show file tree
Hide file tree
Showing 4 changed files with 113 additions and 211 deletions.
2 changes: 1 addition & 1 deletion src/external/grid-protocol
11 changes: 6 additions & 5 deletions src/renderer/config-blocks/Condition_End.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,12 @@
desc: "End",
blockTitle: "End",
defaultLua: "end",
icon: `
<svg width="100%" height="100%" viewBox="0 0 277 277" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M131.429 2.92893C135.334 -0.976311 141.666 -0.976311 145.571 2.92893L274.071 131.429C277.976 135.334 277.976 141.666 274.071 145.571L145.571 274.071C141.666 277.976 135.334 277.976 131.429 274.071L2.92893 145.571C-0.976311 141.666 -0.976311 135.334 2.92893 131.429L131.429 2.92893ZM24.1421 138.5L138.5 252.858L252.858 138.5L138.5 24.1421L24.1421 138.5Z" fill="black"/>
</svg>
`,
icon: undefined,
// icon: `
// <svg width="100%" height="100%" viewBox="0 0 277 277" fill="none" xmlns="http://www.w3.org/2000/svg">
// <path fill-rule="evenodd" clip-rule="evenodd" d="M131.429 2.92893C135.334 -0.976311 141.666 -0.976311 145.571 2.92893L274.071 131.429C277.976 135.334 277.976 141.666 274.071 145.571L145.571 274.071C141.666 277.976 135.334 277.976 131.429 274.071L2.92893 145.571C-0.976311 141.666 -0.976311 135.334 2.92893 131.429L131.429 2.92893ZM24.1421 138.5L138.5 252.858L252.858 138.5L138.5 24.1421L24.1421 138.5Z" fill="black"/>
// </svg>
// `,
color: "#F84AA7",
};
</script>
Expand Down
11 changes: 6 additions & 5 deletions src/renderer/config-blocks/Condition_If.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,12 @@
desc: "IF",
blockTitle: "IF",
defaultLua: "if then --[[@en]] end",
icon: `
<svg width="100%" height="100%" viewBox="0 0 277 277" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M131.429 2.92893C135.334 -0.976311 141.666 -0.976311 145.571 2.92893L274.071 131.429C277.976 135.334 277.976 141.666 274.071 145.571L145.571 274.071C141.666 277.976 135.334 277.976 131.429 274.071L2.92893 145.571C-0.976311 141.666 -0.976311 135.334 2.92893 131.429L131.429 2.92893ZM24.1421 138.5L138.5 252.858L252.858 138.5L138.5 24.1421L24.1421 138.5Z" fill="black"/>
</svg>
`,
icon: undefined,
// icon: `
// <svg width="100%" height="100%" viewBox="0 0 277 277" fill="none" xmlns="http://www.w3.org/2000/svg">
// <path fill-rule="evenodd" clip-rule="evenodd" d="M131.429 2.92893C135.334 -0.976311 141.666 -0.976311 145.571 2.92893L274.071 131.429C277.976 135.334 277.976 141.666 274.071 145.571L145.571 274.071C141.666 277.976 135.334 277.976 131.429 274.071L2.92893 145.571C-0.976311 141.666 -0.976311 135.334 2.92893 131.429L131.429 2.92893ZM24.1421 138.5L138.5 252.858L252.858 138.5L138.5 24.1421L24.1421 138.5Z" fill="black"/>
// </svg>
// `,
color: "#F84AA7 ",
};
</script>
Expand Down
300 changes: 100 additions & 200 deletions src/renderer/main/panels/configuration/components/DynamicWrapper.svelte
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script>
import { sineOut } from "svelte/easing";
import { quadIn } from "svelte/easing";
import { fade, slide } from "svelte/transition";
import { get } from "svelte/store";
Expand Down Expand Up @@ -27,6 +27,7 @@
import { checkSyntax } from "../../../../runtime/monaco-helper";
import { onMount } from "svelte";
import { append_hydration_dev } from "svelte/internal";
export let config = ""; //{desc: 'unnamed', rendering: 'standard', id: ''};
export let configs;
Expand Down Expand Up @@ -144,21 +145,6 @@
luadebug_store.update_config(_utils.configMerge({ config: configs }));
}
function heightChange(
node,
{ delay = 0, duration = 200, position = "relative" }
) {
let h = +getComputedStyle(node)["height"].slice(0, -2);
return {
delay,
duration,
css: (t) => {
return `position: ${position}; height: ${sineOut(t) * h}px;`;
},
};
}
function handleToggle(short) {
if (toggle === true) {
toggle = false;
Expand Down Expand Up @@ -188,211 +174,125 @@

<wrapper
bind:this={$configNodeBinding[config.id]}
class=" flex border-none outline-none transition-opacity duration-300"
class="flex border-none outline-none transition-opacity duration-300"
>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<carousel
class=" flex flex-grow text-white {syntaxError &&
config.information.rendering == 'standard'
? 'border-error border'
: 'border-transparent'}"
class="group flex flex-grow"
class:cursor-pointer={!disable_pointer_events}
id="cfg-{index}"
config-component={config.information.name}
movable={config.information.rendering == "standard" ||
config.information.name.endsWith("_If")}
config-id={config.id}
on:click={() => {
if (config.information.rendering !== "standard") return;
handleToggle(config.short);
}}
>
<parent
class="flex w-full group {disable_pointer_events == true
? 'pointer-events-none '
: ''}"
>
<!-- Face of the config block, with disabled pointer events (Except for input fields) -->
<div class="w-full flex flex-row pointer-events-none">
<!-- Six dots to the left -->
<div
class=" contents w-full {disable_pointer_events == true
? 'group-hover:pointer-events-none '
: ''}"
class="flex p-2 items-center bg-secondary"
class:group-hover:bg-select-saturate-10={!toggle}
class:invisible={config.information.rendering !== "standard" &&
!config.information.name.endsWith("_If")}
>
<div
class="flex p-2 items-center {!toggle
? 'group-hover:bg-select-saturate-10'
: ''} bg-secondary {config.information.grabbing !== false
? 'cursor-grab'
: 'opacity-0 cursor-default '}
{syntaxError && config.information.rendering != 'standard'
? 'border-error border-y border-l'
: 'border-transparent'}"
<svg
class="opacity-40 group-hover:opacity-100"
width="8"
height="13"
viewBox="0 0 8 13"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<svg
class=" {config.information.grabbing !== false
? 'opacity-40'
: 'opacity-0'} group-hover:opacity-100"
width="8"
height="13"
viewBox="0 0 8 13"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="1.5" cy="1.5" r="1.5" fill="#D9D9D9" />
<circle cx="1.5" cy="6.5" r="1.5" fill="#D9D9D9" />
<circle cx="1.5" cy="11.5" r="1.5" fill="#D9D9D9" />
<circle cx="6.5" cy="1.5" r="1.5" fill="#D9D9D9" />
<circle cx="6.5" cy="6.5" r="1.5" fill="#D9D9D9" />
<circle cx="6.5" cy="11.5" r="1.5" fill="#D9D9D9" />
</svg>
<circle cx="1.5" cy="1.5" r="1.5" fill="#D9D9D9" />
<circle cx="1.5" cy="6.5" r="1.5" fill="#D9D9D9" />
<circle cx="1.5" cy="11.5" r="1.5" fill="#D9D9D9" />
<circle cx="6.5" cy="1.5" r="1.5" fill="#D9D9D9" />
<circle cx="6.5" cy="6.5" r="1.5" fill="#D9D9D9" />
<circle cx="6.5" cy="11.5" r="1.5" fill="#D9D9D9" />
</svg>
</div>

<div
style="background-color:{config.information.color}"
class="flex items-center p-2 w-min text-center"
>
<div class="w-6 h-6 whitespace-nowrap">
{#if config.information.icon !== undefined}
{@html config.information.icon}
{:else}
<span class="text-white">
{config.information.blockTitle}
</span>
{/if}
</div>
</div>

{#if config.information.rendering == "standard"}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div
on:click={() => {
handleToggle(config.short);
}}
class=" flex relative w-min {disable_pointer_events && toggle
? 'group-hover:pointer-events-auto'
: toggle
? 'cursor-pointer '
: config.information.grabbing !== false
? 'cursor-grab'
: ''}
"
<!-- Body of the config block -->
<div
style="background-color:{config.information.rendering !== 'standard'
? config.information.color
: ''}"
class="w-full bg-secondary"
class:rounded-tr-xl={config.information.rounding == "top"}
class:rounded-br-xl={config.information.rounding == "bottom"}
class:group-hover:bg-select-saturate-10={!toggle}
>
{#if toggle || config.information.rendering !== "standard"}
<container
in:slide={{ duration: animationDuration }}
class="flex items-center h-full w-full bg-opacity-60 pointer-events-auto"
class:bg-primary={toggle}
class:pr-2={config.information.rendering !== "standard"}
>
<div>
<icon
style="background-color:{config.information.color}"
class="flex group-hover:bg-opacity-75 items-center p-2 h-full cursor-pointer"
>
<div class="w-6 h-6">
{@html config.information.icon
? config.information.icon
: " "}
</div>
</icon>
</div>
</div>
<fader-transition
class="w-full"
in:fade={{
easing: quadIn,
delay: animationDuration / 3,
duration: animationDuration,
}}
>
<svelte:component
this={config.component}
{index}
{config}
{access_tree}
on:replace={(e) => {
replace_me(e);
}}
on:informationOverride={(e) => {
information_override(e);
}}
on:validator={(e) => {
const data = e.detail;
validationError = data.isError;
}}
on:output={(e) => {
config.script = e.detail.script;
config.toValidate = e.detail.toValidate;
isSyntaxError();
handleConfigChange({ configName: config.information.name });
configs = configs;
}}
/>
</fader-transition>
</container>
{:else}
<div
style="background-color:{config.information.color}"
class=" {config.information.rounding == 'top'
? 'rounded-tr-xl '
: ''} {config.information.rounding == 'bottom'
? 'rounded-br-xl '
: ''} flex flex-row w-full min-h-fit {config.information
.grabbing !== false
? 'cursor-grab'
: ''}
{syntaxError
? 'border-error border-y border-r'
: 'border-transparent'}"
class="ml-4 flex flex-row justify-between w-full items-center h-full"
>
<icon
class="flex items-center p-2 {config.information.hiddenIcon
? ' hidden '
: ' '}"
>
<div class="w-6 h-6">
{#if informationOverride.icon !== undefined}
{@html informationOverride.icon
? informationOverride.icon
: " "}
{:else}
{@html config.information.icon
? config.information.icon
: " "}
{/if}
</div>
</icon>

<div style="white-space: nowrap" class="mx-2 flex items-center">
{#if informationOverride.blockTitle !== undefined}
{informationOverride.blockTitle}
{:else}
{config.information.blockTitle}
{/if}
</div>

<svelte:component
this={config.component}
{index}
{config}
{access_tree}
on:replace={(e) => {
replace_me(e);
}}
on:informationOverride={(e) => {
information_override(e);
}}
on:validator={(e) => {
const data = e.detail;
validationError = data.isError;
}}
on:output={(e) => {
config.script = e.detail.script;
config.toValidate = e.detail.toValidate;
isSyntaxError();
handleConfigChange({ configName: config.information.name });
configs = configs;
}}
/>
</div>
{/if}
</div>

{#if !(toggle || config.information.toggleable === false) && config.information.rendering == "standard"}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<name
on:click={() => {
toggle = true;
}}
class="px-4 flex items-center w-full bg-secondary group-hover:bg-select-saturate-10 py-2 {disable_pointer_events ==
true
? 'group-hover:pointer-events-auto'
: 'cursor-pointer'} "
>
<div class="flex flex-row justify-between w-full items-center">
<span>{config.information.desc}</span>
<span class="text-white">{config.information.desc}</span>
{#if syntaxError}
<span class="text-error text-xs">SYNTAX ERROR</span>
{/if}
</div>
</name>
{/if}

{#if (toggle || config.information.toggleable === false) && config.information.rendering == "standard"}
<container
in:slide={{ duration: animationDuration }}
class=" w-full flex bg-secondary bg-opacity-25 rounded-br-lg"
>
<fader-transition
class="w-full"
in:fade={{ delay: animationDuration, duration: animationDuration }}
>
<svelte:component
this={config.component}
{index}
{config}
{access_tree}
{informationOverride}
on:replace={(e) => {
replace_me(e);
}}
on:informationOverride={(e) => {
information_override(e);
}}
on:validator={(e) => {
const data = e.detail;
validationError = data.isError;
}}
on:output={(e) => {
config.script = e.detail.script;
config.toValidate = e.detail.toValidate;
isSyntaxError();
handleConfigChange({ configName: config.information.name });
configs = configs;
}}
/>
</fader-transition>
</container>
{/if}
</parent>
{/if}
</div>
</div>
</carousel>

<Options
Expand Down

0 comments on commit 66c2670

Please sign in to comment.