Skip to content

Commit

Permalink
ADD:Layer display and vertical text support
Browse files Browse the repository at this point in the history
  • Loading branch information
@new-sankaku
new-sankaku committed May 2, 2024
1 parent c502179 commit 2eede6d
Show file tree
Hide file tree
Showing 8 changed files with 470 additions and 103 deletions.
103 changes: 81 additions & 22 deletions SP-MangaEditer/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,13 +37,13 @@ body {


#text-preview-area button, #text-preview-area hr, #text-preview-area label, #text-preview-area input[type="color"], #text-preview-area input[type="range"] {
margin-top: 5px;
margin-bottom: 5px;
margin: 7px;
}

#text-preview-area button {
#text-preview-area input[type="range"], #text-preview-area button {
display: block;
width: 100%;
width: 92%;
margin: 7px;
}

#text-preview-area button .material-icons {
Expand Down Expand Up @@ -77,7 +77,7 @@ button:active, .custom-file-upload:active {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

#canvas-container, #mangaImageCanvas, #canvas-buttons {
#canvas-container, #mangaImageCanvas {
margin-right: 20px;

}
Expand All @@ -88,9 +88,16 @@ button:active, .custom-file-upload:active {
}

#canvas-buttons {
margin-top: 20px;
margin-top: 15px;
margin-right: 20px;
}

#layer-buttons {
margin-top: 13px;
margin-right: 20px;
}


#canvas-container {
box-shadow: 0 2px 4px rgba(110, 110, 110, 0.1);
background: white;
Expand Down Expand Up @@ -118,18 +125,15 @@ button:active, .custom-file-upload:active {
text-align: center;
}

#layer-panel, #controls {
flex: 0 0 20%;
margin-right: 10px;
max-width: 200px;
}


#layer-content {
overflow-y: auto;
border: 2px solid #4D4D4D;
height: 500px;
height: 750px;
}


.layer-item {
display: flex;
align-items: center;
Expand Down Expand Up @@ -157,8 +161,28 @@ button:active, .custom-file-upload:active {
white-space: nowrap;
}

#controls .control {

#controls .control, #text-item-controls .control, #image-item-controls .control, #panel-item-controls .control {
margin: 5px;
}

#controle-content, #image-item-controls, #text-item-controls, #panel-item-controls{
overflow-y: auto;
border: 2px solid #4D4D4D;
height: 400px;
}

#layer-panel, #controls {
flex: 0 0 20%;
margin-right: 10px;
max-width: 200px;
}
#image-item-controls, #text-item-controls, #panel-item-controls {
flex: 0 0 20%;
margin-right: 10px;
margin-bottom: 10px;
margin-top: 10px;
max-width: 200px;
}

label {
Expand Down Expand Up @@ -195,7 +219,7 @@ input[type="range"] {
transform: scale(1.1);
}

#canvas-buttons button .material-icons {
#canvas-buttons button .material-icons, #layer-buttons button .material-icons{
font-size: 18px;
vertical-align: middle;
}
Expand Down Expand Up @@ -237,25 +261,60 @@ input[type="range"] {
box-sizing: border-box;
}


/* スクロールバー全体の幅を設定 */
::-webkit-scrollbar {
width: 10px;
}

/* スクロールバーのトラック（スライダーが動く背景部分）のスタイル */
::-webkit-scrollbar-track {
background-color: #f1f1f1;
border-radius: 10px;
}

/* スクロールバーのサム（動かせる部分）のスタイル */
::-webkit-scrollbar-thumb {
background-color: #ffedd3;
border-radius: 10px;
}

/* スクロールバーのサムにホバーした時のスタイル */
::-webkit-scrollbar-thumb:hover {
background-color: #ffedd3;
}


.floating-window {
position: fixed;
width: 300px;
height: 450px;
bottom: 100px;
left: 100px;
background-color: white;
border: 1px solid #ccc;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
z-index: 1000;
display: none;
padding: 10px;
}

.header {
cursor: move;
width: 100%;
height: 100%;
background-color: #f8f8f8;
border-bottom: 1px solid #ccc;
}

.close-btn {
float: right;
cursor: pointer;
padding: 0 5px;
line-height: 20px;
}

textarea {
width: 300px;
height: 400px;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
resize: vertical;
font-size: 14px;
writing-mode: vertical-rl;
text-orientation: upright;
}
94 changes: 70 additions & 24 deletions SP-MangaEditer/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,21 @@
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<script src="third/Fabric.js/fabric.min.js"></script>

</head>

<body>
<div class="floating-window" id="myWindow">
<div class="header">
<span class="close-btn" onclick="closeWindow()">×</span>
<textarea id="textInput"></textarea>
<div class="button-container">
<button id="updateButton">Submit</button>
<button id="cancelButton">Cancel</button>
</div>
</div>
</div>

