74 | {
75 | slide.plugins.map((plugin: any, key: number) => {
76 | // When plugin is deleted from plugins array, their position is not removed rather the value is set to null
77 | if (!plugin) return null;
78 |
79 | const { moduleName, state } = plugin;
80 | const Plugin = req(moduleName).component;
81 |
82 | const {
83 | width,
84 | height,
85 | left,
86 | top,
87 |
88 | isResizable,
89 | forceDynamicHeight,
90 | lockAspectRatio,
91 | } = state;
92 |
93 | const className = classNames({
94 | 'editing': (
95 | currentSelectedPlugin !== null
96 | ? currentSelectedPlugin.pluginNumber === key && currentSelectedPlugin.slideNumber === slideNumber
97 | : false
98 | ),
99 | 'force-dynamic-height': forceDynamicHeight,
100 | 'rnd': true,
101 | });
102 |
103 | return (
104 |
this.rnd[key] = c }
107 | className={ className }
108 | lockAspectRatio={ lockAspectRatio }
109 | initial={{
110 | width,
111 | height: '100%',
112 | x: left,
113 | y: top
114 | }}
115 | bounds={{
116 | top: 0,
117 | left: 0,
118 | right: (slidesDimension.width / scale) - width,
119 | bottom: (slidesDimension.height / scale) - height
120 | }}
121 | // Resizing T, L, TR, BL, TL results in unwanted movements
122 | isResizable={ isResizable ? isResizable : {
123 | top: false,
124 | right: true,
125 | bottom: true,
126 | left: false,
127 | topRight: false,
128 | bottomRight: true,
129 | bottomLeft: false,
130 | topLeft: false
131 | }}
132 | moveGrid={[((slidesDimension.width / scale) - width)/100, ((slidesDimension.height / scale) - height)/100]}
133 | onClick={() => {
134 | if (!currentSelectedPlugin) setActivePlugin(plugin.moduleName, key, slideNumber);
135 | else {
136 | const {
137 | pluginNumber: _pluginNumber,
138 | slideNumber: _slideNumber
139 | } = currentSelectedPlugin;
140 |
141 | if (_slideNumber !== slideNumber || _pluginNumber !== key) setActivePlugin(plugin.moduleName, key, slideNumber);
142 | }
143 | }}
144 | onResizeStop={(
145 | direction: string,
146 | styleSize: Object,
147 | clientSize: Object
148 | ) => updateCurrentPlugin(key, slideNumber, clientSize)}
149 | onDragStart={toggleGuidelines}
150 | onDragStop={(e: any, { position }: { position: { left: number; top: number; } }) => {
151 | const deltaX = Math.abs((top - position.top) / top);
152 | const deltaY = Math.abs((left - position.left) / left);
153 | if (deltaX > 0 || deltaY > 0) updateCurrentPlugin(key, slideNumber, position);
154 | toggleGuidelines();
155 | }} >
156 |
160 |
161 | );
162 | })}
163 |