Skip to content
This repository has been archived by the owner on Oct 23, 2023. It is now read-only.

Commit

Permalink
fix: handle root-level sibling drops properly
Browse files Browse the repository at this point in the history
  • Loading branch information
@marionebl
marionebl committed May 24, 2018
1 parent 7c33dcb commit 31b6bd3
Show file tree
Hide file tree
Showing 3 changed files with 61 additions and 118 deletions.
82 changes: 15 additions & 67 deletions src/container/element-list/element-list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ export class ElementList extends React.Component<{}, ElementListState> {
): ElementNodeProps {
const store = Store.ViewStore.getInstance();
const slotId = slot.getId();
const slotContent = element.getContentById(slotId) as Store.PageElementContent;
const slotContent = element.getContainerById(slotId) as Store.PageElementContent;

const childItems: ElementNodeProps[] = [];
const selectedSlot = store.getSelectedSlotId();
Expand Down Expand Up @@ -249,20 +249,28 @@ export class ElementList extends React.Component<{}, ElementListState> {
return;
}

const dropParent =
isSiblingDrop && !targetElement.isRoot()
? (targetElement.getParent() as Store.PageElement) // Non-root page element always has parent
: targetElement;
const getDropParent = (el: Store.PageElement): Store.PageElement => {
if (!isSiblingDrop) {
return el;
}

if (el.isRoot()) {
return el;
}

return el.getParent() as Store.PageElement;
};

const dropParent = getDropParent(targetElement);

const container = dropParent.getContentById('default');
const container = dropParent.getContainerById('default');

// prettier-ignore
const draggedElement = pattern
? // drag from pattern list, create new element
new Store.PageElement({
container,
contents: [],
parent: dropParent,
pattern,
setDefaults: true
})
Expand All @@ -282,66 +290,6 @@ export class ElementList extends React.Component<{}, ElementListState> {

store.execute(command);
store.setSelectedElement(draggedElement);

/* this.handleDragEnd(e);
const isPlaceholder =
(e.target as HTMLElement).getAttribute(ElementAnchors.placeholder) === 'true';
const store = ViewStore.getInstance();
const styleguide = store.getStyleguide() as Styleguide;
const patternId = e.dataTransfer.getData('patternId');
const dropTargetElement = elementFromTarget(e.target);
const pattern = styleguide.getPattern(patternId) as Pattern;
const newParent = dropTargetElement
? dropTargetElement.getParent() || dropTargetElement
: undefined;
// TODO: The ancestor check should be performed for drag starts to show no drop
// indication for impossible drop operations
if (!dropTargetElement || !newParent) {
return;
}
const container = newParent.getContentById('default');
if (!container) {
return;
}
const draggedElement = patternId ?
store.getDraggedElement() :
new PageElement({
container,
contents: [],
parent: dropTargetElement,
pattern,
setDefaults: true
});
if (!draggedElement) {
return;
}
if (draggedElement.isAncestorOf(newParent)) {
return;
}
const command = isPlaceholder && !dropTargetElement.isRoot()
? ElementLocationCommand.addSibling({
newSibling: draggedElement,
sibling: dropTargetElement
})
: ElementLocationCommand.addChild({
parent: dropTargetElement,
child: draggedElement,
slotId: 'default',
index: 0
});
store.execute(command);
store.setSelectedElement(draggedElement); */
}

private handleKeyDown(e: KeyboardEvent): void {
Expand Down
95 changes: 45 additions & 50 deletions src/store/page/page-element.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@ import { Page } from './page';
import { Pattern, Property, Styleguide } from '../styleguide';
import * as Types from '../types';
import * as Uuid from 'uuid';
import { ViewStore } from '../view-store';

export interface PageElementProperties {
container?: PageElementContent;
contents: PageElementContent[];
id?: string;
name?: string;
parent?: PageElement;
pattern: Pattern;
properties?: Map<string, Types.PropertyValue>;
setDefaults?: boolean;
Expand All @@ -22,36 +22,51 @@ export interface PageElementContext {
styleguide: Styleguide;
}

export interface PageElementContentContext {
elementId: string;
styleguide: Styleguide;
}

export interface PageElementContentInit {
elementId: string;
elements: PageElement[];
id: string;
name: string;
}

// TODO: Distinguish between content id and slot id
export class PageElementContent {
@MobX.observable private elementId: string;
@MobX.observable private elements: PageElement[] = [];
@MobX.observable private id: string;
@MobX.observable private name: string;

public constructor(init: PageElementContentInit) {
this.id = init.id;
this.elementId = init.elementId;
this.name = init.name;
this.elements = init.elements;
this.elements.forEach(element => element.setContainer(this));
this.elements.forEach((element, index) => this.insert({ element, at: index }));
}

public static from(
serialized: Types.SerializedPageElementContent,
context: PageElementContext
context: PageElementContentContext
): PageElementContent {
return new PageElementContent({
elementId: context.elementId,
id: serialized.id,
name: serialized.name,
elements: serialized.elements.map(element => PageElement.from(element, context))
elements: serialized.elements.map(element =>
PageElement.from(element, { styleguide: context.styleguide })
)
});
}

public getElementId(): string {
return this.elementId;
}

public getElements(): PageElement[] {
return this.elements;
}
Expand Down Expand Up @@ -161,6 +176,7 @@ export class PageElement {

this.contents.push(
new PageElementContent({
elementId: this.id,
id: slot.getId(),
name: slot.getName(),
elements: hydratedSlot ? hydratedSlot.getElements() : []
Expand Down Expand Up @@ -201,7 +217,10 @@ export class PageElement {
name: serializedPageElement.name,
pattern: context.styleguide.getPatternById(serializedPageElement.pattern) as Pattern,
contents: serializedPageElement.contents.map(content =>
PageElementContent.from(content, context)
PageElementContent.from(content, {
styleguide: context.styleguide,
elementId: serializedPageElement.id
})
),
properties: toMap(serializedPageElement.properties)
});
Expand All @@ -214,11 +233,11 @@ export class PageElement {
* @param index The 0-based new position within the children. Leaving out the position adds it at the end of the list.
*/
public addChild(child: PageElement, slotId: string, index: number): void {
child.setParent({
index,
parent: this,
slotId
});
const container = this.getContainerById(slotId);

if (container) {
container.insert({ element: child, at: index });
}
}

/**
Expand Down Expand Up @@ -254,6 +273,10 @@ export class PageElement {
return this.container;
}

public getContainerById(slotId: string): PageElementContent | undefined {
return this.contents.find(content => content.getId() === slotId);
}

/**
* Returns the id of the slot this element is attached to.
* @return The slotId of the parent element.
Expand All @@ -265,17 +288,6 @@ export class PageElement {
return this.container.getId();
}

public getContentById(slotId: string): PageElementContent | undefined {
return this.contents.find(content => content.getId() === slotId);
}

/**
* Returns all child elements contained by this element, mapped to their containing slots.
*/
public getContents(): PageElementContent[] {
return this.contents;
}

public getElementById(id: string): PageElement | undefined {
let result;

Expand Down Expand Up @@ -317,7 +329,7 @@ export class PageElement {
return;
}

const content = this.parent.getContentById(this.container.getId());
const content = this.parent.getContainerById(this.container.getId());

if (!content) {
return;
Expand Down Expand Up @@ -359,7 +371,12 @@ export class PageElement {
* @return The parent page element or undefined.
*/
public getParent(): PageElement | undefined {
return this.parent;
if (!this.container) {
return;
}

const store = ViewStore.getInstance();
return store.getElementById(this.container.getElementId());
}

/**
Expand Down Expand Up @@ -433,27 +450,9 @@ export class PageElement {
* @return Whether this page element is the root element.
*/
public isRoot(): boolean {
return this.parent === undefined;
return this.container === null;
}

/**
* Returns a JSON value (serializable JavaScript object) for a given property value.
* @return value The property value to serialize.
* @return The JSON value.
*/
/* protected propertyToJsonValue(value: Types.PropertyValue): any {
if (value instanceof Object) {
const jsonObject: any = {};
Object.keys(value).forEach((propertyId: string) => {
// tslint:disable-next-line:no-any
jsonObject[propertyId] = this.propertyToJsonValue((value as any)[propertyId]);
});
return jsonObject;
} else {
return value as any;
}
} */

/**
* Removes this page element from its parent. You may later re-add it using setParent().
* @see setParent()
Expand All @@ -464,10 +463,6 @@ export class PageElement {
}
}

public setContainer(container: PageElementContent): void {
this.container = container;
}

/**
* Moves this page element to a new position within its parent
* @param index The new 0-based position within the parent's children.
Expand Down Expand Up @@ -518,14 +513,12 @@ export class PageElement {
* Sets a new parent for this element (and removes it from its previous parent).
* If no parent is provided, only removes it from its parent.
* @param parent The (optional) new parent for this element.
* @param index The 0-based new position within the children of the new parent.
* @param index The 0-based new position within the container.
* @param slotId The slot to attach the element to. When undefined the default slot is used.
* Leaving out the position adds it at the end of the list.
*/
public setParent(init: { index: number; parent: PageElement; slotId: string }): void {
this.parent = init.parent;

const container = init.parent.getContentById(init.slotId);
const container = init.parent.getContainerById(init.slotId);

if (this.container) {
this.container.remove({ element: this });
Expand All @@ -534,6 +527,8 @@ export class PageElement {
if (container) {
container.insert({ element: this, at: init.index });
}

this.container = container;
}

/**
Expand Down
2 changes: 1 addition & 1 deletion src/store/view-store.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -552,7 +552,7 @@ export class ViewStore {
return;
}

const contents = element.getContentById('default');
const contents = element.getContainerById('default');

if (!contents) {
return;
Expand Down

0 comments on commit 31b6bd3

Please sign in to comment.