<div style="display: flex; flex-grow: 1;">
<div id="sidebar">
<div class="logo-container">
Expand Down Expand Up @@ -39,20 +51,27 @@
<div id="text-area" style="display: none;">
<div class="area-header">Text and Effect</div>
<div id="text-preview-area">
<button onclick="createTextbox()"><i class="material-icons">text_fields</i> New Text</button>
<button onclick="toggleBold()"><i class="material-icons">format_bold</i> Bold</button>
<button onclick="toggleShadow()"><i class="material-icons">highlight</i> Shadow</button>
<button onclick="applyInnerShadow()"><i class="material-icons">format_paint</i> Inner Shadow</button>
<hr>

<label>Text Color:</label>
<input type="color" id="colorPicker" value="#000000" oninput="changeTextColor(this.value)">

<label>Size(Vertical unsupport):</label>
<input type="range" id="fontSizeSlider" min="7" max="150" value="30" oninput="changeFontSize(this.value)">

<label style="display: none;">Neon Color:</label>
<input style="display: none;" type="color" id="neonColorPicker" value="#ff8080" oninput="changeNeonColor(this.value)">
<label>Font Size:</label>
<input type="range" id="fontSizeSlider" min="10" max="100" value="20" oninput="changeFontSize(this.value)">
<label style="display: none;">Neon Intensity:</label>
<input style="display: none;" type="range" id="neonIntensitySlider" min="0" max="6" step="0.2" value="2" oninput="changeNeonIntensity(this.value)">
<hr style="display: none;">
<hr>

<button onclick="createTextbox()"><i class="material-icons">text_fields</i><i class="material-icons">east</i> New Text</button>

<button id="openWindow"><i class="material-icons">text_fields</i><i class="material-icons">south</i> New Vertical Text</button>

<button onclick="toggleBold()"><i class="material-icons">format_bold</i> Bold</button>
<button onclick="toggleShadow()"><i class="material-icons">highlight</i> Shadow</button>
<button onclick="applyInnerShadow()"><i class="material-icons">format_paint</i> Inner Shadow</button>
<hr>
<label style="display: none;">Effects:</label>
<button style="display: none;" onclick="applyCSSTextEffect()"><i class="material-icons">format_shapes</i> CSS Text</button>
<button style="display: none;" onclick="applyPhotoshopTextEffect()"><i class="material-icons">filter</i> Photoshop Text</button>
Expand Down Expand Up @@ -83,9 +102,11 @@
<div class="info-item"><i class="material-icons">image</i> <a href="https://fukidesign.com" target="_blank">Speech Bubble</a></div>
</div>
<div class="info-section">
<p>Additional links:</p>
<p>Developer links:</p>
<div class="info-item"><i class="material-icons">alternate_email</i> <a href="https://twitter.com/hypersankaku2" target="_blank">Twitter</a></div>
<div class="info-item"><i class="material-icons">code</i> <a href="https://github.com/new-sankaku/SP-MangaEditer" target="_blank">GitHub</a></div>

<div class="info-item"><i class="material-icons">send</i> <a href="https://github.com/new-sankaku/stable-diffusion-webui-simple-manga-maker/issues" target="_blank">Bug report / Feature add request</a></div>
</div>
</div>
</div>
Expand All @@ -108,24 +129,47 @@
<div id="layer-panel">
<div class="area-header">Layers</div>
<div id="layer-content"></div>
<button onclick="LayersUp()"><i class="material-icons">arrow_upward</i></button>
<button onclick="LayersDown()"><i class="material-icons">arrow_downward</i></button>
<div id="layer-buttons">
<button onclick="LayersUp()"><i class="material-icons">arrow_upward</i></button>
<button onclick="LayersDown()"><i class="material-icons">arrow_downward</i></button>
</div>
</div>
<div id="controls">
<div class="control"><label>Angle: <input type="range" id="angle-control" min="0" max="360"
value="0"></label>
<div>
<div id="controls">
<div class="area-header">Common controle</div>
<div id="controle-content">
<div class="control"><label>Angle: <input type="range" id="angle-control" min="0" max="360"
value="0"></label>
</div>
<div class="control"><label>Scale: <input type="range" id="scale-control" min="0.01" max="2.5" step="0.01"
value="1"></label></div>
<div class="control"><label>Top: <input type="range" id="top-control" min="-1200" max="1200"
value="100"></label></div>
<div class="control"><label>Left: <input type="range" id="left-control" min="-1200" max="1200"
value="100"></label></div>
<div class="control"><label>Skew X: <input type="range" id="skewX-control" min="-30" max="30"
value="0"></label></div>
<div class="control"><label>Skew Y: <input type="range" id="skewY-control" min="-30" max="30"
value="0"></label></div>
</div>
</div>
<div style="display: none;" id="panel-item-controls">
<div class="area-header">Panel controle</div>
<div id="panel-item-content">
<label>test</label>
</div>
</div>
<div class="control"><label>Scale: <input type="range" id="scale-control" min="0.01" max="2.5" step="0.01"
value="1"></label></div>
<div class="control"><label>Top: <input type="range" id="top-control" min="-1200" max="1200"
value="100"></label></div>
<div class="control"><label>Left: <input type="range" id="left-control" min="-1200" max="1200"
value="100"></label></div>
<div class="control"><label>Skew X: <input type="range" id="skewX-control" min="-30" max="30"
value="0"></label>
<div style="display: none;" id="image-item-controls">
<div class="area-header">Image controle</div>
<div id="image-item-content">
<label>test</label>
</div>
</div>
<div class="control"><label>Skew Y: <input type="range" id="skewY-control" min="-30" max="30"
value="0"></label>
<div style="display: none;" id="text-item-controls">
<div class="area-header">Panel controle</div>
<div id="text-item-content">
<label>test</label>
</div>
</div>
</div>
</div>
Expand All @@ -142,6 +186,8 @@
<script src="js/SvgHelper.js" defer></script>
<script src="js/Sidebar.js" defer></script>
<script src="js/TextEffect.js" defer></script>
<script src="js/VerticalText.js" defer></script>

