diff --git a/electron.vite.config.mjs b/electron.vite.config.mjs
index f5f2935..cac99ab 100644
--- a/electron.vite.config.mjs
+++ b/electron.vite.config.mjs
@@ -11,6 +11,9 @@ export default defineConfig({
plugins: [externalizeDepsPlugin()]
},
renderer: {
+ server: {
+ hmr: false,
+ },
resolve: {
alias: {
'@renderer': resolve('src/renderer/src')
diff --git a/src/renderer/src/App.jsx b/src/renderer/src/App.jsx
index 689c15a..065bf12 100644
--- a/src/renderer/src/App.jsx
+++ b/src/renderer/src/App.jsx
@@ -29,10 +29,12 @@ import {
} from './Imports'
import { createSignal } from 'solid-js'
import "./styles/index.css"
+import "./styles/animations.css"
import MainToolbar from './components/MainToolbar'
import MainToolbarSideContainer from './components/MainToolbarSideContainer'
import BottomSidebar from './components/BottomSidebar'
import ScreenSidebar from './components/ScreenSidebar'
+import PenOverlays from './overlays/PenOverlays'
function App() {
@@ -44,7 +46,7 @@ function App() {
const [toolbarItems, setToolbarItems] = createSignal([
{type: 'button', icon: iconCursor, solidIcon: iconSolidCursor, name: "鼠標模式", action: "mouse"},
- {type: 'button', icon: iconPen, solidIcon: iconSolidPen, name: "批註模式", action: "pen"},
+ {type: 'button', icon: iconPen, solidIcon: iconSolidPen, name: "批註模式", action: "pen", overlay: PenOverlays},
{type: 'button', icon: iconEraser, name: "橡皮擦模式", solidIcon:iconSolidEraser, action: "eraser"},
{type: 'button', icon: iconTrash, name: "清空畫布", action: "clear"},
{type: "separator"},
diff --git a/src/renderer/src/components/ToolBarButton.jsx b/src/renderer/src/components/ToolBarButton.jsx
index a9ad23d..1ce5afe 100644
--- a/src/renderer/src/components/ToolBarButton.jsx
+++ b/src/renderer/src/components/ToolBarButton.jsx
@@ -1,64 +1,130 @@
// noinspection ES6UnusedImports
import gest from "../utils/gest"
+import { createEffect, createSignal, on, Show, splitProps } from 'solid-js'
+import { Dynamic } from 'solid-js/web'
/**
* 定義單個工具欄按鈕的Solid組件
* @param props{{
* item: {
* name:string, icon, solidIcon,
- * type: "button" | "separator" | "pagination-indicator",
+ * type: "button" | "separator" | "pagination-indicator"| "pagination-indicator-sidebar",
* action: string,
* }, toolbarSignal, setToolbarSignal,
* }} 傳入工具欄按鈕的相關選項。
* */
export default function ToolBarButton(props) {
- const v = props.item;
- const toolbarSignal = props.toolbarSignal;
- const setToolbarSignal = props.setToolbarSignal;
+ let toolButtonRef;
+ const [boundingRect, updateBoundingRect] = createSignal({x:0,y:0});
+ const [isOverlayDisplay, setOverlayDisplay] = createSignal(false);
+ const [isAnimating, setAnimating] = createSignal(false);
+ const [className, setClassName] = createSignal({})
+ const [timerID, setTimerID] = createSignal(0);
+ const [{item:v,toolbarSignal,setToolbarSignal},_] = splitProps(props,["item","toolbarSignal","setToolbarSignal"])
+
+ const overlayVisibleFalseTimerFn = ()=>{
+ setOverlayDisplay(false)
+ setAnimating(false);
+ };
+
+ /**
+ * 用於animate Overlay的顯示與隱藏效果
+ * @param isVisible{boolean} 手動指定是要顯示還是隱藏Overlay，
+ * 未指定該param時，根據當前Signal切換狀態
+ * */
+ const changeOverlayVisibility = function(isVisible) {
+ // 防抖處理
+ if (isAnimating()===true) return 0;
+ // 移除現有的Timer
+ clearTimeout(timerID());
+ setTimerID(0);
+ // 清空className，移除所有animation
+ setClassName("")
+ // isVisible===true
+ if (isVisible!==undefined&&isVisible!==null&&isVisible===true) {
+ if (isOverlayDisplay()&&isOverlayDisplay()===true) return 0;
+ setAnimating(true);
+ setClassName("animate-fade-in");
+ setOverlayDisplay(true);
+ } else if (isVisible!==undefined&&isVisible!==null&&isVisible===false) {
+ if (isOverlayDisplay()&&isOverlayDisplay()===false) return 0;
+ setClassName("animate-fade-out");
+ setTimerID(setTimeout(overlayVisibleFalseTimerFn,90))
+ } else {
+ // no isVisible param
+ if (isOverlayDisplay()===true) {
+ // to false
+ setAnimating(true);
+ setClassName("animate-fade-out");
+ setTimerID(setTimeout(overlayVisibleFalseTimerFn,90))
+ } else if (isOverlayDisplay()===false) {
+ setClassName("animate-fade-in");
+ setOverlayDisplay(true);
+ }
+ }
+ }
+
+ createEffect(on(toolbarSignal,(tbsignal)=>{
+ if (tbsignal.activeTool!==v.action) changeOverlayVisibility(false)
+ }))
+
// noinspection HtmlUnknownAttribute
return (
- {
- if (v.action === "drawer") {
- setToolbarSignal({
- ...toolbarSignal(),
- isDrawerOpen: !toolbarSignal().isDrawerOpen
- });
- } else if (!(["clear"].includes(v.action))&&v.action){
- setToolbarSignal({
- ...toolbarSignal(),
- activeTool: v.action,
- })
- }
- }}
- classList={{
- "toolbar-item": v.type !== "pagination-indicator"&&v.type!=="pagination-indicator-sidebar",
- "toolbar-item-separator": v.type === "separator",
- "toolbar-item-pagination-indicator": v.type === "pagination-indicator"||v.type==="pagination-indicator-sidebar",
- "toolbar-item-active": toolbarSignal().activeTool===v.action
- }} use:gest={null}>
- {v.type === "separator" ?
: v.type === 'button' ? (
- <>
- {v.action === "drawer" && toolbarSignal().isDrawerOpen === true ? (
-
- ) : <>
-
-
- }
-
-
- ) : v.type === "pagination-indicator" ? <>
-
- : v.type === "pagination-indicator-sidebar" ? <>
-
- : void 0}
-
{
+ if (v.action === "drawer") {
+ setToolbarSignal({
+ ...toolbarSignal(),
+ isDrawerOpen: !toolbarSignal().isDrawerOpen
+ });
+ } else if (v.action&&v.action===toolbarSignal().activeTool&&v.overlay) {
+ // 傳入BoundingRect讓Overlay更新位置
+ updateBoundingRect(JSON.parse(JSON.stringify(toolButtonRef.getBoundingClientRect())))
+ // 切換Overlay的顯示
+ changeOverlayVisibility();
+ } else if (!(["clear"].includes(v.action))&&v.action){
+ setToolbarSignal({
+ ...toolbarSignal(),
+ activeTool: v.action,
+ })
+ }
+ }} ref={toolButtonRef}
+ classList={{
+ "toolbar-item": v.type !== "pagination-indicator"&&v.type!=="pagination-indicator-sidebar",
+ "toolbar-item-separator": v.type === "separator",
+ "toolbar-item-pagination-indicator": v.type === "pagination-indicator"||v.type==="pagination-indicator-sidebar",
+ "toolbar-item-active": toolbarSignal().activeTool===v.action
+ }} use:gest={null}>
+ {v.type === "separator" ?
: v.type === 'button' ? (
+ <>
+ {v.action === "drawer" && toolbarSignal().isDrawerOpen === true ? (
+
+ ) : <>
+
+
+ }
+
+
+ ) : v.type === "pagination-indicator" ? <>
+
+ : v.type === "pagination-indicator-sidebar" ? <>
+
+ : void 0}
+