update canvas,

03_source/mobile/src/pages/DemoReactDrawingCanvas/components/ExploreContainer.scss

@@ -0,0 +1,24 @@
+.container {
+  text-align: center;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.container strong {
+  font-size: 20px;
+  line-height: 26px;
+}
+
+.container p {
+  font-size: 16px;
+  line-height: 22px;
+  color: #8c8c8c;
+  margin: 0;
+}
+
+.container a {
+  text-decoration: none;
+}

03_source/mobile/src/pages/DemoReactDrawingCanvas/components/ExploreContainer.tsx

@@ -0,0 +1,23 @@
+import './ExploreContainer.scss';
+
+interface ContainerProps {}
+
+const ExploreContainer: React.FC<ContainerProps> = () => {
+  return (
+    <div className="container">
+      <strong>Ready to create an app?</strong>
+      <p>
+        Start with Ionic{' '}
+        <a
+          target="_blank"
+          rel="noopener noreferrer"
+          href="https://ionicframework.com/docs/components"
+        >
+          UI Components
+        </a>
+      </p>
+    </div>
+  );
+};
+
+export default ExploreContainer;

03_source/mobile/src/pages/DemoReactDrawingCanvas/index.tsx

@@ -1,38 +1,19 @@
-import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
+import { IonRouterOutlet, IonTabs } from '@ionic/react';
 
-import { cloudOutline, searchOutline } from 'ionicons/icons';
 import { Route, Redirect } from 'react-router';
 
-import Tab1 from './AppPages/Tab1';
+import Home from './pages/Home';
-import Tab2 from './AppPages/Tab2';
-
-import './style.scss';
 
 function DemoReactDrawingCanvas() {
   return (
     <IonTabs>
       <IonRouterOutlet>
-        <Route exact path="/demo-react-drawing-canvas/tab1">
+        <Route exact path="/demo-react-drawing-canvas/home">
-          <Tab1 />
+          <Home />
-        </Route>
-        <Route exact path="/demo-react-drawing-canvas/tab2">
-          <Tab2 />
         </Route>
 
-        <Redirect exact path="/demo-react-drawing-canvas" to="/demo-react-drawing-canvas/tab1" />
+        <Redirect exact path="/demo-react-drawing-canvas" to="/demo-react-drawing-canvas/home" />
       </IonRouterOutlet>
-
-      {/*  */}
-      <IonTabBar slot="bottom">
-        <IonTabButton tab="tab1" href="/demo-react-drawing-canvas/tab1">
-          <IonIcon icon={cloudOutline} />
-          <IonLabel>Dashboard</IonLabel>
-        </IonTabButton>
-        <IonTabButton tab="tab2" href="/demo-react-drawing-canvas/tab2">
-          <IonIcon icon={searchOutline} />
-          <IonLabel>Search</IonLabel>
-        </IonTabButton>
-      </IonTabBar>
     </IonTabs>
   );
 }

03_source/mobile/src/pages/DemoReactDrawingCanvas/module.d.ts

@@ -0,0 +1,9 @@
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}

03_source/mobile/src/pages/DemoReactDrawingCanvas/pages/Home.module.scss

@@ -0,0 +1,17 @@
+.canvasOptions {
+  position: absolute;
+  z-index: 99999;
+  width: 100%;
+  background-color: white !important;
+  border-bottom: 1px solid rgb(230, 230, 230);
+}
+
+.fixed {
+  position: fixed;
+  background-color: white;
+  border-bottom: 1px solid rgb(204, 204, 204);
+}
+
+.picker {
+  width: 100% !important;
+}

03_source/mobile/src/pages/DemoReactDrawingCanvas/pages/Home.tsx

