diff --git a/docs/settings.rst b/docs/settings.rst index 39894c24..dd1e8884 100644 --- a/docs/settings.rst +++ b/docs/settings.rst @@ -50,8 +50,6 @@ User Options **Confirm Reload Palettes** - Prompt user to confirm when loading a palette that is already loaded. -**Open Default Palette on Startup** - Open a default palette on startup. The palette contains an example of all known node categories. - **Confirm Delete** - Prompt user to confirm when deleting node(s) or edge(s) from a graph. **Disable JSON Validation** - Allow EAGLE to load/save/send-to-translator graphs and palettes that would normally fail validation against schema. diff --git a/e2e/creatingASimpleGraph.spec.ts b/e2e/creatingASimpleGraph.spec.ts index 6fd6b390..c4be9b46 100644 --- a/e2e/creatingASimpleGraph.spec.ts +++ b/e2e/creatingASimpleGraph.spec.ts @@ -17,8 +17,13 @@ test('Creating a Simple Graph', async ({ page }) => { await page.waitForTimeout(500); await page.getByRole('button', { name: 'OK' }).click() + //expand the 'Builtin Components' palette + await page.locator('#palette0').click(); + await page.waitForTimeout(250); + //add a helloworld app to the graph by clicking it's icon await page.locator('#addPaletteNodeHelloWorldApp').click(); + //agree to create a new graph with it's auto-generated name await page.waitForTimeout(500); await page.getByRole('button', { name: 'OK' }).click(); diff --git a/e2e/creatingAndEditingPalettes.spec.ts b/e2e/creatingAndEditingPalettes.spec.ts index 74e477e1..97b48df2 100644 --- a/e2e/creatingAndEditingPalettes.spec.ts +++ b/e2e/creatingAndEditingPalettes.spec.ts @@ -18,6 +18,10 @@ test('Creating and editing Palettes', async ({ page }) => { await page.waitForTimeout(500); await page.getByRole('button', { name: 'OK' }).click() + //expand the 'Builtin Components' palette + await page.locator('#palette0').click(); + await page.waitForTimeout(250); + //right click the hello world app in the palette await page.locator('#palette_0_CopyApp').click({ button: 'right' diff --git a/e2e/parameterTableAndKeyboardShortcuts.spec.ts b/e2e/parameterTableAndKeyboardShortcuts.spec.ts index 0746603d..9a1783cd 100644 --- a/e2e/parameterTableAndKeyboardShortcuts.spec.ts +++ b/e2e/parameterTableAndKeyboardShortcuts.spec.ts @@ -18,6 +18,10 @@ test('Parameter Tables and keyboard Shortcuts', async ({ page }) => { await page.waitForTimeout(500); await page.getByRole('button', { name: 'OK' }).click() + //expand the 'Builtin Components' palette + await page.locator('#palette0').click(); + await page.waitForTimeout(250); + //add a helloworld app to the graph by clicking it's icon await page.locator('#addPaletteNodeHelloWorldApp').click(); //agree to create a new graph with it's auto-generated name diff --git a/src/Eagle.ts b/src/Eagle.ts index 88eabf4b..69c45d7a 100644 --- a/src/Eagle.ts +++ b/src/Eagle.ts @@ -1480,7 +1480,7 @@ export class Eagle { break; case Repository.Service.Url: this.loadPalettes([ - {name:palette.fileInfo().name, filename:palette.fileInfo().downloadUrl, readonly:palette.fileInfo().readonly} + {name:palette.fileInfo().name, filename:palette.fileInfo().downloadUrl, readonly:palette.fileInfo().readonly, expanded: true} ], (errorsWarnings: Errors.ErrorsWarnings, palettes: Palette[]):void => { for (const palette of palettes){ if (palette !== null){ @@ -1901,9 +1901,17 @@ export class Eagle { } loadDefaultPalettes = () : void => { + // get collapsed/expanded state of palettes from html locaStorage + let templatePaletteExpanded: boolean = Setting.findValue(Setting.OPEN_TEMPLATE_PALETTE); + let builtinPaletteExpanded: boolean = Setting.findValue(Setting.OPEN_BUILTIN_PALETTE); + templatePaletteExpanded = templatePaletteExpanded === null ? false : templatePaletteExpanded; + builtinPaletteExpanded = builtinPaletteExpanded === null ? false : builtinPaletteExpanded; + + + // fetch the palettes this.loadPalettes([ - {name:Palette.BUILTIN_PALETTE_NAME, filename:Daliuge.PALETTE_URL, readonly:true}, - {name:Palette.DYNAMIC_PALETTE_NAME, filename:Daliuge.TEMPLATE_URL, readonly:true} + {name:Palette.BUILTIN_PALETTE_NAME, filename:Daliuge.PALETTE_URL, readonly:true, expanded: builtinPaletteExpanded}, + {name:Palette.TEMPLATE_PALETTE_NAME, filename:Daliuge.TEMPLATE_URL, readonly:true, expanded: templatePaletteExpanded} ], (errorsWarnings: Errors.ErrorsWarnings, palettes: Palette[]):void => { const showErrors: boolean = Setting.findValue(Setting.SHOW_FILE_LOADING_ERRORS); @@ -1925,7 +1933,7 @@ export class Eagle { }); } - loadPalettes = (paletteList: {name:string, filename:string, readonly:boolean}[], callback: (errorsWarnings: Errors.ErrorsWarnings, data: Palette[]) => void ) : void => { + loadPalettes = (paletteList: {name:string, filename:string, readonly:boolean, expanded: boolean}[], callback: (errorsWarnings: Errors.ErrorsWarnings, data: Palette[]) => void ) : void => { const results: Palette[] = []; const complete: boolean[] = []; const errorsWarnings: Errors.ErrorsWarnings = {"errors":[], "warnings":[]}; @@ -2273,6 +2281,9 @@ export class Eagle { const errorsWarnings: Errors.ErrorsWarnings = {"errors":[], "warnings":[]}; const newPalette = Palette.fromOJSJson(data, file, errorsWarnings); + // all new (or reloaded) palettes should have 'expanded' flag set to true + newPalette.expanded(true); + // add to list of palettes this.palettes.unshift(newPalette); @@ -2375,42 +2386,6 @@ export class Eagle { Utils.showNotification("Success", "Confirmation message pop ups re-enabled", "success"); } - // toggles the default palettes on or off - // if currently shown, just remove them from the palettes list - // if currently not shown, fetch them from the remove source and add to palettes list - toggleDefaultPalettes = () : void => { - const allowGraphEditing: boolean = Setting.find(Setting.ALLOW_GRAPH_EDITING).value() as boolean; - const allowPaletteEditing: boolean = Setting.find(Setting.ALLOW_PALETTE_EDITING).value() as boolean; - const openDefaultPalette: boolean = Setting.find(Setting.OPEN_DEFAULT_PALETTE).value() as boolean; - - // if: - // - user is loading palettes - // - allow palette editing is off - // - allow graph editing is off - // then the palettes tab is invisible anyway, and the user will not see the palettes loaded, so notify them of this corner case - if (openDefaultPalette && !allowGraphEditing && !allowPaletteEditing){ - Utils.showNotification("Palettes Disabled", "Palettes are not visible in the current UI mode", "warning"); - } - - const eagle: Eagle = Eagle.getInstance(); - - const builtinPalette: Palette = this.findPalette(Palette.BUILTIN_PALETTE_NAME, false); - const dynamicPalette: Palette = this.findPalette(Palette.DYNAMIC_PALETTE_NAME, false); - - // always close the palettes - if (builtinPalette !== null){ - eagle.closePalette(builtinPalette); - } - if (dynamicPalette !== null){ - eagle.closePalette(dynamicPalette); - } - - // reload them if applicable - if (openDefaultPalette){ - eagle.loadDefaultPalettes(); - } - } - // TODO: shares some code with saveFileToLocal(), we should try to factor out the common stuff at some stage savePaletteToDisk = (palette : Palette) : void => { console.log("savePaletteToDisk()", palette.fileInfo().name, palette.fileInfo().type); @@ -3768,8 +3743,8 @@ export class Eagle { private buildWritablePaletteNamesList = () : string[] => { const paletteNames : string[] = []; for (const palette of this.palettes()){ - // skip the dynamically generated palette that contains all nodes - if (palette.fileInfo().name === Palette.DYNAMIC_PALETTE_NAME){ + // skip the template palette that contains all nodes + if (palette.fileInfo().name === Palette.TEMPLATE_PALETTE_NAME){ continue; } // skip the built-in palette @@ -4788,21 +4763,6 @@ $( document ).ready(function() { RightClick.closeCustomContextMenu(true); }); - $(".tableParameter").on("click", function(){ - console.log(this) - }) - - //expand palettes when using searchbar and return to prior collapsed state on completion. - $("#paletteList .componentSearchBar").on("keyup",function(){ - if ($("#paletteList .componentSearchBar").val() !== ""){ - $("#paletteList .accordion-button.collapsed").addClass("wasCollapsed") - $("#paletteList .accordion-button.collapsed").trigger("click") - }else{ - $("#paletteList .accordion-button.wasCollapsed").trigger("click") - $("#paletteList .accordion-button.wasCollapsed").removeClass("wasCollapsed") - } - }) - $(document).on('click', '.hierarchyEdgeExtra', function(event: JQuery.TriggeredEvent){ const e: MouseEvent = event.originalEvent as MouseEvent; const eagle: Eagle = Eagle.getInstance(); diff --git a/src/Palette.ts b/src/Palette.ts index c12b8339..45d1533a 100644 --- a/src/Palette.ts +++ b/src/Palette.ts @@ -33,14 +33,17 @@ import { FileInfo } from './FileInfo'; import { Node } from './Node'; import { Repository } from "./Repository"; import { RepositoryFile } from './RepositoryFile'; +import { Setting } from "./Setting"; import { Utils } from './Utils'; +import { UiModeSystem } from "./UiModes"; export class Palette { fileInfo : ko.Observable; private nodes : ko.ObservableArray; private searchExclude : ko.Observable; + expanded: ko.Observable; - public static readonly DYNAMIC_PALETTE_NAME: string = "Component Templates"; + public static readonly TEMPLATE_PALETTE_NAME: string = "Component Templates"; public static readonly BUILTIN_PALETTE_NAME: string = "Builtin Components"; constructor(){ @@ -50,6 +53,7 @@ export class Palette { this.fileInfo().builtIn = false; this.nodes = ko.observableArray([]); this.searchExclude = ko.observable(false); + this.expanded = ko.observable(false); } static fromOJSJson(data : string, file : RepositoryFile, errorsWarnings : Errors.ErrorsWarnings) : Palette { @@ -288,4 +292,22 @@ export class Palette { // notification Utils.showNotification("Palette URL", "Copied to clipboard", "success"); } + + toggle = (palette: Palette, event: Event): void => { + // get collapse/expand state of the accordion + const expanded: boolean = (event.currentTarget).ariaExpanded === 'true'; + + // set internal variable in the palette + this.expanded(expanded); + + // if this palette one of the built-in ones, then save the state to localStorage + if (this.fileInfo().name === Palette.BUILTIN_PALETTE_NAME){ + Setting.setValue(Setting.OPEN_BUILTIN_PALETTE, expanded); + UiModeSystem.saveToLocalStorage(); + } + if (this.fileInfo().name === Palette.TEMPLATE_PALETTE_NAME){ + Setting.setValue(Setting.OPEN_TEMPLATE_PALETTE, expanded); + UiModeSystem.saveToLocalStorage(); + } + } } diff --git a/src/Setting.ts b/src/Setting.ts index fbfc57dd..b71faebf 100644 --- a/src/Setting.ts +++ b/src/Setting.ts @@ -2,6 +2,7 @@ import * as ko from "knockout"; import { Eagle } from './Eagle'; import { Errors } from './Errors'; +import { Palette } from "./Palette"; import { Repository } from "./Repository"; import { UiModeSystem } from './UiModes'; import { Utils } from './Utils'; @@ -272,6 +273,9 @@ export class Setting { static readonly BOTTOM_WINDOW_MODE : string = "BottomWindowMode"; static readonly OBJECT_INSPECTOR_COLLAPSED_STATE : string = "ObjectInspectorVisibility"; static readonly GRAPH_INSPECTOR_COLLAPSED_STATE : string = "GraphInspectorVisibility"; + + static readonly OPEN_BUILTIN_PALETTE: string = "OpenBuiltinPalette"; + static readonly OPEN_TEMPLATE_PALETTE: string = "OpenTemplatePalette"; static readonly ACTION_CONFIRMATIONS : string = "ActionConfirmations"; static readonly CONFIRM_DISCARD_CHANGES : string = "ConfirmDiscardChanges"; @@ -307,7 +311,6 @@ export class Setting { static readonly TRANSLATE_WITH_NEW_CATEGORIES: string = "TranslateWithNewCategories"; // temp fix for incompatibility with the DaLiuGE translator - static readonly OPEN_DEFAULT_PALETTE: string = "OpenDefaultPalette"; static readonly CREATE_APPLICATIONS_FOR_CONSTRUCT_PORTS: string = "CreateApplicationsForConstructPorts"; static readonly DISABLE_JSON_VALIDATION: string = "DisableJsonValidation"; @@ -374,7 +377,8 @@ const settings : SettingsGroup[] = [ new Setting(false, "Confirm Reload Palettes", Setting.CONFIRM_RELOAD_PALETTES, "Prompt user to confirm when loading a palette that is already loaded.",false , Setting.Type.Boolean,true,true,true,true,true), new Setting(false, "Confirm Delete Files", Setting.CONFIRM_DELETE_FILES, "Prompt user to confirm when deleting files from a repository.", false, Setting.Type.Boolean, true,true,true,true,true), new Setting(false, "Confirm Delete Objects", Setting.CONFIRM_DELETE_OBJECTS, "Prompt user to confirm when deleting node(s) or edge(s) from a graph.",false , Setting.Type.Boolean, true,true,true,true,true), - new Setting(true, "Open Default Palette on Startup", Setting.OPEN_DEFAULT_PALETTE, "Open a default palette on startup. The palette contains an example of all known node categories", false, Setting.Type.Boolean, false,false,true,true,true, [], function(){Eagle.getInstance().toggleDefaultPalettes();}), + new Setting(false, "Open " + Palette.BUILTIN_PALETTE_NAME + " Palette on Startup", Setting.OPEN_BUILTIN_PALETTE, "Open the '" + Palette.BUILTIN_PALETTE_NAME + "' palette on startup.", true, Setting.Type.Boolean, false, false, false, false, false), + new Setting(false, "Open " + Palette.TEMPLATE_PALETTE_NAME + " Palette on Startup", Setting.OPEN_TEMPLATE_PALETTE, "Open the '" + Palette.TEMPLATE_PALETTE_NAME + "' palette on startup.", true, Setting.Type.Boolean, false, false, false, false, false), new Setting(true, "Disable JSON Validation", Setting.DISABLE_JSON_VALIDATION, "Allow EAGLE to load/save/send-to-translator graphs and palettes that would normally fail validation against schema.", false, Setting.Type.Boolean, false,false,false,false,false), new Setting(true, "Overwrite Existing Translator Tab", Setting.OVERWRITE_TRANSLATION_TAB, "When translating a graph, overwrite an existing translator tab", false, Setting.Type.Boolean, true,true,true,true,true), ] diff --git a/src/Utils.ts b/src/Utils.ts index fbb73da4..4b794761 100644 --- a/src/Utils.ts +++ b/src/Utils.ts @@ -761,7 +761,7 @@ export class Utils { $('#issuesDisplay').modal("hide"); } - static preparePalette(palette: Palette, paletteListItem: {name:string, filename:string, readonly:boolean}) : void { + static preparePalette(palette: Palette, paletteListItem: {name:string, filename:string, readonly:boolean, expanded: boolean}) : void { palette.fileInfo().clear(); palette.fileInfo().name = paletteListItem.name; palette.fileInfo().readonly = paletteListItem.readonly; @@ -769,6 +769,8 @@ export class Utils { palette.fileInfo().downloadUrl = paletteListItem.filename; palette.fileInfo().type = Eagle.FileType.Palette; palette.fileInfo().repositoryService = Repository.Service.Url; + + palette.expanded(paletteListItem.expanded); } static showPalettesModal(eagle: Eagle) : void { diff --git a/src/main.ts b/src/main.ts index bc9dcd4e..4fecb8a6 100644 --- a/src/main.ts +++ b/src/main.ts @@ -93,6 +93,7 @@ $(function(){ (window).UiModeSystem = UiModeSystem; (window).Utils = Utils; (window).KeyboardShortcut = KeyboardShortcut; + (window).StatusEntry = StatusEntry; (window).QuickActions = QuickActions; (window).Modals = Modals; @@ -127,9 +128,7 @@ $(function(){ } // load the default palette - if (Setting.findValue(Setting.OPEN_DEFAULT_PALETTE)){ - eagle.loadDefaultPalettes(); - } + eagle.loadDefaultPalettes(); // set other state based on settings values if (Setting.findValue(Setting.SNAP_TO_GRID)){ @@ -207,18 +206,12 @@ $(function(){ $("textarea").trigger("blur"); }); - $(".tableParameter").on("click", function(){ - console.log(this) - }) - //expand palettes when using searchbar and return to prior collapsed state on completion. $("#paletteList .componentSearchBar").on("keyup",function(){ if ($("#paletteList .componentSearchBar").val() !== ""){ - $("#paletteList .accordion-button.collapsed").addClass("wasCollapsed") - $("#paletteList .accordion-button.collapsed").trigger("click") - }else{ - $("#paletteList .accordion-button.wasCollapsed").trigger("click") - $("#paletteList .accordion-button.wasCollapsed").removeClass("wasCollapsed") + for (const palette of Eagle.getInstance().palettes()){ + palette.expanded(true); + } } }) @@ -237,6 +230,7 @@ $(function(){ } }) + // TODO: replace this with a data-bind=click in the element html $(".hierarchy").on("click", function(){ Eagle.getInstance().selectedObjects([]); }) diff --git a/templates/palettes.html b/templates/palettes.html index 57e55824..049b09f4 100644 --- a/templates/palettes.html +++ b/templates/palettes.html @@ -70,12 +70,12 @@ -
+
 
-
+
{% include 'palette.html' %}