MC-1184: Create Dev Docs

davemacaulay · davemacaulay · commit c9d86651a646 · 2018-06-21T12:11:42.000+02:00
- Update dev documentation for drag &amp; drop implementation
diff --git a/app/code/Magento/PageBuilder/docs/events.md b/app/code/Magento/PageBuilder/docs/events.md
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/products/preview.js b/app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/products/preview.js
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/buttons/preview.ts b/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/buttons/preview.ts
@@ -12,7 +12,7 @@ import createContentType from "../../content-type-factory";
 import Option from "../../content-type-menu/option";
 import OptionInterface from "../../content-type-menu/option.d";
 import ButtonItem from "../button-item/preview";
-import ContentTypeMountEventParamsInterface from "../content-type-mount-event-params.d";
+import ContentTypeDroppedCreateEventParamsInterface from "../content-type-dropped-create-event-params";
 import PreviewCollection from "../preview-collection";
 
 export default class Preview extends PreviewCollection {
@@ -21,7 +21,7 @@ export default class Preview extends PreviewCollection {
     public bindEvents() {
         super.bindEvents();
 
-        events.on("buttons:contentType:dropped:create", (args: ContentTypeMountEventParamsInterface) => {
+        events.on("buttons:contentType:dropped:create", (args: ContentTypeDroppedCreateEventParamsInterface) => {
             if (args.id === this.parent.id && this.parent.children().length === 0) {
                 this.addButton();
             }
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/column-group/preview.ts b/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/column-group/preview.ts
@@ -15,10 +15,10 @@ import ContentTypeInterface from "../../content-type.d";
 import {animationTime} from "../../drag-drop/container-animation";
 import {moveContentType} from "../../drag-drop/move-content-type";
 import {getDraggedContentTypeConfig} from "../../drag-drop/registry";
-import {moveArrayItem} from "../../utils/array";
 import {createStyleSheet} from "../../utils/create-stylesheet";
 import {default as ColumnGroupPreview} from "../column-group/preview";
 import Column from "../column/preview";
+import ContentTypeRemovedEventParamsInterface from "../content-type-removed-event-params";
 import PreviewCollection from "../preview-collection";
 import {calculateDropPositions, DropPosition} from "./drag-and-drop";
 import {createColumn} from "./factory";
@@ -29,12 +29,6 @@ import {
     getRoundedColumnWidth, getSmallestColumnWidth, resizeColumn, updateColumnWidth,
 } from "./resizing";
 
-interface ContentTypeRemovedParams {
-    parent: ColumnGroup;
-    contentType: Column;
-    index: number;
-}
-
 export default class Preview extends PreviewCollection {
     public resizing: KnockoutObservable<boolean> = ko.observable(false);
     public hasEmptyChild: KnockoutComputed<boolean> = ko.computed(() => {
@@ -81,7 +75,7 @@ export default class Preview extends PreviewCollection {
     ) {
         super(parent, config, stageId);
 
-        events.on("contentType:removed", (args: ContentTypeRemovedParams) => {
+        events.on("contentType:removed", (args: ContentTypeRemovedEventParamsInterface) => {
             if (args.parent.id === this.parent.id) {
                 this.spreadWidth(event, args);
             }
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/content-type-after-render-event-params.d.ts b/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/content-type-after-render-event-params.d.ts
@@ -3,10 +3,11 @@
  * See COPYING.txt for license details.
  */
 
+import ContentTypeCollectionInterface from "../content-type-collection.d";
 import ContentTypeInterface from "../content-type.d";
 
 export default interface ContentTypeAfterRenderEventParamsInterface {
     id: string;
     element: Element;
-    contentType: ContentTypeInterface;
+    contentType: ContentTypeInterface & ContentTypeCollectionInterface;
 }
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/content-type-before-move-event-params.d.ts b/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/content-type-before-move-event-params.d.ts
@@ -0,0 +1,15 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+import ContentTypeCollectionInterface from "../content-type-collection.d";
+import ContentTypeInterface from "../content-type.d";
+
+export interface ContentTypeBeforeMoveEventParams {
+    contentType: ContentTypeInterface & ContentTypeCollectionInterface;
+    sourceParent: ContentTypeCollectionInterface;
+    targetParent: ContentTypeCollectionInterface;
+    targetIndex: number;
+    stageId: string;
+}
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/content-type-create-event-params.d.ts b/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/content-type-create-event-params.d.ts
@@ -3,9 +3,10 @@
  * See COPYING.txt for license details.
  */
 
+import ContentTypeCollectionInterface from "../content-type-collection.d";
 import ContentTypeInterface from "../content-type.d";
 
 export default interface ContentTypeCreateEventParamsInterface {
     id: string;
-    contentType: ContentTypeInterface;
+    contentType: ContentTypeInterface & ContentTypeCollectionInterface;
 }
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/content-type-dropped-create-event-params.d.ts b/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/content-type-dropped-create-event-params.d.ts
@@ -0,0 +1,12 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+import ContentTypeCollectionInterface from "../content-type-collection.d";
+import ContentTypeInterface from "../content-type.d";
+
+export default interface ContentTypeDroppedCreateEventParamsInterface {
+    id: string;
+    contentType: ContentTypeInterface & ContentTypeCollectionInterface;
+}
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/content-type-duplicate-event-params.d.ts b/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/content-type-duplicate-event-params.d.ts
@@ -3,9 +3,11 @@
  * See COPYING.txt for license details.
  */
 
+import ContentTypeCollectionInterface from "../content-type-collection.d";
 import ContentTypeInterface from "../content-type.d";
 
 export default interface ContentTypeDuplicateEventParamsInterface {
-    id: string;
-    contentType: ContentTypeInterface;
+    originalContentType: ContentTypeInterface & ContentTypeCollectionInterface;
+    duplicateContentType: ContentTypeInterface & ContentTypeCollectionInterface;
+    index: number;
 }
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/content-type-mount-event-params.d.ts b/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/content-type-mount-event-params.d.ts
@@ -3,9 +3,10 @@
  * See COPYING.txt for license details.
  */
 
+import ContentTypeCollectionInterface from "../content-type-collection.d";
 import ContentTypeInterface from "../content-type.d";
 
 export default interface ContentTypeMountEventParamsInterface {
     id: string;
-    contentType: ContentTypeInterface;
+    contentType: ContentTypeInterface & ContentTypeCollectionInterface;
 }
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/content-type-move-event-params.d.ts b/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/content-type-move-event-params.d.ts
@@ -0,0 +1,15 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+import ContentTypeCollectionInterface from "../content-type-collection.d";
+import ContentTypeInterface from "../content-type.d";
+
+export interface ContentTypeMoveEventParamsInterface {
+    contentType: ContentTypeInterface & ContentTypeCollectionInterface;
+    sourceParent: ContentTypeCollectionInterface;
+    targetParent: ContentTypeCollectionInterface;
+    targetIndex: number;
+    stageId: string;
+}
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/content-type-ready-event-params.d.ts b/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/content-type-ready-event-params.d.ts
@@ -3,9 +3,10 @@
  * See COPYING.txt for license details.
  */
 
+import ContentTypeCollectionInterface from "../content-type-collection.d";
 import ContentTypeInterface from "../content-type.d";
 
 export default interface ContentTypeReadyEventParamsInterface {
     id: string;
-    contentType: ContentTypeInterface;
+    contentType: ContentTypeInterface & ContentTypeCollectionInterface;
 }
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/content-type-removed-event-params.d.ts b/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/content-type-removed-event-params.d.ts
@@ -3,11 +3,12 @@
  * See COPYING.txt for license details.
  */
 
+import ContentTypeCollectionInterface from "../content-type-collection.d";
 import ContentTypeInterface from "../content-type.d";
 
 export default interface ContentTypeRemovedEventParamsInterface {
-    contentType: ContentTypeInterface;
+    contentType: ContentTypeInterface & ContentTypeCollectionInterface;
     index: number;
-    parent: ContentTypeInterface;
+    parent: ContentTypeCollectionInterface;
     stageId: string;
 }
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/heading/preview.ts b/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/heading/preview.ts
@@ -10,7 +10,7 @@ import ContentTypeConfigInterface from "../../content-type-config.d";
 import Toolbar from "../../content-type-toolbar";
 import ToolbarOptionInterface from "../../content-type-toolbar/option.d";
 import ContentTypeInterface from "../../content-type.d";
-import ContentTypeReadyEventParamsInterface from "../content-type-ready-event-params.d";
+import ContentTypeDroppedCreateEventParamsInterface from "../content-type-dropped-create-event-params";
 import ObservableUpdater from "../observable-updater";
 import BasePreview from "../preview";
 
@@ -48,7 +48,7 @@ export default class Heading extends BasePreview {
         super.bindEvents();
 
         // When a heading is dropped for the first time show heading toolbar
-        events.on("heading:contentType:dropped:create", (args: ContentTypeReadyEventParamsInterface) => {
+        events.on("heading:contentType:dropped:create", (args: ContentTypeDroppedCreateEventParamsInterface) => {
             if (args.id === this.parent.id) {
                 _.delay(() => {
                     $(this.element).focus();
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/map/preview.ts b/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/map/preview.ts
@@ -5,6 +5,7 @@
 
 import GoogleMap from "Magento_PageBuilder/js/utils/map";
 import events from "uiEvents";
+import ContentTypeDroppedCreateEventParamsInterface from "../content-type-dropped-create-event-params";
 import BasePreview from "../preview";
 
 export default class Preview extends BasePreview {
@@ -16,7 +17,7 @@ export default class Preview extends BasePreview {
         super.bindEvents();
 
         // When a map is dropped for the first time open the edit panel
-        events.on("map:contentType:dropped:create", (args: {[key: string]: any}) => {
+        events.on("map:contentType:dropped:create", (args: ContentTypeDroppedCreateEventParamsInterface) => {
             if (args.id === this.parent.id) {
                 setTimeout(() => {
                     this.edit.open();
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/products/preview.ts b/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/products/preview.ts
@@ -8,6 +8,7 @@ import ko from "knockout";
 import events from "uiEvents";
 import Config from "../../config";
 import delayedPromise from "../../utils/delayed-promise";
+import ContentTypeDroppedCreateEventParamsInterface from "../content-type-dropped-create-event-params";
 import BasePreview from "../preview";
 
 export default class Preview extends BasePreview {
@@ -20,8 +21,8 @@ export default class Preview extends BasePreview {
         super.bindEvents();
 
         // When a products type is dropped for the first time open the edit panel
-        events.on("products:contentType:dropped:create", (event: Event, params: {[key: string]: any}) => {
-            if (event.id === this.parent.id) {
+        events.on("products:contentType:dropped:create", (args: ContentTypeDroppedCreateEventParamsInterface) => {
+            if (args.id === this.parent.id) {
                 delayedPromise(300)().then(() => {
                     this.edit.open();
                 });
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/slider/preview.ts b/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/slider/preview.ts
@@ -20,6 +20,7 @@ import OptionInterface from "../../content-type-menu/option.d";
 import ContentTypeInterface from "../../content-type.d";
 import ContentTypeAfterRenderEventParamsInterface from "../content-type-after-render-event-params";
 import ContentTypeCreateEventParamsInterface from "../content-type-create-event-params.d";
+import ContentTypeDroppedCreateEventParamsInterface from "../content-type-dropped-create-event-params";
 import ContentTypeMountEventParamsInterface from "../content-type-mount-event-params.d";
 import ContentTypeDuplicateEventParamsInterface from "../content-type-ready-event-params.d";
 import ContentTypeReadyEventParamsInterface from "../content-type-ready-event-params.d";
@@ -305,7 +306,7 @@ export default class Preview extends PreviewCollection {
         });
 
         // ContentType being mounted onto container
-        events.on("slider:contentType:dropped:create", (args: ContentTypeReadyEventParamsInterface) => {
+        events.on("slider:contentType:dropped:create", (args: ContentTypeDroppedCreateEventParamsInterface) => {
             if (args.id === this.parent.id && this.parent.children().length === 0) {
                 this.addSlide();
             }
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/tabs/preview.ts b/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/tabs/preview.ts
@@ -24,6 +24,8 @@ import ContentTypeReadyEventParamsInterface from "../content-type-ready-event-pa
 import ContentTypeRemovedEventParamsInterface from "../content-type-removed-event-params.d";
 import ObservableUpdater from "../observable-updater";
 import PreviewCollection from "../preview-collection";
+import ContentTypeDroppedCreateEventParams from "../content-type-dropped-create-event-params";
+import ContentTypeDuplicateEventParamsInterface from "../content-type-duplicate-event-params";
 
 export default class Preview extends PreviewCollection {
     public static focusOperationTime: number;
@@ -367,7 +369,7 @@ export default class Preview extends PreviewCollection {
         super.bindEvents();
         // ContentType being mounted onto container
 
-        events.on("tabs:contentType:dropped:create", (args: ContentTypeReadyEventParamsInterface) => {
+        events.on("tabs:contentType:dropped:create", (args: ContentTypeDroppedCreateEventParamsInterface) => {
             if (args.id === this.parent.id && this.parent.children().length === 0) {
                 this.addTab();
             }
@@ -383,7 +385,7 @@ export default class Preview extends PreviewCollection {
         // Capture when a content type is duplicated within the container
         let duplicatedTab: ContentTypeInterface;
         let duplicatedTabIndex: number;
-        events.on("tab-item:contentType:duplicate", (args: ContentTypeDuplicateEventParams) => {
+        events.on("tab-item:contentType:duplicate", (args: ContentTypeDuplicateEventParamsInterface) => {
             if (this.parent.id === args.duplicateContentType.parent.id) {
                 const tabData = args.duplicateContentType.dataStore.get(args.duplicateContentType.id);
                 args.duplicateContentType.dataStore.update(
