♻️ revamp node/canvas structure

.babelrc

@@ -0,0 +1,5 @@
+{
+    "plugins": [
+        "@babel/plugin-proposal-class-properties"
+    ]
+}

.gitignore

@@ -0,0 +1,3 @@
+/node_modules
+/dist
+/.cache

.postcssrc

@@ -0,0 +1,8 @@
+{
+  "modules": false,
+  "plugins": {
+    "autoprefixer": {
+      "grid": true
+    }
+  }
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Previnash Wong Sze Chuan <[email protected]>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

demo/components/Button.tsx

@@ -0,0 +1,14 @@
+import React, { Component } from "react";
+import styled from "styled-components";
+
+const Btn = styled.button``;
+
+export default class Button extends Component<{ text: string }> {
+  static defaultProps = {
+    text: "Button"
+  };
+  render() {
+    const { text } = this.props;
+    return <Btn>{text}</Btn>;
+  }
+}

demo/components/MessageBox.tsx

@@ -0,0 +1,98 @@
+import React, { Component } from "react";
+import styled from "styled-components";
+import Button from "./Button";
+import Canvas from "~packages/core/Canvas";
+
+const Msg = styled.div`
+  display: inline-block;
+  display: inline-block;
+  height: 120px;
+  background-image: initial;
+  background-position-x: initial;
+  background-position-y: initial;
+  background-size: initial;
+  background-repeat-x: initial;
+  background-repeat-y: initial;
+  background-attachment: initial;
+  background-origin: initial;
+  background-clip: initial;
+  background-color: rgb(34, 34, 34);
+  color: rgb(255, 255, 255);
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+  padding-top: 10px;
+  padding-right: 20px;
+  padding-bottom: 10px;
+  padding-left: 20px;
+  width: ${(props: any) => (props.width ? props.width : "50")}%;
+  float: left;
+`;
+
+export default class MessageBox extends Component<{ text: string }> {
+  static defaultProps = {
+    text: "I am a message box"
+  };
+  state = {
+    test: false,
+    test2: false,
+    test3: false,
+    test4: false
+  }
+
+  componentDidMount() {
+    setTimeout(() => {
+      console.log("CAHNGED")
+      this.setState({
+        test: 'Wow'
+      })
+    }, 2000)
+    setTimeout(() => {
+      console.log("CAHNGED")
+      this.setState({
+        test2: 'Wow'
+      })
+    }, 4000)
+    setTimeout(() => {
+      console.log("CAHNGED")
+      this.setState({
+        test3: 'Wow'
+      })
+    }, 6000)
+    setTimeout(() => {
+      console.log("CAHNGED")
+      this.setState({
+        test4: 'Wow'
+      })
+    }, 8000)
+  }
+  render() {
+    const { text } = this.props;
+    const { test, test2, test3, test4 } = this.state;
+
+    return (
+      <hgroup>
+        {test4 && <Canvas>
+          <button>Im really kind the first</button>
+        </Canvas>}
+        <Canvas>
+          <button>Bye</button>
+        </Canvas>
+        {test3 && <Canvas>
+          <button>Im really kind the second</button>
+        </Canvas>}
+        <p> Another one</p>
+        {test && <Canvas>
+          <button>Im center</button>
+        </Canvas>}
+        <Canvas>
+          <button>Im back</button>
+        </Canvas>
+        {test2 && <Canvas>
+          <button>Im really kind the last</button>
+        </Canvas>}
+      </hgroup>
+    )
+  }
+}

demo/components/Row.tsx

@@ -0,0 +1,10 @@
+import React, { Component } from "react";
+
+export default class Row extends Component {
+  render() {
+    const { children } = this.props;
+    return (
+      <div className={`row`}>{children}</div>
+    )
+  }
+}

demo/demo.css

@@ -0,0 +1,129 @@
+body {
+  background: #333;
+}
+*,
+*:before,
+*:after {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-size: 100%;
+}
+
+.inspector {
+  margin-left: 400px;
+}
+
+.inspector pre {
+  font-family: Menlo;
+  font-size: 13px;
+}
+
+.m-node.placeholder {
+  /* border: 1px dashed #1385e5; */
+}
+
+.m-node .inner {
+  color: #9da5b4;
+  font-size: 12px;
+  font-family: Menlo;
+}
+
+.m-node.droppable {
+  background: yellow;
+}
+
+.m-node .node {
+  display: inline-block;
+  width: 100%;
+  padding: 4px 5px;
+}
+
+.m-node .node.is-active {
+  background-color: #31363f;
+}
+
+.f-no-select {
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.m-tree {
+  position: relative;
+  overflow: hidden;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.m-draggable {
+  position: absolute;
+  opacity: 0.8;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.m-node.placeholder > * {
+  /* visibility: hidden; */
+}
+
+.m-node.placeholder {
+  /* border: 1px dashed #ccc; */
+}
+
+.m-node .inner {
+  position: relative;
+  cursor: pointer;
+  padding-left: 10px;
+}
+
+.m-node .collapse {
+  position: absolute;
+  left: 0;
+  cursor: pointer;
+}
+
+.m-node .caret-right:before {
+  content: "\25B8";
+}
+
+.m-node .caret-down:before {
+  content: "\25BE";
+}
+
+.m-node {
+  float: left;
+  width: 100%;
+  cursor: move;
+}
+.row {
+  float: left;
+  width: 100%;
+  padding: 10px 0;
+}
+
+body,
+html,
+* {
+  font-family: Graphik;
+}
+
+.droppable {
+  padding: 10px 20px 40px;
+  float: left;
+  width: 100%;
+  background: rgb(255, 0, 0);
+}

demo/index.tsx

@@ -0,0 +1,58 @@
+import "reset-css";
+import "./demo.css";
+import React, { Component } from "react";
+import ReactDOM from "react-dom";
+import tree from "./tree";
+// import Space from "~/packages/space";
+// import Compose from "~/packages/compose";
+import Button from "./components/Button";
+import MessageBox from "./components/MessageBox";
+import Builder from "~packages/core/Builder";
+import Canvas from "~packages/core/Canvas";
+
+class App extends Component {
+  state = {
+    tree: tree,
+    test: 'false',
+    arr: ["hi", "bye", "what"],
+    nodes: [
+      <h1>Hi</h1>
+    ]
+  };
+  componentDidMount() {
+    // setTimeout(() => {
+    //   this.setState({
+    //     test: 'true'
+    //   })
+    // }, 1000)
+    // setTimeout(() => {
+    //   this.setState({
+    //     test: 'true'
+    //   })
+    //   setTimeout(() => {
+    //     this.state.arr.splice(1,0, "huh");
+    //     this.setState({
+    //       arr: [
+    //         ...this.state.arr,
+    //       ]
+    //     })
+    //   }, 1000)
+    // }, 1000)
+  }
+  render() {
+    const { tree, test, arr } = this.state;
+    // console.log("render", arr)
+    return (
+      <Builder>
+        <Canvas>
+          <Canvas>
+            <h2>Hi</h2>
+          </Canvas>
+        </Canvas>
+
+      </Builder >
+    );
+  }
+}
+
+ReactDOM.render(<App />, document.getElementById("root"));