@netless/fastboard-ui 1.0.0-canary.6 → 1.0.0-canary.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/fastboard-ui",
-  "version": "1.0.0-canary.6",
+  "version": "1.0.0-canary.7",
   "description": "The front-end of @netless/fastboard-core.",
   "main": "dist/index.js",
   "svelte": "dist/index.svelte.mjs",
@@ -13,14 +13,14 @@
   ],
   "repository": "netless-io/fastboard",
   "peerDependencies": {
-    "@netless/fastboard-core": "1.0.0-canary.6"
+    "@netless/fastboard-core": "1.0.0-canary.7"
   },
   "dependencies": {
     "tippy.js": "^6.3.7"
   },
   "devDependencies": {
     "@netless/esbuild-plugin-inline-sass": "0.1.0",
-    "@netless/fastboard-core": "1.0.0-canary.6"
+    "@netless/fastboard-core": "1.0.0-canary.7"
   },
   "scripts": {
     "cleanup": "rimraf dist",

package/src/components/Button/Button.svelte

@@ -7,6 +7,7 @@
   export { className as class };
   export let name = "fastboard-ui";
   export let theme: Theme = "light";
+  export let active = false;
   export let disabled = false;
   export let content: Content = "";
   export let placement: Placement = "top";
@@ -19,6 +20,7 @@
     <span class="{name}-btn-interactive {theme}" use:tippy={{ content, placement, className }}>
       <button
         class="{name}-btn {className} {theme}"
+        class:is-active={active}
         {disabled}
         on:click
         use:tippy={{
@@ -37,6 +39,7 @@
   {:else}
     <button
       class="{name}-btn {className} {theme}"
+      class:is-active={active}
       {disabled}
       on:click
       use:tippy={{ content, placement, className }}
@@ -45,7 +48,7 @@
     </button>
   {/if}
 {:else}
-  <button class="{name}-btn {className} {theme}" {disabled} on:click>
+  <button class="{name}-btn {className} {theme}" class:is-active={active} {disabled} on:click>
     <slot />
   </button>
 {/if}

package/src/components/Button/Button.svelte.d.ts

@@ -6,6 +6,7 @@ export declare interface ButtonProps {
   class?: string;
   name?: string;
   theme?: Theme;
+  active?: boolean;
   disabled?: boolean;
   content?: Content;
   placement?: Placement;

package/src/components/Fastboard/Fastboard.scss

@@ -17,14 +17,14 @@
   display: flex;
   align-items: center;
   position: absolute;
-  bottom: 62px;
+  bottom: 50px;
   top: 8px;
   left: 0;
   z-index: 200;
   pointer-events: none;
 
   .fastboard-toolbar {
-    padding-left: 16px;
+    padding-left: 8px;
   }
 }
 
@@ -34,7 +34,6 @@
   position: absolute;
   bottom: 8px;
   left: 8px;
-  padding: 8px;
   z-index: 200;
   pointer-events: none;
 }

package/src/components/Toolbar/Toolbar.scss

@@ -7,12 +7,12 @@ $name: "fastboard-toolbar";
   display: flex;
   align-items: center;
   position: relative;
-  transform: translateX(0);
-  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+  left: 0px;
+  transition: left 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
   pointer-events: none;
 
   &.collapsed {
-    transform: translateX(-100%);
+    left: -100%;
   }
 }
 
@@ -71,7 +71,7 @@ $name: "fastboard-toolbar";
 }
 
 .#{$name}-btn {
-  @include btn(32px, 4px);
+  @include btn(32px, 4px, 8px);
 }
 
 @import "./components/Slider.scss";

package/src/components/Toolbar/Toolbar.svelte

@@ -45,20 +45,29 @@
   </div>
   <label class="{name}-handler {theme}">
     <input type="checkbox" bind:checked={collapsed} />
-    <svg fill="none" stroke-width="2" viewBox="0 0 32 120">
+    <svg width="17" height="42" viewBox="0 0 17 42" fill="none">
       <path
+        d="M0 41H12C14.2091 41 16 39.2091 16 37V5C16 2.79086 14.2091 1 12 1H0"
+        stroke="#000"
         fill="#fff"
-        stroke="none"
-        d="m0 0 24 16q6 4 6 14v60q0 10-6 14L0 120"
-        class="{name}-handler-bg-color"
+        class="{name}-handler-border-color {name}-handler-bg-color"
       />
-      <path stroke="#000" d="m0 0 24 16q6 4 6 14v60q0 10-6 14L0 120" class="{name}-handler-border-color" />
       {#if collapsed}
-        <path stroke="#000" d="M10 52v16" class="{name}-handler-image-stroke-color" />
-        <path fill="#000" stroke="none" d="M14 52v16l8-8z" class="{name}-handler-image-fill-color" />
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M8 19L6 17V25L8 23L10 21L8 19ZM4 17H5V25H4V17Z"
+          fill="#fff"
+          class="{name}-handler-image-fill-color"
+        />
       {:else}
-        <path stroke="#000" d="M20 52v16" class="{name}-handler-image-stroke-color" />
-        <path fill="#000" stroke="none" d="M16 52v16l-8-8z" class="{name}-handler-image-fill-color" />
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M6 19L8 17V25L6 23L4 21L6 19ZM10 17H9V25H10V17Z"
+          fill="#fff"
+          class="{name}-handler-image-fill-color"
+        />
       {/if}
     </svg>
   </label>

package/src/components/Toolbar/components/Contents.scss

@@ -20,8 +20,8 @@ $name: "fastboard-toolbar";
 .#{$name}-triangle {
   width: 0px;
   height: 0px;
-  border-bottom: 4px solid;
-  border-left: 4px solid transparent;
+  border-bottom: 3px solid;
+  border-left: 3px solid transparent;
   position: absolute;
   bottom: 0;
   right: 0;
@@ -36,7 +36,7 @@ $name: "fastboard-toolbar";
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 0;
 }
 
 .#{$name}-tooltip {