@@ -0,0 +1,114 @@
+import {
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonInput,
+  IonButton,
+  IonCol,
+  IonContent,
+  IonGrid,
+  IonHeader,
+  IonPage,
+  IonRow,
+  IonTitle,
+  IonToolbar,
+  Platform,
+  IonButtons,
+  useIonRouter,
+} from '@ionic/react';
+import { arrowUndoOutline, brushOutline, chevronBackOutline, closeOutline } from 'ionicons/icons';
+import React, { useState } from 'react';
+import styles from './Home.module.scss';
+
+import CanvasDraw from 'react-canvas-draw';
+import { SwatchesPicker } from 'react-color';
+
+const Home = (): React.JSX.Element => {
+  var canvasRef = '';
+  const [brushColor, setBrushColor] = useState('#000000');
+  const [brushSize, setBrushSize] = useState(5);
+  const [showColorPicker, setShowColorPicker] = useState(false);
+
+  const handleColorChange = (colorValue) => {
+    setBrushColor(colorValue.hex);
+  };
+
+  const router = useIonRouter();
+  function handleBackClick() {
+    router.goBack();
+  }
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Ionic Drawing Canvas</IonTitle>
+          <IonButtons slot="start">
+            <IonButton onClick={() => handleBackClick()}>
+              <IonIcon icon={chevronBackOutline} color="primary" />
+            </IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <div className={styles.canvasOptions}>
+          <IonGrid className={styles.fixed}>
+            <IonRow>
+              <IonCol size={showColorPicker ? '12' : '2'}>
+                <IonButton
+                  style={{ backgroundColor: brushColor }}
+                  color={brushColor}
+                  expand="block"
+                  onClick={() => setShowColorPicker(!showColorPicker)}
+                >
+                  <IonIcon icon={brushOutline} />
+                </IonButton>
+
+                {showColorPicker && (
+                  <SwatchesPicker onChange={handleColorChange} className={styles.picker} />
+                )}
+              </IonCol>
+
+              {!showColorPicker && (
+                <>
+                  <IonCol size="4">
+                    <IonItem lines="none">
+                      <IonLabel position="inset">Size</IonLabel>
+                      <IonInput
+                        type="number"
+                        value={brushSize}
+                        onIonChange={(e) => setBrushSize(parseInt(e.target.value))}
+                      />
+                    </IonItem>
+                  </IonCol>
+
+                  <IonCol size="3">
+                    <IonButton expand="full" color="primary" onClick={() => canvasRef.undo()}>
+                      <IonIcon icon={arrowUndoOutline} />
+                    </IonButton>
+                  </IonCol>
+
+                  <IonCol size="3">
+                    <IonButton expand="full" color="primary" onClick={() => canvasRef.clear()}>
+                      <IonIcon icon={closeOutline} />
+                    </IonButton>
+                  </IonCol>
+                </>
+              )}
+            </IonRow>
+          </IonGrid>
+        </div>
+        <CanvasDraw
+          brushRadius={brushSize}
+          lazyRadius={0}
+          canvasHeight={window.innerHeight}
+          canvasWidth={window.innerWidth}
+          brushColor={brushColor}
+          ref={(canvasDraw) => (canvasRef = canvasDraw)}
+        />
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Home;

03_source/mobile/src/pages/DemoReactDrawingCanvas/style.scss

@@ -1,103 +0,0 @@
-#about-page {
-  ion-toolbar {
-    position: absolute;
-
-    top: 0;
-    left: 0;
-    right: 0;
-
-    --background: transparent;
-    --color: white;
-  }
-
-  ion-toolbar ion-back-button,
-  ion-toolbar ion-button,
-  ion-toolbar ion-menu-button {
-    --color: white;
-  }
-
-  .about-header {
-    position: relative;
-
-    width: 100%;
-    height: 30%;
-  }
-
-  .about-header .about-image {
-    position: absolute;
-
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-
-    background-position: center;
-    background-size: cover;
-    background-repeat: no-repeat;
-
-    opacity: 0;
-
-    transition: opacity 500ms ease-in-out;
-  }
-
-  .about-header .madison {
-    background-image: url('/assets/WeatherDemo/img/about/madison.jpg');
-  }
-
-  .about-header .austin {
-    background-image: url('/assets/WeatherDemo/img/about/austin.jpg');
-  }
-
-  .about-header .chicago {
-    background-image: url('/assets/WeatherDemo/img/about/chicago.jpg');
-  }
-
-  .about-header .seattle {
-    background-image: url('/assets/WeatherDemo/img/about/seattle.jpg');
-  }
-
-  .about-info {
-    position: relative;
-    margin-top: -10px;
-    border-radius: 10px;
-    background: var(--ion-background-color, #fff);
-    z-index: 2; // display rounded border above header image
-  }
-
-  .about-info h3 {
-    margin-top: 0;
-  }
-
-  .about-info ion-list {
-    padding-top: 0;
-  }
-
-  .about-info p {
-    line-height: 130%;
-
-    color: var(--ion-color-dark);
-  }
-
-  .about-info ion-icon {
-    margin-inline-end: 32px;
-  }
-
-  /*
-   * iOS Only
-   */
-
-  .ios .about-info {
-    --ion-padding: 19px;
-  }
-
-  .ios .about-info h3 {
-    font-weight: 700;
-  }
-}
-
-#date-input-popover {
-  --offset-y: -var(--ion-safe-area-bottom);
-
-  --max-width: 90%;
-  --width: 336px;
-}

