Skip to content

Commit

Permalink
[2.2.0] Layer Picker Resizing and Bug Fixes
Browse files Browse the repository at this point in the history 
- Adds a button on the layer picker that allows for expanding and retracting the size of the layer picker
- Fixes bug when detaching UIGestureRecognizers
- Adds delay before starting the application to prevent loading while still opening the webpage
  • Loading branch information
@malulleybovo
malulleybovo committed Apr 11, 2022
1 parent 97398eb commit 9b88d92
Show file tree
Hide file tree
Showing 6 changed files with 154 additions and 38 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
Pseudo-vector image creator.

## [Launch Application](https://malulleybovo.github.io/SymbolArtEditorOnline/)
#### Version 2.1.0
#### Version 2.2.0

### Quickly get down to business and make art with fluidity and agility.
<br>Symbol Art Editor was designed based on three pillars: simplicity, ease of use, and agility.
Expand Down
19 changes: 12 additions & 7 deletions res/templates/layerpicker.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,18 @@
<br/>
<span id="containercount">0</span><span>/</span><span id="containertotal">0</span><span> Containers</span>
</div>
<div id="layersearchcontainer" style="color: #808080;font-size: 12px;padding: 0 10px 4px 0;">
<div style="position: relative;height: 30px;background: #80808040;border-radius: 6px;margin-left: 60px;">
<div style="position: absolute;top: 0;left: 12px;bottom: 0;right: 30px;">
<input id="layersearchtextfield" style="padding: 0;height: 100%;border: none;text-align: right;position: relative;top: 0;left: 0;color: white;outline: none;font-family: Verdana;font-weight: bold;font-size: 12pt;width: 100%;" type="text" class="gradient-text">
</div>
<div id="searchbutton" style="position: absolute;right: 0;top: 0;bottom: 0;width: 30px;font-size: 14px;text-align: center;color: white;text-shadow: none;">
<i style="position: absolute;transform: translate(-50%, -50%);top: 50%;" class="fas fa-search"></i>
<div>
<div id="expandbutton" style="position: relative;width: 30px;height: 30px;float: left;margin-left: 8px;font-size: 16px;text-align: center;color: white;text-shadow: none;">
<i style="position: absolute;transform: translate(-50%, -50%);top: 50%;pointer-events: none;" class="fas fa-expand-alt"></i>
</div>
<div id="layersearchcontainer" style="color: #808080;font-size: 12px;padding: 0 10px 4px 0;">
<div style="position: relative;height: 30px;background: #80808040;border-radius: 6px;margin-left: 60px;">
<div style="position: absolute;top: 0;left: 12px;bottom: 0;right: 30px;">
<input id="layersearchtextfield" style="padding: 0;height: 100%;border: none;text-align: right;position: relative;top: 0;left: 0;color: white;outline: none;font-family: Verdana;font-weight: bold;font-size: 12pt;width: 100%;" type="text" class="gradient-text">
</div>
<div id="searchbutton" style="position: absolute;right: 0;top: 0;bottom: 0;width: 30px;font-size: 14px;text-align: center;color: white;text-shadow: none;">
<i style="position: absolute;transform: translate(-50%, -50%);top: 50%;" class="fas fa-search"></i>
</div>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion res/templates/optionsview.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class="disable-select" style="position: fixed;left: 0;top: 0;width: 100%;height: 100%;opacity: 0.95;background: #3c3c3c;z-index: 1000;transition: all 0.25s ease-in-out 0s;" oncontextmenu="return false;">

<div style="position: absolute;bottom: 30px;left: 50%;transform: translateX(-50%);color: #808080;font-size: 12px;text-align: center;">v2.1.0<br />&copy; 2021 Copyright malulleybovo</div>
<div style="position: absolute;bottom: 30px;left: 50%;transform: translateX(-50%);color: #808080;font-size: 12px;text-align: center;">v2.2.0<br />&copy; 2021 Copyright malulleybovo</div>

<div style="position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);max-width: 720px;font-weight: bold;min-width: 360px;text-align: center;">