package/src/components/Toolbar/components/Contents.svelte

@@ -121,35 +121,68 @@
   </Button>
 {/if}
 <div class="{name}-scrollable" class:scrollable use:scrollHeight={scroll_height} use:scrollTop={top}>
-  <Button class="clicker" {...btn_props} on:click={clicker} content={c.clicker}>
+  <Button
+    class="clicker"
+    active={appliance === "clicker"}
+    {...btn_props}
+    on:click={clicker}
+    content={c.clicker}
+  >
     {#if appliance === "clicker"}
       <Icons.ClickFilled {theme} active />
     {:else}
       <Icons.Click {theme} />
     {/if}
   </Button>
-  <Button class="selector" {...btn_props} on:click={selector} content={c.selector}>
+  <Button
+    class="selector"
+    active={appliance === "selector"}
+    {...btn_props}
+    on:click={selector}
+    content={c.selector}
+  >
     {#if appliance === "selector"}
       <Icons.SelectorFilled {theme} active />
     {:else}
       <Icons.Selector {theme} />
     {/if}
   </Button>
-  <Button class="pencil" {...btn_props} on:click={pencil} content={c.pencil} menu={pencil_panel}>
+  <Button
+    class="pencil"
+    active={appliance === "pencil"}
+    {...btn_props}
+    on:click={pencil}
+    content={c.pencil}
+    menu={pencil_panel}
+  >
     {#if appliance === "pencil"}
       <Icons.PencilFilled {theme} active />
     {:else}
       <Icons.Pencil {theme} />
     {/if}
   </Button>
-  <Button class="text" {...btn_props} on:click={text} content={c.text} menu={text_panel}>
+  <Button
+    class="text"
+    active={appliance === "text"}
+    {...btn_props}
+    on:click={text}
+    content={c.text}
+    menu={text_panel}
+  >
     {#if appliance === "text"}
       <Icons.TextFilled {theme} active />
     {:else}
       <Icons.Text {theme} />
     {/if}
   </Button>
-  <Button class="shapes" {...btn_props} on:click={select_last_shape} content={t.shapes} menu={shapes_panel}>
+  <Button
+    class="shapes"
+    active={appliance === last_shape || (appliance === "shape" && shape === last_shape)}
+    {...btn_props}
+    on:click={select_last_shape}
+    content={t.shapes}
+    menu={shapes_panel}
+  >
     {#if appliance === last_shape || (appliance === "shape" && shape === last_shape)}
       <svelte:component this={shapesIconActive[last_shape]} {theme} active />
     {:else}
@@ -157,7 +190,13 @@
     {/if}
   </Button>
   {#if eraser_type === "delete"}
-    <Button class="eraser" {...btn_props} on:click={select_eraser} content={c.eraser}>
+    <Button
+      class="eraser"
+      active={appliance === "eraser"}
+      {...btn_props}
+      on:click={select_eraser}
+      content={c.eraser}
+    >
       {#if appliance === "eraser"}
         <Icons.EraserFilled {theme} active />
       {:else}
@@ -167,6 +206,7 @@
   {:else if eraser_type === "pencil"}
     <Button
       class="eraser"
+      active={appliance === "pencilEraser"}
       {...btn_props}
       on:click={select_pencil_eraser}
       content={c.pencilEraser}
@@ -181,6 +221,7 @@
   {:else}
     <Button
       class="eraser"
+      active={appliance === last_eraser}
       {...btn_props}
       on:click={select_last_eraser}
       content={t[last_eraser]}
@@ -229,6 +270,7 @@
       <div class="{name}-panel-btns">
         <Button
           class="eraser"
+          active={appliance === "pencilEraser"}
           {...btn_props}
           on:click={select_pencil_eraser}
           placement="top"
@@ -242,6 +284,7 @@
         </Button>
         <Button
           class="eraser"
+          active={appliance === "eraser"}
           {...btn_props}
           on:click={select_eraser}
           placement="top"

package/src/components/theme.scss

@@ -7,6 +7,7 @@ $themes: (
     active-color: $blue-6,
     bg-color: color.change(white, $alpha: 0.9),
     hover-bg-color: $blue-1,
+    active-bg-color: $blue-1,
     border-color: $grey-1,
   ),
   dark: (
@@ -14,6 +15,7 @@ $themes: (
     active-color: $blue-7,
     bg-color: color.change($grey-10, $alpha: 0.9),
     hover-bg-color: $grey-8,
+    active-bg-color: $grey-8,
     border-color: $grey-8,
   ),
 );
@@ -58,7 +60,7 @@ $themes: (
   }
 }
 
-@mixin btn($size: 24px, $padding: 0) {
+@mixin btn($size: 24px, $padding: 0, $radius: 4px) {
   appearance: none;
   cursor: pointer;
   margin: 0;
@@ -67,7 +69,7 @@ $themes: (
   width: $size;
   height: $size;
   background-color: transparent;
-  border-radius: 4px;
+  border-radius: $radius;
   font-size: 0;
   line-height: 1;
   flex-shrink: 0;
@@ -85,8 +87,13 @@ $themes: (
   }
 
   @each $name, $theme in $themes {
-    &.#{$name}:not(:disabled):hover {
-      background-color: read($theme, "hover-bg-color");
+    &.#{$name}:not(:disabled) {
+      &:hover {
+        background-color: read($theme, "hover-bg-color");
+      }
+      &.is-active {
+        background-color: read($theme, "active-bg-color");
+      }
     }
   }
 }