修复一些问题

caiwuu · Jan 10, 2024 · 5f66ffc · 5f66ffc
1 parent f44735b
commit 5f66ffc
Show file tree

Hide file tree

Showing 12 changed files with 83 additions and 121 deletions.
diff --git a/index.html b/index.html
@@ -22,10 +22,6 @@
 
 <body>
   <div id="editor-root"></div>
-  <div style="margin: 10px 10%">渲染器测试demo：</div>
-  <div style="margin: 10px 10%; background: #eee; height: 400px">
-    <div id="components-test"></div>
-  </div>
 </body>
 
 </html>
diff --git a/src/editor/toolBar/compinents/Dialog.js b/src/editor/toolBar/compinents/Dialog.js
@@ -9,7 +9,7 @@ export class Dialog extends Component {
       return (
         <div ref={this.dialogRef} onClick={(e) => e.stopPropagation()}>
           {this.state.visiable ? (
-            <div style='background:#ddd;height:200px;position:absolute;top:35px;width:300px;z-index:1'>
+            <div style='background:#ddd;position:absolute;top:35px;z-index:1'>
               {this.props.children.length ? this.props.children : 'dialog'}
             </div>
           ) : (

diff --git a/src/editor/toolBar/compinents/DialogContent.js b/src/editor/toolBar/compinents/DialogContent.js
@@ -1,12 +1,10 @@
 import { Component, createRef } from '@/core'
+import ColorPicker from './colorPicker'
 
 const comMap = {
     fontColor:(h,self)=>(
         <div id="colorPicker">
-            <div id="colorDisplay"></div>
-            <input type="color" id="colorInput"/>
-            <label for="alphaInput">Alpha:</label>
-            <input type="range" id="alphaInput" min="0" max="1" step="0.01" value="1"/>
+            <ColorPicker color='#666600'></ColorPicker>
       </div>
     )
 }

diff --git a/src/modelTestDemo/colorPicker/hue.js → ...tor/toolBar/compinents/colorPicker/hue.js b/src/modelTestDemo/colorPicker/hue.js → ...tor/toolBar/compinents/colorPicker/hue.js
diff --git a/src/modelTestDemo/colorPicker/index.js → ...r/toolBar/compinents/colorPicker/index.js b/src/modelTestDemo/colorPicker/index.js → ...r/toolBar/compinents/colorPicker/index.js
diff --git a/src/modelTestDemo/colorPicker/palette.js → ...toolBar/compinents/colorPicker/palette.js b/src/modelTestDemo/colorPicker/palette.js → ...toolBar/compinents/colorPicker/palette.js
@@ -5,9 +5,9 @@
  * @LastEditor:
  * @LastEditTime: 2022-08-11 14:35:35
  */
-import { createRef, Component } from '@/core'
-import { throttle, isDef } from '../../core/utils.js'
+import { createRef, Component ,utils} from '@/core'
 import { rgbToCoordinates, coordinatesToRgb } from './utils'
+const {throttle, isDef} = utils
 function pauseEvent(e) {
   if (e.stopPropagation) e.stopPropagation()
   if (e.preventDefault) e.preventDefault()

diff --git a/src/modelTestDemo/colorPicker/utils.js → ...r/toolBar/compinents/colorPicker/utils.js b/src/modelTestDemo/colorPicker/utils.js → ...r/toolBar/compinents/colorPicker/utils.js
@@ -46,4 +46,20 @@ export function coordinatesToRgb(H, px, py) {
   const B = ((255 - PB) * px + PB) * py
   return [round(R), round(G), round(B)]
 }
+
+export function hexToRgba(hexColor) {
+  hexColor = hexColor.replace(/^#/, '');
+  const bigint = parseInt(hexColor, 16);
+  const r = (bigint >> 16) & 255;
+  const g = (bigint >> 8) & 255;
+  const b = bigint & 255;
+  return [r, g, b, 255];  // 默认 alpha 值为 255
+}
+
+export function rgbaToHex(rgbaColor) {
+  const [r, g, b] = rgbaColor;
+  const hex = ((r << 16) | (g << 8) | b).toString(16).padStart(6, '0');
+  return `#${hex}`;
+}
+
 export const toRGBArray = (rgbStr) => rgbStr.match(/[\d||\.]+/g).map(Number)
diff --git a/src/editor/toolBar/compinents/index.js b/src/editor/toolBar/compinents/index.js
@@ -1,3 +1,4 @@
 export {Dialog} from "./Dialog";
 export {Tooltip} from "./Tooltip";
-export {DialogContent} from './DialogContent'
+export {DialogContent} from './DialogContent'
+export {default as ColorPicker} from './colorPicker'
diff --git a/src/editor/toolBar/toolBar.styl b/src/editor/toolBar/toolBar.styl
@@ -57,34 +57,63 @@
         top 100%
         border-color black transparent transparent transparent
 
-
-    #colorPicker {
-      width: 200px;
-      padding: 10px;
-      background-color: #fff;
-      border: 1px solid #ccc;
-      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-      border-radius: 5px;
-      text-align: center;
-    }
-
-    #colorDisplay {
-      width: 100%;
-      height: 50px;
-      margin-bottom: 10px;
-    }
-
-    #colorInput {
-      width: 100%;
-      padding: 5px;
-      border: 1px solid #ccc;
-      border-radius: 3px;
-    }
-
-    #alphaInput {
-      width: 100%;
-      padding: 5px;
-      border: 1px solid #ccc;
-      border-radius: 3px;
-      margin-top: 5px;
-    }
+    .picker
+        display flex
+        justify-content space-between
+        margin-top 4px
+    .left
+    .hue
+        font-size 0
+        height 10px
+        width 200px
+        background linear-gradient(to left, red, #ff0, lime, cyan, blue, #f0f, red)
+        .hue-picker
+            display inline-block
+            position relative
+            width 6px
+            height 12px
+            transform translate(-6px, -1px)
+            background-color rgb(248, 248, 248)
+            box-shadow rgba(0, 0, 0, 0.37) 0px 1px 4px 0px
+    .transparency
+            position relative
+            font-size 0
+            height 10px
+            width 200px
+            background url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=') left center
+        .transparency-picker-bg
+            height 100%
+        .transparency-picker
+            display inline-block
+            position relative
+            width 6px
+            height 12px
+            transform translate(-6px, -1px)
+            background-color rgb(248, 248, 248)
+            box-shadow rgba(0, 0, 0, 0.37) 0px 1px 4px 0px
+    .right
+        position relative
+        cursor pointer
+    .color-block
+        width 24px
+        height 24px
+        position absolute
+        top 0
+    .color-block-bg
+        width 24px
+        height 24px
+        background url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=') left center
+    .palette
+        width 228px
+        height 150px
+        overflow hidden
+        border #eeeeee solid 1px
+    .palette-picker
+        pointer-events none
+        display inline-block
+        position relative
+        width 12px
+        height 12px
+        border-radius 50%
+        box-shadow rgb(255 255 255) 0px 0px 0px 1px inset
+        transform translate(-6px, -6px)
diff --git a/src/index.js b/src/index.js
@@ -5,8 +5,6 @@
  * @LastEditor:
  * @LastEditTime: 2022-08-26 15:22:44
  */
-// model 模块功能覆盖测试
-import './modelTestDemo/index'
 // 编辑器demo
 import createEditor from './editor'
 import './style.styl'

diff --git a/src/modelTestDemo/index.js b/src/modelTestDemo/index.js
diff --git a/src/modelTestDemo/style.styl b/src/modelTestDemo/style.styl