add two additional plugin's panels
Abdullah Alfaraj
parent
bbc069fee9
commit
ad987a093a
|
|
@ -0,0 +1,29 @@
|
|||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="800px" height="800px" viewBox="0 0 68.334 68.334"
|
||||
xml:space="preserve">
|
||||
<g>
|
||||
<path style="stroke: #ffffff; fill: #ffffff; stroke-width:0.5px" d="M65.333,60.834h3v7.5h-7.5v-3h4.5V60.834z M18.167,68.334h10.667v-3H18.167V68.334z M39.501,68.334h10.666v-3H39.501
|
||||
V68.334z M3.001,60.834h-3v7.5h7.5v-3h-4.5V60.834z M3.001,39.5h-3v10.667h3V39.5z M3.001,18.167h-3v10.667h3V18.167z M0.001,7.5h3
|
||||
V3h4.5V0h-7.5V7.5z M28.833,0H18.167v3h10.666V0z M50.167,0H39.5v3h10.667V0z M60.833,0v3h4.5v4.5h3V0H60.833z M65.333,50.167h3
|
||||
V39.5h-3V50.167z M65.333,28.834h3V18.167h-3V28.834z" />
|
||||
</g>
|
||||
<g> <path style="stroke: #000000; fill: #ffffff; stroke-width:0.5px" d="M56.313,22.29l-9.031-3.358c-1.404-0.52-2.975,0.005-3.781,1.263l-5.052,7.87
|
||||
c-0.947,1.478-0.519,3.443,0.959,4.391c0.428,0.275,0.897,0.435,1.372,0.485c1.16,0.125,2.346-0.395,3.019-1.444l1.566-2.441
|
||||
c3.058,10.698-3.319,16.024-3.628,16.273c-1.357,1.095-1.592,3.088-0.508,4.456c0.551,0.697,1.334,1.104,2.154,1.193
|
||||
c0.784,0.084,1.6-0.125,2.271-0.646c3.824-2.969,9.186-11.21,5.804-23.066l2.642,0.981c1.641,0.61,3.473-0.226,4.086-1.872
|
||||
C58.798,24.731,57.96,22.901,56.313,22.29z M14.594,26.495l9.266,1.25c1.74,0.235,3.34-0.985,3.575-2.725
|
||||
c0.067-0.504,0.013-0.998-0.142-1.449c-0.376-1.104-1.348-1.958-2.583-2.124l-2.876-0.389c8.403-7.292,15.926-3.765,16.281-3.59
|
||||
c1.567,0.767,3.472,0.136,4.254-1.422c0.399-0.796,0.437-1.679,0.17-2.459c-0.255-0.747-0.788-1.397-1.546-1.787
|
||||
c-4.309-2.209-14.043-3.583-23.357,4.493l-0.227-2.807c-0.141-1.746-1.674-3.053-3.424-2.912c-1.748,0.141-3.053,1.673-2.911,3.423
|
||||
l0.775,9.604C11.973,25.094,13.111,26.296,14.594,26.495z M32.264,42.794c-0.65-1.63-2.5-2.422-4.132-1.771
|
||||
c-0.472,0.188-0.874,0.479-1.191,0.836c-0.776,0.871-1.04,2.139-0.577,3.293l1.076,2.695c-10.482-3.726-11.114-12.01-11.138-12.406
|
||||
c-0.104-1.741-1.591-3.089-3.331-3.002c-0.89,0.044-1.677,0.447-2.225,1.063c-0.523,0.59-0.828,1.374-0.795,2.225
|
||||
c0.196,4.838,3.791,13.988,15.406,18.121l-2.332,1.579c-1.45,0.981-1.834,2.959-0.85,4.413c0.983,1.454,2.96,1.835,4.412,0.852
|
||||
l7.979-5.402c1.24-0.842,1.724-2.425,1.169-3.812L32.264,42.794z"/>
|
||||
</g>
|
||||
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
135
index.html
135
index.html
|
|
@ -588,6 +588,18 @@
|
|||
height: 30px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.svgButton {
|
||||
font-family: Arial, Verdana;
|
||||
|
||||
background-color: #777;
|
||||
background-size: 30px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.selectionAreaButton {
|
||||
background-image: url(./icon/selection-area_2.svg);
|
||||
}
|
||||
.interrogateButton {
|
||||
font-family: Arial, Verdana;
|
||||
background-image: url(./icon/writing-icon.svg);
|
||||
|
|
@ -699,6 +711,19 @@
|
|||
color: white;
|
||||
} */
|
||||
</style>
|
||||
<style>
|
||||
.second_panel {
|
||||
flex: 1 1 auto;
|
||||
/* overflow: scroll; */
|
||||
overflow-y: scroll;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
flex-direction: column;
|
||||
height: 100%; /* Set a fixed height for the container */
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<!-- <sp-textarea id="tool_tip" open placement="top">use this when you want to fill empty areas of the canvas</sp-textarea> -->
|
||||
|
|
@ -2047,8 +2072,7 @@
|
|||
></button>
|
||||
|
||||
<button
|
||||
class="btnSquare layerToSelection"
|
||||
id="btnLayerToSelection"
|
||||
class="btnSquare layerToSelection btnLayerToSelection"
|
||||
title="Move and reSize the highlighted layer to fit into the Selection Area "
|
||||
></button>
|
||||
<button
|
||||
|
|
@ -3008,5 +3032,112 @@ l32 44 -47 62 c-67 90 -253 281 -358 368 -248 208 -538 351 -802 397 -90 16
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<uxp-panel panelid="second_panel">
|
||||
<div id="search_second_panel" class="container second_panel">
|
||||
<div id="sp-control_net-tab-page2"></div>
|
||||
<sp-divider class="line-divider" size="large"></sp-divider>
|
||||
<sp-divider class="line-divider" size="large"></sp-divider>
|
||||
<div class="reactViewerContainer"></div>
|
||||
<sp-divider class="line-divider" size="large"></sp-divider>
|
||||
<sp-divider class="line-divider" size="large"></sp-divider>
|
||||
<div class="previewContainer"></div>
|
||||
</div>
|
||||
</uxp-panel>
|
||||
|
||||
<uxp-panel panelid="toolbar">
|
||||
<div
|
||||
id="toolbar_panel"
|
||||
class="_container"
|
||||
style="
|
||||
margin: 0;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
/* padding-bottom: 5px; */
|
||||
flex-direction: column;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
margin: 0;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
/* padding: 1px; */
|
||||
flex-direction: column;
|
||||
"
|
||||
>
|
||||
<button
|
||||
class="btnSquare btnGenerateClass"
|
||||
id="btnGenerateUpscale"
|
||||
>
|
||||
Generate upscale
|
||||
</button>
|
||||
<button
|
||||
class="btnSquare btnInterruptClass"
|
||||
id="btnInterruptUpscale"
|
||||
style="display: none"
|
||||
>
|
||||
Interrupt
|
||||
</button>
|
||||
<div>
|
||||
<button
|
||||
title="Keep all generated images on the canvas"
|
||||
class="btnSquare acceptClass acceptAllImgBtn"
|
||||
style="display: none; margin-right: 3px"
|
||||
></button>
|
||||
<button
|
||||
title="Delete all generated images from the canvas"
|
||||
class="btnSquare discardClass discardAllImgBtn"
|
||||
style="display: none; margin-right: 3px"
|
||||
></button>
|
||||
<button
|
||||
title="Keep only the highlighted images"
|
||||
class="btnSquare acceptSelectedClass acceptSelectedImgBtn"
|
||||
style="display: none; margin-right: 3px"
|
||||
></button>
|
||||
<button
|
||||
title="Delete only the highlighted images"
|
||||
class="btnSquare discardSelectedClass discardSelectedImgBtn"
|
||||
style="display: none; margin-right: 3px"
|
||||
></button>
|
||||
|
||||
<button
|
||||
class="btnSquare layerToSelection btnLayerToSelection"
|
||||
title="Move and reSize the highlighted layer to fit into the Selection Area "
|
||||
style="margin-right: 3px"
|
||||
></button>
|
||||
<button
|
||||
class="btnSquare snapshotButton"
|
||||
title="create a snapshot of what you see on the canvas and place on a new layer"
|
||||
style="margin-right: 3px"
|
||||
></button>
|
||||
<button
|
||||
class="btnSquare resetButton"
|
||||
id="btnResetSettings"
|
||||
title="reset the ui settings to their default values"
|
||||
style="margin-right: 3px"
|
||||
></button>
|
||||
<button
|
||||
class="btnSquare interrogateButton"
|
||||
id="btnInterrogate"
|
||||
title="Interrogate the selected area, convert Image to Prompt"
|
||||
style="margin-right: 3px"
|
||||
></button>
|
||||
<button
|
||||
class="btnSquare svgButton selectionAreaButton"
|
||||
id="btnSelectionArea"
|
||||
style="margin-right: 3px"
|
||||
title="Reselect the selection area for the current session"
|
||||
></button>
|
||||
<!-- <button id="scrollToPrompt" class="btnSquare svgButton">
|
||||
P
|
||||
</button> -->
|
||||
<!-- <button id="scrollToViewer" class="btnSquare svgButton">
|
||||
V
|
||||
</button> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</uxp-panel>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
7
index.js
7
index.js
|
|
@ -2761,9 +2761,8 @@ document.querySelector('#mModelsMenu').addEventListener('change', (evt) => {
|
|||
sdapi.requestSwapModel(g_model_title)
|
||||
})
|
||||
//REFACTOR: move to events.js
|
||||
document
|
||||
.getElementById('btnLayerToSelection')
|
||||
.addEventListener('click', async () => {
|
||||
document.querySelectorAll('.btnLayerToSelection').forEach((el) => {
|
||||
el.addEventListener('click', async () => {
|
||||
try {
|
||||
const isSelectionAreaValid =
|
||||
await psapi.checkIfSelectionAreaIsActive()
|
||||
|
|
@ -2777,6 +2776,8 @@ document
|
|||
console.warn(e)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
//REFACTOR: move to events.js
|
||||
document
|
||||
.getElementById('btnSetInitImageViewer')
|
||||
|
|
|
|||
106
manifest.json
106
manifest.json
|
|
@ -36,7 +36,7 @@
|
|||
"entrypoints": [
|
||||
{
|
||||
"type": "panel",
|
||||
"id": "vanilla",
|
||||
"id": "main_panel",
|
||||
"label": {
|
||||
"default": "Auto-Photoshop-SD",
|
||||
"en-US": "Auto-Photoshop-SD",
|
||||
|
|
@ -85,6 +85,110 @@
|
|||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "panel",
|
||||
"id": "second_panel",
|
||||
"label": {
|
||||
"default": "Second Auto-Photoshop-SD",
|
||||
"en-US": "Second Auto-Photoshop-SD",
|
||||
"es-ES": "Second Auto-Photoshop-SD"
|
||||
},
|
||||
"minimumSize": {
|
||||
"width": 100,
|
||||
"height": 100
|
||||
},
|
||||
"maximumSize": {
|
||||
"width": 1200,
|
||||
"height": 10000
|
||||
},
|
||||
"preferredDockedSize": {
|
||||
"width": 150,
|
||||
"height": 800
|
||||
},
|
||||
"preferredFloatingSize": {
|
||||
"width": 300,
|
||||
"height": 800
|
||||
},
|
||||
"commands": [
|
||||
{
|
||||
"id": "show_alert",
|
||||
"label": {
|
||||
"default": "Show Alert",
|
||||
"en-US": "Show Alert (US)",
|
||||
"es-ES": "Show Alert (ES)"
|
||||
}
|
||||
}
|
||||
],
|
||||
"icons": [
|
||||
{
|
||||
"width": 23,
|
||||
"height": 23,
|
||||
"path": "icon/panel.png",
|
||||
"scale": [
|
||||
1,
|
||||
2
|
||||
],
|
||||
"theme": [
|
||||
"all"
|
||||
],
|
||||
"species": [
|
||||
"chrome"
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "panel",
|
||||
"id": "toolbar",
|
||||
"label": {
|
||||
"default": "toolbar Auto-Photoshop-SD",
|
||||
"en-US": "toolbar Auto-Photoshop-SD",
|
||||
"es-ES": "toolbar Auto-Photoshop-SD"
|
||||
},
|
||||
"minimumSize": {
|
||||
"width": 30,
|
||||
"height": 100
|
||||
},
|
||||
"maximumSize": {
|
||||
"width": 1200,
|
||||
"height": 10000
|
||||
},
|
||||
"preferredDockedSize": {
|
||||
"width": 30,
|
||||
"height": 800
|
||||
},
|
||||
"preferredFloatingSize": {
|
||||
"width": 30,
|
||||
"height": 800
|
||||
},
|
||||
"commands": [
|
||||
{
|
||||
"id": "show_alert",
|
||||
"label": {
|
||||
"default": "Show Alert",
|
||||
"en-US": "Show Alert (US)",
|
||||
"es-ES": "Show Alert (ES)"
|
||||
}
|
||||
}
|
||||
],
|
||||
"icons": [
|
||||
{
|
||||
"width": 23,
|
||||
"height": 23,
|
||||
"path": "icon/panel.png",
|
||||
"scale": [
|
||||
1,
|
||||
2
|
||||
],
|
||||
"theme": [
|
||||
"all"
|
||||
],
|
||||
"species": [
|
||||
"chrome"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"icons": [
|
||||
|
|
|
|||
Loading…
Reference in New Issue