</body>

</html>
27 changes: 16 additions & 11 deletions SP-MangaEditer/js/ImageHistoryManagement.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,28 +13,30 @@ function saveStateByListener(event, eventType) {
if (!event || isUndoRedoOperation) {
return;
}
console.log("saveStateByListener start.", eventType);
//console.log("saveStateByListener start.", eventType);
saveState();
console.log("saveState end. currentStateIndex:stateStack.length", eventType, currentStateIndex, ":", stateStack.length);
//console.log("saveState end. currentStateIndex:stateStack.length", eventType, currentStateIndex, ":", stateStack.length);
}
function saveStateByManual() {
console.log("saveStateByManual start.");
//console.log("saveStateByManual start.");
saveState();
console.log("saveState end. currentStateIndex:stateStack.length", "Manual", currentStateIndex, ":", stateStack.length);
//console.log("saveState end. currentStateIndex:stateStack.length", "Manual", currentStateIndex, ":", stateStack.length);
}

function saveState() {
if (currentStateIndex < stateStack.length - 1) {
stateStack.splice(currentStateIndex + 1);
}
canvas.renderAll();
//console.log("saveState save json", JSON.stringify(canvas.toJSON(['excludeFromLayerPanel'])));
stateStack.push(JSON.stringify(canvas.toJSON(['excludeFromLayerPanel'])));
currentStateIndex++;
console.log("saveState end. currentStateIndex:stateStack.length", "saveState", currentStateIndex, ":", stateStack.length);
updateLayerPanel();
// //console.log("saveState end. currentStateIndex:stateStack.length", "saveState", currentStateIndex, ":", stateStack.length);
}

function undo() {
console.log("undo start. currentStateIndex:stateStack.length", currentStateIndex, ":", stateStack.length);
//console.log("undo start. currentStateIndex:stateStack.length", currentStateIndex, ":", stateStack.length);

if (currentStateIndex >= 1) {
isUndoRedoOperation = true;
Expand All @@ -45,28 +47,29 @@ function undo() {
isUndoRedoOperation = false;
});
} else {
console.log("No more states to undo");
//console.log("No more states to undo");
}

console.log("undo end . currentStateIndex:stateStack.length", currentStateIndex, ":", stateStack.length);
//console.log("undo end . currentStateIndex:stateStack.length", currentStateIndex, ":", stateStack.length);
}

function redo() {
console.log("redo start. currentStateIndex:stateStack.length", currentStateIndex, ":", stateStack.length);
//console.log("redo start. currentStateIndex:stateStack.length", currentStateIndex, ":", stateStack.length);

if (currentStateIndex < stateStack.length - 1) {
isUndoRedoOperation = true;
currentStateIndex++;
//console.log("redo", stateStack[currentStateIndex]);
canvas.loadFromJSON(stateStack[currentStateIndex], function () {
canvas.renderAll();
updateLayerPanel();
isUndoRedoOperation = false;
});
} else {
console.log("No more states to redo");
//console.log("No more states to redo");
}

console.log("redo end . currentStateIndex:stateStack.length", currentStateIndex, ":", stateStack.length);
//console.log("redo end . currentStateIndex:stateStack.length", currentStateIndex, ":", stateStack.length);
}

// Event listeners setup
Expand All @@ -75,3 +78,5 @@ canvas.on('object:added', function(e) { saveStateByListener(e, 'object:added');
canvas.on('object:removed', function(e) { saveStateByListener(e, 'object:removed'); });
canvas.on('path:created', function(e) { saveStateByListener(e, 'path:created'); });
canvas.on('canvas:cleared', function(e) { saveStateByListener(e, 'canvas:cleared'); });

saveState();
Loading

0 comments on commit 2eede6d

Please sign in to comment.