Expand Down
4 changes: 3 additions & 1 deletion src/UIApplication.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,9 @@ class UIApplication {

static shared = (() => {
$(document).ready(_ => {
UIApplication.shared = new UIApplication();
setTimeout(_ => {
UIApplication.shared = new UIApplication();
}, 500);
});
return null;
})();
Expand Down
83 changes: 82 additions & 1 deletion src/components/ui/UILayerPicker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,9 +68,79 @@ class UILayerPicker extends UIView {
});
})();

_isExpanding = false;
_expandButtonInitialTap = null;
_expandButton = (() => {
this.didLoad(_ => {
this._expandButton = this.view.find('#expandbutton');
this._expandButton.css('display', 'none');
this._expandButton.gestureRecognizer = new UIGestureRecognizer({
targetHtmlElement: this._expandButton[0],
preventsDefault: false,
preventsPropagation: event => {
if (event.type === 'pointerdown') {
return false;
}
return !this._isExpanding;
},
cancellable: event => {
return !this._isExpanding;
},
onPointerDown: (event) => {
this._isExpanding = true;
}, onPointerMove: (event) => {
// to prevent propagation
}, onPointerUp: (event) => {
// to prevent propagation
}, onScroll: (event) => {
// to prevent propagation
}, onKeyPress: (event) => {
return false;
}
});
this._expandButton.outterGestureRecognizer = new UIGestureRecognizer({
targetHtmlElement: $('body')[0],
preventsDefault: false,
preventsPropagation: event => {
return this._isExpanding;
},
cancellable: event => {
return event.type !== 'pointerout';
},
onPointerDown: (event) => {
if (this._isExpanding && /[0-9]+/.exec(this._listView.css('max-height'))) {
this._expandButtonInitialTap = {
x: event.clientX, y: event.clientY,
height: Number.parseInt(/[0-9]+/.exec(this._listView.css('max-height'))[0])
}
}
}, onPointerMove: (event) => {
if (this._isExpanding && this._expandButtonInitialTap && event) {
let currentValue = this._expandButtonInitialTap.height;
let deltaY = this._expandButtonInitialTap.y - event.clientY;
let maxHeight = Math.min($(document).height() - 170, this._listView[0].scrollHeight);
let value = Math.round(Math.max(180, Math.min(maxHeight, currentValue + deltaY)));
this._listView.css('max-height', value + 'px');
}
}, onPointerUp: (event) => {
if (event.type === 'pointerout') return;
this._expandButtonInitialTap = null;
this._isExpanding = false;
}
});
window.addEventListener('resize', event => {
let currentValue = Number.parseInt(/[0-9]+/.exec(this._listView.css('max-height'))[0]);
let maxHeight = Math.min($(document).height() - 120, this._listView[0].scrollHeight);
let value = Math.round(Math.max(180, Math.min(maxHeight, currentValue)));
this._listView.css('max-height', value + 'px');
}, true);
});
})();

_layerSearchContainer = (() => {
this.didLoad(_ => {
this._layerSearchContainer = this.view.find('#layersearchcontainer');
this._layerSearchContainer.css('display', 'none');
});
})();

