Merge pull request #110 from center-for-threat-informed-defense/AF-18…

…2_splash_screen_enhancements

AF-182: Splash Screen Enhancements and Bug Fixes

src/attack_flow_builder/attack/update_attack_intel.js

@@ -11,7 +11,7 @@ const EXPORT_KEY = "intel";
 /**
  * The intel file's path.
  */
-const INTEL_FILE_PATH = "../src/assets/builder.config.intel.ts";
+const INTEL_FILE_PATH = "../src/assets/configuration/builder.config.intel.ts";
 
 /**
  * JavaScript variable regex.

src/attack_flow_builder/public/settings_macos.json

@@ -14,6 +14,9 @@
             "display_debug_mode": false,
             "render_high_quality": true,
             "disable_shadows_at": 0.7
+        },
+        "splash_menu": {
+            "display_menu": true
         }
     },
     "hotkeys": {

src/attack_flow_builder/public/settings_win.json

@@ -14,6 +14,9 @@
             "display_debug_mode": false,
             "render_high_quality": true,
             "disable_shadows_at": 0.7
+        },
+        "splash_menu": {
+            "display_menu": true
         }
     },
     "hotkeys": {

src/attack_flow_builder/src/App.vue

@@ -5,7 +5,7 @@
     <div id="app-body" ref="body" :style="gridLayout">
       <div class="frame center">
         <BlockDiagram id="block-diagram"/>
-        <SplashMenu id="splash-menu" />
+        <SplashMenu id="splash-menu" v-if="isShowingSplash" />
       </div>
       <div class="frame right">
         <div class="resize-handle" @pointerdown="startResize($event, Handle.Right)"></div>
@@ -21,16 +21,16 @@
 <script lang="ts">
 import * as App from './store/Commands/AppCommands';
 import * as Store from "@/store/StoreTypes";
-import Configuration from "@/assets/builder.config"
+import Configuration from "@/assets/configuration/builder.config"
 // Dependencies
 import { clamp } from "./assets/scripts/BlockDiagram";
 import { PointerTracker } from "./assets/scripts/PointerTracker";
-import { mapMutations, mapState } from 'vuex';
 import { Browser, OperatingSystem } from "./assets/scripts/Browser";
 import { defineComponent, markRaw, ref } from 'vue';
+import { mapMutations, mapGetters, mapState } from 'vuex';
 // Components
 import FindDialog from "@/components/Elements/FindDialog.vue";
-import SplashMenu from "@/components/Controls/SplashMenu.vue";
+import SplashMenu from "@/components/Elements/SplashMenu.vue";
 import AppTitleBar from "@/components/Elements/AppTitleBar.vue";
 import AppHotkeyBox from "@/components/Elements/AppHotkeyBox.vue";
 import BlockDiagram from "@/components/Elements/BlockDiagram.vue";
@@ -53,7 +53,7 @@ export default defineComponent({
       bodyWidth: -1,
       bodyHeight: -1,
       frameSize: {
-        [Handle.Right]: 350
+        [Handle.Right]: 355
       },
       minFrameSize: {
         [Handle.Right]: 310
@@ -76,6 +76,11 @@ export default defineComponent({
       }
     }),
 
+    /**
+     * Application Store getters
+     */
+    ...mapGetters("ApplicationStore", ["isShowingSplash"]),
+
     /**
      * Returns the current grid layout.
      * @returns
@@ -192,13 +197,11 @@ export default defineComponent({
     if(src) {
       try {
         // TODO: Incorporate loading dialog
-        this.execute(await App.LoadFile.fromUrl(this.context, src));
+        this.execute(await App.PrepareEditorWithFile.fromUrl(this.context, src));
       } catch(ex) {
         console.error(`Failed to load file from url: '${ src }'`);
         console.error(ex);
       }
-    } else {
-      this.execute(new App.ShowSplashMenu(this.context));
     }
   },
   mounted() {
@@ -295,6 +298,10 @@ ul {
   box-sizing: border-box;
 }
 
+#splash-menu {
+  position: absolute;
+}
+
 #app-sidebar {
   width: 100%;
   height: 100%;
@@ -314,6 +321,12 @@ ul {
   position: relative;
 }
 
+.frame.center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .frame.bottom {
   grid-column: 1 / 3;
 }

src/attack_flow_builder/src/assets/builder.config.processor.ts → src/attack_flow_builder/src/assets/configuration/builder.config.processor.ts

@@ -1,7 +1,7 @@
 import intel from "./builder.config.intel";
 import { PageCommand } from "@/store/Commands/PageCommand";
-import { StringProperty } from "./scripts/BlockDiagram";
-import { DiagramProcessor } from "./scripts/DiagramProcessor/DiagramProcessor";
+import { StringProperty } from "../scripts/BlockDiagram";
+import { DiagramProcessor } from "../scripts/DiagramProcessor/DiagramProcessor";
 import { GroupCommand, SetStringProperty } from "@/store/Commands/PageCommands";
 
 

src/attack_flow_builder/src/assets/builder.config.publisher.ts → src/attack_flow_builder/src/assets/configuration/builder.config.publisher.ts

@@ -1,5 +1,5 @@
-import { Crypto } from "./scripts/BlockDiagram/Utilities/Crypto";
-import { DiagramPublisher } from "./scripts/DiagramPublisher/DiagramPublisher";
+import { Crypto } from "../scripts/BlockDiagram/Utilities/Crypto";
+import { DiagramPublisher } from "../scripts/DiagramPublisher/DiagramPublisher";
 import {
     CollectionProperty,
     DiagramObjectModel,
@@ -13,7 +13,7 @@ import {
     RawEntries,
     SemanticAnalyzer,
     StringProperty
-} from "./scripts/BlockDiagram";
+} from "../scripts/BlockDiagram";
 
 
 ///////////////////////////////////////////////////////////////////////////////

src/attack_flow_builder/src/assets/builder.config.ts → src/attack_flow_builder/src/assets/configuration/builder.config.ts

@@ -3,14 +3,14 @@ import validator from "./builder.config.validator";
 import publisher from "./builder.config.publisher";
 import processor from "./builder.config.processor";
 import { AppConfiguration } from "@/store/StoreTypes";
-import { Colors, DarkTheme } from "./scripts/BlockDiagram/DiagramFactory/Themes";
+import { Colors, DarkTheme } from "../scripts/BlockDiagram/DiagramFactory/Themes";
 import {
     AnchorAngle,
     EnumPropertyDescriptor,
     PropertyType,
     SemanticRole,
     TemplateType
-} from "./scripts/BlockDiagram";
+} from "../scripts/BlockDiagram";
 
 const BoolEnum: EnumPropertyDescriptor = {
     type: PropertyType.Enum,
@@ -24,35 +24,30 @@ const BoolEnum: EnumPropertyDescriptor = {
 const config: AppConfiguration = {
     is_web_hosted: false,
     application_name: "Attack Flow Builder",
+    application_icon: "./engenuity_icon_small.png",
     file_type_name: "Attack Flow",
     file_type_extension: "afb",
-    menu_icon: "./ctid-small.png",
     splash: {
-        product: "./afb.png",
-        organization: "./ctid.png",
-        buttons: [
-            {
-                action: "new",
-                name: "New Flow",
-                description: "Create a new, blank flow",
-            },
-            {
-                action: "open",
-                name: "Open Flow",
-                description: "Open an existing flow from your computer"
-            },
-            {
-                action: "link",
-                name: "Example Flows",
-                description: "View a list of example flows", 
+        organization: "./ctid_logo.png",
+        new_file: {
+            title: "New Flow",
+            description: "Create a new, blank Flow.",
+        },
+        open_file: {
+            title: "Open Flow",
+            description: "Open an existing Flow."
+        },
+        help_links: [
+            {
+                title: "Example Flows",
+                description: "Visit a list of example Flows.", 
                 url: "https://center-for-threat-informed-defense.github.io/attack-flow/example_flows/"
             },
             {
-                action: "link",
-                name: "Builder Help",
-                description: "View help for Attack Flow Builder", 
+                title: "Builder Help",
+                description: "Read the Builder's User Guide.", 
                 url: "https://center-for-threat-informed-defense.github.io/attack-flow/builder/"
-            },
+            }
         ],
     },
     schema: {

src/attack_flow_builder/src/assets/builder.config.validator.ts → src/attack_flow_builder/src/assets/configuration/builder.config.validator.ts

@@ -1,4 +1,4 @@
-import { DiagramValidator } from "./scripts/DiagramValidator/DiagramValidator";
+import { DiagramValidator } from "../scripts/DiagramValidator/DiagramValidator";
 import {
     DiagramObjectModel,
     DictionaryProperty,
@@ -9,7 +9,7 @@ import {
     PropertyType,
     RawEntries,
     SemanticAnalyzer
-} from "./scripts/BlockDiagram";
+} from "../scripts/BlockDiagram";
 
 class AttackFlowValidator extends DiagramValidator {
 

src/attack_flow_builder/src/cli.ts

@@ -1,7 +1,7 @@
 // TODO doc blocks everywhere
 
 import { PageEditor } from "../src/store/PageEditor";
-import config from "../src/assets/builder.config";
+import config from "../src/assets/configuration/builder.config";
 
 // Node.js imports must use require() since the Vue compiler will not understand them.
 const fs = require("fs");

src/attack_flow_builder/src/components/Containers/ScrollBox.vue

@@ -9,6 +9,7 @@
       <slot></slot>
     </div>
     <div
+      ref="scrollbar"
       class="scroll-bar"
       :style="scroll.sty"
       @wheel.passive="onScrollWheel"
@@ -33,7 +34,8 @@ export default defineComponent({
   name: "ScrollBox",
   setup() {
     return { 
-      content: ref<HTMLElement | null>(null)
+      content: ref<HTMLElement | null>(null),
+      scrollbar: ref<HTMLElement | null>(null),
     }
   },
   props: {
@@ -185,9 +187,10 @@ export default defineComponent({
       }
       // Compute ratio
       let ratio = content.clientHeight / content.scrollHeight;
-      // Update scroll state (-4 for the 2px of padding around the scrollbar)
-      this.handle.hei = Math.max(15, Math.round((content.clientHeight - 4) * ratio));
-      this.handle.max = content.clientHeight - this.handle.hei - 4;
+      // Compute scroll parameters
+      let scrollBarSpace = this.getScrollBarHeight();
+      this.handle.hei = Math.max(15, Math.round(scrollBarSpace * ratio));
+      this.handle.max = scrollBarSpace - this.handle.hei;
       this.windowMax  = content.scrollHeight - content.clientHeight;
       // Update scroll handle
       this.showScrollbar = ratio !== 1;
@@ -244,6 +247,21 @@ export default defineComponent({
      */
     handleTopToTop(top: number): number {
       return (top / this.handle.max) * this.windowMax;
+    },
+
+    /**
+     * Returns the scrollbar's height (excluding padding, borders, and margin).
+     * @returns
+     *  The scrollbar's true height.
+     */
+    getScrollBarHeight(): number {
+      if(this.scrollbar) {
+        let cs = getComputedStyle(this.scrollbar);
+        let padding = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);
+        return this.scrollbar.clientHeight - padding;
+      } else {
+        return 0;
+      }
     }
 
   },