Skip to content

Commit a833b66

Browse files
dmitry-kurmanovdmitry-kurmanov
authored
PR(2): CREATOR: DnD: Survey-Elements (#6688)
work for the surveyjs/private-tasks#475
1 parent cfca548 commit a833b66

9 files changed

+269
-297
lines changed

‎packages/survey-creator-core/src/components/action-container-view-model.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
CssClassBuilder
1313
} from "survey-core";
1414
import { SurveyCreatorModel } from "../creator-base";
15-
import { DropTo, isPanelDynamic } from "../dragdrop-survey-elements";
15+
import { DropIndicatorPosition, isPanelDynamic } from "../dragdrop-survey-elements";
1616
import { cleanHtmlElementAfterAnimation, prepareElementForVerticalAnimation } from "survey-core";
1717
import { listComponentCss } from "./list-theme";
1818

@@ -100,8 +100,8 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
100100
@property({ defaultValue: false }) expandCollapseAnimationRunning: boolean;
101101
public rootElement: HTMLElement;
102102

103-
@property({ defaultValue: null }) dragTypeOverMe: DropTo;
104-
@property({ defaultValue: false }) isDragMe: boolean;
103+
@property({ defaultValue: null }) dropIndicatorPosition: DropIndicatorPosition;
104+
@property({ defaultValue: false }) isBeingDragged: boolean;
105105

