Skip to content

Commit

Permalink
Enable element removing after select it indirectely
Browse files Browse the repository at this point in the history 
[Issue]: Samsung#280
[Problem]:
	-  When select element from structure view item cannot be
deleted
	- When select other way than directly, focus is not set on
closet-select-layer
[Solution] Change focus to closet-select-layer everytime when item is
selected

Signed-off-by: Kornelia Kobiela <k.kobiela@samsung.com>
  • Loading branch information
Kornelia Kobiela committed Aug 16, 2019
1 parent 61f049d commit 8b4efe2
Show file tree
Hide file tree
Showing 2 changed files with 109 additions and 94 deletions.
78 changes: 46 additions & 32 deletions design-editor/src/pane/element-selector.js
View file
Original file line number Diff line number Diff line change
@@ -1,52 +1,66 @@
/* eslint-disable no-console */
'use babel';

import {EVENTS, eventEmitter} from '../events-emitter';

class ElementSelector {
/**
/**
* Constructor
*/
constructor() {
this._curSelectedId = null;
}
constructor() {
this._curSelectedId = null;
this._selectLayer = null;
eventEmitter.on(EVENTS.ActiveEditorUpdated, this.onActiveEditorUpdate);
eventEmitter.on(EVENTS.ElementSelected, this.onElementSelect);
}

/**
/**
* select element
* @param {string} elementId
*/
select(elementId) {
console.log("select", elementId);
if (this._curSelectedId && elementId !== this._curSelectedId) {
this.unSelect();
}

if (!this._curSelectedId) {
this._curSelectedId = elementId;
eventEmitter.emit(EVENTS.ElementSelected, elementId);
}
}

/**
select(elementId) {
console.log('select', elementId);
if (this._curSelectedId && elementId !== this._curSelectedId) {
this.unSelect();
}

if (!this._curSelectedId) {
this._curSelectedId = elementId;
eventEmitter.emit(EVENTS.ElementSelected, elementId);
}
}

/**
* Unselect element
* @returns {boolean}
*/
unSelect() {
console.log("unselect", this._curSelectedId);
if (this._curSelectedId) {
eventEmitter.emit(EVENTS.ElementDeselected, this._curSelectedId);
this._curSelectedId = null;
return true;
}
return false;
}

/**
unSelect() {
console.log('unselect', this._curSelectedId);
if (this._curSelectedId) {
eventEmitter.emit(EVENTS.ElementDeselected, this._curSelectedId);
this._curSelectedId = null;
return true;
}
return false;
}

/**
* Get id of selected element
* @returns {null|*}
*/
getSelectedElementId() {
return this._curSelectedId;
}
getSelectedElementId() {
return this._curSelectedId;
}

onActiveEditorUpdate(type, editor) {
if (type) {
this._selectLayer = editor._selectLayer.$el;
}
}

onElementSelect() {
this._selectLayer.focus();
}
}

const elementSelector = new ElementSelector();
Expand Down
125 changes: 63 additions & 62 deletions design-editor/src/panel/property/structure/structure-element.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* eslint-disable no-console */
'use babel';

