Merge pull request #25 from Shmew/fix-build

Fix build

DECAD.sln

@@ -31,6 +31,12 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "SolutionItems", "SolutionIt
 		yarn.lock = yarn.lock
 	EndProjectSection
 EndProject
+Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "static", "static", "{EB34148C-70A6-4D00-BA10-87BBDFD4ACBF}"
+	ProjectSection(SolutionItems) = preProject
+		static\icon.ico = static\icon.ico
+		static\index.html = static\index.html
+	EndProjectSection
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU

package.json

@@ -34,29 +34,33 @@
     "draw2d": "^1.0.38",
     "font-awesome": "^4.7.0",
     "jquery": "^3.5.1",
+    "jquery-ui": "^1.12.1",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
     "rechart": "^0.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.10.4",
     "babel-loader": "8.1.0",
+    "bufferutil": "^4.0.1",
     "devtron": "^1.4.0",
-    "electron": "^1.8.8",
+    "electron": "^9.1.0",
     "electron-devtools-installer": "^3.1.0",
     "electron-installer-dmg": "^3.0.0",
     "electron-packager": "^14.2.1",
     "electron-webpack": "^2.8.2",
     "fable-compiler": "^2.10.1",
     "fable-loader": "^2.1.9",
     "file-loader": "^3.0.1",
+    "html-webpack-plugin": "^4.3.0",
     "loglevel": "^1.6.8",
     "node-sass": "^4.12.0",
     "remotedev": "^0.2.9",
     "resolve-url-loader": "^3.1.1",
     "sass": "^1.26.10",
     "sass-loader": "^7.3.1",
     "url-loader": "^4.1.0",
+    "utf-8-validate": "^5.0.2",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.12"
   }

src/Main/Main.fs

@@ -54,22 +54,19 @@ let hasDebugArgs() = argFlagIsOn ["--debug";"-d"]
 let mutable mainWindow: BrowserWindow option = Option.None
 
 let createMainWindow () =
-    let options = createEmpty<BrowserWindowOptions>
-    options.width <- 1200
-    options.height <- 800
-    options.autoHideMenuBar <- true
-    options.icon <- (U2.Case2 (path.join(__dirname, "../../static/icon.ico")))
-    options.title <- "DEflow"
-    options.webPreferences <-
-        jsOptions<WebPreferences>(fun o ->
-            o.preload <- path.resolve(path.join(__dirname, "preload.js"))
-        )
+    let options = jsOptions<BrowserWindowOptions> <| fun options ->
+        options.width <- 1200
+        options.height <- 800
+        options.autoHideMenuBar <- true
+        options.icon <- (U2.Case2 (path.join(__dirname, "../../static/icon.ico")))
+        options.title <- "DEflow"
+        options.webPreferences <-
+            jsOptions<WebPreferences> <| fun o ->
+                o.nodeIntegration <- true
+                o.enableRemoteModule <- true
 
     let window = electron.BrowserWindow.Create(options)
 
-    // Clear the menuBar.
-    electron.app.applicationMenu <- None
-
     window.onceReadyToShow <| fun _ ->
         if window.isMinimized() then window.show()
     |> ignore

src/Main/Main.fsproj

@@ -4,7 +4,6 @@
   </PropertyGroup>
   <ItemGroup>
     <Compile Include="Main.fs" />
-    <None Include="preload.js" />
     <None Include="main.js" />
   </ItemGroup>
   <ItemGroup>

src/Renderer/Draw2dWrapper/draw2d_digital_connections.js

@@ -33,7 +33,7 @@ draw2d.layout.locator.BusLabelLocator = draw2d.layout.locator.ConnectionLocator.
 // It would since the "connect" event is fired multiple times when a 
 // connection is created (connect source and target).
 // This is just for performance.
