Skip to content

Commit

Permalink
Removed commit logic from all variable type blocks
Browse files Browse the repository at this point in the history
  • Loading branch information
@elsoazemelet
elsoazemelet committed Jan 19, 2025
1 parent 1b69e90 commit 78f73a9
Show file tree
Hide file tree
Showing 3 changed files with 280 additions and 480 deletions.
295 changes: 98 additions & 197 deletions src/renderer/config-blocks/VarGlobal.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,114 +22,51 @@
};
</script>

<script>
import { createEventDispatcher, onDestroy, onMount } from "svelte";
import { fly } from "svelte/transition";
<script lang="ts">
import { createEventDispatcher } from "svelte";
import { GridScript } from "@intechstudio/grid-protocol";
import { parenthesis } from "./_validators.js";
import { parenthesis, Validator } from "./_validators.js";
import SendFeedback from "../main/user-interface/SendFeedback.svelte";
import { checkVariableName } from "../validators/local_validator.mjs";
import { find_forbidden_identifiers } from "../runtime/monaco-helper";
let error_messsage = "";
export let config;
export let index;
import LineEditor from "../main/user-interface/LineEditor.svelte";
import { MoltenPushButton } from "@intechstudio/grid-uikit";
import { MeltCombo, MoltenPushButton } from "@intechstudio/grid-uikit";
import { ActionData, GridAction } from "../runtime/runtime.js";
import { Grid } from "../lib/_utils.js";
let sidebarWidth;
export let config: GridAction;
const dispatch = createEventDispatcher();
/**
* Globals specific variables
* @globals []
*/
let scriptSegments = [{ variable: "", value: "" }];
type ScriptSegment = Grid.VariableBlock.ScriptSegment;
let codeEditorContent = "";
let committedCode = "";
let parenthesisError = 0;
let variableNameError = 0;
export let commitState = 1;
let scriptSegments: ScriptSegment[];
let errorText = "";
$: handleConfigChange($config);
function handleConfigChange(config) {
scriptSegments = globalsToConfig({ script: config.script });
function handleConfigChange(config: ActionData) {
// this works differently from normal _utils...
scriptSegments = globalsToConfig(config.script);
updateErrorText();
}
function saveChangesOnInput(e, i, k) {
scriptSegments[i][k] = e;
codeEditorContent = globalArrayToScript(scriptSegments);
let variableNameValidity = [];
scriptSegments.forEach((s) => {
variableNameValidity.push(checkVariableName(s.variable));
});
if (variableNameValidity.includes(false)) {
variableNameError = 1;
} else {
variableNameError = 0;
}
if (parenthesis(codeEditorContent)) {
parenthesisError = 0;
} else {
parenthesisError = 1;
}
function updateErrorText() {
errorText = Grid.VariableBlock.getError(scriptSegments).text;
}
function humanizeGlobals(segments) {
function humanizeGlobals(segments: ScriptSegment[]): ScriptSegment[] {
return segments.map((elem) => {
elem.value = GridScript.humanize(elem.value);
return elem;
});
}
let rerenderList = 0;
function sendData() {
error_messsage = "";
let outputCode = codeEditorContent;
let forbiddenList = find_forbidden_identifiers(outputCode);
if (forbiddenList.length > 0) {
const uniqueForbiddenList = [...new Set(forbiddenList)];
const readable = uniqueForbiddenList.toString().replaceAll(",", ", ");
error_messsage =
"Reserved identifiers [" + readable + "] cannot be used!";
return;
}
if (parenthesis(outputCode)) {
committedCode = outputCode;
outputCode = GridScript.shortify(outputCode);
dispatch("update-action", { short: "g", script: outputCode });
dispatch("sync");
commitState = 0;
}
rerenderList++;
}
$: {
if (codeEditorContent.trim() == committedCode.trim()) {
commitState = 0;
} else {
commitState = 1;
}
const script = globalArrayToScript(scriptSegments);
updateErrorText();
dispatch("update-action", {
short: "g",
script: GridScript.shortify(script),
});
}
function globalArrayToScript(arr) {
Expand All @@ -141,11 +78,11 @@
return script;
}
function globalsToConfig({ script }) {
function globalsToConfig(script: string) {
if (parenthesis(script)) {
// this had to be moved out of globals function, as array refresh was killed by $ with scriptSegments..
let _variable_array = script.split("=")[0];
let _value_array = script.split("=")[1];
const _value_array = script.split("=")[1];
let slice_pos = [];
let _part = "";
Expand All @@ -163,7 +100,7 @@
}
});
_variable_array = _variable_array.split(",");
const _variable_array = script.split("=")[0].split(",");
let arr = [];
Expand All @@ -181,126 +118,90 @@
}
function addGlobalVariable() {
scriptSegments = [...scriptSegments, { variable: "", value: "" }];
codeEditorContent = globalArrayToScript(scriptSegments);
scriptSegments.push({ variable: "", value: "" });
sendData();
}
function removeGlobalVariable(i) {
function removeGlobalVariable(i: number) {
scriptSegments.splice(i, 1);
scriptSegments = [...scriptSegments];
codeEditorContent = globalArrayToScript(scriptSegments);
sendData();
}
onMount(() => {});
</script>

<svelte:window bind:innerWidth={sidebarWidth} />

<config-global-definitions
class="{$$props.class} flex flex-col w-full p-2 pointer-events-auto"
>
<div class="flex justify-between items-center my-2 px-2">
{#if variableNameError}
<div class="text-sm text-red-500">Variable name error!</div>
{/if}
{#if error_messsage !== ""}
<div class="text-sm text-red-500">{error_messsage}</div>
{/if}
{#key commitState}
<div
in:fly|global={{ x: -5, duration: 200 }}
class="{commitState ? 'text-yellow-600' : 'text-green-500'} text-sm"
<container>
<div class="flex flex-col gap-2 w-full px-2 py-4 pointer-events-auto">
<div class="flex flex-col">
<span class="text-white text-sm">Global Variables:</span>
<span class="text-sm text-error" class:hidden={errorText === "OK"}
>Error: {errorText}</span
>
{commitState ? "Unsaved changes!" : "Synced with Grid!"}
</div>
{/key}
{#if parenthesisError}
<div class="text-sm text-red-500">Parenthesis must be closed!</div>
{/if}
<MoltenPushButton
click={sendData}
disabled={Boolean(!commitState || parenthesisError || variableNameError)}
text={"Commit"}
style={"accept"}
/>
</div>

<div class="w-full flex flex-col p-2">
{#each scriptSegments as script, i (i)}
<div class="w-full h-full flex global-defs py-2">
<div class="w-2/12 pr-1">
<input
class="py-1 pl-1 w-full h-full mr-2 bg-secondary text-white"
placeholder="variable name"
value={script.variable}
</div>

<div class="flex flex-col gap-2">
{#each scriptSegments as script, i}
<div class="grid grid-cols-[25%_1fr_auto] gap-2 items-center">
<MeltCombo
title={" "}
bind:value={script.variable}
validator={(e) => {
return new Validator(e).NotEmpty().Result();
}}
on:validator={(e) => {
const data = e.detail;
dispatch("validator", data);
}}
on:input={(e) => {
saveChangesOnInput(e.target.value, i, "variable");
sendData();
}}
on:change={() => {
dispatch("sync");
}}
/>
</div>
<div class="w-9/12 pl-1">
<div class="w-full h-full bg-secondary">
{#key rerenderList}
<LineEditor
on:input={(e) => {
saveChangesOnInput(e.detail.script, i, "value");
}}
action={config}
{sidebarWidth}
value={script.value}
/>
{/key}
</div>
</div>
<div class="w-1/12 pl-1 flex items-center justify-center">
{#if i !== 0}
<button
on:click={() => {
removeGlobalVariable(i);

<div class="border border-black flex items-center flex-grow h-full">
<LineEditor
on:input={(e) => {
script.value = e.detail.script ?? "";
sendData();
}}
class="flex items-center group cursor-pointer pl-1"
on:change={() => dispatch("sync")}
action={config}
value={script.value}
/>
</div>

<button
class:invisible={i === 0}
on:click={() => {
removeGlobalVariable(i);
}}
class="flex group cursor-pointer"
>
<svg
class="w-5 h-5 p-1 fill-current group-hover:text-white text-gray-500"
viewBox="0 0 29 29"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<svg
class="w-5 h-5 p-1 fill-current group-hover:text-white text-gray-500"
viewBox="0 0 29 29"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2.37506 0.142151L28.4264 26.1935L26.1934 28.4264L0.142091 2.37512L2.37506 0.142151Z"
/>
<path
d="M28.4264 2.37512L2.37506 28.4264L0.14209 26.1935L26.1934 0.142151L28.4264 2.37512Z"
/>
</svg>
</button>
{:else}
<div class=" flex invisible items-center group cursor-pointer pl-1">
<div class="w-5 h-5 p-1">x</div>
</div>
{/if}
<path
d="M2.37506 0.142151L28.4264 26.1935L26.1934 28.4264L0.142091 2.37512L2.37506 0.142151Z"
/>
<path
d="M28.4264 2.37512L2.37506 28.4264L0.14209 26.1935L26.1934 0.142151L28.4264 2.37512Z"
/>
</svg>
</button>
</div>
</div>
{/each}
</div>

<div class="w-full flex group p-2">
<button
on:click={() => {
addGlobalVariable();
}}
class="group-hover:border-pick cursor-pointer group-hover:bg-select-saturate-10 border-secondary transition-colors duration-300 w-full border-l-4 text-white pl-4 py-0.5"
>
Add global variable...
</button>
</div>
{/each}
</div>

<SendFeedback feedback_context="Globals" class="mt-2 text-sm text-gray-500" />
</config-global-definitions>
<div class="self-center">
<MoltenPushButton
click={addGlobalVariable}
text={"Add New Global Variable"}
/>
</div>

<style>
.global-defs:first-child {
padding-top: 0;
}
</style>
<SendFeedback feedback_context="Globals" class="text-sm text-gray-500" />
</div>
</container>
Loading

0 comments on commit 78f73a9

Please sign in to comment.