├── .gitignore ├── src ├── index.js ├── assets │ ├── thumbnail.png │ └── transforms.js ├── components │ ├── shapes │ │ ├── index.js │ │ └── Circle.js │ ├── DataView │ │ ├── cellStyles.js │ │ ├── Cell.js │ │ ├── Array.js │ │ ├── Matrix.js │ │ ├── NArray.js │ │ └── index.js │ ├── TransformButtons.js │ ├── DemoView.js │ ├── Button.js │ ├── Demo.js │ ├── App.js │ └── Title.js ├── style │ └── index.css ├── manifest.json └── lib │ └── css.js ├── preact.config.js ├── README.md └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /build 3 | /npm-debug.log 4 | 5 | .env 6 | .DS_Store -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import "./style"; 2 | import App from "./components/App"; 3 | 4 | export default App; 5 | -------------------------------------------------------------------------------- /src/assets/thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkh44/matrix-magic-demo/master/src/assets/thumbnail.png -------------------------------------------------------------------------------- /preact.config.js: -------------------------------------------------------------------------------- 1 | export default (config, env, helpers) => { 2 | let { rule } = helpers.getLoadersByName(config, "babel-loader")[0]; 3 | let babelConfig = rule.options; 4 | 5 | babelConfig.plugins.push("emotion"); 6 | // babelConfig.env = { ...some settings... } 7 | }; 8 | -------------------------------------------------------------------------------- /src/components/shapes/index.js: -------------------------------------------------------------------------------- 1 | import { h, Component } from "preact"; 2 | import Circle from './Circle'; 3 | 4 | const circlePos = 5 | 6 | const ShapePicker = ({shape, x, y, width}) => { 7 | switch (shape) { 8 | case "circle": 9 | 10 | break; 11 | 12 | default: 13 | break; 14 | } 15 | } 16 | 17 | export default ShapePicker; -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Matrix Magic Demo 2 | 3 | [Link to site](https://matrix-magic.now.sh/) 4 | 5 | The demo for [matrix-magic](https://github.com/trainorpj/matrix-magic), a javascript library for manipulating, slicing, and doing other fun things with matrices. 6 | 7 | This page was made with [preact](https://preactjs.com/) and [emotion](https://emotion.sh/), among other wonderful technologies. 8 | 9 | Feel free to contribute! -------------------------------------------------------------------------------- /src/components/shapes/Circle.js: -------------------------------------------------------------------------------- 1 | import { h, Component } from "preact"; 2 | 3 | const Circle = ({ x, y, width }) => { 4 | const centerShift = x + width / 2; 5 | 6 | const styles = { 7 | cx: centerShift, 8 | cy: centerShift, 9 | r: width / 2, 10 | fill: "none", 11 | stroke: "black", 12 | strokeWidth: 1 13 | }; 14 | 15 | return ; 16 | }; 17 | 18 | export default Circle; 19 | -------------------------------------------------------------------------------- /src/style/index.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | height: 100%; 4 | width: 100%; 5 | padding: 0; 6 | margin: 0; 7 | background: #c7e0fb; 8 | font-family: "Helvetica Neue", arial, sans-serif; 9 | font-weight: 400; 10 | color: #444; 11 | -webkit-font-smoothing: antialiased; 12 | -moz-osx-font-smoothing: grayscale; 13 | } 14 | 15 | * { 16 | box-sizing: border-box; 17 | } 18 | 19 | #app { 20 | height: 100%; 21 | } 22 | -------------------------------------------------------------------------------- /src/components/DataView/cellStyles.js: -------------------------------------------------------------------------------- 1 | export const mainStyles = { 2 | matrix: { 3 | rx: 10, 4 | ry: 10, 5 | marginLeft: 5, 6 | marginBottom: 5, 7 | dx: 0, 8 | dy: 0 9 | }, 10 | array: { 11 | rx: 3, 12 | ry: 3, 13 | marginLeft: 0, 14 | marginBottom: 0, 15 | dx: 0, 16 | dy: 7 17 | }, 18 | nArray: { 19 | rx: 5, 20 | ry: 5, 21 | marginLeft: 2, 22 | marginBottom: 2, 23 | dx: 0, 24 | dy: 5 25 | } 26 | }; 27 | -------------------------------------------------------------------------------- /src/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Matrix Magic", 3 | "short_name": "Matrix Magic", 4 | "start_url": "/", 5 | "display": "standalone", 6 | "orientation": "portrait" 7 | // "background_color": "#fff", 8 | // "theme_color": "#673ab8" 9 | // "icons": [{ 10 | // "src": "/assets/icons/android-chrome-192x192.png", 11 | // "type": "image/png", 12 | // "sizes": "192x192" 13 | // }, 14 | // { 15 | // "src": "/assets/icons/android-chrome-512x512.png", 16 | // "type": "image/png", 17 | // "sizes": "512x512" 18 | // }] 19 | } 20 | -------------------------------------------------------------------------------- /src/lib/css.js: -------------------------------------------------------------------------------- 1 | import { css } from "emotion"; 2 | 3 | export const minDevice = styles => css` 4 | @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) { 5 | ${styles}; 6 | } 7 | `; 8 | 9 | export const medBrowser = styles => css` 10 | @media only screen and (min-width: 946px) and (max-width: 1151px) and (-webkit-min-device-pixel-ratio: 1) { 11 | ${styles}; 12 | } 13 | `; 14 | 15 | export const smallBrowser = styles => css` 16 | @media only screen and (min-width: 569px) and (max-width: 945px) and (-webkit-min-device-pixel-ratio: 1) { 17 | ${styles}; 18 | } 19 | `; 20 | -------------------------------------------------------------------------------- /src/components/TransformButtons.js: -------------------------------------------------------------------------------- 1 | import { h, Component } from "preact"; 2 | import { css } from "emotion"; 3 | import styled from "preact-emotion"; 4 | import Button from "./Button"; 5 | import { minDevice } from "../lib/css"; 6 | 7 | const handheld = minDevice(` 8 | margin: 1em 5px; 9 | justify-content: flex-start; 10 | order: 2; 11 | `); 12 | 13 | const ButtonBin = styled.div` 14 | display: flex; 15 | flex-wrap: wrap; 16 | flex-direction: row; 17 | justify-content: center; 18 | margin: 1em; 19 | ${handheld}; 20 | `; 21 | 22 | const TransformButtons = ({ transforms, action }) => { 23 | return ( 24 | 25 | {transforms.map((d, i) => { 26 | return