import path from 'path';
Expand Down Expand Up @@ -170,52 +171,52 @@ class Structure extends DressElement {
* Callback for event select element
* @param {number} elementId
*/
_onSelectedElement(elementId) {
console.log('_onSelectedElement', elementId);
var $listItem = this._$treeRoot.find('[data-linked-element=' + elementId + ']'),
elementInfo,
$element,
elementPackage;

if ($listItem.length) {
$listItem.addClass('item-selected');
}
if (this._lastSelectedItemId === elementId) {
return;
}
this._lastSelectedItemId = elementId;

if (this._editor && this._editor.isVisible()) {
elementInfo = this._editor.getUIInfo(this._editor._getElementById(elementId));
elementPackage = elementInfo && elementInfo.package;
if (this._hidingComponent) {
this._hidingComponent[this._hidingInfo.package.options.display.hide.method]();
}
if (elementInfo.package.options.type === 'hiding-container-component') {
if (this._hidingComponent) {
this._hidingComponent[elementInfo.package.options.display.hide.method]();
}
this._openHidingComponent(elementInfo);
// elementInfo.$element.css('display', 'block');
} else {
$element = elementInfo.$element;
while (elementInfo && $element.parent().length) {
elementInfo = this._editor.getUIInfo($element.parent());
elementPackage = elementInfo && elementInfo.package;
if (elementPackage && elementPackage.options.type === 'hiding-container-component') {
elementSelector.unSelect();
if (this._hidingComponent) {
this._hidingComponent[this._hidingInfo.package.options.display.hide.method]();
}
this._openHidingComponent(elementInfo, elementId);
// elementInfo.$element.css('display', 'block');
break;
}
$element = $element.parent();
}
}
}
}
_onSelectedElement(elementId) {
console.log('_onSelectedElement', elementId);
const $listItem = this._$treeRoot.find(`[data-linked-element=${ elementId }]`);
let elementInfo,
$element,
elementPackage;

if ($listItem.length) {
$listItem.addClass('item-selected');
}
if (this._lastSelectedItemId === elementId) {
return;
}
this._lastSelectedItemId = elementId;

if (this._editor && this._editor.isVisible()) {
elementInfo = this._editor.getUIInfo(this._editor._getElementById(elementId));
elementPackage = elementInfo && elementInfo.package;
if (this._hidingComponent) {
this._hidingComponent[this._hidingInfo.package.options.display.hide.method]();
}
if (elementInfo.package.options.type === 'hiding-container-component') {
if (this._hidingComponent) {
this._hidingComponent[elementInfo.package.options.display.hide.method]();
}
this._openHidingComponent(elementInfo);
// elementInfo.$element.css('display', 'block');
} else {
$element = elementInfo.$element;
while (elementInfo && $element.parent().length) {
elementInfo = this._editor.getUIInfo($element.parent());
elementPackage = elementInfo && elementInfo.package;
if (elementPackage && elementPackage.options.type === 'hiding-container-component') {
elementSelector.unSelect();
if (this._hidingComponent) {
this._hidingComponent[this._hidingInfo.package.options.display.hide.method]();
}
this._openHidingComponent(elementInfo, elementId);
// elementInfo.$element.css('display', 'block');
break;
}
$element = $element.parent();
}
}
}
}

/**
* Callback for event deselect element
Expand Down Expand Up @@ -268,21 +269,21 @@ class Structure extends DressElement {
* Bind events
* @private
*/
_bindEvent() {
var handler = this._bindHandler;
handler.CLICK = this.onClick.bind(this);
handler.ElementSelected = this._onSelectedElement.bind(this);
handler.ElementDeselected = this._onDeselectedElement.bind(this);
handler.ElementInserted = this._onInsertedElement.bind(this);
handler.ElementDeleted = this._onDeletedElement.bind(this);

this._$treeRoot.on('click', handler.CLICK);
eventEmitter.on(EVENTS.ElementSelected, handler.ElementSelected);
eventEmitter.on(EVENTS.ElementDeselected, handler.ElementDeselected);
eventEmitter.on(EVENTS.ElementInserted, handler.ElementInserted);
eventEmitter.on(EVENTS.ElementMoved, handler.ElementInserted);
eventEmitter.on(EVENTS.ElementDeleted, handler.ElementDeleted);
}
_bindEvent() {
const handler = this._bindHandler;
handler.CLICK = this.onClick.bind(this);
handler.ElementSelected = this._onSelectedElement.bind(this);
handler.ElementDeselected = this._onDeselectedElement.bind(this);
handler.ElementInserted = this._onInsertedElement.bind(this);
handler.ElementDeleted = this._onDeletedElement.bind(this);

this._$treeRoot.on('click', handler.CLICK);
eventEmitter.on(EVENTS.ElementSelected, handler.ElementSelected);
eventEmitter.on(EVENTS.ElementDeselected, handler.ElementDeselected);
eventEmitter.on(EVENTS.ElementInserted, handler.ElementInserted);
eventEmitter.on(EVENTS.ElementMoved, handler.ElementInserted);
eventEmitter.on(EVENTS.ElementDeleted, handler.ElementDeleted);
}

/**
* Remove bind events
Expand Down Expand Up @@ -313,7 +314,7 @@ class Structure extends DressElement {
$listItem.addClass('item-selected');

if ($target.hasClass('item-name')) {
elementSelector.select(linkedElementId);
elementSelector.select(linkedElementId);
} else if ($listItem.hasClass('collapsed')) {
$listItem.removeClass('collapsed');
} else {
Expand Down

0 comments on commit 8b4efe2

Please sign in to comment.