From 5df7f54bedfccd0bcea7b71cac397af4cbe170ca Mon Sep 17 00:00:00 2001 From: Ivan Li Date: Sun, 19 Mar 2023 11:19:20 +0800 Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E7=95=8C=E9=9D=A2=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E6=8C=89=E6=98=BE=E7=A4=BA=E5=99=A8=E4=BD=8D=E7=BD=AE?= =?UTF-8?q?=E9=A2=84=E8=A7=88=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src-tauri/tauri.conf.json | 4 +- src/App.tsx | 17 ++++---- "src/components/\026display-view.tsx" | 13 +++++-- src/components/display-info-panel.tsx | 4 +- src/components/display-list-container.tsx | 47 +++++++++++++++++++++++ src/stores/display.store.tsx | 7 ++++ tailwind.config.js | 7 ++-- 7 files changed, 80 insertions(+), 19 deletions(-) create mode 100644 src/components/display-list-container.tsx create mode 100644 src/stores/display.store.tsx diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json index 26061a5..3b2747d 100644 --- a/src-tauri/tauri.conf.json +++ b/src-tauri/tauri.conf.json @@ -8,7 +8,7 @@ }, "package": { "productName": "test-demo", - "version": "0.0.0" + "version": "0.0.1" }, "tauri": { "allowlist": { @@ -27,7 +27,7 @@ "icons/icon.icns", "icons/icon.ico" ], - "identifier": "cc.ivanli.take-screenshot-test-demo", + "identifier": "cc.ivanli.ambient-light.desktop", "targets": "all" }, "security": { diff --git a/src/App.tsx b/src/App.tsx index 8450463..d71f88a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,24 +1,25 @@ -import { createEffect, createSignal } from "solid-js"; +import { createEffect } from 'solid-js'; import { invoke } from '@tauri-apps/api/tauri'; -import { DisplayInfo } from './models/display-info.model'; import { DisplayView } from './components/\u0016display-view'; +import { DisplayListContainer } from './components/display-list-container'; +import { displayStore, setDisplayStore } from './stores/display.store'; function App() { - const [displays, setDisplays] = createSignal([]); - createEffect(() => { invoke('list_display_info').then((displays) => { - setDisplays(JSON.parse(displays)); + setDisplayStore({ + displays: JSON.parse(displays), + }); }); }); return (
-
    - {displays().map((display) => { + + {displayStore.displays.map((display) => { return ; })} -
+
); } diff --git "a/src/components/\026display-view.tsx" "b/src/components/\026display-view.tsx" index a5fb7f1..52118c1 100644 --- "a/src/components/\026display-view.tsx" +++ "b/src/components/\026display-view.tsx" @@ -1,5 +1,6 @@ -import { Component } from 'solid-js'; +import { Component, createMemo } from 'solid-js'; import { DisplayInfo } from '../models/display-info.model'; +import { displayStore } from '../stores/display.store'; import { DisplayInfoPanel } from './display-info-panel'; import { ScreenView } from './screen-view'; @@ -8,12 +9,18 @@ type DisplayViewProps = { }; export const DisplayView: Component = (props) => { + const style = createMemo(() => ({ + width: `${props.display.width * displayStore.viewScale}px`, + height: `${props.display.height * displayStore.viewScale}px`, + top: `${props.display.y * displayStore.viewScale}px`, + left: `${props.display.x * displayStore.viewScale}px`, + })); return ( -
+
); diff --git a/src/components/display-info-panel.tsx b/src/components/display-info-panel.tsx index 7b74e35..602271e 100644 --- a/src/components/display-info-panel.tsx +++ b/src/components/display-info-panel.tsx @@ -8,8 +8,8 @@ type DisplayInfoItemProps = { export const DisplayInfoItem: ParentComponent = (props) => { return (
-
{props.label}
-
{props.children}
+
{props.label}
+
{props.children}
); }; diff --git a/src/components/display-list-container.tsx b/src/components/display-list-container.tsx new file mode 100644 index 0000000..f697e46 --- /dev/null +++ b/src/components/display-list-container.tsx @@ -0,0 +1,47 @@ +import { createEffect, createMemo, createSignal, on, ParentComponent } from 'solid-js'; +import { displayStore, setDisplayStore } from '../stores/display.store'; + +export const DisplayListContainer: ParentComponent = (props) => { + const [olStyle, setOlStyle] = createSignal({ + top: '0px', + left: '0px', + }); + const [rootStyle, setRootStyle] = createSignal({ + width: '100%', + height: '100%', + }); + + createEffect(() => { + const boundLeft = Math.min(0, ...displayStore.displays.map((display) => display.x)); + const boundTop = Math.min(0, ...displayStore.displays.map((display) => display.y)); + const boundRight = Math.max( + 0, + ...displayStore.displays.map((display) => display.x + display.width), + ); + const boundBottom = Math.max( + 0, + ...displayStore.displays.map((display) => display.y + display.height), + ); + + setDisplayStore({ + viewScale: 1200 / (boundRight - boundLeft), + }); + + setOlStyle({ + top: `${-boundTop * displayStore.viewScale}px`, + left: `${-boundLeft * displayStore.viewScale}px`, + }); + + setRootStyle({ + width: `${(boundRight - boundLeft) * displayStore.viewScale}px`, + height: `${(boundBottom - boundTop) * displayStore.viewScale}px`, + }); + }); + return ( +
+
    + {props.children} +
+
+ ); +}; diff --git a/src/stores/display.store.tsx b/src/stores/display.store.tsx new file mode 100644 index 0000000..0c99e90 --- /dev/null +++ b/src/stores/display.store.tsx @@ -0,0 +1,7 @@ +import { createStore } from 'solid-js/store'; +import { DisplayInfo } from '../models/display-info.model'; + +export const [displayStore, setDisplayStore] = createStore({ + displays: new Array(), + viewScale: 0.2, +}); diff --git a/tailwind.config.js b/tailwind.config.js index 1490793..fca1a87 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,10 +1,9 @@ /** @type {import('tailwindcss').Config} */ module.exports = { - content: [ - "./src/**/*.{js,jsx,ts,tsx}", - ], + mode: 'jit', + content: ['./src/**/*.{js,jsx,ts,tsx}'], theme: { extend: {}, }, plugins: [], -} +};