Merge pull request #8 from ericm/v0.1.2-beta_dev | Release v0.1.2-beta

ericm · May 26, 2019 · 0373185 · 0373185
2 parents 4764bec + 97d9ea7
commit 0373185
Show file tree

Hide file tree

Showing 9 changed files with 105 additions and 77 deletions.
diff --git a/app/actions/canvas.ts b/app/actions/canvas.ts
@@ -97,8 +97,8 @@ export namespace Wiring {
         ctx.moveTo(init.x, init.y);
         ctx.lineTo(breakpoint.x, breakpoint.y);
         ctx.lineTo(current.x, current.y);
-        ctx.strokeStyle = "black";
-        ctx.lineWidth = 3;
+        ctx.strokeStyle = "#222";
+        ctx.lineWidth = 2;
         ctx.stroke();
 
         return breakpoint;

diff --git a/app/components/Home.tsx b/app/components/Home.tsx
@@ -29,7 +29,8 @@ export default class Home extends RComponent<HomeProps, HomeState> {
         super(props);
         this.state = {
             child1: { width: 92, height: 100, x: 0, y: 0, initHeight: 80, initWidth: 80, initX: 0, initY: 0 },
-            child2: { width: 7, height: 100, x: 0, y: 0, initHeight: 80, initWidth: 80, initX: 0, initY: 0 }
+            child2: { width: 7, height: 100, x: 0, y: 0, initHeight: 80, initWidth: 80, initX: 0, initY: 0 },
+            statusOffset: []
         };
         // Add keybind listener
         document.addEventListener("keydown", this.keyBinds);
@@ -100,8 +101,15 @@ export default class Home extends RComponent<HomeProps, HomeState> {
 
     public addStatus = (message: string, reload: boolean): void => {
         let status = this.state.status || [];
-        status = [((<Status unmount={this.unmountStatus} message={message} reload={reload} />))].concat(status);
+        let nums = this.state.statusOffset || [];
+        for (let i in nums) {
+            nums[i] += 110;
+        }
+        nums = [30].concat(nums);
+        this.setState({statusOffset: nums});
+        status = [((<Status offset={this.state.statusOffset[0]} unmount={this.unmountStatus} message={message} reload={reload} />))].concat(status);
         this.setState({status});
+        console.log(this.state.statusOffset)
     }
 
     public componentDidUpdate(): void {

diff --git a/app/components/Status.tsx b/app/components/Status.tsx
@@ -9,10 +9,13 @@ export default class Status extends Component<StatusProps, StatusState> {
     public constructor(props: StatusProps) {
         super(props);
         this.state = { offset: 30 };
-    }
+    } 
 
-
-
+    public componentDidUpdate() {
+        if (this.state.offset !== this.props.offset) {
+            this.setState({ offset: this.props.offset })
+        }
+    }
 
     public render() {
         return (

diff --git a/app/components/Workspace.tsx b/app/components/Workspace.tsx
@@ -88,6 +88,8 @@ export default class Workspace extends React.Component<IComponent.WorkspaceProps
         if (this.state.unsavedChanges) {
             if (confirm("Save unsaved changes?")) {
                 this.save(false, Exit);
+            } else {
+                Exit();
             }
         } else {
             Exit();
@@ -345,78 +347,90 @@ export default class Workspace extends React.Component<IComponent.WorkspaceProps
 
         }
 
-
+        let change = false;
         switch (this.state.mode) {
-            case "click":
-                this.canvasClick(e, coords);
-                break;
-
-            case "draw":
-                this.cavasDrag(e, coords);
-                break;
-
-            case "cut":
-                this.canvasCut(e, coordsReal);
-                break;
-
-            // Gate cases
-            case "and":
-                if (e.type == "click" && !Wiring.otherGates(coords, this.allGates())) {
-                    this.gates.and.push(new LogicGates.AndGate(this.ctx));
-                    const size: ICanvas.GateSize = { width: 2 * this.state.gridFactor + 1, height: 2 * this.state.gridFactor + 1 }
-                    const newNodes = this.gates.and[this.gates.and.length - 1].add(coords, size);
-
-                    this.addNodes(newNodes);
-                    this.onChange();
-                }
-                break;
+        case "click":
+            this.canvasClick(e, coords);
+            break;
+
+        case "draw":
+            this.cavasDrag(e, coords);
+            break;
+
+        case "cut":
+            this.canvasCut(e, coordsReal);
+            break;
+
+        // Gate cases
+        case "and":
+            if (e.type == "click" && !Wiring.otherGates(coords, this.allGates())) {
+                this.gates.and.push(new LogicGates.AndGate(this.ctx));
+                const size: ICanvas.GateSize = { width: 2 * this.state.gridFactor + 1, height: 2 * this.state.gridFactor + 1 }
+                const newNodes = this.gates.and[this.gates.and.length - 1].add(coords, size);
+
+                this.addNodes(newNodes);
+                this.onChange();
+                change = true;
+            }
+            break;
 
 
-            case "or":
-                if (e.type == "click" && !Wiring.otherGates(coords, this.allGates())) {
-                    this.gates.or.push(new LogicGates.OrGate(this.ctx));
-                    const size: ICanvas.GateSize = { width: 2 * this.state.gridFactor + 1, height: 2 * this.state.gridFactor + 1 }
-                    const newNodes = this.gates.or[this.gates.or.length - 1].add(coords, size);
+        case "or":
+            if (e.type == "click" && !Wiring.otherGates(coords, this.allGates())) {
+                this.gates.or.push(new LogicGates.OrGate(this.ctx));
+                const size: ICanvas.GateSize = { width: 2 * this.state.gridFactor + 1, height: 2 * this.state.gridFactor + 1 }
+                const newNodes = this.gates.or[this.gates.or.length - 1].add(coords, size);
 
-                    this.addNodes(newNodes);
-                    this.onChange();
-                }
-                break;
+                this.addNodes(newNodes);
+                this.onChange();
+                change = true;
+            }
+            break;
 
-            case "not":
-                if (e.type == "click" && !Wiring.otherGates(coords, this.allGates())) {
-                    this.gates.not.push(new LogicGates.NotGate(this.ctx));
-                    const size: ICanvas.GateSize = { width: 2 * this.state.gridFactor + 1, height: 2 * this.state.gridFactor + 1 }
-                    const newNodes = this.gates.not[this.gates.not.length - 1].add(coords, size);
+        case "not":
+            if (e.type == "click" && !Wiring.otherGates(coords, this.allGates())) {
+                this.gates.not.push(new LogicGates.NotGate(this.ctx));
+                const size: ICanvas.GateSize = { width: 2 * this.state.gridFactor + 1, height: 2 * this.state.gridFactor + 1 }
+                const newNodes = this.gates.not[this.gates.not.length - 1].add(coords, size);
 
-                    this.addNodes(newNodes);
-                    this.onChange();
-                }
-                break;
+                this.addNodes(newNodes);
+                this.onChange();
+                change = true;
+            }
+            break;
 
-            case "led":
-                if (e.type == "click" && !Wiring.otherGates(coords, this.allGates())) {
-                    this.gates.led.push(new LogicGates.LED(this.ctx));
-                    const size: ICanvas.GateSize = { width: 2 * this.state.gridFactor + 1, height: 2 * this.state.gridFactor + 1 }
-                    const newNodes = this.gates.led[this.gates.led.length - 1].add(coords, size);
+        case "led":
+            if (e.type == "click" && !Wiring.otherGates(coords, this.allGates())) {
+                this.gates.led.push(new LogicGates.LED(this.ctx));
+                const size: ICanvas.GateSize = { width: 2 * this.state.gridFactor + 1, height: 2 * this.state.gridFactor + 1 }
+                const newNodes = this.gates.led[this.gates.led.length - 1].add(coords, size);
 
-                    this.addNodes(newNodes);
-                    this.onChange();
-                }
-                break;
+                this.addNodes(newNodes);
+                this.onChange();
+                change = true;
+            }
+            break;
 
-            case "switch":
-                if (e.type == "click" && !Wiring.otherGates(coords, this.allGates())) {
-                    this.gates.switch.push(new LogicGates.Switch(this.ctx));
-                    const size: ICanvas.GateSize = { width: 2 * this.state.gridFactor + 1, height: 2 * this.state.gridFactor + 1 }
-                    const newNodes = this.gates.switch[this.gates.switch.length - 1].add(coords, size);
+        case "switch":
+            if (e.type == "click" && !Wiring.otherGates(coords, this.allGates())) {
+                this.gates.switch.push(new LogicGates.Switch(this.ctx));
+                const size: ICanvas.GateSize = { width: 2 * this.state.gridFactor + 1, height: 2 * this.state.gridFactor + 1 }
+                const newNodes = this.gates.switch[this.gates.switch.length - 1].add(coords, size);
 
-                    this.addNodes(newNodes);
-                    this.onChange();
-                }
-                break;
+                this.addNodes(newNodes);
+                this.onChange();
+                change = true;
+            }
+            break;
         }
 
+        if (change && !this.state.unsavedChanges) {
+            this.setState({unsavedChanges: true});   
+        }
+        if (change) {
+            console.log(this.state.unsavedChanges);
+        }
+
     }
 
     /**
@@ -442,12 +456,9 @@ export default class Workspace extends React.Component<IComponent.WorkspaceProps
      * @memberof Workspace
      */
     public clear = (): void => {
-        if(this.i > 3) this.setState({ unsavedChanges: true });
-        this.i++;
         this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
         this.updateCanvas();
     }
-    private i = 0
 
     /**
      * Checks if a gate is clicked 

diff --git a/app/components/styles/Status.scss b/app/components/styles/Status.scss
@@ -9,6 +9,12 @@
     border-bottom: 3px solid rgba(0, 0, 0, 0.74);
     z-index: 1001;
     padding: .2em 1em 0 1em;
+    transition: all .3s;
+    animation: in .3s;
+}
+@keyframes in {
+    0% {top: -50px;}
+    100% {top: 30px;}
 }
 .status p {
     font-size: 14px;

diff --git a/app/interfaces/components.d.ts b/app/interfaces/components.d.ts
@@ -19,7 +19,8 @@ export interface HomeState {
 	child1: Child,
 	child2: Child,
 	popup?: JSX.Element,
-	status?: JSX.Element[]
+	status?: JSX.Element[],
+	statusOffset: number[]
 }
 export interface HomeProps {
 	testing?: boolean
@@ -131,7 +132,8 @@ export interface StatusState {
 export interface StatusProps {
 	message: string,
 	reload: boolean,
-	unmount: () => void
+	unmount: () => void,
+	offset: number
 }
 interface GateStatePlecibo {
 	coords: GateCoords,

diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "newlogic",
   "productName": "newlogic",
-  "version": "0.1.1-beta",
+  "version": "0.1.2-beta",
   "description": "A circuit builder",
   "main": "./main.js",
   "author": {

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "newlogic",
   "productName": "newlogic",
-  "version": "0.1.1-beta",
+  "version": "0.1.2-beta",
   "description": "Circuit Builder Desktop Application (like mmlogic) made with Electron + React Typescript. Compatible with Windows, Mac and Linux.",
   "main": "main.js",
   "preferGlobal": true,
@@ -16,7 +16,6 @@
     "build": "npm run build-main && npm run build-renderer",
     "start": "cross-env NODE_ENV=production electron ./app/",
     "start-hot": "cross-env HOT=1 NODE_ENV=development electron ./app/main.development",
-    "postinstall": "npm run build",
     "dev": "npm run hot-server -- --start-hot",
     "package": "npm run build && build --publish never",
     "package-win": "npm run build && build --win --x64",
@@ -92,7 +91,6 @@
     }
   },
   "bin": {
-    "electron": "./node_modules/.bin/electron",
     "newlogic": "./start.js"
   },
   "repository": {