Add LICESE and update

LICENSE-2.0.txt

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package.json

@@ -3,6 +3,7 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
+  "license": "apache-2.0",
   "lint-staged": {
     "*": [
       "node license-emit.js"
@@ -31,9 +32,12 @@
     "@mui/icons-material": "^5.14.1",
     "@mui/material": "^5.14.1",
     "@mui/styled-engine-sc": "^5.12.0",
+    "dexie": "^3.2.4",
+    "dexie-react-hooks": "^1.1.6",
     "jotai": "^2.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.14.2",
     "styled-components": "^6.0.4",
     "ts-pattern": "^5.0.4",
     "zod": "^3.21.4"

pnpm-lock.yaml

@@ -20,6 +20,12 @@ dependencies:
   '@mui/styled-engine-sc':
     specifier: ^5.12.0
     version: 5.12.0(styled-components@6.0.4)
+  dexie:
+    specifier: ^3.2.4
+    version: 3.2.4
+  dexie-react-hooks:
+    specifier: ^1.1.6
+    version: 1.1.6(@types/react@18.2.14)(dexie@3.2.4)(react@18.2.0)
   jotai:
     specifier: ^2.2.2
     version: 2.2.2(react@18.2.0)
@@ -29,6 +35,9 @@ dependencies:
   react-dom:
     specifier: ^18.2.0
     version: 18.2.0(react@18.2.0)
+  react-router-dom:
+    specifier: ^6.14.2
+    version: 6.14.2(react-dom@18.2.0)(react@18.2.0)
   styled-components:
     specifier: ^6.0.4
     version: 6.0.4(react-dom@18.2.0)(react@18.2.0)
@@ -2001,6 +2010,11 @@ packages:
     resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
     dev: false
 
+  /@remix-run/router@1.7.2:
+    resolution: {integrity: sha512-7Lcn7IqGMV+vizMPoEl5F0XDshcdDYtMI6uJLQdQz5CfZAwy3vvGKYSUk789qndt5dEC4HfSjviSYlSoHGL2+A==}
+    engines: {node: '>=14'}
+    dev: false
+
   /@sindresorhus/is@5.5.2:
     resolution: {integrity: sha512-8ZMK+V6YpeZFfW6hU9uAeWVuq8v3t7BaG276gIO+kVqnAcLrHCXdFUOf7kgouyfAarkZtuavIqY3RsXTsTWviw==}
     engines: {node: '>=14.16'}
@@ -2725,6 +2739,23 @@ packages:
       object-keys: 1.1.1
     dev: true
 
+  /dexie-react-hooks@1.1.6(@types/react@18.2.14)(dexie@3.2.4)(react@18.2.0):
+    resolution: {integrity: sha512-xSblWtmPwhafWNWMECsW7zMMmBu8goH3QqTxEfwBNoNG1mgsM0oFclippev7ss9HhKICqBwTjgqpscci5Ed4mA==}
+    peerDependencies:
+      '@types/react': '>=16'
+      dexie: ^3.2 || ^4.0.1-alpha
+      react: '>=16'
+    dependencies:
+      '@types/react': 18.2.14
+      dexie: 3.2.4
+      react: 18.2.0
+    dev: false
+
+  /dexie@3.2.4:
+    resolution: {integrity: sha512-VKoTQRSv7+RnffpOJ3Dh6ozknBqzWw/F3iqMdsZg958R0AS8AnY9x9d1lbwENr0gzeGJHXKcGhAMRaqys6SxqA==}
+    engines: {node: '>=6.0'}
+    dev: false
+
   /dir-glob@3.0.1:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
@@ -4088,6 +4119,29 @@ packages:
     resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
     dev: false
 
+  /react-router-dom@6.14.2(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-5pWX0jdKR48XFZBuJqHosX3AAHjRAzygouMTyimnBPOLdY3WjzUSKhus2FVMihUFWzeLebDgr4r8UeQFAct7Bg==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      react: '>=16.8'
+      react-dom: '>=16.8'
+    dependencies:
+      '@remix-run/router': 1.7.2
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-router: 6.14.2(react@18.2.0)
+    dev: false
+
+  /react-router@6.14.2(react@18.2.0):
+    resolution: {integrity: sha512-09Zss2dE2z+T1D03IheqAFtK4UzQyX8nFPWx6jkwdYzGLXd5ie06A6ezS2fO6zJfEb/SpG6UocN2O1hfD+2urQ==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      react: '>=16.8'
+    dependencies:
+      '@remix-run/router': 1.7.2
+      react: 18.2.0
+    dev: false
+
   /react-transition-group@4.4.5(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
     peerDependencies:

src/Components/Excalidraw.tsx

@@ -3,6 +3,7 @@ import ExcalidrawContainer from './Excalidraw/Container';
 import { useCallback, useState } from 'react';
 import Sidebar, { SidebarVariant } from './Excalidraw/Sidebar';
 import RightTopUI from './Excalidraw/RightTopUI';
+import MainMenu from './Excalidraw/MainMenu';
 
 export const ExcalidrawMain = () => {
   const [excalidrawAPI, setExcalidrawAPI] = useState<ExcalidrawImperativeAPI>();
@@ -33,7 +34,9 @@ export const ExcalidrawMain = () => {
       renderSidebar={() => {
         return <Sidebar variant={sidebarVariant} variantProps={{ onClose }} />;
       }}
-    />
+    >
+      <MainMenu />
+    </ExcalidrawContainer>
   );
 };
 

src/Components/Excalidraw/Container.tsx

@@ -60,7 +60,9 @@ export const ExcalidrawContainer: FC<ExcalidrawContainerProps> = (props) => {
 
   return (
     <ExcalidrawBox $scale={scale} $windowRect={windowRect}>
-      <Excalidraw {...props} ref={props.refCallback} />
+      <Excalidraw {...props} ref={props.refCallback}>
+        {props.children}
+      </Excalidraw>
     </ExcalidrawBox>
   );
 };

src/Components/Excalidraw/MainMenu.tsx

@@ -0,0 +1,15 @@
+import { MainMenuLink, MainMenuProvider } from '@/Components/Utilities';
+import { MainMenu as MainMenuBase } from '@excalidraw/excalidraw';
+
+const MainMenu = () => {
+  return (
+    <MainMenuProvider>
+      <MainMenuBase.DefaultItems.ToggleTheme />
+      <MainMenuBase.DefaultItems.Export />
+      <MainMenuBase.DefaultItems.SaveAsImage />
+      <MainMenuLink href="/license">License</MainMenuLink>
+    </MainMenuProvider>
+  );
+};
+
+export default MainMenu;

src/Components/Excalidraw/RightTopUI.tsx

@@ -3,6 +3,7 @@ import { FC, useCallback } from 'react';
 import { ToggleButton, ToggleButtonGroup } from '@/Components/Utilities';
 import { SidebarVariant, SidebarVariantSchema } from './Sidebar';
 import { z } from 'zod';
+import { LiveCollaborationTrigger } from '@excalidraw/excalidraw';
 
 export const RightTopUIPropsScheme = z.object({
   setSidebarVariant: z.function().args(SidebarVariantSchema).returns(z.void()),
@@ -29,14 +30,25 @@ const RightTopUI: FC<RightTopUIProps> = (props) => {
   );
 
   return (
-    <ToggleButtonGroup
+    <>
-      exclusive
+      <LiveCollaborationTrigger
-      onChange={(_, value: SidebarVariant) => sidebarToggle(value)}
+        isCollaborating={false}
-      disabled={props.toggleState}
+        onSelect={() => console.log('nyya')}
-    >
+      />
-      <ToggleButton value="general">General</ToggleButton>
+      <ToggleButtonGroup
-      <ToggleButton value="collaboration">Collaboration</ToggleButton>
+        exclusive
-    </ToggleButtonGroup>
+        onChange={(_, value: SidebarVariant) => sidebarToggle(value)}
+        disabled={props.toggleState}
+        size="small"
+      >
+        <ToggleButton size="small" value="general">
+          General
+        </ToggleButton>
+        <ToggleButton size="small" value="collaboration">
+          Collaboration
+        </ToggleButton>
+      </ToggleButtonGroup>
+    </>
   );
 };
 

src/Components/Utilities.tsx

@@ -4,11 +4,14 @@ import {
   ToggleButtonGroup as ToggleButtonGroupBase,
   ToggleButton as ToggleButtonBase,
 } from '@mui/material';
-import { Sidebar } from '@excalidraw/excalidraw';
+import { MainMenu, Sidebar } from '@excalidraw/excalidraw';
 
 export const SidebarProvider = styled(Sidebar)``;
 export const SidebarHeader = styled(Sidebar.Header)``;
 
+export const MainMenuProvider = styled(MainMenu)``;
+export const MainMenuLink = styled(MainMenu.ItemLink)``;
+
 export const Button = styled(ButtonBase)``;
 
 export const ToggleButtonGroup = styled(ToggleButtonGroupBase)``;

src/constants.ts

@@ -0,0 +1,18 @@
+export const APP_NAME = 'Excalidraw P2P WebRTC';
+export const AUTHOR = ['Satsuki Akiba <anosatsuk124@gmail.com>'];
+export const LICENSE = 'Apache-2.0';
+export const LICENSE_TEXT = `
+Copyright ${new Date().getFullYear()} ${AUTHOR.join(', ')}
+
+Licensed under the Apache License, Version 2.0(the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+`;

src/main.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import App from './App.tsx';
 import './index.css';
+import { RouterProvider } from 'react-router-dom';
+import router from './routes';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </React.StrictMode>
 );

src/routes.tsx

@@ -0,0 +1,19 @@
+import { createBrowserRouter } from 'react-router-dom';
+import type { RouteObject } from 'react-router-dom';
+import App from '@/routes/App';
+import License from '@/routes/License';
+
+const routes: RouteObject[] = [
+  {
+    path: '/',
+    element: <App />,
+  },
+  {
+    path: '/license',
+    element: <License />,
+  },
+];
+
+const router = createBrowserRouter(routes);
+
+export default router;

src/routes/App.tsx

@@ -1,5 +1,5 @@
-import styled from 'styled-components';
 import ExcalidrawMain from '@/Components/Excalidraw';
+import styled from 'styled-components';
 
 export const Main = styled.div`
   overflow: hidden;

src/routes/License.tsx

@@ -0,0 +1,75 @@
+import { LICENSE_TEXT } from '@/constants';
+import {
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography,
+} from '@mui/material';
+import styled from 'styled-components';
+import licenses from '@/assets/licenses.json';
+import { Licenses } from '@/types/license';
+
+export const Main = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const SelfLicense = () => {
+  return (
+    <Paper
+      variant="outlined"
+      sx={{ whiteSpace: 'pre-wrap', textAlign: 'center' }}
+    >
+      <Typography>{LICENSE_TEXT}</Typography>
+    </Paper>
+  );
+};
+
+const ExternalLicensesTable = () => {
+  const props = Licenses.parse(licenses);
+
+  return (
+    <TableContainer component={Paper} sx={{ textAlign: 'center' }}>
+      <Typography>Used Assets</Typography>
+      <Table size="small" aria-label="Used Assets">
+        <TableHead>
+          <TableRow>
+            <TableCell>Name</TableCell>
+            <TableCell align="right">License Type</TableCell>
+            <TableCell align="right">Author</TableCell>
+            <TableCell align="right">Link</TableCell>
+            <TableCell align="right">Installed from</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {props.map((row) => (
+            <TableRow key={row.name}>
+              <TableCell component="th" scope="row">
+                {row.name}
+              </TableCell>
+              <TableCell align="right">{row.licenseType}</TableCell>
+              <TableCell align="right">{row.author}</TableCell>
+              <TableCell align="right">{row.link}</TableCell>
+              <TableCell align="right">{row.installedFrom}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+
+const LicensePage = () => {
+  return (
+    <Main>
+      <SelfLicense />
+      <ExternalLicensesTable />
+    </Main>
+  );
+};
+
+export default LicensePage;

src/types/license.ts

@@ -1,13 +1,14 @@
 import { z } from 'zod';
 
-export const License = z.array(
+export const License = z.object({
-  z.object({
+  name: z.string(),
-    name: z.string(),
+  licenseType: z.string(),
-    licenseType: z.string(),
+  author: z.string(),
-    author: z.string(),
+  link: z.string().url().optional(),
-    link: z.string().url().optional(),
+  installedFrom: z.string().url().optional(),
-    installedFrom: z.string().url().optional(),
+});
-  })
-);
 
+export const Licenses = z.array(License);
+
+export type Licenses = z.infer<typeof Licenses>;
 export type License = z.infer<typeof License>;