-dispatchLock = "undefined";
+let dispatchLock = "undefined";
 
 draw2d.Connection = draw2d.Connection.extend({
 

src/Renderer/Renderer.fs

@@ -9,8 +9,6 @@ open Fable.Core
 open Fable.Core.JsInterop
 open Electron
 
-//importSideEffects "./../../app/scss/main.scss" 
-
 // Keybindings.
 // Use Elmish subscriptions to attach external source of events such as keyboard
 // shortcuts. According to electron documentation, the way to configure keyboard
@@ -22,24 +20,28 @@ open Electron
 // open at the same time, such as VSCode (on Linux).
 
 let makeItem (accelerator : string) (action : unit -> unit) =
-    let item = createEmpty<MenuItemOptions>
-    item.accelerator <- accelerator
-    // These menu items will be invisible and only accessible via shortcuts.
-    // Thanks to VisUAL2 code for lending this function to DEflow.
-    item.click <- fun _ _ _ -> action()
-    item
+    jsOptions<MenuItemOptions> <| fun item ->
+        item.label <- accelerator
+        item.accelerator <- accelerator
+        item.visible <- false
+        // These menu items will be invisible and only accessible via shortcuts.
+        // Thanks to VisUAL2 code for lending this function to DEflow.
+        item.click <- fun _ _ _ -> action()
 
 let invisibleMenu dispatch =
-    let invisibleMenu = createEmpty<MenuItemOptions>
     let dispatch = DiagramMessageType.KeyboardShortcutMsg >> dispatch
-    invisibleMenu.submenu <-
-        [| makeItem "CmdOrCtrl+S" (fun () -> dispatch DiagramMessageType.CtrlS)
-           makeItem "Alt+C" (fun () -> dispatch DiagramMessageType.AltC)
-           makeItem "Alt+V" (fun () -> dispatch DiagramMessageType.AltV)
-           makeItem "Alt+Z" (fun () -> dispatch DiagramMessageType.AltZ)
-           makeItem "Alt+Shift+Z" (fun () -> dispatch DiagramMessageType.AltShiftZ) |]
-        |> U2.Case1
-    invisibleMenu
+
+    jsOptions<MenuItemOptions> <| fun invisibleMenu ->
+        invisibleMenu.``type`` <- MenuItemType.SubMenu
+        invisibleMenu.label <- "InvisibleMenu"
+        invisibleMenu.visible <- false
+        invisibleMenu.submenu <-
+            [| makeItem "CmdOrCtrl+S" (fun () -> dispatch DiagramMessageType.CtrlS)
+               makeItem "Alt+C" (fun () -> dispatch DiagramMessageType.AltC)
+               makeItem "Alt+V" (fun () -> dispatch DiagramMessageType.AltV)
+               makeItem "Alt+Z" (fun () -> dispatch DiagramMessageType.AltZ)
+               makeItem "Alt+Shift+Z" (fun () -> dispatch DiagramMessageType.AltShiftZ) |]
+            |> U2.Case1
 
 /// Create an invisible menu and attach keybindings to actions. 
 /// Design decision: use Alt for actions that trigger equivalent to the buttons
@@ -78,6 +80,6 @@ let view model dispatch = DiagramMainView.displayView model dispatch
 let update msg model = DiagramMainView.update msg model
 
 Program.mkSimple init update view
-|> Program.withReactBatched "electron-app"
+|> Program.withReactBatched "app"
 |> Program.withSubscription attachKeyShortcuts
 |> Program.run

static/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <script>window.$ = window.jQuery = require('jquery')</script>
+    <script>window.$.ui = require("jquery-ui")</script>
+    <script>require('jquery-ui/ui/plugin')</script>
+    <script>require('jquery-ui/ui/widget')</script>
+    <script>require('jquery-ui/ui/widgets/mouse')</script>
+    <script>require("jquery-ui/ui/widgets/draggable")</script>
+    <script>require("jquery-ui/ui/widgets/droppable")</script>
+    <script>window.draw2d = require('draw2d')</script>
+</head>
+<body>
+    <div id="app"></div>
+</body>
+</html>

webpack.additions.main.js

@@ -6,10 +6,6 @@ function resolve(filePath) {
 
 module.exports = {
     entry: resolve("src/Main/Main.fsproj"),
-    externals: {
-        bufferutil: 'commonjs bufferutil',
-        'utf-8-validate': 'commonjs utf-8-validate',
-    },
     module: {
         rules: [
             {
@@ -20,4 +16,4 @@ module.exports = {
             }
         ]
     }
-}
+}

webpack.additions.renderer.js

@@ -1,4 +1,5 @@
 var path = require("path");
+var HtmlWebpackPlugin = require('html-webpack-plugin');
 
 function resolve(filePath) {
     return path.join(__dirname, filePath)
@@ -9,6 +10,11 @@ module.exports = {
     output: {
         filename: "renderer.js"
     },
+    plugins: [
+        new HtmlWebpackPlugin({
+            template: path.resolve(__dirname, 'static/index.html')
+        })
+    ],
     module: {
         rules: [
             {
@@ -19,4 +25,4 @@ module.exports = {
             }
         ]
     }
-}
+}