106106
protected get dragInsideCollapsedContainer(): boolean {
107107
return this.collapsed && this.creator.dragDropSurveyElements.insideContainer;
@@ -336,7 +336,7 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
336336
this.updateActionsProperties();
337337
}
338338
};
339-
public static GetAdorner<V = SurveyElementAdornerBase>(surveyElement: SurveyElement): V {
339+
public static GetAdorner<V = SurveyElementAdornerBase>(surveyElement: Base): V {
340340
return surveyElement.getPropertyValue(SurveyElementAdornerBase.AdornerValueName) as V;
341341
}
342342
public static RestoreStateFor(surveyElement: SurveyElement): void {

‎packages/survey-creator-core/src/components/page.ts

+32-41
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import { ActionContainer, classesToSelector, ComputedUpdater, DragOrClickHelper, IAction, PageModel, property, QuestionRowModel, settings as SurveySettings } from "survey-core";
1+
import { ActionContainer, classesToSelector, ComputedUpdater, CssClassBuilder, DragOrClickHelper, IAction, PageModel, property, QuestionRowModel, settings as SurveySettings } from "survey-core";
22
import { SurveyCreatorModel } from "../creator-base";
33
import { IPortableMouseEvent } from "../utils/events";
44
import { SurveyElementActionContainer, SurveyElementAdornerBase } from "./action-container-view-model";
55
import { getLocString } from "../editorLocalization";
66
import { SurveyHelper } from "../survey-helper";
77
import { settings } from "../creator-settings";
8-
import { DragDropSurveyElements, DropTo } from "../dragdrop-survey-elements";
8+
import { DragDropSurveyElements, DropIndicatorPosition } from "../dragdrop-survey-elements";
99

1010
import "./page.scss";
1111

@@ -48,7 +48,7 @@ export class PageAdorner extends SurveyElementAdornerBase<PageModel> {
4848
}
4949
protected attachElement(surveyElement: PageModel): void {
5050
super.attachElement(surveyElement);
51-
this.dragTypeOverMe = null;
51+
this.dropIndicatorPosition = null;
5252

5353
if (!!surveyElement) {
5454
surveyElement["surveyChangedCallback"] = () => {
@@ -83,7 +83,7 @@ export class PageAdorner extends SurveyElementAdornerBase<PageModel> {
8383
}
8484
super.detachElement(surveyElement);
8585
if (!this.isDisposed) {
86-
this.dragTypeOverMe = null;
86+
this.dropIndicatorPosition = null;
8787
}
8888
}
8989

@@ -226,49 +226,40 @@ export class PageAdorner extends SurveyElementAdornerBase<PageModel> {
226226
}
227227

228228
get css(): string {
229-
let result = super.getCss();
230-
if (this.dragDropHelper.draggedElement && this.dragDropHelper.draggedElement.isPage) {
231-
if (this.dragTypeOverMe === DropTo.Top) {
232-
result += " svc-question__content--drag-over-top";
233-
}
234-
if (this.dragTypeOverMe === DropTo.Bottom) {
235-
result += " svc-question__content--drag-over-bottom";
236-
}
237-
} else {
238-
if (!!this.dragTypeOverMe && this.showPlaceholder) {
239-
result = "svc-question__content--drag-over-inside";
240-
} else if (!!this.dragTypeOverMe && this.page.elements.length === 0 && this.creator.survey.pages.length > 0) {
241-
result = "svc-page--drag-over-empty";
242-
if (!!this.creator && !this.creator.showAddQuestionButton) {
243-
result += " svc-page--drag-over-empty-no-add-button";
244-
}
245-
}
246-
if (!!this.dragTypeOverMe && this.collapsed) {
229+
const isDraggedElementPage = this.dragDropHelper.draggedElement && this.dragDropHelper.draggedElement.isPage;
230+
const isDragOverInside = !!this.dropIndicatorPosition && this.showPlaceholder;
231+
const isDragOverEmpty = !!this.dropIndicatorPosition && this.page.elements.length === 0 && this.creator.survey.pages.length > 0;
232+
const isShowAddQuestionButton = !!this.creator && !this.creator.showAddQuestionButton;
233+
const isDragOverCollapsedInside = !!this.dropIndicatorPosition && this.collapsed;
234+
235+
let result: string = new CssClassBuilder()
236+
.append(super.getCss())
237+
.append("svc-question__content--drag-over-top", isDraggedElementPage && this.dropIndicatorPosition === DropIndicatorPosition.Top)
238+
.append("svc-question__content--drag-over-bottom", isDraggedElementPage && this.dropIndicatorPosition === DropIndicatorPosition.Bottom)
239+
.append("svc-question__content--drag-over-inside", !isDraggedElementPage && isDragOverInside)
240+
.append("svc-page--drag-over-empty", !isDraggedElementPage && !isDragOverInside && isDragOverEmpty)
241+
.append("svc-page--drag-over-empty-no-add-button", !isDraggedElementPage && !isDragOverInside && isDragOverEmpty && isShowAddQuestionButton)
242+
.append("svc-page__content--collapsed-drag-over-inside", !isDraggedElementPage && isDragOverCollapsedInside)
243+
.append("svc-page__content--dragged", this.isBeingDragged)
244+
.append("svc-page__content--collapse-" + this.creator.expandCollapseButtonVisibility, this.allowExpandCollapse || !!this.page["isGhost"])
245+
.append("svc-page__content--collapsed", (this.allowExpandCollapse || !!this.page["isGhost"]) && (this.renderedCollapsed || !!this.page["isGhost"]))
246+
.append("svc-page__content--animation-running", (this.allowExpandCollapse || !!this.page["isGhost"]) && (this.expandCollapseAnimationRunning))
247+
.append("svc-page__content--new", !!this.isGhost)
248+
.append("svc-page__content--selected", !this.isGhost && !!this.creator.isElementSelected(this.page))
249+
.append("svc-page__content--no-header", !this.isGhost && SurveySettings.designMode.showEmptyTitles === false)
250+
.toString();
251+
252+
if (!isDraggedElementPage) {
253+
if (isDragOverCollapsedInside) {
247254
this.dragIn();
248-
result += " svc-page__content--collapsed-drag-over-inside";
249255
} else {
250256
this.dragOut();
251257
}
252258
}
253-
if (this.allowExpandCollapse || this.page["isGhost"]) {
254-
result += (" svc-page__content--collapse-" + this.creator.expandCollapseButtonVisibility);
255-
if (this.renderedCollapsed || this.page["isGhost"]) result += (" svc-page__content--collapsed");
256-
if (this.expandCollapseAnimationRunning) result += (" svc-page__content--animation-running");
257-
}
258-
if (this.isDragMe) {
259-
result += " svc-page__content--dragged";
260-
}
261-
if (this.isGhost) {
262-
return result + " svc-page__content--new";
263-
}
264-
if (this.creator.isElementSelected(this.page)) {
265-
result += " svc-page__content--selected";
266-
}
267-
if (SurveySettings.designMode.showEmptyTitles === false) {
268-
result += " svc-page__content--no-header";
269-
}
270-
return result.trim();
259+
260+
return result;
271261
}
262+
272263
private creatorPropertyChanged = (sender, options) => {
273264
if (options.name === "isMobileView" && this.isActionContainerCreated) {
274265
this.actionContainer.alwaysShrink = options.newValue;

‎packages/survey-creator-core/src/components/question.ts

+24-49
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ import { SurveyElementActionContainer, SurveyElementAdornerBase } from "./action
3434
import "./question.scss";
3535
import { settings } from "../creator-settings";
3636
import { StringItemsNavigatorBase } from "./string-editor";
37-
import { DragDropSurveyElements, DropTo } from "../dragdrop-survey-elements";
37+
import { DragDropSurveyElements, DropIndicatorPosition } from "../dragdrop-survey-elements";
3838
import { QuestionToolbox, QuestionToolboxItem } from "../toolbox";
3939
import { listComponentCss } from "./list-theme";
4040

@@ -108,63 +108,38 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase {
108108
css() {
109109
if (!this.surveyElement.isInteractiveDesignElement) return "";
110110

111-
let result = "svc-question__content";
112-
result += typeof this.surveyElement.getType === "function" ? (" svc-question__content--" + this.surveyElement.getType()) : "";
113-
if (this.creator.isElementSelected(this.surveyElement)) {
114-
result += " svc-question__content--selected";
115-
}
116-
117-
if (this.isEmptyElement) {
118-
result += " svc-question__content--empty";
119-
}
120-
if (this.isEmptyTemplate) {
121-
result += " svc-question__content--empty-template";
122-
}
123-
if (this.renderedCollapsed) {
124-
result += " svc-question__content--collapsed";
125-
}
126-
if (!this.surveyElement.hasTitle || (!this.surveyElement.isPanel && (this.surveyElement as Question).getTitleLocation() === "hidden")) {
127-
result += " svc-question__content--title-hidden";
128-
}
129-
if ((this.surveyElement as Question).hasTitleOnBottom) {
130-
result += " svc-question__content--title-bottom";
131-
}
132-
133-
if (this.isDragMe) {
134-
result += " svc-question__content--dragged";
135-
}
111+
const isDragIn = !!this.dropIndicatorPosition && (!!this.canExpandOnDrag) && !!this.dragInsideCollapsedContainer;
136112

137-
if (!!this.dragTypeOverMe && (this.canExpandOnDrag) && this.dragInsideCollapsedContainer) {
113+
if (isDragIn) {
138114
this.dragIn();
139-
result += " svc-question__content--collapsed-drag-over-inside";
140115
} else {
141116
this.dragOut();
142117
}
143118

144-
if (this.dragTypeOverMe === DropTo.Inside) {
145-
result += " svc-question__content--drag-over-inside";
146-
}
147-
if (!this.dragInsideCollapsedContainer) {
148-
if (this.dragTypeOverMe === DropTo.Left) {
149-
result += " svc-question__content--drag-over-left";
150-
}
151-
152-
if (this.dragTypeOverMe === DropTo.Right) {
153-
result += " svc-question__content--drag-over-right";
154-
}
119+
let result: string = new CssClassBuilder()
120+
.append("svc-question__content")
121+
.append("svc-question__content--" + this.surveyElement.getType(), typeof this.surveyElement.getType === "function")
122+
.append("svc-question__content--selected", !!this.creator.isElementSelected(this.surveyElement))
123+
.append("svc-question__content--empty", this.isEmptyElement)
124+
.append("svc-question__content--empty-template", this.isEmptyTemplate)
125+
.append("svc-question__content--collapsed", this.renderedCollapsed)
126+
.append("svc-question__content--title-hidden", !this.surveyElement.hasTitle || (!this.surveyElement.isPanel && (this.surveyElement as Question).getTitleLocation() === "hidden"))
127+
.append("svc-question__content--title-bottom", !!(this.surveyElement as Question).hasTitleOnBottom)
128+
.append("svc-question__content--dragged", this.isBeingDragged)
129+
.append("svc-question__content--collapsed-drag-over-inside", isDragIn)
130+
.append("svc-question__content--drag-over-inside", this.dropIndicatorPosition === DropIndicatorPosition.Inside)
131+
.append("svc-question__content--drag-over-top", !this.dragInsideCollapsedContainer && this.dropIndicatorPosition === DropIndicatorPosition.Top)
132+
.append("svc-question__content--drag-over-bottom", !this.dragInsideCollapsedContainer && this.dropIndicatorPosition === DropIndicatorPosition.Bottom)
133+
.append("svc-question__content--drag-over-right", !this.dragInsideCollapsedContainer && this.dropIndicatorPosition === DropIndicatorPosition.Right)
134+
.append("svc-question__content--drag-over-left", !this.dragInsideCollapsedContainer && this.dropIndicatorPosition === DropIndicatorPosition.Left)
135+
.toString();
155136

156-
if (this.dragTypeOverMe === DropTo.Top) {
157-
result += " svc-question__content--drag-over-top";
158-
}
159-
if (this.dragTypeOverMe === DropTo.Bottom) {
160-
result += " svc-question__content--drag-over-bottom";
161-
}
162-
if (this.creator) {
163-
result = this.creator.getElementAddornerCssCallback(this.surveyElement, result);
164-
}
137+
if (!this.dragInsideCollapsedContainer && this.creator) {
138+
result = this.creator.getElementAddornerCssCallback(this.surveyElement, result);
165139
}
166140
return result;
167141
}
142+
168143
private get isTitleLeft() {
169144
return (!this.surveyElement.isPanel && (this.surveyElement as Question).getTitleLocation() === "left");
170145
}
@@ -197,7 +172,7 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase {
197172

198173
protected expandWithDragIn() {
199174
super.expandWithDragIn();
200-
this.dragTypeOverMe = null;
175+
this.dropIndicatorPosition = null;
201176
this.creator.dragDropSurveyElements.dropTarget = null;
202177
}
203178
public get isBannerShowing(): boolean {

‎packages/survey-creator-core/src/components/row.ts

+10-21
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,16 @@ import {
22
Base,
33
SurveyTemplateRendererTemplateData,
44
QuestionRowModel,
5-
property
5+
property,
6+
CssClassBuilder
67
} from "survey-core";
78
import { SurveyCreatorModel } from "../creator-base";
89
import "./row.scss";
9-
import { DropTo } from "../dragdrop-survey-elements";
10+
import { DropIndicatorPosition } from "../dragdrop-survey-elements";
1011
import { SurveyElementAdornerBase } from "./action-container-view-model";
1112

1213
export class RowViewModel extends Base {
13-
@property({ defaultValue: null }) dragTypeOverMe: DropTo;
14+
@property({ defaultValue: null }) dropIndicatorPosition: DropIndicatorPosition;
1415

1516
constructor(
1617
public creator: SurveyCreatorModel,
@@ -29,24 +30,12 @@ export class RowViewModel extends Base {
2930
this.row.setPropertyValue(SurveyElementAdornerBase.AdornerValueName, null);
3031
}
3132
public get cssClasses() {
32-
let result = "svc-row";
33-
let ghostClass = " svc-row--ghost";
34-
35-
if (
36-
this.row.elements.length === 1 &&
37-
this.row.elements[0].name === "sv-drag-drop-ghost-survey-element-name"
38-
) {
39-
result += ghostClass;
40-
}
41-
42-
if (this.dragTypeOverMe === DropTo.Top) {
43-
result += " svc-row--drag-over-top";
44-
}
45-
if (this.dragTypeOverMe === DropTo.Bottom) {
46-
result += " svc-row--drag-over-bottom";
47-
}
48-
49-
return result;
33+
return new CssClassBuilder()
34+
.append("svc-row")
35+
.append("svc-row--ghost", this.row.elements.length === 1 && this.row.elements[0].name === "sv-drag-drop-ghost-survey-element-name")
36+
.append("svc-row--drag-over-top", this.dropIndicatorPosition === DropIndicatorPosition.Top)
37+
.append("svc-row--drag-over-bottom", this.dropIndicatorPosition === DropIndicatorPosition.Bottom)
38+
.toString();
5039
}
5140
public dispose() {
5241
super.dispose();

0 commit comments

Comments
 (0)