Merge pull request #207 in YR/star-web-components from container to master

* commit '59aa5a9c57ec73f4ee1ae5c9d27cca4dcd3520cf':
  修改时钟组件的自适应功能

src/components/clock/clock-style.ts

@@ -1,7 +1,5 @@
-import {css, CSSResult,unsafeCSS} from 'lit'
-const darkHour = unsafeCSS(
-  new URL('./svg/dark_hour.svg', import.meta.url).href
-)
+import {css, CSSResult, unsafeCSS} from 'lit'
+const darkHour = unsafeCSS(new URL('./svg/dark_hour.svg', import.meta.url).href)
 const darkMinute = unsafeCSS(
   new URL('./svg/dark_minute.svg', import.meta.url).href
 )
@@ -83,8 +81,7 @@ export const sharedStyles: CSSResult = css`
     min-width: var(--autoWidth);
     height: var(--autoWidth);
     min-height: var(--autoWidth);
-    padding: var(--autoBorder);
-    transform: scale(var(--autoZoom));
+    padding: calc(6px * var(--ratio));
     display: flex;
     justify-content: center;
     align-items: center;
@@ -107,13 +104,13 @@ export const sharedStyles: CSSResult = css`
   }
   .star-clock-shaft {
     position: absolute;
-    width: var(--autoShapt);
-    height: var(--autoShapt);
+    width: calc(18px * var(--ratio));
+    height: calc(18px * var(--ratio));
     top: 50%;
     left: 50%;
     border-radius: 50%;
     background: #c94d18;
-    border: var(--autoShaptBorder) solid #e07548;
+    border: calc(4px * var(--ratio)) solid #e07548;
     transform: translate(-50%, -50%);
     z-index: 1;
   }
@@ -126,11 +123,12 @@ export const sharedStyles: CSSResult = css`
     width: 0px;
     background-color: transparent;
     transform-origin: 0 100%;
+    transform: rotate(calc(var(--i) * 30deg));
   }
   .star-clock-point {
     display: inline-block;
-    width: var(--autoPoint);
-    height: var(--autoPoint);
+    width: calc(10px * var(--ratio));
+    height: calc(10px * var(--ratio));
     position: absolute;
     right: 50%;
     top: 0;
@@ -140,37 +138,40 @@ export const sharedStyles: CSSResult = css`
       rgba(245, 245, 245, 0.01) 100%
     );
     border-radius: 50%;
-    transform: translate(-50%, 0);
+    transform: translate(-50%, 0) rotate(calc(var(--i) * -30deg));
   }
   .star-clock-hour-hand {
     position: absolute;
     bottom: 50%;
     left: 50%;
-    width: 12px;
-    height: 90px;
+    width: calc(12px * var(--ratio));
+    height: calc(90px * var(--ratio));
     transform-origin: 0 100%;
     display: inline-block;
     transform: rotate(var(--rotateHour)) translate(-50%, 0);
+    background-size: cover;
   }
   .star-clock-minute-hand {
     position: absolute;
     bottom: 50%;
     left: 50%;
-    width: 12px;
-    height: 132px;
+    width: calc(12px * var(--ratio));
+    height: calc(132px * var(--ratio));
     transform-origin: 0 100%;
     display: inline-block;
     transform: rotate(var(--rotateMinute)) translate(-50%, 0);
+    background-size: cover;
   }
   .star-clock-second-hand {
     position: absolute;
-    bottom: calc(50% - 17px);
+    bottom: calc(50% - 17px * var(--ratio));
     left: 50%;
     display: inline-block;
-    width: 4px;
-    height: 160px;
-    transform-origin: 0 calc(100% - 17px);
+    width: calc(4px * var(--ratio));
+    height: calc(160px * var(--ratio));
+    transform-origin: 0 calc(100% - 17px * var(--ratio));
     transform: rotate(var(--rotateSecond)) translate(-50%, 0);
+    background-size: cover;
   }
   /*无表盘深色模式*/
   .star-clock-case-transparent {
@@ -179,7 +180,6 @@ export const sharedStyles: CSSResult = css`
     min-width: var(--autoWidth);
     height: var(--autoWidth);
     min-height: var(--autoWidth);
-    transform: scale(var(--autoZoom));
     border-radius: 50%;
     display: flex;
     justify-content: center;
@@ -188,8 +188,8 @@ export const sharedStyles: CSSResult = css`
   }
   .star-clock-point-transparent {
     display: inline-block;
-    width: var(--autoPointTransparent);
-    height: var(--autoPointTransparent);
+    width: calc(16px * var(--ratio));
+    height: calc(16px * var(--ratio));
     position: absolute;
     right: 50%;
     top: 0;

src/components/clock/clock.ts

@@ -27,17 +27,14 @@ export class StarClock extends LitElement {
   }
 
   @query('.star-clock')
-  starClock: HTMLDivElement | undefined
+  starClock!: HTMLDivElement
   getTransparentClock() {
     return html`
       <div class="star-clock">
         <div class="star-clock-case-transparent ${this.mode}">
           ${[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(
             (item) => html`
-              <span
-                class="star-clock-rotate"
-                style="transform: rotate(${(360 / 12) * item}deg)"
-              >
+              <span class="star-clock-rotate" style="--i: ${item}">
                 <span class="star-clock-point-transparent"></span>
               </span>
             `
@@ -57,15 +54,8 @@ export class StarClock extends LitElement {
             <div class="star-clock-shaft"></div>
             ${[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(
               (item) => html`
-                <span
-                  class="star-clock-rotate"
-                  style="transform: rotate(${(360 / 12) * item}deg)"
-                >
-                  <span
-                    class="star-clock-point"
-                    style="transform: translate(50%, 0) rotate(${-(360 / 12) *
-                    item}deg)"
-                  ></span>
+                <span class="star-clock-rotate" style="--i: ${item}">
+                  <span class="star-clock-point"></span>
                 </span>
               `
             )}
@@ -111,24 +101,16 @@ export class StarClock extends LitElement {
     setInterval(() => {
       this.dateUpdated(new Date())
     }, 1000)
-    window.addEventListener('resize', () => {
-      this.requestUpdate()
-    })
+    const resizeObserver = new ResizeObserver(this.resize)
+    resizeObserver.observe(this.starClock)
   }
-  protected resize() {
-    let minWidth = Math.min(
-      this.starClock?.clientHeight || 100,
-      this.starClock?.clientWidth || 100
-    )
-    let widthMy = 380
-    let bili = minWidth / widthMy
-    this.style.setProperty('--autoWidth', widthMy + 'px')
-    this.style.setProperty('--autoZoom', bili.toString())
-    this.style.setProperty('--autoBorder', '6px')
-    this.style.setProperty('--autoPoint', '10px')
-    this.style.setProperty('--autoShapt', '18px')
-    this.style.setProperty('--autoShaptBorder', '4px')
-    this.style.setProperty('--autoPointTransparent', '16px')
+
+  protected resize = () => {
+    let minWidth = Math.min(this.offsetHeight, this.offsetWidth)
+
+    const ratio = minWidth / 380
+    this.style.setProperty('--autoWidth', minWidth + 'px')
+    this.style.setProperty('--ratio', `${ratio}`)
   }
 }
 declare global {

src/widgets/clock/clock.ts

@@ -93,6 +93,7 @@ class ClockWidget extends GaiaWidget {
         :host {
           height: 100%;
           width: 100%;
+          padding: 0.5%;
         }
       </style>
       <star-clock type="${this._type}" mode="${this.mode}"></star-clock>