Expand Down Expand Up @@ -136,6 +206,7 @@ class UILayerPicker extends UIView {
&& this._symbolTotal instanceof jQuery
&& this._containerCount instanceof jQuery
&& this._containerTotal instanceof jQuery
&& this._expandButton instanceof jQuery
&& this._layerSearchContainer instanceof jQuery
&& this._layerSearchTextField instanceof jQuery;
}
Expand All @@ -156,6 +227,12 @@ class UILayerPicker extends UIView {
this.view.gestureRecognizer = new UIGestureRecognizer({
targetHtmlElement: this.view[0],
preventsDefault: false,
preventsPropagation: _ => {
return !this._isExpanding;
},
cancellable: event => {
return !this._isExpanding;
},
onPointerDown: (event) => {
// to prevent propagation
}, onPointerMove: (event) => {
Expand Down Expand Up @@ -251,8 +328,10 @@ class UILayerPicker extends UIView {
for (var index in this._uiLayers) {
this._uiLayers[index].append({ to: this._listView });
}
this._expandButton.css('display', '');
this._layerSearchContainer.css('display', '');
if (uiLayers.length < 2) {
if (uiLayers.length <= 5) {
this._expandButton.css('display', 'none');
this._layerSearchContainer.css('display', 'none');
}
setTimeout(_ => {
Expand Down Expand Up @@ -299,9 +378,11 @@ class UILayerPicker extends UIView {
if (this._layerSearchTextField.val().trim().length > 0) {
icon.removeClass('fa-search');
icon.addClass('fa-times');
this._expandButton.css('display', 'none');
} else {
icon.removeClass('fa-times');
icon.addClass('fa-search');
this._expandButton.css('display', '');
}
this._updateCollapsibles();
this.select({ layerWithUuid: this._lastSelectedUuid });
Expand Down
82 changes: 55 additions & 27 deletions src/model/UIGestureRecognizer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,20 @@ class UIGestureRecognizer {
this._preventsDefault = value;
}

_preventsPropagation = null;
get preventsPropagation() { return this._preventsPropagation }
set preventsPropagation(value) {
if (typeof value !== 'function') return;
this._preventsPropagation = value;
}

_cancellable = null;
get cancellable() { return this._cancellable }
set cancellable(value) {
if (typeof value !== 'function') return;
this._cancellable = value;
}

_onPointerDown = null;
set onPointerDown(value) {
if (typeof value !== 'function') return;
Expand Down Expand Up @@ -76,10 +90,21 @@ class UIGestureRecognizer {
if (typeof value !== 'function') return;
this._onKeyPress = value;
}

_listeners = {
'interactionStarted': (e) => this.interactionStarted(e),
'interactionChanged': (e) => this.interactionChanged(e),
'interactionEnded': (e) => this.interactionEnded(e),
'interactionCanceled': (e) => this.interactionCanceled(e),
'scrolled': (e) => this.scrolled(e),
'pressedKey': (e) => this.pressedKey(e)
}

constructor({ targetHtmlElement = null, preventsDefault = null, onPointerDown = null, onPointerMove = null, onPointerUp = null, onScroll = null, onKeyPress = null }) {
constructor({ targetHtmlElement = null, preventsDefault = null, preventsPropagation = null, cancellable = null, onPointerDown = null, onPointerMove = null, onPointerUp = null, onScroll = null, onKeyPress = null }) {
this.target = targetHtmlElement;
this.preventsDefault = preventsDefault;
this.preventsPropagation = preventsPropagation;
this.cancellable = cancellable;
this.onPointerDown = onPointerDown;
this.onPointerMove = onPointerMove;
this.onPointerUp = onPointerUp;
Expand All @@ -89,44 +114,44 @@ class UIGestureRecognizer {

detach() {
if (!(this._target instanceof HTMLElement)) return;
this._target.removeEventListener('pointerdown', (e) => this.interactionStarted(e), false);
this._target.removeEventListener('pointermove', (e) => this.interactionChanged(e), false);
this._target.removeEventListener('pointerup', (e) => this.interactionEnded(e), false);
this._target.removeEventListener('pointerout', (e) => this.interactionEnded(e), false);
this._target.removeEventListener('pointerleave', (e) => this.interactionEnded(e), false);
this._target.removeEventListener('pointercancel', (e) => this.interactionEnded(e), false);
this._target.removeEventListener('lostpointercapture', (e) => this.interactionEnded(e), false);
this._target.removeEventListener('scroll', (e) => this.scrolled(e), false);
this._target.removeEventListener('wheel', (e) => this.scrolled(e), false);
this._target.removeEventListener('keyup', (e) => this.pressedKey(e), false);
this._target.removeEventListener('pointerdown', this._listeners['interactionStarted'], false);
this._target.removeEventListener('pointermove', this._listeners['interactionChanged'], false);
this._target.removeEventListener('pointerup', this._listeners['interactionEnded'], false);
this._target.removeEventListener('pointerout', this._listeners['interactionCanceled'], false);
this._target.removeEventListener('pointerleave', this._listeners['interactionCanceled'], false);
this._target.removeEventListener('pointercancel', this._listeners['interactionCanceled'], false);
this._target.removeEventListener('lostpointercapture', this._listeners['interactionCanceled'], false);
this._target.removeEventListener('scroll', this._listeners['scrolled'], false);
this._target.removeEventListener('wheel', this._listeners['scrolled'], false);
this._target.removeEventListener('keyup', this._listeners['pressedKey'], false);
}

attach() {
if (!(this._target instanceof HTMLElement)) return;
this._target.addEventListener('pointerdown', (e) => this.interactionStarted(e), false);
this._target.addEventListener('pointermove', (e) => this.interactionChanged(e), false);
this._target.addEventListener('pointerup', (e) => this.interactionEnded(e), false);
this._target.addEventListener('pointerout', (e) => this.interactionCanceled(e), false);
this._target.addEventListener('pointerleave', (e) => this.interactionCanceled(e), false);
this._target.addEventListener('pointercancel', (e) => this.interactionCanceled(e), false);
this._target.addEventListener('lostpointercapture', (e) => this.interactionCanceled(e), false);
this._target.addEventListener('scroll', (e) => this.scrolled(e), false);
this._target.addEventListener('wheel', (e) => this.scrolled(e), false);
this._target.addEventListener('keyup', (e) => this.pressedKey(e), false);
this._target.addEventListener('pointerdown', this._listeners['interactionStarted'], false);
this._target.addEventListener('pointermove', this._listeners['interactionChanged'], false);
this._target.addEventListener('pointerup', this._listeners['interactionEnded'], false);
this._target.addEventListener('pointerout', this._listeners['interactionCanceled'], false);
this._target.addEventListener('pointerleave', this._listeners['interactionCanceled'], false);
this._target.addEventListener('pointercancel', this._listeners['interactionCanceled'], false);
this._target.addEventListener('lostpointercapture', this._listeners['interactionCanceled'], false);
this._target.addEventListener('scroll', this._listeners['scrolled'], false);
this._target.addEventListener('wheel', this._listeners['scrolled'], false);
this._target.addEventListener('keyup', this._listeners['pressedKey'], false);
}

interactionStarted(event) {
if (!event || !this._onPointerDown) return;
if (this._preventsDefault) event.preventDefault();
event.stopPropagation();
if (!this._preventsPropagation || this._preventsPropagation(event)) event.stopPropagation();
this._initialEvent = event;
this._onPointerDown(event);
}

interactionChanged(event) {
if (!event || !this._onPointerMove) return;
if (this._preventsDefault) event.preventDefault();
event.stopPropagation();
if (!this._preventsPropagation || this._preventsPropagation(event)) event.stopPropagation();
if (this._initialEvent) {
this._onPointerMove(event);
}
Expand All @@ -138,18 +163,21 @@ class UIGestureRecognizer {
return;
}
if (this._preventsDefault) event.preventDefault();
event.stopPropagation();
if (!this._preventsPropagation || this._preventsPropagation(event)) event.stopPropagation();
this._onPointerUp(event);
this._initialEvent = null;
}

interactionCanceled(event) {
if (this._cancellable && !this._cancellable(event)) {
return
}
if (!event || !this._onPointerUp) {
this._initialEvent = null;
return;
}
if (this._preventsDefault) event.preventDefault();
event.stopPropagation();
if (!this._preventsPropagation || this._preventsPropagation(event)) event.stopPropagation();
if (this._initialEvent) {
this._onPointerUp(event);
}
Expand All @@ -158,13 +186,13 @@ class UIGestureRecognizer {

scrolled(event) {
if (!event || !this._onScroll) return;
event.stopPropagation();
if (!this._preventsPropagation || this._preventsPropagation(event)) event.stopPropagation();
this._onScroll(event);
}

pressedKey(event) {
if (!event) return;
event.stopPropagation();
if (!this._preventsPropagation || this._preventsPropagation(event)) event.stopPropagation();
if (this._onKeyPress) {
return this._onKeyPress(event);
}
Expand Down

0 comments on commit 9b88d92

Please sign in to comment.