@innovastudio/contentbuilder 1.5.79 → 1.5.81
Sign up to get free protection for your applications and to get access to all the features.
package/package.json
CHANGED
@@ -1317,6 +1317,54 @@ button:focus-visible {
|
|
1317
1317
|
.is-ui .is-rte-pop.rte-color-picker .rte-color-picker-area > div {
|
1318
1318
|
padding-top: 5px !important;
|
1319
1319
|
}
|
1320
|
+
#_cbhtml .is-rte-pop.rte-color-picker._4lines.active,
|
1321
|
+
.is-ui .is-rte-pop.rte-color-picker._4lines.active {
|
1322
|
+
animation-name: colorpicker-slide-out-4lines;
|
1323
|
+
}
|
1324
|
+
@keyframes colorpicker-slide-out-4lines {
|
1325
|
+
from {
|
1326
|
+
height: 0;
|
1327
|
+
}
|
1328
|
+
to {
|
1329
|
+
height: 420px;
|
1330
|
+
}
|
1331
|
+
}
|
1332
|
+
#_cbhtml .is-rte-pop.rte-color-picker._4lines.deactive,
|
1333
|
+
.is-ui .is-rte-pop.rte-color-picker._4lines.deactive {
|
1334
|
+
animation-name: colorpicker-slide-in-4lines;
|
1335
|
+
}
|
1336
|
+
@keyframes colorpicker-slide-in-4lines {
|
1337
|
+
from {
|
1338
|
+
height: 420px;
|
1339
|
+
}
|
1340
|
+
to {
|
1341
|
+
height: 0;
|
1342
|
+
}
|
1343
|
+
}
|
1344
|
+
#_cbhtml .is-rte-pop.rte-color-picker._5lines.active,
|
1345
|
+
.is-ui .is-rte-pop.rte-color-picker._5lines.active {
|
1346
|
+
animation-name: colorpicker-slide-out-5lines;
|
1347
|
+
}
|
1348
|
+
@keyframes colorpicker-slide-out-5lines {
|
1349
|
+
from {
|
1350
|
+
height: 0;
|
1351
|
+
}
|
1352
|
+
to {
|
1353
|
+
height: 451px;
|
1354
|
+
}
|
1355
|
+
}
|
1356
|
+
#_cbhtml .is-rte-pop.rte-color-picker._5lines.deactive,
|
1357
|
+
.is-ui .is-rte-pop.rte-color-picker._5lines.deactive {
|
1358
|
+
animation-name: colorpicker-slide-in-5lines;
|
1359
|
+
}
|
1360
|
+
@keyframes colorpicker-slide-in-5lines {
|
1361
|
+
from {
|
1362
|
+
height: 451px;
|
1363
|
+
}
|
1364
|
+
to {
|
1365
|
+
height: 0;
|
1366
|
+
}
|
1367
|
+
}
|
1320
1368
|
#_cbhtml .is-rte-pop.rte-icon-options,
|
1321
1369
|
.is-ui .is-rte-pop.rte-icon-options {
|
1322
1370
|
width: 270px;
|
@@ -46402,28 +46402,33 @@ class Image$1 {
|
|
46402
46402
|
if (this.builder.moveable) this.builder.moveable.updateRect();
|
46403
46403
|
const movControlBox = document.querySelector('.moveable-control-box');
|
46404
46404
|
if (movControlBox && !this.builder.hideImageResizer) movControlBox.style.display = 'block';
|
46405
|
-
|
46406
|
-
|
46407
|
-
|
46408
|
-
|
46409
|
-
|
46410
|
-
|
46411
|
-
|
46412
|
-
|
46413
|
-
|
46414
|
-
|
46415
|
-
|
46405
|
+
|
46406
|
+
/*
|
46407
|
+
const handleImageToolClickOut = e =>{
|
46408
|
+
let elm = e.target;
|
46409
|
+
if(!elm) return;
|
46410
|
+
if(!elm.closest('#divImageResizer') && !elm.closest('#divImageTool') &&
|
46411
|
+
!elm.closest('.is-modal') && !elm.closest('.keep-selection') &&
|
46412
|
+
!elm.closest('.sl-wrapper') && !elm.closest('.sl-overlay') && !elm.closest('.sl-close') &&
|
46413
|
+
!elm.closest('img')) { // click outside
|
46414
|
+
|
46415
|
+
// hide
|
46416
|
+
this.hideImageTool();
|
46417
|
+
document.removeEventListener('click', handleImageToolClickOut);
|
46418
|
+
if(this.builder.iframeDocument) {
|
46419
|
+
this.builder.doc.removeEventListener('click', handleImageToolClickOut);
|
46420
|
+
}
|
46421
|
+
this.builder.handleImageToolClickOut_=false;
|
46416
46422
|
}
|
46417
|
-
this.builder.handleImageToolClickOut_ = false;
|
46418
|
-
}
|
46419
46423
|
};
|
46420
|
-
if
|
46421
|
-
|
46422
|
-
|
46423
|
-
|
46424
|
-
|
46425
|
-
|
46424
|
+
if(!this.builder.handleImageToolClickOut_) {
|
46425
|
+
document.addEventListener('click', handleImageToolClickOut);
|
46426
|
+
if(this.builder.iframeDocument) {
|
46427
|
+
this.builder.doc.addEventListener('click', handleImageToolClickOut);
|
46428
|
+
}
|
46429
|
+
this.builder.handleImageToolClickOut_=true;
|
46426
46430
|
}
|
46431
|
+
*/
|
46427
46432
|
} else {
|
46428
46433
|
let imageResizer = this.imageResizer;
|
46429
46434
|
imageResizer.style.display = 'none';
|
@@ -46437,6 +46442,28 @@ class Image$1 {
|
|
46437
46442
|
const movControlBox = document.querySelector('.moveable-control-box');
|
46438
46443
|
if (movControlBox) movControlBox.style.display = 'none';
|
46439
46444
|
}
|
46445
|
+
const handleImageToolClickOut = e => {
|
46446
|
+
let elm = e.target;
|
46447
|
+
if (!elm) return;
|
46448
|
+
if (!elm.closest('#divImageResizer') && !elm.closest('#divImageTool') && !elm.closest('.is-modal') && !elm.closest('.keep-selection') && !elm.closest('.sl-wrapper') && !elm.closest('.sl-overlay') && !elm.closest('.sl-close') && !elm.closest('img')) {
|
46449
|
+
// click outside
|
46450
|
+
|
46451
|
+
// hide
|
46452
|
+
this.hideImageTool();
|
46453
|
+
document.removeEventListener('click', handleImageToolClickOut);
|
46454
|
+
if (this.builder.iframeDocument) {
|
46455
|
+
this.builder.doc.removeEventListener('click', handleImageToolClickOut);
|
46456
|
+
}
|
46457
|
+
this.builder.handleImageToolClickOut_ = false;
|
46458
|
+
}
|
46459
|
+
};
|
46460
|
+
if (!this.builder.handleImageToolClickOut_) {
|
46461
|
+
document.addEventListener('click', handleImageToolClickOut);
|
46462
|
+
if (this.builder.iframeDocument) {
|
46463
|
+
this.builder.doc.addEventListener('click', handleImageToolClickOut);
|
46464
|
+
}
|
46465
|
+
this.builder.handleImageToolClickOut_ = true;
|
46466
|
+
}
|
46440
46467
|
if (this.builder.canvas) ; else {
|
46441
46468
|
let prog = false;
|
46442
46469
|
if (e.screenX && e.screenX !== 0 && e.screenY && e.screenY !== 0) ; else {
|
@@ -51362,8 +51389,8 @@ class RowTool {
|
|
51362
51389
|
const builderStuff = this.builder.builderStuff;
|
51363
51390
|
let rowtool = row.querySelector('.is-row-tool');
|
51364
51391
|
if (!rowtool) {
|
51365
|
-
let html = `<div class="is-tool is-row-tool">
|
51366
|
-
<div title="${util.out('Move')}" role="button" tabindex="-1" class="row-handle" style="width:100%;cursor:move;text-align:center;"><svg class="is-icon-flex"><use xlink:href="#ion-move"></use></svg></div>
|
51392
|
+
let html = `<div class="is-tool is-row-tool" style="${!this.builder.rowTool && this.builder.rowTool !== '' ? 'display:none;' : ''}">
|
51393
|
+
<div title="${util.out('Move')}" role="button" tabindex="-1" class="row-handle" style="${this.builder.rowHandle ? '' : 'display:none;'}width:100%;cursor:move;text-align:center;"><svg class="is-icon-flex"><use xlink:href="#ion-move"></use></svg></div>
|
51367
51394
|
<button type="button" tabindex="-1" title="${util.out('More')}" class="row-more"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
|
51368
51395
|
<button type="button" tabindex="-1" title="${util.out('Grid Editor')}" class="row-grideditor"><svg class="is-icon-flex"><use xlink:href="#ion-grid"></use></svg></button>
|
51369
51396
|
<button type="button" tabindex="-1" title="${util.out('Delete')}" class="row-remove"><svg class="is-icon-flex"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
|
@@ -63536,6 +63563,10 @@ class ColorPicker {
|
|
63536
63563
|
const poppicker = builderStuff.querySelector('.pop-picker');
|
63537
63564
|
poppicker.style.display = 'flex';
|
63538
63565
|
poppicker.style.opacity = 0;
|
63566
|
+
if (this.opts.colors.length <= 21) poppicker.style.height = '360px'; // 3 lines
|
63567
|
+
else if (this.opts.colors.length > 21 && this.opts.colors.length <= 28) poppicker.style.height = '390px'; // 4 lines
|
63568
|
+
else if (this.opts.colors.length > 28) poppicker.style.height = '420px'; // 5 lines
|
63569
|
+
|
63539
63570
|
const pickr = Pickr.create({
|
63540
63571
|
el: '._pop-colpick',
|
63541
63572
|
theme: 'nano',
|
@@ -67424,6 +67455,10 @@ class Rte {
|
|
67424
67455
|
btnRteColor.forEach(btn => {
|
67425
67456
|
btn.addEventListener('click', () => {
|
67426
67457
|
const pop = this.rteColorPicker;
|
67458
|
+
const numOfColors = this.builder.colors.length;
|
67459
|
+
if (numOfColors > 21 && numOfColors <= 28) pop.classList.add('_4lines'); // 4 lines
|
67460
|
+
else if (numOfColors > 28) pop.classList.add('_5lines'); // 5 lines
|
67461
|
+
|
67427
67462
|
if (!dom.hasClass(pop, 'active')) {
|
67428
67463
|
this.util.showRtePop(pop, () => {
|
67429
67464
|
const top = btn.getBoundingClientRect().top;
|
@@ -82104,8 +82139,6 @@ Important: Do not change the 'div.is-container' element!
|
|
82104
82139
|
}
|
82105
82140
|
}
|
82106
82141
|
|
82107
|
-
// import RecordRTC from 'recordrtc';
|
82108
|
-
// import Recorder from 'opus-recorder'; // Using Recorder
|
82109
82142
|
const dom = new Dom();
|
82110
82143
|
class Dictation {
|
82111
82144
|
constructor(opts = {}, builder) {
|
@@ -82453,6 +82486,9 @@ class Dictation {
|
|
82453
82486
|
dom.appendHtml(builderStuff, html);
|
82454
82487
|
const modalCommand = builderStuff.querySelector('.page-command');
|
82455
82488
|
this.modalCommand = modalCommand;
|
82489
|
+
new Draggable$2({
|
82490
|
+
selector: '.is-modal.page-command .is-draggable'
|
82491
|
+
});
|
82456
82492
|
const modalCommandList = builderStuff.querySelector('.commandlist');
|
82457
82493
|
this.modalCommandList = modalCommandList;
|
82458
82494
|
const modalConfig = builderStuff.querySelector('.commandconfig');
|
@@ -88934,6 +88970,8 @@ class Editable {
|
|
88934
88970
|
this.handleEditStart = this.handleEditStart.bind(this);
|
88935
88971
|
this.handleMouseClick = this.handleMouseClick.bind(this);
|
88936
88972
|
this.handleTouchStart = this.handleTouchStart.bind(this);
|
88973
|
+
this.handleMouseDown = this.handleMouseDown.bind(this);
|
88974
|
+
this.handleMouseUp = this.handleMouseUp.bind(this);
|
88937
88975
|
this.setup();
|
88938
88976
|
}
|
88939
88977
|
setup() {
|
@@ -88942,6 +88980,7 @@ class Editable {
|
|
88942
88980
|
element.addEventListener('touchstart', this.handleTouchStart, {
|
88943
88981
|
passive: false
|
88944
88982
|
});
|
88983
|
+
element.addEventListener('mousedown', this.handleMouseDown);
|
88945
88984
|
});
|
88946
88985
|
}
|
88947
88986
|
refresh() {
|
@@ -88949,23 +88988,49 @@ class Editable {
|
|
88949
88988
|
this.elements.forEach(element => {
|
88950
88989
|
element.removeEventListener('dblclick', this.handleEditStart);
|
88951
88990
|
element.removeEventListener('touchstart', this.handleTouchStart);
|
88991
|
+
element.removeEventListener('mousedown', this.handleMouseDown);
|
88952
88992
|
});
|
88953
88993
|
this.elements.forEach(element => {
|
88954
88994
|
element.addEventListener('dblclick', this.handleEditStart);
|
88955
88995
|
element.addEventListener('touchstart', this.handleTouchStart, {
|
88956
88996
|
passive: false
|
88957
88997
|
});
|
88998
|
+
element.addEventListener('mousedown', this.handleMouseDown);
|
88958
88999
|
});
|
88959
89000
|
}
|
89001
|
+
handleMouseDown(event) {
|
89002
|
+
const currentTarget = event.currentTarget;
|
89003
|
+
this.lastClickTime = false;
|
89004
|
+
if (!currentTarget.classList.contains('active')) return;
|
89005
|
+
if (currentTarget.classList.contains('editable')) return;
|
89006
|
+
currentTarget.addEventListener('mouseup', this.handleMouseUp);
|
89007
|
+
const now = new Date().getTime();
|
89008
|
+
this.lastClickTime = now;
|
89009
|
+
}
|
89010
|
+
handleMouseUp(event) {
|
89011
|
+
if (!this.lastClickTime) return;
|
89012
|
+
const currentTarget = event.currentTarget;
|
89013
|
+
currentTarget.removeEventListener('mouseup', this.handleMouseUp);
|
89014
|
+
const now = new Date().getTime();
|
89015
|
+
const lastClickTime = this.lastClickTime || now;
|
89016
|
+
const timeDiff = now - lastClickTime;
|
89017
|
+
if (timeDiff < 300 && timeDiff > 0) {
|
89018
|
+
// Less than 300ms since the last touch, enable editing
|
89019
|
+
this.handleEditStart(event);
|
89020
|
+
}
|
89021
|
+
this.lastClickTime = now;
|
89022
|
+
}
|
88960
89023
|
destroy(element) {
|
88961
89024
|
if (element) {
|
88962
89025
|
element.removeEventListener('dblclick', this.handleEditStart);
|
88963
89026
|
element.removeEventListener('touchstart', this.handleTouchStart);
|
89027
|
+
element.removeEventListener('mousedown', this.handleMouseDown);
|
88964
89028
|
} else {
|
88965
89029
|
this.elements = this.doc.querySelectorAll(this.selector);
|
88966
89030
|
this.elements.forEach(element => {
|
88967
89031
|
element.removeEventListener('dblclick', this.handleEditStart);
|
88968
89032
|
element.removeEventListener('touchstart', this.handleTouchStart);
|
89033
|
+
element.removeEventListener('mousedown', this.handleMouseDown);
|
88969
89034
|
});
|
88970
89035
|
}
|
88971
89036
|
}
|
@@ -89278,6 +89343,8 @@ class EditableBlocks {
|
|
89278
89343
|
target.style.zIndex = newZIndex;
|
89279
89344
|
}
|
89280
89345
|
selectStart(block) {
|
89346
|
+
if (block.classList.contains('editable')) return; // do not proceed if in editing mode
|
89347
|
+
|
89281
89348
|
if (block.classList.contains('is-shape')) return; // do not clone if block is shape
|
89282
89349
|
|
89283
89350
|
if (!this.clone) return;
|
@@ -91489,6 +91556,7 @@ class ContentBuilder {
|
|
91489
91556
|
outlineMode: '',
|
91490
91557
|
toolStyle: '',
|
91491
91558
|
outlineStyle: '',
|
91559
|
+
rowHandle: true,
|
91492
91560
|
snippetAddTool: true,
|
91493
91561
|
elementTool: true,
|
91494
91562
|
elementHighlight: true,
|
@@ -94262,7 +94330,118 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
94262
94330
|
// let outlineStyle = localStorage.getItem('_outlinestyle');
|
94263
94331
|
// this.preferences.setOutlineStyle(outlineStyle);
|
94264
94332
|
// }
|
94265
|
-
if (this.preferences) this.preferences.initBuilder(builder);
|
94333
|
+
if (this.preferences) this.preferences.initBuilder(builder);else {
|
94334
|
+
const setColumnTool = hidecolumntool => {
|
94335
|
+
const builders = this.doc.querySelectorAll(this.opts.container);
|
94336
|
+
if (hidecolumntool) {
|
94337
|
+
Array.prototype.forEach.call(builders, builder => {
|
94338
|
+
builder.setAttribute('hidecolumntool', '');
|
94339
|
+
});
|
94340
|
+
} else {
|
94341
|
+
Array.prototype.forEach.call(builders, builder => {
|
94342
|
+
builder.removeAttribute('hidecolumntool');
|
94343
|
+
});
|
94344
|
+
}
|
94345
|
+
};
|
94346
|
+
setColumnTool(!this.columnTool);
|
94347
|
+
const setElementTool = hideelementtool => {
|
94348
|
+
const builderStuff = this.builderStuff;
|
94349
|
+
if (hideelementtool) {
|
94350
|
+
builderStuff.setAttribute('hideelementtool', '');
|
94351
|
+
} else {
|
94352
|
+
builderStuff.removeAttribute('hideelementtool', '');
|
94353
|
+
}
|
94354
|
+
if (this.iframe) {
|
94355
|
+
const contentStuff = this.contentStuff;
|
94356
|
+
if (hideelementtool) {
|
94357
|
+
contentStuff.setAttribute('hideelementtool', '');
|
94358
|
+
} else {
|
94359
|
+
contentStuff.removeAttribute('hideelementtool', '');
|
94360
|
+
}
|
94361
|
+
}
|
94362
|
+
};
|
94363
|
+
setElementTool(!this.elementTool);
|
94364
|
+
const setOutline = hideoutline => {
|
94365
|
+
const builders = this.doc.querySelectorAll(this.opts.container);
|
94366
|
+
Array.prototype.forEach.call(builders, builder => {
|
94367
|
+
if (hideoutline) {
|
94368
|
+
builder.setAttribute('hideoutline', '');
|
94369
|
+
} else {
|
94370
|
+
builder.removeAttribute('hideoutline');
|
94371
|
+
}
|
94372
|
+
});
|
94373
|
+
};
|
94374
|
+
setOutline(!this.rowcolOutline);
|
94375
|
+
const setOutlineStyle = outlineStyle => {
|
94376
|
+
const builders = this.doc.querySelectorAll(this.opts.container);
|
94377
|
+
Array.prototype.forEach.call(builders, builder => {
|
94378
|
+
if (outlineStyle === 'grayoutline') {
|
94379
|
+
builder.setAttribute('grayoutline', '');
|
94380
|
+
} else {
|
94381
|
+
builder.removeAttribute('grayoutline');
|
94382
|
+
}
|
94383
|
+
});
|
94384
|
+
};
|
94385
|
+
setOutlineStyle(this.outlineStyle);
|
94386
|
+
const setElementHighlight = hideelementhighlight => {
|
94387
|
+
const builders = this.doc.querySelectorAll(this.opts.container);
|
94388
|
+
Array.prototype.forEach.call(builders, builder => {
|
94389
|
+
if (hideelementhighlight) {
|
94390
|
+
builder.setAttribute('hideelementhighlight', '');
|
94391
|
+
} else {
|
94392
|
+
builder.removeAttribute('hideelementhighlight', '');
|
94393
|
+
}
|
94394
|
+
});
|
94395
|
+
};
|
94396
|
+
setElementHighlight(!this.elementHighlight);
|
94397
|
+
const setToolStyle = toolStyle => {
|
94398
|
+
const builderStuff = this.builderStuff;
|
94399
|
+
if (toolStyle === 'gray') {
|
94400
|
+
builderStuff.setAttribute('gray', '');
|
94401
|
+
} else {
|
94402
|
+
builderStuff.removeAttribute('gray', '');
|
94403
|
+
}
|
94404
|
+
if (this.iframe) {
|
94405
|
+
const contentStuff = this.contentStuff;
|
94406
|
+
if (toolStyle === 'gray') {
|
94407
|
+
contentStuff.setAttribute('gray', '');
|
94408
|
+
} else {
|
94409
|
+
contentStuff.removeAttribute('gray', '');
|
94410
|
+
}
|
94411
|
+
}
|
94412
|
+
const builders = this.doc.querySelectorAll(this.opts.container);
|
94413
|
+
Array.prototype.forEach.call(builders, builder => {
|
94414
|
+
if (toolStyle === 'gray') {
|
94415
|
+
builder.setAttribute('gray', '');
|
94416
|
+
} else {
|
94417
|
+
builder.removeAttribute('gray');
|
94418
|
+
}
|
94419
|
+
});
|
94420
|
+
};
|
94421
|
+
setToolStyle(this.toolStyle);
|
94422
|
+
const setSnippetAddTool = hidesnippetaddtool => {
|
94423
|
+
const builders = this.doc.querySelectorAll(this.opts.container);
|
94424
|
+
Array.prototype.forEach.call(builders, builder => {
|
94425
|
+
if (hidesnippetaddtool) {
|
94426
|
+
builder.setAttribute('hidesnippetaddtool', '');
|
94427
|
+
} else {
|
94428
|
+
builder.removeAttribute('hidesnippetaddtool', '');
|
94429
|
+
}
|
94430
|
+
});
|
94431
|
+
};
|
94432
|
+
setSnippetAddTool(!this.snippetAddTool);
|
94433
|
+
const setRowToolPosition = rowTool => {
|
94434
|
+
const builders = this.doc.querySelectorAll(this.opts.container);
|
94435
|
+
Array.prototype.forEach.call(builders, builder => {
|
94436
|
+
if (rowTool === 'right') {
|
94437
|
+
builder.removeAttribute('leftrowtool');
|
94438
|
+
} else {
|
94439
|
+
builder.setAttribute('leftrowtool', '');
|
94440
|
+
}
|
94441
|
+
});
|
94442
|
+
};
|
94443
|
+
setRowToolPosition(this.rowTool);
|
94444
|
+
}
|
94266
94445
|
|
94267
94446
|
// Apply behavior on each row
|
94268
94447
|
const rows = this.dom.elementChildren(builder);
|
@@ -96531,8 +96710,8 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
96531
96710
|
*/
|
96532
96711
|
src = this.viewFileUrl + '?url=' + src;
|
96533
96712
|
}
|
96534
|
-
const width =
|
96535
|
-
const height = 512;
|
96713
|
+
const width = this.ai_width; //768;
|
96714
|
+
const height = this.ai_height; //512;
|
96536
96715
|
const img = new Image();
|
96537
96716
|
img.src = src;
|
96538
96717
|
img.crossOrigin = 'anonymous';
|
@@ -96564,6 +96743,47 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
96564
96743
|
callback(result.url);
|
96565
96744
|
};
|
96566
96745
|
}
|
96746
|
+
getOrientation(width, height) {
|
96747
|
+
const aspectRatio = width / height;
|
96748
|
+
const predefinedRatios = [{
|
96749
|
+
ratio: '1:1',
|
96750
|
+
value: 1 / 1
|
96751
|
+
}, {
|
96752
|
+
ratio: '4:5',
|
96753
|
+
value: 4 / 5
|
96754
|
+
}, {
|
96755
|
+
ratio: '2:3',
|
96756
|
+
value: 2 / 3
|
96757
|
+
}, {
|
96758
|
+
ratio: '9:16',
|
96759
|
+
value: 9 / 16
|
96760
|
+
}, {
|
96761
|
+
ratio: '4:7',
|
96762
|
+
value: 4 / 7
|
96763
|
+
}, {
|
96764
|
+
ratio: '5:4',
|
96765
|
+
value: 5 / 4
|
96766
|
+
}, {
|
96767
|
+
ratio: '3:2',
|
96768
|
+
value: 3 / 2
|
96769
|
+
}, {
|
96770
|
+
ratio: '16:9',
|
96771
|
+
value: 16 / 9
|
96772
|
+
}, {
|
96773
|
+
ratio: '7:4',
|
96774
|
+
value: 7 / 4
|
96775
|
+
}];
|
96776
|
+
let closestRatio = predefinedRatios[0].ratio;
|
96777
|
+
let smallestDifference = Math.abs(aspectRatio - predefinedRatios[0].value);
|
96778
|
+
for (let i = 1; i < predefinedRatios.length; i++) {
|
96779
|
+
const difference = Math.abs(aspectRatio - predefinedRatios[i].value);
|
96780
|
+
if (difference < smallestDifference) {
|
96781
|
+
smallestDifference = difference;
|
96782
|
+
closestRatio = predefinedRatios[i].ratio;
|
96783
|
+
}
|
96784
|
+
}
|
96785
|
+
return closestRatio;
|
96786
|
+
}
|
96567
96787
|
async generateImage(prompt, callback) {
|
96568
96788
|
this.controller = new AbortController(); // Create a new AbortController
|
96569
96789
|
this.signal = this.controller.signal; // Get a new signal object
|
@@ -96573,12 +96793,82 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
96573
96793
|
let steps = this.imageSteps || 25;
|
96574
96794
|
let guidance = this.imageGuidance || 7.5;
|
96575
96795
|
let scheduler = this.imageScheduler || 'dpmsolver++';
|
96796
|
+
let width = 768;
|
96797
|
+
let height = 512;
|
96798
|
+
if (this.activeImage) {
|
96799
|
+
// check selected image dimension
|
96800
|
+
const activeImage = this.activeImage;
|
96801
|
+
const w = activeImage.offsetWidth;
|
96802
|
+
const h = activeImage.offsetHeight;
|
96803
|
+
const ratio = this.getOrientation(w, h);
|
96804
|
+
if (model === 'flux-schnell') {
|
96805
|
+
if (ratio === '1:1') {
|
96806
|
+
width = 1024;
|
96807
|
+
height = 1024;
|
96808
|
+
} else if (ratio === '4:5') {
|
96809
|
+
width = 768;
|
96810
|
+
height = 960;
|
96811
|
+
} else if (ratio === '2:3') {
|
96812
|
+
width = 768;
|
96813
|
+
height = 1152;
|
96814
|
+
} else if (ratio === '9:16') {
|
96815
|
+
width = 720;
|
96816
|
+
height = 1280;
|
96817
|
+
} else if (ratio === '4:7') {
|
96818
|
+
width = 512;
|
96819
|
+
height = 896;
|
96820
|
+
} else if (ratio === '5:4') {
|
96821
|
+
width = 960;
|
96822
|
+
height = 768;
|
96823
|
+
} else if (ratio === '3:2') {
|
96824
|
+
width = 1152;
|
96825
|
+
height = 768;
|
96826
|
+
} else if (ratio === '16:9') {
|
96827
|
+
width = 1280;
|
96828
|
+
height = 720;
|
96829
|
+
} else if (ratio === '7:4') {
|
96830
|
+
width = 896;
|
96831
|
+
height = 512;
|
96832
|
+
}
|
96833
|
+
} else {
|
96834
|
+
if (ratio === '1:1') {
|
96835
|
+
width = 512;
|
96836
|
+
height = 512;
|
96837
|
+
} else if (ratio === '4:5') {
|
96838
|
+
width = 512;
|
96839
|
+
height = 640;
|
96840
|
+
} else if (ratio === '2:3') {
|
96841
|
+
width = 512;
|
96842
|
+
height = 768;
|
96843
|
+
} else if (ratio === '9:16') {
|
96844
|
+
width = 576;
|
96845
|
+
height = 1024;
|
96846
|
+
} else if (ratio === '4:7') {
|
96847
|
+
width = 512;
|
96848
|
+
height = 896;
|
96849
|
+
} else if (ratio === '5:4') {
|
96850
|
+
width = 640;
|
96851
|
+
height = 512;
|
96852
|
+
} else if (ratio === '3:2') {
|
96853
|
+
width = 768;
|
96854
|
+
height = 512;
|
96855
|
+
} else if (ratio === '16:9') {
|
96856
|
+
width = 1024;
|
96857
|
+
height = 576;
|
96858
|
+
} else if (ratio === '7:4') {
|
96859
|
+
width = 896;
|
96860
|
+
height = 512;
|
96861
|
+
}
|
96862
|
+
}
|
96863
|
+
}
|
96864
|
+
this.ai_width = width;
|
96865
|
+
this.ai_height = height;
|
96576
96866
|
const messages = {
|
96577
96867
|
model,
|
96578
96868
|
prompt: prompt,
|
96579
96869
|
negative_prompt,
|
96580
|
-
width:
|
96581
|
-
height:
|
96870
|
+
width: this.ai_width,
|
96871
|
+
height: this.ai_height,
|
96582
96872
|
steps,
|
96583
96873
|
guidance,
|
96584
96874
|
scheduler,
|
@@ -96604,10 +96894,15 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
96604
96894
|
return;
|
96605
96895
|
}
|
96606
96896
|
const imageUrl = result.url;
|
96607
|
-
if (this.
|
96608
|
-
|
96609
|
-
} else {
|
96897
|
+
if (this.activeImage) {
|
96898
|
+
// selectable image on content doesn't need tp be upscaled
|
96610
96899
|
callback(imageUrl);
|
96900
|
+
} else {
|
96901
|
+
if (this.imageAutoUpscale) {
|
96902
|
+
this.upscaleImage(imageUrl, callback);
|
96903
|
+
} else {
|
96904
|
+
callback(imageUrl);
|
96905
|
+
}
|
96611
96906
|
}
|
96612
96907
|
} catch (error) {
|
96613
96908
|
if (error.name === 'AbortError') ; else {
|