03_source/mobile/src/pages/DemoReactDrawingCanvas/theme/variables.scss

@@ -0,0 +1,79 @@
+.demo-react-drawing-canvas {
+  /* Ionic Variables and Theming. For more info, please see:
+http://ionicframework.com/docs/theming/ */
+
+  /** Ionic CSS Variables **/
+  :root {
+    /** primary **/
+    --ion-color-primary: #3880ff;
+    --ion-color-primary-rgb: 56, 128, 255;
+    --ion-color-primary-contrast: #ffffff;
+    --ion-color-primary-contrast-rgb: 255, 255, 255;
+    --ion-color-primary-shade: #3171e0;
+    --ion-color-primary-tint: #4c8dff;
+
+    /** secondary **/
+    --ion-color-secondary: #3dc2ff;
+    --ion-color-secondary-rgb: 61, 194, 255;
+    --ion-color-secondary-contrast: #ffffff;
+    --ion-color-secondary-contrast-rgb: 255, 255, 255;
+    --ion-color-secondary-shade: #36abe0;
+    --ion-color-secondary-tint: #50c8ff;
+
+    /** tertiary **/
+    --ion-color-tertiary: #5260ff;
+    --ion-color-tertiary-rgb: 82, 96, 255;
+    --ion-color-tertiary-contrast: #ffffff;
+    --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+    --ion-color-tertiary-shade: #4854e0;
+    --ion-color-tertiary-tint: #6370ff;
+
+    /** success **/
+    --ion-color-success: #2dd36f;
+    --ion-color-success-rgb: 45, 211, 111;
+    --ion-color-success-contrast: #ffffff;
+    --ion-color-success-contrast-rgb: 255, 255, 255;
+    --ion-color-success-shade: #28ba62;
+    --ion-color-success-tint: #42d77d;
+
+    /** warning **/
+    --ion-color-warning: #ffc409;
+    --ion-color-warning-rgb: 255, 196, 9;
+    --ion-color-warning-contrast: #000000;
+    --ion-color-warning-contrast-rgb: 0, 0, 0;
+    --ion-color-warning-shade: #e0ac08;
+    --ion-color-warning-tint: #ffca22;
+
+    /** danger **/
+    --ion-color-danger: #eb445a;
+    --ion-color-danger-rgb: 235, 68, 90;
+    --ion-color-danger-contrast: #ffffff;
+    --ion-color-danger-contrast-rgb: 255, 255, 255;
+    --ion-color-danger-shade: #cf3c4f;
+    --ion-color-danger-tint: #ed576b;
+
+    /** dark **/
+    --ion-color-dark: #222428;
+    --ion-color-dark-rgb: 34, 36, 40;
+    --ion-color-dark-contrast: #ffffff;
+    --ion-color-dark-contrast-rgb: 255, 255, 255;
+    --ion-color-dark-shade: #1e2023;
+    --ion-color-dark-tint: #383a3e;
+
+    /** medium **/
+    --ion-color-medium: #92949c;
+    --ion-color-medium-rgb: 146, 148, 156;
+    --ion-color-medium-contrast: #ffffff;
+    --ion-color-medium-contrast-rgb: 255, 255, 255;
+    --ion-color-medium-shade: #808289;
+    --ion-color-medium-tint: #9d9fa6;
+
+    /** light **/
+    --ion-color-light: #f4f5f8;
+    --ion-color-light-rgb: 244, 245, 248;
+    --ion-color-light-contrast: #000000;
+    --ion-color-light-contrast-rgb: 0, 0, 0;
+    --ion-color-light-shade: #d7d8da;
+    --ion-color-light-tint: #f5f6f9;
+  }
+}