[feature]簡略的寫了個Color Palette的Overlay
This commit is contained in:
parent
47dc80afe6
commit
004fab2842
@ -38,15 +38,40 @@ import PenOverlays from './overlays/PenOverlays'
|
||||
|
||||
function App() {
|
||||
|
||||
const [toolbarSignal, setToolbarSignal] = createSignal({
|
||||
// PenOverlay選項
|
||||
const [colorsGridItems, setColorsGridItems] = createSignal([
|
||||
{name: "red", type: "preset", value: "#f5222d"},
|
||||
{name: "volcano", type: "preset", value: "#fa541c"},
|
||||
{name: "orange", type: "preset", value: "#fa8c16"},
|
||||
{name: "gold", type: "preset", value: "#faad14"},
|
||||
{name: "yellow", type: "preset", value: "#fadb14"},
|
||||
{name: "lime", type: "preset", value: "#a0d911"},
|
||||
{name: "green", type: "preset", value: "#389e0d"},
|
||||
{name: "cyan", type: "preset", value: "#13c2c2"},
|
||||
{name: "blue", type: "preset", value: "#1677ff"},
|
||||
{name: "geek", type: "preset", value: "#2f54eb"},
|
||||
{name: "purple", type: "preset", value: "#722ed1"},
|
||||
{name: "magenta", type: "preset", value: "#eb2f96"},
|
||||
{name: "black", type: "preset", value: "#000000"},
|
||||
{name: "white", type: "preset", value: "#ffffff"},
|
||||
])
|
||||
|
||||
const [toolbarSignal, setToolbarSignal] =
|
||||
createSignal({
|
||||
isDrawerOpen: false,
|
||||
activeTool: "mouse",
|
||||
backgroundColor: ""
|
||||
backgroundColor: "",
|
||||
selectedColor: {
|
||||
type: "preset",
|
||||
value: "red"
|
||||
}
|
||||
});
|
||||
|
||||
const [toolbarItems, setToolbarItems] = createSignal([
|
||||
{type: 'button', icon: iconCursor, solidIcon: iconSolidCursor, name: "鼠標模式", action: "mouse"},
|
||||
{type: 'button', icon: iconPen, solidIcon: iconSolidPen, name: "批註模式", action: "pen", overlay: PenOverlays},
|
||||
{type: 'button', icon: iconPen, solidIcon: iconSolidPen, name: "批註模式", action: "pen", overlay: PenOverlays, data:{
|
||||
colors: colorsGridItems,
|
||||
}},
|
||||
{type: 'button', icon: iconEraser, name: "橡皮擦模式", solidIcon:iconSolidEraser, action: "eraser"},
|
||||
{type: 'button', icon: iconTrash, name: "清空畫布", action: "clear"},
|
||||
{type: "separator"},
|
||||
@ -59,6 +84,7 @@ function App() {
|
||||
{type: "button", action: "drawer", icon: iconMore}
|
||||
])
|
||||
|
||||
// 工具欄按鈕項目
|
||||
const [leftBottomSidebarItems, setLeftBottomSidebarItems] = createSignal([
|
||||
{type: 'button', icon: iconArrowLeft, name: "上一頁"},
|
||||
{type: "separator"},
|
||||
@ -82,6 +108,7 @@ function App() {
|
||||
{type: 'button', icon: iconArrowRight, name: "下一頁"},
|
||||
])
|
||||
|
||||
// 抽屜項目
|
||||
const [drawerItems, setDrawerItems] = createSignal([
|
||||
{icon: iconClock, name: "計時器"},
|
||||
{icon: iconLassoSelect, name: "套索選擇"},
|
||||
|
||||
@ -28,7 +28,10 @@ import iconSolidPen from './assets/icons/solid/pen.svg';
|
||||
import iconSolidEraser from './assets/icons/solid/eraser.svg';
|
||||
import iconSolidShapes from './assets/icons/solid/shapes.svg';
|
||||
|
||||
import iconSelected from './assets/icons/selected.svg';
|
||||
|
||||
import brandTransparentWatermark from './assets/brand/transparent.watermark.svg';
|
||||
|
||||
export {brandTransparentWatermark};
|
||||
export {iconSelected};
|
||||
export {iconCursor, iconPen, iconEraser, iconTrash, iconSolidShapes, iconSolidEraser, iconArrowRight, iconSolidPen, iconSolidCursor, iconListDetails, iconArrowLeft, iconMonitorX, iconHand, iconText, iconEyeOff, iconGrid, iconUndo, iconHistory, iconDianming, iconAddPictures, iconRuler, iconBlackBoard, iconLassoSelect, iconClock, iconMore, iconShapes, iconScissors, iconWandSparkles, iconRedo};
|
||||
10
src/renderer/src/assets/icons/selected.svg
Normal file
10
src/renderer/src/assets/icons/selected.svg
Normal file
@ -0,0 +1,10 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_10_17)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C4.00035 5.85752 3.26375 6.95991 2.7612 8.17317C2.25866 9.38642 2 10.6868 2 12C2 13.3132 2.25866 14.6136 2.7612 15.8268C3.26375 17.0401 4.00035 18.1425 4.92893 19.0711C5.85752 19.9997 6.95991 20.7362 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22C13.3132 22 14.6136 21.7413 15.8268 21.2388C17.0401 20.7362 18.1425 19.9997 19.0711 19.0711C19.9997 18.1425 20.7362 17.0401 21.2388 15.8268C21.7413 14.6136 22 13.3132 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM17.6478 9.70796C18.1359 9.2198 18.1359 8.42835 17.6478 7.94019C17.1596 7.45203 16.3682 7.45203 15.88 7.94019L10.412 13.4082L8.11999 11.1161C7.63183 10.628 6.84038 10.628 6.35222 11.1161C5.86407 11.6043 5.86407 12.3957 6.35222 12.8839L9.52815 16.0598C10.0163 16.548 10.8078 16.548 11.2959 16.0598L17.6478 9.70796Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_10_17">
|
||||
<rect width="24" height="24" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@ -123,6 +123,9 @@ export default function ToolBarButton(props) {
|
||||
<Dynamic component={v.overlay??null}
|
||||
boundingRect={boundingRect()}
|
||||
animateClass={className}
|
||||
additionalData={v.data}
|
||||
toolbarSignal={toolbarSignal}
|
||||
setToolbarSignal={setToolbarSignal}
|
||||
/>
|
||||
</Show>
|
||||
</>
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import { Portal } from 'solid-js/web'
|
||||
import { splitProps } from 'solid-js'
|
||||
import { For, Show, splitProps } from 'solid-js'
|
||||
import { iconSelected } from '../Imports'
|
||||
|
||||
export default function PenOverlays(props) {
|
||||
const [{toolbarSignal,setToolbarSignal,boundingRect,animateClass},_] = splitProps(props,["toolbarSignal","setToolbarSignal","boundingRect","animateClass"]);
|
||||
const [{toolbarSignal,setToolbarSignal,boundingRect,animateClass,additionalData:data},_] = splitProps(props,["toolbarSignal","setToolbarSignal","boundingRect","animateClass","additionalData"]);
|
||||
return (
|
||||
<>
|
||||
<Portal>
|
||||
@ -10,7 +11,29 @@ export default function PenOverlays(props) {
|
||||
left: `${(boundingRect.left-(boundingRect.width/4)).toFixed(3)}px`,
|
||||
bottom: `${(boundingRect.bottom-boundingRect.y).toFixed(3)}px`,
|
||||
}}>
|
||||
<div class="h-9 w-full bg-zinc-800 border-b border-zinc-600"></div>
|
||||
<div class="h-9 w-full bg-zinc-800 border-b border-zinc-600 flex items-center pl-3 text-white text-sm font-bold">客製化：筆</div>
|
||||
<div class="grid grid-cols-4 gap-1 p-2.5 w-fit">
|
||||
<For each={data.colors()}>
|
||||
{(v)=>(
|
||||
<div onClick={()=>{
|
||||
setToolbarSignal({
|
||||
...toolbarSignal(),
|
||||
selectedColor: {
|
||||
type: "preset",
|
||||
value: v.name
|
||||
}
|
||||
})
|
||||
}} class="h-7 w-7 rounded-0.18rem ring-1 ring-inset ring-white/30 flex items-center justify-center" style={{'background-color':v.value}}>
|
||||
<Show when={toolbarSignal().selectedColor.value===v.name}>
|
||||
<img src={iconSelected} classList={{
|
||||
'h-4 w-4': true,
|
||||
'invert': ["yellow","lime","white"].includes(v.name)
|
||||
}}/>
|
||||
</Show>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
</Portal>
|
||||
</>
|
||||
|
||||
@ -399,10 +399,9 @@
|
||||
z-index: 60;
|
||||
position: fixed;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
overflow: clip;
|
||||
@apply "w-56 h-48 mb-2.5 bg-zinc-900/80 rounded-md ring-1 ring-zinc-700";
|
||||
@apply "w-68 h-44 mb-2.5 bg-zinc-900/80 rounded-md ring-1 ring-zinc-700";
|
||||
}
|
||||
.pen-overlays * {
|
||||
user-select: none !important;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user