yili/apps
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整颜色板样式

Browse Source
This commit is contained in:
袁东强 2025-07-18 17:53:00 +08:00
parent 88cfe89705
commit 4389548868
4 changed files with 985 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

240
com.actionsoft.apps.coe.pal/template/page/pal.pl.repository.designer.htm
View File

@ -8,6 +8,7 @@
<link type='text/css' rel='stylesheet' href='../apps/com.actionsoft.apps.coe.pal/lib/designer/themes/default/global_zh.css' />
<link type='text/css' rel='stylesheet' href='../apps/com.actionsoft.apps.coe.pal/lib/designer/themes/default/diagraming/designer.css' />
<link type='text/css' rel='stylesheet' href='../apps/com.actionsoft.apps.coe.pal/lib/designer/themes/default/diagraming/ui.css' />
<link type='text/css' rel='stylesheet' href='../apps/com.actionsoft.apps.coe.pal/lib/designer/themes/default/diagraming/designer.colorpicker.css' />
<link rel="stylesheet" href="../commons/css/awsui.css">
<style>
.button.blue {
@ -1869,131 +1870,122 @@
-->
<div id="ui_container">
<div id='color_picker' class="menu color_picker" style="display: none;">
<div class="color_items">
<div style="background-color:rgb(255,255,255);"></div>
<div style="background-color:rgb(229,229,229);"></div>
<div style="background-color:rgb(207,207,207);"></div>
<div style="background-color:rgb(184,184,184);"></div>
<div style="background-color:rgb(161,161,161);"></div>
<div style="background-color:rgb(138,138,138);"></div>
<div style="background-color:rgb(115,115,115);"></div>
<div style="background-color:rgb(92,92,92);"></div>
<div style="background-color:rgb(69,69,69);"></div>
<div style="background-color:rgb(50,50,50);"></div>
<div style="background-color:rgb(23,23,23);"></div>
<div style="background-color:rgb(0,0,0);"></div>
<div class="clear"></div>
<div class="color_transparent"><I18N#无填充></div>
<div class="color_group">
<div class="color_item" awsui-qtip="#EFECEB" style="background:#EFECEB;"></div>
<div class="color_item" awsui-qtip="#F2F2F2" style="background:#F2F2F2;"></div>
<div class="color_item" awsui-qtip="#E7EBED" style="background:#E7EBED;"></div>
<div class="color_item" awsui-qtip="#FADCDB" style="background:#FADCDB;"></div>
<div class="color_item" awsui-qtip="#FBEADA" style="background:#FBEADA;"></div>
<div class="color_item" awsui-qtip="#FCF9EA" style="background:#FCF9EA;"></div>
<div class="color_item" awsui-qtip="#E5F6DA" style="background:#E5F6DA;"></div>
<div class="color_item" awsui-qtip="#DBF5F5" style="background:#DBF5F5;"></div>
<div class="color_item" awsui-qtip="#D2D6F9" style="background:#D2D6F9;"></div>
<div class="color_item" awsui-qtip="#FADDED" style="background:#FADDED;"></div>
<div class="color_item" awsui-qtip="#DED9D7" style="background:#DED9D7;"></div>
<div class="color_item" awsui-qtip="#D9D9D9" style="background:#D9D9D9;"></div>
<div class="color_item" awsui-qtip="#E0E0E0" style="background:#E0E0E0;"></div>
<div class="color_item" awsui-qtip="#F5B9B7" style="background:#F5B9B7;"></div>
<div class="color_item" awsui-qtip="#F8D5B5" style="background:#F8D5B5;"></div>
<div class="color_item" awsui-qtip="#F6EDC1" style="background:#F6EDC1;"></div>
<div class="color_item" awsui-qtip="#CAEDB4" style="background:#CAEDB4;"></div>
<div class="color_item" awsui-qtip="#B7EAEB" style="background:#B7EAEB;"></div>
<div class="color_item" awsui-qtip="#A6AEF3" style="background:#A6AEF3;"></div>
<div class="color_item" awsui-qtip="#F6BBDB" style="background:#F6BBDB;"></div>
<div class="color_item" awsui-qtip="#BEB3AF" style="background:#BEB3AF;"></div>
<div class="color_item" awsui-qtip="#BFBFBF" style="background:#BFBFBF;"></div>
<div class="color_item" awsui-qtip="#9E9E9E" style="background:#9E9E9E;"></div>
<div class="color_item" awsui-qtip="#F19594" style="background:#F19594;"></div>
<div class="color_item" awsui-qtip="#F4C18F" style="background:#F4C18F;"></div>
<div class="color_item" awsui-qtip="#F1E4A2" style="background:#F1E4A2;"></div>
<div class="color_item" awsui-qtip="#B0E38F" style="background:#B0E38F;"></div>
<div class="color_item" awsui-qtip="#94E0E1" style="background:#94E0E1;"></div>
<div class="color_item" awsui-qtip="#7985EC" style="background:#7985EC;"></div>
<div class="color_item" awsui-qtip="#F199C8" style="background:#F199C8;"></div>
<div class="color_item" awsui-qtip="#9D8C88" style="background:#9D8C88;"></div>
<div class="color_item" awsui-qtip="#A6A6A6" style="background:#A6A6A6;"></div>
<div class="color_item" awsui-qtip="#616161" style="background:#616161;"></div>
<div class="color_item" awsui-qtip="#EC7270" style="background:#EC7270;"></div>
<div class="color_item" awsui-qtip="#F1AC6A" style="background:#F1AC6A;"></div>
<div class="color_item" awsui-qtip="#E9D66F" style="background:#E9D66F;"></div>
<div class="color_item" awsui-qtip="#95DA69" style="background:#95DA69;"></div>
<div class="color_item" awsui-qtip="#70D5D7" style="background:#70D5D7;"></div>
<div class="color_item" awsui-qtip="#5B79E8" style="background:#5B79E8;"></div>
<div class="color_item" awsui-qtip="#ED77B6" style="background:#ED77B6;"></div>
<div class="color_item" awsui-qtip="#5C4038" style="background:#5C4038;"></div>
<div class="color_item" awsui-qtip="#7F7F7F" style="background:#7F7F7F;"></div>
<div class="color_item" awsui-qtip="#262626" style="background:#262626;"></div>
<div class="color_item" awsui-qtip="#A23735" style="background:#A23735;"></div>
<div class="color_item" awsui-qtip="#A66A30" style="background:#A66A30;"></div>
<div class="color_item" awsui-qtip="#A7932C" style="background:#A7932C;"></div>
<div class="color_item" awsui-qtip="#569230" style="background:#569230;"></div>
<div class="color_item" awsui-qtip="#358E90" style="background:#358E90;"></div>
<div class="color_item" awsui-qtip="#314AA4" style="background:#314AA4;"></div>
<div class="color_item" awsui-qtip="#A23C73" style="background:#A23C73;"></div>
</div>
<div class="color_items">
<div style="background-color:rgb(255,204,204);"></div>
<div style="background-color:rgb(255,230,204);"></div>
<div style="background-color:rgb(255,255,204);"></div>
<div style="background-color:rgb(230,255,204);"></div>
<div style="background-color:rgb(204,255,204);"></div>
<div style="background-color:rgb(204,255,230);"></div>
<div style="background-color:rgb(204,255,255);"></div>
<div style="background-color:rgb(204,229,255);"></div>
<div style="background-color:rgb(204,204,255);"></div>
<div style="background-color:rgb(229,204,255);"></div>
<div style="background-color:rgb(255,204,255);"></div>
<div style="background-color:rgb(255,204,230);"></div>
<div style="background-color:rgb(255,153,153);"></div>
<div style="background-color:rgb(255,204,153);"></div>
<div style="background-color:rgb(255,255,153);"></div>
<div style="background-color:rgb(204,255,153);"></div>
<div style="background-color:rgb(153,255,153);"></div>
<div style="background-color:rgb(153,255,204);"></div>
<div style="background-color:rgb(153,255,255);"></div>
<div style="background-color:rgb(153,204,255);"></div>
<div style="background-color:rgb(153,153,255);"></div>
<div style="background-color:rgb(204,153,255);"></div>
<div style="background-color:rgb(255,153,255);"></div>
<div style="background-color:rgb(255,153,204);"></div>
<div style="background-color:rgb(255,102,102);"></div>
<div style="background-color:rgb(255,179,102);"></div>
<div style="background-color:rgb(255,255,102);"></div>
<div style="background-color:rgb(179,255,102);"></div>
<div style="background-color:rgb(102,255,102);"></div>
<div style="background-color:rgb(102,255,179);"></div>
<div style="background-color:rgb(102,255,255);"></div>
<div style="background-color:rgb(102,178,255);"></div>
<div style="background-color:rgb(102,102,255);"></div>
<div style="background-color:rgb(178,102,255);"></div>
<div style="background-color:rgb(255,102,255);"></div>
<div style="background-color:rgb(255,102,179);"></div>
<div style="background-color:rgb(255,51,51);"></div>
<div style="background-color:rgb(255,153,51);"></div>
<div style="background-color:rgb(255,255,51);"></div>
<div style="background-color:rgb(153,255,51);"></div>
<div style="background-color:rgb(51,255,51);"></div>
<div style="background-color:rgb(51,255,153);"></div>
<div style="background-color:rgb(51,255,255);"></div>
<div style="background-color:rgb(51,153,255);"></div>
<div style="background-color:rgb(51,51,255);"></div>
<div style="background-color:rgb(153,51,255);"></div>
<div style="background-color:rgb(255,51,255);"></div>
<div style="background-color:rgb(255,51,153);"></div>
<div style="background-color:rgb(255,0,0);"></div>
<div style="background-color:rgb(255,128,0);"></div>
<div style="background-color:rgb(255,255,0);"></div>
<div style="background-color:rgb(128,255,0);"></div>
<div style="background-color:rgb(0,255,0);"></div>
<div style="background-color:rgb(0,255,128);"></div>
<div style="background-color:rgb(0,255,255);"></div>
<div style="background-color:rgb(0,127,255);"></div>
<div style="background-color:rgb(0,0,255);"></div>
<div style="background-color:rgb(127,0,255);"></div>
<div style="background-color:rgb(255,0,255);"></div>
<div style="background-color:rgb(255,0,128);"></div>
<div style="background-color:rgb(204,0,0);"></div>
<div style="background-color:rgb(204,102,0);"></div>
<div style="background-color:rgb(204,204,0);"></div>
<div style="background-color:rgb(102,204,0);"></div>
<div style="background-color:rgb(0,204,0);"></div>
<div style="background-color:rgb(0,204,102);"></div>
<div style="background-color:rgb(0,204,204);"></div>
<div style="background-color:rgb(0,102,204);"></div>
<div style="background-color:rgb(0,0,204);"></div>
<div style="background-color:rgb(102,0,204);"></div>
<div style="background-color:rgb(204,0,204);"></div>
<div style="background-color:rgb(204,0,102);"></div>
<div style="background-color:rgb(153,0,0);"></div>
<div style="background-color:rgb(153,76,0);"></div>
<div style="background-color:rgb(153,153,0);"></div>
<div style="background-color:rgb(77,153,0);"></div>
<div style="background-color:rgb(0,153,0);"></div>
<div style="background-color:rgb(0,153,77);"></div>
<div style="background-color:rgb(0,153,153);"></div>
<div style="background-color:rgb(0,76,153);"></div>
<div style="background-color:rgb(0,0,153);"></div>
<div style="background-color:rgb(76,0,153);"></div>
<div style="background-color:rgb(153,0,153);"></div>
<div style="background-color:rgb(153,0,77);"></div>
<div style="background-color:rgb(102,0,0);"></div>
<div style="background-color:rgb(102,51,0);"></div>
<div style="background-color:rgb(102,102,0);"></div>
<div style="background-color:rgb(51,102,0);"></div>
<div style="background-color:rgb(0,102,0);"></div>
<div style="background-color:rgb(0,102,51);"></div>
<div style="background-color:rgb(0,102,102);"></div>
<div style="background-color:rgb(0,51,102);"></div>
<div style="background-color:rgb(0,0,102);"></div>
<div style="background-color:rgb(51,0,102);"></div>
<div style="background-color:rgb(102,0,102);"></div>
<div style="background-color:rgb(102,0,51);"></div>
<div style="background-color:rgb(51,0,0);"></div>
<div style="background-color:rgb(51,26,0);"></div>
<div style="background-color:rgb(51,51,0);"></div>
<div style="background-color:rgb(26,51,0);"></div>
<div style="background-color:rgb(0,51,0);"></div>
<div style="background-color:rgb(0,51,26);"></div>
<div style="background-color:rgb(0,51,51);"></div>
<div style="background-color:rgb(0,25,51);"></div>
<div style="background-color:rgb(0,0,51);"></div>
<div style="background-color:rgb(25,0,51);"></div>
<div style="background-color:rgb(51,0,51);"></div>
<div style="background-color:rgb(51,0,26);"></div>
<div class="clear"></div>
<div class="color_base">
<div class="color_item" awsui-qtip="#FFFFFF" style="background:#FFFFFF;border-color:#E9EDF2;"></div>
<div class="color_item" awsui-qtip="#7F8B98" style="background:#7F8B98;"></div>
<div class="color_item" awsui-qtip="#000000" style="background:#000000;"></div>
<div class="color_item" awsui-qtip="#E74F4C" style="background:#E74F4C;"></div>
<div class="color_item" awsui-qtip="#ED9745" style="background:#ED9745;"></div>
<div class="color_item" awsui-qtip="#E0C431" style="background:#E0C431;"></div>
<div class="color_item" awsui-qtip="#7BD144" style="background:#7BD144;"></div>
<div class="color_item" awsui-qtip="#4CCBCD" style="background:#4CCBCD;"></div>
<div class="color_item" awsui-qtip="#4669EA" style="background:#4669EA;"></div>
<div class="color_item" awsui-qtip="#E855A4" style="background:#E855A4;"></div>
</div>
<div class="history">
<div class="history_title"><I18N#最近使用></div>
<div class="history_color">
<div class="color_item disabled" style="background: rgba(255,255,255,1);border-color: #E9EDF2;"></div>
<div class="color_item disabled" style="background: rgba(255,255,255,1);border-color: #E9EDF2;"></div>
<div class="color_item disabled" style="background: rgba(255,255,255,1);border-color: #E9EDF2;"></div>
<div class="color_item disabled" style="background: rgba(255,255,255,1);border-color: #E9EDF2;"></div>
<div class="color_item disabled" style="background: rgba(255,255,255,1);border-color: #E9EDF2;"></div>
<div class="color_item disabled" style="background: rgba(255,255,255,1);border-color: #E9EDF2;"></div>
<div class="color_item disabled" style="background: rgba(255,255,255,1);border-color: #E9EDF2;"></div>
<div class="color_item disabled" style="background: rgba(255,255,255,1);border-color: #E9EDF2;"></div>
<div class="color_item disabled" style="background: rgba(255,255,255,1);border-color: #E9EDF2;"></div>
<div class="color_item disabled" style="background: rgba(255,255,255,1);border-color: #E9EDF2;"></div>
</div>
</div>
<div class="color_options">
<div id="color_draw" class="color_draw " awsui-qtip="吸色(Esc退出)"><i class="awsui-iconfont">&#xe844;</i></div>
<div class="color_edit">
<div class="hex" style="display: flex;">
<div class="input_change">Hex<i class="awsui-iconfont">&#xe8ed;</i></div>
<div class="input_box"><input class="input_hex" type="text" maxlength="6"></div>
</div>
<div class="rgb" style="display: none;">
<div class="input_change">RGB<i class="awsui-iconfont">&#xe8ed;</i></div>
<div class="input_box">
<input class="input_r" type="text" maxlength="3">
<input class="input_g" type="text" maxlength="3">
<input class="input_b" type="text" maxlength="3">
</div>
</div>
</div>
<div class="color_show">
<span id="color_show_now" class="color_show_now" awsui-qtip="当前颜色"></span>
</div>
</div>
<div class="color_sep"></div>
<div class="color_more">
<img class="color_more_bg" src="../apps/com.actionsoft.apps.coe.pal/img/more_color.png"/>
<span><I18N#更多颜色></span>
<span class="extend-icon"><i class="awsui-iconfont">&#xe717;</i></span>
<div class="more_panel left">
<div class="color_panel" style="background: rgb(0, 251, 255);">
<div class="saturation_white">
<div class="saturation_black"></div>
</div>
<div class="picker_pin" style="color: rgb(76, 203, 205); left: 102px; top: 20px;"></div>
</div>
<div class="hue_horizontal">
<div class="picker_pin" style="color: rgb(0, 251, 255); left: 81px;"></div>
</div>
</div>
</div>
</div>
<ul id="bar_list_file" class="menu list options_menu noico">

15
com.actionsoft.apps.coe.pal/web/com.actionsoft.apps.coe.pal/img/bg_gradient.svg Normal file
View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>矩形备份 211</title>
<defs>
<linearGradient x1="-1.11022302e-14%" y1="50%" x2="100%" y2="50%" id="linearGradient-1">
<stop stop-color="#E6ECF4" offset="0%"></stop>
<stop stop-color="#B6CEF0" offset="100%"></stop>
</linearGradient>
</defs>
<g id="色板工具" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-312.000000, -1277.000000)" fill="url(#linearGradient-1)" id="矩形备份-211">
<rect x="312" y="1277" width="24" height="24" rx="12"></rect>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 790 B

518
com.actionsoft.apps.coe.pal/web/com.actionsoft.apps.coe.pal/lib/designer/scripts/diagraming/designer.ui.js
View File

@ -237,19 +237,28 @@ var UI = {
});
// 字体颜色
$("#bar_font_color").button({
onMousedown : function() {
onMousedown: function () {
var color = $("#bar_font_color").button("getColor");
$.colorpicker({
target : $("#bar_font_color"),
onSelect : function(color) {
let pickerHtml = $("#color_picker", parent.document).html()
let newPicker = $("#color_picker").html(pickerHtml)
newPicker.dropdown({
target: $("#bar_font_color")
})
ColorPicker.init({
color: color,
pickerDom: newPicker,
page: 'graph',
onSelect: function (color) {
Designer.setFontStyle({
color : color
color: color
});
$("#bar_font_color").button("setColor",
color)
},
color : color
});
onClose: function () {
newPicker.dropdown("close")
}
})
}
});
// 文本对齐
@ -268,58 +277,78 @@ var UI = {
});
// 填充
$("#bar_fill").button({
onMousedown : function() {
onMousedown: function () {
var color = $("#bar_fill").button("getColor");
$.colorpicker({
target : $("#bar_fill"),
onSelect : function(color) {
let pickerHtml = $("#color_picker", parent.document).html()
let newPicker = $("#color_picker").html(pickerHtml)
newPicker.dropdown({
target: $("#bar_fill")
})
ColorPicker.init({
color: color,
pickerDom: newPicker,
page: 'graph',
transparent: true,
extend: `<div id="bar_fill_gradient" title="` + 颜色渐变 + `" class='extend_item'><img src="../apps/com.actionsoft.apps.coe.pal/img/bg_gradient.svg"/></div>`,
onSelect: function (color) {
Designer.setFillStyle({
type : "solid",
color : color
type: "solid",
color: color
});
$("#bar_fill").button("setColor", color)
},
color : color,
extend : "<div id='bar_fill_gradient' title='渐变' class='toolbar_button active'><div class='ico gradient'></div></div><!--div id='bar_fill_img' title='图片...' class='toolbar_button active'><div class='ico ico_img'></div></div--><!--div id='bar_fill_more' class='toolbar_button active'>More...</div-->"
});
$("#bar_fill_gradient").unbind().bind("click", function() {
onClose: function () {
newPicker.dropdown("close")
}
})
$("#bar_fill_gradient").unbind().bind("click", function () {
Designer.setFillStyle({
type : "gradient"
type: "gradient"
});
$("#color_picker").dropdown("close");
});
$("#bar_fill_img").unbind().bind("click", function() {
UI.showImageSelect(function(fileId, w, h) {
Designer.setFillStyle({
type : "image",
fileId : fileId,
imageW : w,
imageH : h
});
});
$("#color_picker").dropdown("close");
});
$("#bar_fill_more").unbind().bind("click", function() {
Dock.showView("graphic");
$("#color_picker").dropdown("close");
});
// 暂时注释掉无用代码
// $("#bar_fill_img").unbind().bind("click", function () {
// UI.showImageSelect(function (fileId, w, h) {
// Designer.setFillStyle({
// type: "image",
// fileId: fileId,
// imageW: w,
// imageH: h
// });
// });
// $("#color_picker").dropdown("close");
// });
// $("#bar_fill_more").unbind().bind("click", function () {
// Dock.showView("graphic");
// $("#color_picker").dropdown("close");
// });
}
});
// 线条颜色
$("#bar_line_color").button({
onMousedown : function() {
onMousedown: function () {
var color = $("#bar_line_color").button("getColor");
$.colorpicker({
target : $("#bar_line_color"),
onSelect : function(color) {
let pickerHtml = $("#color_picker", parent.document).html()
let newPicker = $("#color_picker").html(pickerHtml)
newPicker.dropdown({
target: $("#bar_line_color")
})
ColorPicker.init({
color: color,
pickerDom: newPicker,
page: 'graph',
onSelect: function (color) {
Designer.setLineStyle({
lineColor : color
lineColor: color
});
$("#bar_line_color").button("setColor",
color)
},
color : color
});
onClose: function () {
newPicker.dropdown("close")
},
})
}
});
// 线条宽度
@ -4328,6 +4357,415 @@ var Navigator = {
}
}
};
const ColorPicker = {
hex: 'FFFFFF',
hsv: {
h: 0,
s: 100,
v: 100
},
init: function (option) {
let defaultOpt = {
color: '255,255,255', // 初始颜色
transparent: false, // 是否填充
extend: '', // 扩展 如果需要格式为想要追加的html
page: 'main', // 主页main 设计器 graph
}
picker = option.pickerDom
options = Object.assign({}, defaultOpt, option)
if (!picker.attr("init")) {
picker.attr("init", true)
}
picker.children(".color_extend").remove()
if (options.extend) {
picker.append("<div class='color_extend'>" + options.extend + "</div>")
}
$("body").width() - picker.offset().left - picker.width() < 180 ? picker.find(".more_panel").addClass("left") : picker.find(".more_panel").removeClass("left")
if (options.transparent) {
picker.removeClass("alpha_disabled")
} else {
picker.addClass("alpha_disabled")
}
if (!window.EyeDropper) {
picker.find(".color_options .color_draw").hide()
}
this.setHistory()
this.domEvent()
// 当前颜色值填充
let curHexColor = options.color == '0,0,0,0' ? 'FFFFFF' : options.color ? ColorPicker.rgbToHex(options.color) : 'FFFFFF'
this.hex = curHexColor
this.setColorByInput("input_hex", curHexColor)
},
close: function () {
if (options.onClose) {
options.onClose()
}
},
// 事件
domEvent: function () {
// 颜色选择
picker.on("click", ".color_item", function () {
if (options.onSelect) {
let color = $(this).css("background-color")
ColorPicker.setHistory(color)
options.onSelect(color.replace(/[^\d,\.]/g, ""))
}
ColorPicker.close()
})
// 没有填充
picker.find(".color_transparent").unbind().bind("click", function () {
if (options.onSelect) {
options.onSelect('0,0,0,0')
}
ColorPicker.close()
})
// 颜色值切换
picker.find(".color_edit .input_change").off("click").on("click", function () {
$(this).parent().css("display", "none").siblings().css("display", "flex")
})
// 输入框
let oldValue = ''
picker.find(".input_box input").off("focus.colorPicker").on("focus.colorPicker", function () {
$(this).select()
oldValue = $(this).val()
}).off("mousedown.colorPicker").on("mousedown.colorPicker", function (event) {
event.stopPropagation()
})
picker.find(".input_box input").off("keydown.colorPicker").on("keydown.colorPicker", function (event) {
event.stopPropagation()
if (event.keyCode == 13) { // 回车
ColorPicker.close()
}
})
picker.find(".input_box input").off("paste.colorPicker").on("paste.colorPicker", function (event) {
event.stopPropagation()
})
picker.find(".input_box input").off("input.colorPicker").on("input.colorPicker", function (event) {
event.stopPropagation()
let value = $(this).val()
if ($(this).hasClass("input_hex")) {
value = value.replace(/[^\da-fA-F]/g, "")
$(this).val(value)
} else {
value = value.replace(/[^\d]/g, "")
if (parseInt(value) > 255) {
value = "255"
}
$(this).val(value)
}
if (oldValue !== value) {
oldValue = value;
// 输入完成之后
ColorPicker.setColorByInput($(this).attr("class"), value)
ColorPicker.selectColor()
}
})
// 拖动选择更多颜色
let isMouseDown
const $colorPanel = picker.find(".color_panel,.hue_horizontal")
$colorPanel.off("mousedown.colorPicker").on("mousedown.colorPicker", function (event) {
isMouseDown = true
const $target = $(this)
const left = $target.offset().left
const top = $target.offset().top
ColorPicker.setPickerPin($target, event.pageX - left, event.pageY - top)
let $body = options.page == 'main' ? $("body", parent.document) : $("body")
$body.off("mousemove.colorPicker").on("mousemove.colorPicker", function (e) {
e.preventDefault()
e.stopPropagation()
ColorPicker.setPickerPin($target, e.pageX - left, e.pageY - top)
})
$body.off("mouseup.colorPicker").on("mouseup.colorPicker", function (e) {
e.preventDefault()
e.stopPropagation()
$body.off("mousemove.colorPicker")
$body.off("mouseup.colorPicker")
isMouseDown = false
ColorPicker.selectColor()
})
})
// 吸色
picker.find(".color_options .color_draw").off("click").on("click", function () {
ColorPicker.initColorDraw()
})
},
// 历史
setHistory: function (color) {
let arr = JSON.parse(localStorage.getItem("recent_used_color")) || []
if (color) {
let obj = {
color: color,
time: (new Date).getTime()
}
arr = arr.filter(function (e) {
return e.color != color;
})
if (arr.length === 20) {
arr.pop()
}
arr.unshift(obj)
localStorage.setItem("recent_used_color", JSON.stringify(arr))
}
if (arr.length < 10) {
arr = arr.concat(Array(10 - arr.length).fill({disabled: true}))
}
this.renderHistoryColor(arr.slice(0, 10))
},
renderHistoryColor: function (colorArr) {
if (colorArr) {
let html = ''
colorArr.forEach(i => {
if (i.disabled) {
html += '<div class="color_item disabled" style="background: rgba(255,255,255,1);border-color: #E9EDF2;"></div>'
} else {
let hexColor = '#' + ColorPicker.rgbToHex(i.color)
let border = ''
if (i.color.indexOf('255,255,255')) {
border = "border-color:#E9EDF2;"
}
html += `<div class="color_item" awsui-qtip="${hexColor}" style="background: ${hexColor};${border}"></div>`
}
})
picker.find(".history_color").html(html)
}
},
// 输入框
setColorByInput: function (type, color) {
let curColor = color
switch (type) {
case 'input_hex':
if (color.length == 3 || color.length == 6) {
this.hex = curColor
}
break;
default:
let r = picker.find(".input_r").val(), g = picker.find(".input_g").val(), b = picker.find(".input_b").val(), obj = {
r: r ? parseInt(r) : 0,
g: g ? parseInt(g) : 0,
b: b ? parseInt(b) : 0
}
this.hex = ColorPicker.rgbToHex(`rgb(${obj.r},${obj.g},${obj.b})`)
}
this.hsv = ColorPicker.rgbToHsv(ColorPicker.hexToRgb(this.hex))
ColorPicker.setInputValue(type == 'input_hex' ? curColor : undefined)
ColorPicker.setShowColor()
ColorPicker.setPancelColor()
ColorPicker.setPickerColor()
ColorPicker.changeViewByColor()
},
// 更多颜色div -- 拖动事件
setPickerPin: function (targetDom, x, y) {
let width = targetDom.width()
let height = targetDom.height()
let curRgb = ColorPicker.hexToRgb(this.hex)
let hsvColor = ColorPicker.rgbToHsv(curRgb)
x = Math.max(0, Math.min(x, width))
// 横向选择颜色
if (targetDom.hasClass('hue_horizontal')) {
y = '50%'
hsvColor.h = Math.round(360 * x / width)
} else {
y = Math.max(0, Math.min(y, height))
hsvColor.s = Math.round(100 * x / width)
hsvColor.v = Math.round(100 * (height - y) / height)
}
targetDom.find(".picker_pin").css({
left: x,
top: y
})
this.hsv = hsvColor
let newColor = ColorPicker.hsvToRgb(hsvColor)
this.hex = ColorPicker.rgbToHex(`rgb(${newColor.r},${newColor.g},${newColor.b})`)
ColorPicker.setInputValue()
ColorPicker.setShowColor()
ColorPicker.setPickerColor()
if (targetDom.hasClass('hue_horizontal')) {
ColorPicker.setPancelColor()
}
},
/************************************ 修改颜色 *****************************************/
// 根据颜色改变拖动条位置
changeViewByColor: function () {
let curHsv = this.hsv
let panel = picker.find(".color_panel")
let horizontal = picker.find(".hue_horizontal")
panel.find(".picker_pin").css({
left: Math.round(curHsv.s * panel.width() / 100),
top: Math.round((100 - curHsv.v) * panel.height() / 100)
})
horizontal.find(".picker_pin").css({
left: Math.round(curHsv.h / 360 * horizontal.width())
})
},
// 设置更多颜色div背景色
setPancelColor: function () {
let curHsv = this.hsv
let newRgb = ColorPicker.hsvToRgb({
h: curHsv.h,
s: 100,
v: 100
})
picker.find(".color_panel").css("background", `rgb(${newRgb.r},${newRgb.g},${newRgb.b})`)
},
// 设置更多颜色div 拖动条背景色
setPickerColor: function () {
let curHsv = this.hsv
let newRgb = ColorPicker.hsvToRgb({
h: curHsv.h,
s: 100,
v: 100
})
picker.find(".color_panel .picker_pin").css("color", '#' + this.hex)
picker.find(".hue_horizontal .picker_pin").css("color", `rgb(${newRgb.r},${newRgb.g},${newRgb.b})`)
},
// 设置当前颜色div背景色
setShowColor: function () {
picker.find(".color_show_now").css("background", '#' + this.hex)
},
// 输入框
setInputValue: function (val) {
picker.find('.input_hex').val(val || this.hex)
let rgb = ColorPicker.hexToRgb(this.hex)
picker.find('.input_r').val(rgb.r)
picker.find('.input_g').val(rgb.g)
picker.find('.input_b').val(rgb.b)
},
// 设置形状颜色写入本地存储
selectColor: function () {
if (options.onSelect) {
let color = picker.find(".color_show_now").css("background-color")
ColorPicker.setHistory(color)
options.onSelect(color.replace(/[^\d,\.]/g, ""))
}
},
/************************************ 颜色转换 *****************************************/
rgbToHex: function (rgbColor) {
let rgbArray = rgbColor.replace(/[^\d,]/g, '').split(',')
let hexString = "";
for (let i = 0; i < 3; i++) {
let hex = Number(rgbArray[i]).toString(16)
if (hex.length < 2) {
hex = "0" + hex;
}
hexString += hex;
}
return hexString.toUpperCase();
},
hexToRgb: function (hexColor) {
let hex = hexColor.replace('#', '');
if (hex.length === 3) {
hex = hex.split('').map(function (char) {
return char + char;
}).join('');
}
let r = parseInt(hex.substring(0, 2), 16) || 0
let g = parseInt(hex.substring(2, 4), 16) || 0
let b = parseInt(hex.substring(4, 6), 16) || 0
return {
r: r,
g: g,
b: b
}
},
rgbToHsv: function (rgbColor) {
let {r, g, b} = rgbColor
r /= 255;
g /= 255;
b /= 255;
let max = Math.max(r, g, b);
let min = Math.min(r, g, b);
let diff = max - min;
let h, s, v;
// 计算色相 (H)
if (diff === 0) {
h = 0;
} else if (max === r) {
h = (60 * ((g - b) / diff) + 360) % 360;
} else if (max === g) {
h = (60 * ((b - r) / diff) + 120) % 360;
} else {
h = (60 * ((r - g) / diff) + 240) % 360;
}
// 计算饱和度 (S)
if (max === 0) {
s = 0;
} else {
s = (diff / max) * 100;
}
// 计算亮度/明度 (V)
v = max * 100;
return {
h: Math.round(h),
s: Math.round(s),
v: Math.round(v)
}
},
hsvToRgb: function (hsvColor) {
let {h, s, v} = hsvColor
s = s / 100;
v = v / 100;
var r = 0, g = 0, b = 0;
var i = parseInt((h / 60) % 6);
var f = h / 60 - i;
var p = v * (1 - s);
var q = v * (1 - f * s);
var t = v * (1 - (1 - f) * s);
switch (i) {
case 0:
r = v;
g = t;
b = p;
break;
case 1:
r = q;
g = v;
b = p;
break;
case 2:
r = p;
g = v;
b = t;
break;
case 3:
r = p;
g = q;
b = v;
break;
case 4:
r = t;
g = p;
b = v;
break;
case 5:
r = v;
g = p;
b = q;
break;
default:
break;
}
r = parseInt(r * 255)
g = parseInt(g * 255)
b = parseInt(b * 255)
return {
r,
g,
b
}
},
// 吸色盘
initColorDraw: function () {
if (window.EyeDropper) {
(new EyeDropper).open().then(function (res) {
let color = res.sRGBHex.replace(/[^\da-fA-F]/g, "").toUpperCase()
ColorPicker.setColorByInput('input_hex', color)
ColorPicker.selectColor()
}).catch(function () {
})
}
},
};
/**
* jQuery的扩展
*/

376
com.actionsoft.apps.coe.pal/web/com.actionsoft.apps.coe.pal/lib/designer/themes/default/diagraming/designer.colorpicker.css Normal file
View File

@ -0,0 +1,376 @@
.color_picker {
width: 224px;
background: #fff;
box-shadow: 0 4px 10px 0 rgba(0,0,0,.1);
border-radius: 4px;
border: 1px solid #f3f5f7;
padding: 8px 12px;
/*z-index: 99999;*/
box-sizing: border-box;
font-size: 12px;
color: #212930;
}
.color_picker .color_transparent {
height: 26px;
border-radius: 4px;
border: 1px solid #dfe2e5;
display: flex;
align-items: center;
justify-content: center;
}
.color_picker .color_transparent:hover {
background: #f3f5f7
}
.color_picker .color_group {
display: flex;
flex-wrap: wrap;
margin-top: 8px;
}
.color_picker .color_base {
display: flex;
margin-top: 4px;
}
.color_item {
width: 16px;
height: 16px;
border-radius: 2px;
border: 1px solid #fff;
position: relative;
overflow: hidden;
margin-right: 2px;
margin-bottom: 2px;
}
.color_picker .color_item:nth-child(10n) {
margin-right: 0;
}
.color_picker .color_item:hover {
box-shadow: 0 0 4px 0 rgba(0,0,0,.3)
}
/************************************* 最近使用 *********************************/
.color_picker .history {
margin-top: 4px;
color: #6c7d8f;
}
.color_picker .history .history_title {
line-height: 20px;
}
.color_picker .history .history_color {
display: flex;
flex-wrap: wrap;
margin-top: 4px;
}
.color_picker .disabled {
cursor: default!important;
pointer-events: none
}
/************************************* 颜色值切换 *********************************/
.color_picker .color_options {
height: 28px;
margin-top: 6px;
display: flex;
align-items: center
}
.color_picker .color_options .color_draw {
width: 28px;
height: 28px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
cursor: default;
flex: none
}
.color_picker .color_options .color_draw:hover {
background: #f3f5f9
}
.color_picker .color_options .color_edit {
flex: auto
}
.color_picker .color_options .color_edit>div {
display: flex;
align-items: center
}
.color_picker .color_options .color_edit>div .input_change {
width: 42px;
height: 20px;
margin-left: 4px;
margin-right: 8px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
cursor: default;
flex: none
}
.color_picker .color_options .color_edit>div .input_change:hover {
background: #f3f5f9
}
.color_picker .color_options .color_edit>div .input_change i {
margin-left: 2px;
font-size: 12px;
color: #b4b9c8
}
.color_picker .color_options .color_edit>div .input_box {
width: 92px;
height: 24px;
border-radius: 4px;
border: 1px solid #e9edf2;
display: flex;
overflow: hidden;
flex: auto
}
.color_picker .color_options .color_edit>div .input_box:focus-within {
border-color: #067bef
}
.color_picker .color_options .color_edit>div .input_box input {
width: 30px;
line-height: 100%;
background: #fff;
padding: 0;
margin: 0;
border: none;
border-left: 1px solid #e9edf2;
text-align: center;
flex: auto
}
.color_picker .color_options .color_edit>div .input_box input:first-child {
border-left: none
}
.color_picker .color_options .color_edit>div .input_box input.input_hex {
padding-left: 8px;
text-align: left
}
.color_picker .color_options .color_edit .rgb {
display: none
}
.color_picker .color_options .color_show {
display: flex;
flex: none;
margin-left: 8px
}
.color_picker .color_options .color_show span {
width: 16px;
height: 16px;
border: 1px solid rgba(0,0,0,.1);
border-radius: 2px;
overflow: hidden;
position: relative
}
.color_picker .color_options .color_show span:after {
content: "";
display: block;
border-radius: 1px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
/************************************* 更多颜色 *********************************/
.color_picker .color_sep {
height: 1px;
background: #e9edf2;
margin: 8px 0
}
.color_picker .color_more {
height: 30px;
line-height: 30px;
display: flex;
align-items: center;
border-radius: 4px;
box-sizing: border-box;
position: relative;
cursor: default
}
.color_picker .color_more .color_more_bg {
width: 16px;
height: 16px;
margin-right: 8px;
border-radius: 8px;
background-size: cover
}
.color_picker .color_more>.extend-icon {
margin-left: auto;
cursor: default;
color: #9aa5b8
}
.color_picker .color_more:hover {
background: #f3f5f7
}
/************************************* 颜色选择器 *********************************/
.color_picker .color_more:hover .more_panel {
display: block
}
.color_picker .more_panel {
width: 178px;
height: 130px;
box-sizing: border-box;
padding: 8px;
background: #fff;
box-shadow: 0 4px 10px 0 rgba(0,0,0,.1);
border-radius: 4px;
position: absolute;
bottom: -9px;
left: calc(100% + 13px);
display: none;
user-select: none
}
.color_picker .more_panel:before {
content: "";
display: block;
height: 46px;
width: 20px;
position: absolute;
bottom: 0;
left: -18px
}
.color_picker .more_panel.left {
left: -191px
}
.color_picker .more_panel.left:before {
left: 100%
}
.color_picker .more_panel .color_panel {
width: 162px;
height: 100px;
border-radius: 4px;
position: relative;
overflow: hidden
}
.color_picker .more_panel .color_panel .saturation_white {
height: 100%;
background: linear-gradient(90deg,#fff,hsla(0,0%,100%,0))
}
.color_picker .more_panel .color_panel .saturation_black {
height: 100%;
background: linear-gradient(0deg,#000,transparent)
}
.color_picker .more_panel .alpha_horizontal,.color_picker .more_panel .hue_horizontal {
width: 162px;
height: 8px;
border-radius: 4px;
margin-top: 8px;
position: relative
}
.color_picker .more_panel .alpha_horizontal .picker_pin,.color_picker .more_panel .hue_horizontal .picker_pin {
border: 2px solid #fff
}
.color_picker .more_panel .hue_horizontal {
background: linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)
}
.color_picker .more_panel .alpha_horizontal:before {
border-radius: 4px;
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg,currentColor,transparent)
}
.color_picker .picker_pin {
width: 12px;
height: 12px;
box-sizing: border-box;
box-shadow: 0 0 4px 0 #aaa;
border-radius: 6px;
border: 1px solid #fff;
margin-left: -6px;
margin-top: -6px;
position: absolute;
left: 50%;
top: 50%
}
.color_picker .picker_pin:after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: currentColor;
border-radius: 50%
}
.color_picker.alpha_disabled .color_transparent {
display: none
}
.color_picker.alpha_disabled .color_item.alpha:hover:after {
display: block;
width: 100%;
height: 100%;
content: "\e6eb";
font-size: 14px;
color: red;
background: hsla(0,0%,100%,.8);
position: absolute
}
/************************************* 颜色渐变 *********************************/
.color_picker .color_extend {
height: 30px;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid #e9edf2;
position: relative;
display: flex;
align-items: center
}
.color_picker .color_extend .extend_item {
width: 24px;
height: 24px;
margin-right: 12px;
border-radius: 12px;
overflow: hidden
}
.color_picker .color_extend .extend_item img {
width: 100%;
height: 100%
}