From 1008cf789b1a1d40b463f2f1559722e09aa2bf45 Mon Sep 17 00:00:00 2001 From: Nikhil Gupta Date: Sun, 5 Nov 2023 18:38:11 +0530 Subject: [PATCH] Cleans up web example --- examples/web/src/App.css | 38 ---- examples/web/src/App.test.tsx | 9 - examples/web/src/App.tsx | 195 ++++++++++++++++-- .../web/src/components/RadiantColorPanel.tsx | 77 ------- .../src/components/RadiantPropertiesPanel.tsx | 12 -- .../web/src/components/RadiantToolbar.tsx | 21 -- .../src/components/RadiantTransformPanel.tsx | 88 -------- .../lib/cjs/components/RadiantCanvas/index.js | 10 +- .../cjs/components/RadiantCanvas/index.js.map | 2 +- .../lib/esm/components/RadiantCanvas/index.js | 10 +- .../esm/components/RadiantCanvas/index.js.map | 2 +- .../src/components/RadiantCanvas/index.tsx | 18 +- 12 files changed, 190 insertions(+), 292 deletions(-) delete mode 100644 examples/web/src/App.css delete mode 100644 examples/web/src/App.test.tsx delete mode 100644 examples/web/src/components/RadiantColorPanel.tsx delete mode 100644 examples/web/src/components/RadiantPropertiesPanel.tsx delete mode 100644 examples/web/src/components/RadiantToolbar.tsx delete mode 100644 examples/web/src/components/RadiantTransformPanel.tsx diff --git a/examples/web/src/App.css b/examples/web/src/App.css deleted file mode 100644 index 74b5e05..0000000 --- a/examples/web/src/App.css +++ /dev/null @@ -1,38 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/examples/web/src/App.test.tsx b/examples/web/src/App.test.tsx deleted file mode 100644 index 2a68616..0000000 --- a/examples/web/src/App.test.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/examples/web/src/App.tsx b/examples/web/src/App.tsx index 95f5a54..3cbaac4 100644 --- a/examples/web/src/App.tsx +++ b/examples/web/src/App.tsx @@ -1,25 +1,184 @@ -import { RadiantToolbar } from './components/RadiantToolbar' -import { RadiantPropertiesPanel } from './components/RadiantPropertiesPanel' -import { RadiantCanvas, RadiantProvider } from 'radiant-sdk'; +import { RadiantCanvas, RadiantProvider, useCurrentController } from 'radiant-sdk'; +import { Box, Button, ButtonGroup, Stack, Typography } from '@mui/material'; +import { useEffect, useState } from 'react'; + +function componentToHex(c: number) { + var hex = c.toString(16) + return hex.length === 1 ? '0' + hex : hex +} + +function rgbToHex(r: number, g: number, b: number) { + return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b) +} + +function hexTorgba(hex: string) { + if (hex.length === 4) { + hex = hex.replace(/([^#])/g, '$1$1') + } + return [ + parseInt(hex.substr(1, 2), 16), + parseInt(hex.substr(3, 2), 16), + parseInt(hex.substr(5, 2), 16), + 255, + ] +} + +const Tools = () => { + const { controller } = useCurrentController(); + + const select = async () => { + controller && controller.activateTool(0); + } + + const rect = async () => { + controller && controller.activateTool(1); + } + + return ( + + Tools: + + + + + + ) +} + +const Transform = () => { + const { controller, response } = useCurrentController(); + + const [nodeId, setNodeId] = useState(0) + const [position, setPosition] = useState({ x: 0, y: 0 }) + const [scale, setScale] = useState({ x: 1, y: 1 }) + + useEffect(() => { + if (response?.Selected) { + let node = response.Selected.node.Rectangle; + setNodeId(node.id) + let transform = node.transform + setPosition({ x: transform.position[0], y: transform.position[1] }) + setScale({ x: transform.scale[0], y: transform.scale[1] }) + // setRotation(transform.rotation) + } else if (response?.TransformUpdated) { + let transform = response.TransformUpdated + setNodeId(transform.id) + setPosition({ x: transform.position[0], y: transform.position[1] }) + setScale({ x: transform.scale[0], y: transform.scale[1] }) + // setRotation(transform.rotation); + } + }, [response]) + + useEffect(() => { + controller && controller.setTransform(nodeId, [position.x, position.y], [scale.x, scale.y]); + }, [controller, nodeId, position, scale]) + + return ( + + + Position: + { + setPosition({ + x: parseFloat(e.target.value), + y: position.y, + }) + }} + /> + { + setPosition({ + x: position.x, + y: parseFloat(e.target.value), + }) + }} + /> + + + + Scale: + { + setScale({ x: parseFloat(e.target.value), y: scale.y }) + }} + /> + { + setScale({ x: scale.x, y: parseFloat(e.target.value) }) + }} + /> + + + ) +} + +const Color = () => { + const { controller, response } = useCurrentController(); + + const [nodeId, setNodeId] = useState(0) + const [fillColor, setFillColor] = useState('#000000') + const [strokeColor, setStrokeColor] = useState('#000000') + + useEffect(() => { + if (response?.Selected) { + let node = response.Selected.node.Rectangle + setNodeId(node.id) + let { fill_color, stroke_color } = node.color + setFillColor(rgbToHex(fill_color[0], fill_color[1], fill_color[2])) + setStrokeColor( + rgbToHex(stroke_color[0], stroke_color[1], stroke_color[2]) + ) + } + }, [response]) + + useEffect(() => { + controller && controller.setFillColor(nodeId, hexTorgba(fillColor)); + }, [controller, fillColor, nodeId]) + + useEffect(() => { + controller && controller.setStrokeColor(nodeId, hexTorgba(strokeColor)); + }, [controller, strokeColor, nodeId]) + + return ( + + Color: + { + setFillColor(e.target.value) + }} + /> + { + setStrokeColor(e.target.value) + }} + /> + + ) +} function App() { return ( -
- - -
- + + + + + + + + ) } diff --git a/examples/web/src/components/RadiantColorPanel.tsx b/examples/web/src/components/RadiantColorPanel.tsx deleted file mode 100644 index f73a311..0000000 --- a/examples/web/src/components/RadiantColorPanel.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import { useEffect, useState } from 'react' -import { useCurrentController } from 'radiant-sdk' - -function componentToHex(c: number) { - var hex = c.toString(16) - return hex.length === 1 ? '0' + hex : hex -} - -function rgbToHex(r: number, g: number, b: number) { - return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b) -} - -function hexTorgba(hex: string) { - if (hex.length === 4) { - hex = hex.replace(/([^#])/g, '$1$1') - } - return [ - parseInt(hex.substr(1, 2), 16), - parseInt(hex.substr(3, 2), 16), - parseInt(hex.substr(5, 2), 16), - 255, - ] -} - -export function RadiantColorPanel() { - const { controller, response } = useCurrentController(); - - const [nodeId, setNodeId] = useState(0) - const [fillColor, setFillColor] = useState('#000000') - const [strokeColor, setStrokeColor] = useState('#000000') - - useEffect(() => { - if (response?.Selected) { - let node = response.Selected.node.Rectangle - setNodeId(node.id) - let { fill_color, stroke_color } = node.color - setFillColor(rgbToHex(fill_color[0], fill_color[1], fill_color[2])) - setStrokeColor( - rgbToHex(stroke_color[0], stroke_color[1], stroke_color[2]) - ) - } - }, [response]) - - useEffect(() => { - controller && controller.setFillColor(nodeId, hexTorgba(fillColor)); - }, [controller, fillColor, nodeId]) - - useEffect(() => { - controller && controller.setStrokeColor(nodeId, hexTorgba(strokeColor)); - }, [controller, strokeColor, nodeId]) - - return ( -
-

Color

-
- - { - setFillColor(e.target.value) - }} - /> -
-
- - { - setStrokeColor(e.target.value) - }} - /> -
-
- ) -} diff --git a/examples/web/src/components/RadiantPropertiesPanel.tsx b/examples/web/src/components/RadiantPropertiesPanel.tsx deleted file mode 100644 index c588399..0000000 --- a/examples/web/src/components/RadiantPropertiesPanel.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { RadiantColorPanel } from './RadiantColorPanel' -import { RadiantTransformPanel } from './RadiantTransformPanel' -import { Stack } from '@mui/material' - -export function RadiantPropertiesPanel() { - return ( - - - - - ) -} diff --git a/examples/web/src/components/RadiantToolbar.tsx b/examples/web/src/components/RadiantToolbar.tsx deleted file mode 100644 index ce23792..0000000 --- a/examples/web/src/components/RadiantToolbar.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { Button, ButtonGroup } from "@mui/material"; -import { useCurrentController } from 'radiant-sdk' - -export function RadiantToolbar() { - const { controller } = useCurrentController(); - - const select = async () => { - controller && controller.activateTool(0); - } - - const rect = async () => { - controller && controller.activateTool(1); - } - - return ( - - - - - ); -} diff --git a/examples/web/src/components/RadiantTransformPanel.tsx b/examples/web/src/components/RadiantTransformPanel.tsx deleted file mode 100644 index 43ac859..0000000 --- a/examples/web/src/components/RadiantTransformPanel.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import { useEffect, useState } from 'react' -import { useCurrentController } from 'radiant-sdk' - -export function RadiantTransformPanel() { - const { controller, response } = useCurrentController(); - - const [nodeId, setNodeId] = useState(0) - const [position, setPosition] = useState({ x: 0, y: 0 }) - const [scale, setScale] = useState({ x: 1, y: 1 }) - const [rotation, setRotation] = useState(0) - - useEffect(() => { - if (response?.Selected) { - let node = response.Selected.node.Rectangle; - setNodeId(node.id) - let transform = node.transform - setPosition({ x: transform.position[0], y: transform.position[1] }) - setScale({ x: transform.scale[0], y: transform.scale[1] }) - setRotation(transform.rotation) - } else if (response?.TransformUpdated) { - let transform = response.TransformUpdated - setNodeId(transform.id) - setPosition({ x: transform.position[0], y: transform.position[1] }) - setScale({ x: transform.scale[0], y: transform.scale[1] }) - // setRotation(transform.rotation); - } - }, [response]) - - useEffect(() => { - controller && controller.setTransform(nodeId, [position.x, position.y], [scale.x, scale.y]); - }, [controller, nodeId, position, scale]) - - return ( -
-

Transform

-
- - { - setPosition({ - x: parseFloat(e.target.value), - y: position.y, - }) - }} - /> - { - setPosition({ - x: position.x, - y: parseFloat(e.target.value), - }) - }} - /> -
-
- - { - setScale({ x: parseFloat(e.target.value), y: scale.y }) - }} - /> - { - setScale({ x: scale.x, y: parseFloat(e.target.value) }) - }} - /> -
-
- - { - setRotation(parseFloat(e.target.value)) - }} - /> -
-
- ) -} diff --git a/sdk/web/lib/cjs/components/RadiantCanvas/index.js b/sdk/web/lib/cjs/components/RadiantCanvas/index.js index 47b3113..fae273f 100644 --- a/sdk/web/lib/cjs/components/RadiantCanvas/index.js +++ b/sdk/web/lib/cjs/components/RadiantCanvas/index.js @@ -4,15 +4,7 @@ exports.RadiantCanvas = void 0; const tslib_1 = require("tslib"); const react_1 = tslib_1.__importDefault(require("react")); const RadiantCanvas = () => { - return (react_1.default.createElement("div", { id: "canvas-container", style: { - position: 'absolute', - zIndex: 0, - display: 'flex', - alignItems: 'center', - height: '100%', - justifyContent: 'center', - width: '100%', - } })); + return (react_1.default.createElement("div", { id: "canvas-container" })); }; exports.RadiantCanvas = RadiantCanvas; //# sourceMappingURL=index.js.map \ No newline at end of file diff --git a/sdk/web/lib/cjs/components/RadiantCanvas/index.js.map b/sdk/web/lib/cjs/components/RadiantCanvas/index.js.map index 65fb1c1..789fb6c 100644 --- a/sdk/web/lib/cjs/components/RadiantCanvas/index.js.map +++ b/sdk/web/lib/cjs/components/RadiantCanvas/index.js.map @@ -1 +1 @@ -{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/RadiantCanvas/index.tsx"],"names":[],"mappings":";;;;AAAA,0DAA0C;AAEnC,MAAM,aAAa,GAAG,GAAG,EAAE;IAC9B,OAAO,CACH,uCACI,EAAE,EAAC,kBAAkB,EACrB,KAAK,EAAE;YACH,QAAQ,EAAE,UAAU;YACpB,MAAM,EAAE,CAAC;YACT,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,MAAM,EAAE,MAAM;YACd,cAAc,EAAE,QAAQ;YACxB,KAAK,EAAE,MAAM;SAChB,GACH,CACL,CAAC;AACN,CAAC,CAAC;AAfW,QAAA,aAAa,iBAexB","sourcesContent":["import React, { forwardRef } from \"react\";\n\nexport const RadiantCanvas = () => {\n return (\n \n );\n};\n"]} \ No newline at end of file +{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/RadiantCanvas/index.tsx"],"names":[],"mappings":";;;;AAAA,0DAA0C;AAEnC,MAAM,aAAa,GAAG,GAAG,EAAE;IAC9B,OAAO,CACH,uCACI,EAAE,EAAC,kBAAkB,GAUvB,CACL,CAAC;AACN,CAAC,CAAC;AAfW,QAAA,aAAa,iBAexB","sourcesContent":["import React, { forwardRef } from \"react\";\n\nexport const RadiantCanvas = () => {\n return (\n \n );\n};\n"]} \ No newline at end of file diff --git a/sdk/web/lib/esm/components/RadiantCanvas/index.js b/sdk/web/lib/esm/components/RadiantCanvas/index.js index 44e46c7..9cd88ab 100644 --- a/sdk/web/lib/esm/components/RadiantCanvas/index.js +++ b/sdk/web/lib/esm/components/RadiantCanvas/index.js @@ -1,13 +1,5 @@ import React from "react"; export const RadiantCanvas = () => { - return (React.createElement("div", { id: "canvas-container", style: { - position: 'absolute', - zIndex: 0, - display: 'flex', - alignItems: 'center', - height: '100%', - justifyContent: 'center', - width: '100%', - } })); + return (React.createElement("div", { id: "canvas-container" })); }; //# sourceMappingURL=index.js.map \ No newline at end of file diff --git a/sdk/web/lib/esm/components/RadiantCanvas/index.js.map b/sdk/web/lib/esm/components/RadiantCanvas/index.js.map index b5c8b51..97f9195 100644 --- a/sdk/web/lib/esm/components/RadiantCanvas/index.js.map +++ b/sdk/web/lib/esm/components/RadiantCanvas/index.js.map @@ -1 +1 @@ -{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/RadiantCanvas/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IAC9B,OAAO,CACH,6BACI,EAAE,EAAC,kBAAkB,EACrB,KAAK,EAAE;YACH,QAAQ,EAAE,UAAU;YACpB,MAAM,EAAE,CAAC;YACT,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,MAAM,EAAE,MAAM;YACd,cAAc,EAAE,QAAQ;YACxB,KAAK,EAAE,MAAM;SAChB,GACH,CACL,CAAC;AACN,CAAC,CAAC","sourcesContent":["import React, { forwardRef } from \"react\";\n\nexport const RadiantCanvas = () => {\n return (\n \n );\n};\n"]} \ No newline at end of file +{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/RadiantCanvas/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IAC9B,OAAO,CACH,6BACI,EAAE,EAAC,kBAAkB,GAUvB,CACL,CAAC;AACN,CAAC,CAAC","sourcesContent":["import React, { forwardRef } from \"react\";\n\nexport const RadiantCanvas = () => {\n return (\n \n );\n};\n"]} \ No newline at end of file diff --git a/sdk/web/src/components/RadiantCanvas/index.tsx b/sdk/web/src/components/RadiantCanvas/index.tsx index c3623a5..82d8d9e 100644 --- a/sdk/web/src/components/RadiantCanvas/index.tsx +++ b/sdk/web/src/components/RadiantCanvas/index.tsx @@ -4,15 +4,15 @@ export const RadiantCanvas = () => { return (
); };