フリーハンド吹き出しにテキストを追加

Author: new-sankaku

index.html

@@ -1111,6 +1111,20 @@ <h5 data-i18n="comfyUI">ComfyUI</h5>
                         <button id="sbMoveButton" data-i18n="sbMoveMode">Move Point</button>
                         <button id="sbDeleteButton" data-i18n="sbDeleteMode">Delete Point</button>
                     </div>
+                    <div class="input-group-multi" data-group="sbFreehandTextGroup">
+                        <button id="sbFreehandNothingText" onclick="sbFreehandTextChange('Nothing', this)" data-value="Nothing">
+                            <i class="material-icons">do_not_disturb</i>
+                            <i class="material-icons">text_fields</i>
+                        </button>
+                        <button id="sbFreehandHorizontalText" onclick="sbFreehandTextChange('Horizontal', this)" class="selected" data-value="Horizontal">
+                            <i class="material-icons">east</i>
+                            <i class="material-icons">text_fields</i>
+                        </button>
+                        <button id="sbFreehandVerticalText" onclick="sbFreehandTextChange('Vertical', this)" data-value="Vertical">
+                            <i class="material-icons">south</i>
+                            <i class="material-icons">text_fields</i>
+                        </button>
+                    </div>
                     <hr>
                     <div class="input-group">
                         <label for="sbStrokeColor" data-i18n="line">Line</label>
@@ -1140,7 +1154,7 @@ <h5 data-i18n="comfyUI">ComfyUI</h5>
 
 
                     <div class="input-container-leftSpace" data-i18n-label="cornerRadius">
-                        <input type="range" id="sbSornerRadius" min="0" max="15" value="0">
+                        <input type="range" id="sbSornerRadius" min="0" max="15" value="2">
                     </div>
                     <div class="input-container-leftSpace" data-i18n-label="panelOpacity">
                         <input type="range" id="sbFillOpacity" min="0" max="100" value="100">

js/fabric/fabric-management.js

@@ -405,6 +405,7 @@ if (geometry&&geometry.isValid()) {
 createSpeechBubble(mergeOverlappingShapes(geometry));
 } else {
 canvasLogger.warn("jsts up error");
+sbClear();
 }
 
 points=[];
@@ -424,6 +425,7 @@ createSpeechBubble(mergeOverlappingShapes(geometry));
 points=[];
 } else {
 canvasLogger.warn("jsts up error");
+sbClear();
 }
 updateObjectSelectability();
 requestAnimationFrame(()=>canvas.renderAll());
@@ -493,9 +495,53 @@ canvas.remove(rect);
 event.target.targetObject.customType="";
 canvas.requestRenderAll();
 }
+if (isFreehandBubblePath(event.target)) {
+const rect=getFreehandBubbleRectByPath(event.target);
+const textbox=getFreehandBubbleTextByPath(event.target);
+canvas.remove(rect);
+canvas.remove(textbox);
+canvas.requestRenderAll();
+}
+if (isFreehandBubbleText(event.target)) {
+const rect=getFreehandBubbleRectByPath(event.target.targetObject);
+canvas.remove(rect);
+event.target.targetObject.customType="";
+canvas.requestRenderAll();
+}
 });
 
+canvas.on("object:moving",function (event) {
+if (isFreehandBubblePath(event.target)) {
+eventLogger.trace('object:moving freehandBubble');
+updateFreehandBubblePositions(event.target);
+canvas.requestRenderAll();
+}
+});
 
+canvas.on("mouse:up",function (event) {
+if (isFreehandBubblePath(event.target)) {
+eventLogger.trace('mouse:up freehandBubble');
+updateFreehandBubblePositions(event.target);
+}
+});
+
+canvas.on("text:changed",function (event) {
+if (isFreehandBubbleText(event.target)) {
+eventLogger.trace('text:changed freehandBubble');
+requestAnimationFrame(()=>{
+freehandBubbleTextChanged(event.target);
+});
+}
+});
+
+canvas.on("object:scaling",function (event) {
+if (isFreehandBubblePath(event.target)) {
+eventLogger.trace('object:scaling freehandBubble');
+event.target.baseScaleX=event.target.scaleX;
+event.target.baseScaleY=event.target.scaleY;
+updateFreehandBubbleMetrics(event.target);
+}
+});
 
 
 

js/layer/layer-management.js

@@ -75,7 +75,7 @@ const topLevelLayers=layers.filter(layer=>{
 const isChildOfAnotherLayer=layers.some(parentLayer=>
 parentLayer.guids&&parentLayer.guids.includes(layer.guid)
 );
-return (layer.isPanel||isSpeechBubbleSVG(layer))&&!isChildOfAnotherLayer;
+return (layer.isPanel||isSpeechBubbleSVG(layer)||isFreehandBubblePath(layer))&&!isChildOfAnotherLayer;
 });
 
 topLevelLayers.forEach(layer=>{