Big News: Socket raises $60M Series C at a $1B valuation to secure software supply chains for AI-driven development.Announcement →

@projectstorm/react-workspaces-behavior-panel-dropzone

Advanced tools

License

Install Socket

Detect and block malicious and high-risk dependencies

Install

@projectstorm/react-workspaces-behavior-panel-dropzone - npm Package Compare versions

Comparing version

2.3.11

2.3.12

+1

-1

dist/@types/DropZoneLayer.d.ts

		@@ -13,3 +13,3 @@ import * as React from 'react';
		constructor(options2: DropZoneLayerOptions);
		renderLayer(event: any): JSX.Element;
		renderLayer(event: any): React.JSX.Element;
		}
		@@ -16,0 +16,0 @@ export interface DropZoneLayerWidgetProps {

+1

-1

dist/DropZoneAlignmentButtonWidget.jsx

		@@ -15,3 +15,3 @@ import * as React from 'react';
		const [entered, setEntered] = useState(false);
		const ref = useRef();
		const ref = useRef(null);
		const theme = _.merge({}, DefaultDropZoneAlignmentTheme, props.theme \|\| {});
		@@ -18,0 +18,0 @@ useMouseDragEvents({

+1

-1

dist/DropZoneAlignmentButtonWidget.jsx.map

		@@ -1,1 +0,1 @@
		{"version":3,"file":"DropZoneAlignmentButtonWidget.jsx","sourceRoot":"","sources":["../src/DropZoneAlignmentButtonWidget.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useRef, useState } from 'react';\nimport styled from '@emotion/styled';\nimport * as _ from 'lodash';\nimport {\n Alignment,\n useDroppableModel,\n useMouseDragEvents,\n WorkspaceEngine,\n WorkspaceModel\n} from '@projectstorm/react-workspaces-core';\n\nexport interface DropZoneAlignmentTheme {\n thickness?: number;\n thicknessIdle?: number;\n lengthIdle?: number;\n background?: string;\n backgroundEntered?: string;\n}\n\nconst DefaultDropZoneAlignmentTheme: DropZoneAlignmentTheme = {\n thickness: 30,\n thicknessIdle: 13,\n lengthIdle: 60,\n background: '#0096ff',\n backgroundEntered: 'orange'\n};\n\nexport interface DropZoneAlignmentButtonWidgetProps {\n alignment: Alignment;\n engine: WorkspaceEngine;\n model: WorkspaceModel;\n handleDrop: (model: WorkspaceModel) => any;\n theme?: DropZoneAlignmentTheme;\n}\n\nexport const DropZoneAlignmentButtonWidget: React.FC<DropZoneAlignmentButtonWidgetProps> = (props) => {\n const [entered, setEntered] = useState(false);\n const ref = useRef<HTMLDivElement>();\n const theme = _.merge({}, DefaultDropZoneAlignmentTheme, props.theme \|\| {});\n useMouseDragEvents({\n forwardRef: ref,\n mouseEnter: () => {\n setEntered(true);\n },\n mouseExit: () => {\n setEntered(false);\n }\n });\n useDroppableModel({\n forwardRef: ref,\n engine: props.engine,\n onDrop: props.handleDrop\n });\n\n const vertical = props.alignment === Alignment.LEFT \|\| props.alignment === Alignment.RIGHT;\n\n let width = theme.thicknessIdle;\n let height = theme.lengthIdle;\n if (!vertical) {\n width = theme.lengthIdle;\n height = theme.thicknessIdle;\n }\n\n return (\n <S.SplitContainer\n thickness={theme.thickness}\n ref={ref}\n vertical={vertical}\n alignment={props.alignment}\n hover={entered}\n >\n <S.SplitContainerIcon theme={theme} hover={entered} width={width} height={height} />\n </S.SplitContainer>\n );\n};\n\nnamespace S {\n export const SplitContainer = styled.div<{\n alignment: Alignment;\n hover: boolean;\n vertical: boolean;\n thickness: number;\n }>`\n ${(p) => p.alignment}: 0;\n position: absolute;\n width: ${(p) => (p.vertical ? `${p.thickness}px` : '100%')};\n height: ${(p) => (!p.vertical ? `${p.thickness}px` : '100%')};\n pointer-events: all;\n display: flex;\n align-items: center;\n justify-content: center;\n `;\n\n export const SplitContainerIcon = styled.div<{\n width: number;\n height: number;\n hover: boolean;\n theme: DropZoneAlignmentTheme;\n }>`\n border-radius: 2px;\n background: ${(p) => (p.hover ? p.theme.backgroundEntered : p.theme.background)};\n transition:\n background 0.3s,\n width ease-out 0.3s,\n height ease-out 0.3s;\n transition-delay: 0.1s;\n pointer-events: none;\n\n width: ${(p) => (p.hover ? '100%' : `${p.width}px`)};\n height: ${(p) => (p.hover ? '100%' : `${p.height}px`)};\n `;\n}\n"]}
		{"version":3,"file":"DropZoneAlignmentButtonWidget.jsx","sourceRoot":"","sources":["../src/DropZoneAlignmentButtonWidget.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useRef, useState } from 'react';\nimport styled from '@emotion/styled';\nimport * as _ from 'lodash';\nimport {\n Alignment,\n useDroppableModel,\n useMouseDragEvents,\n WorkspaceEngine,\n WorkspaceModel\n} from '@projectstorm/react-workspaces-core';\n\nexport interface DropZoneAlignmentTheme {\n thickness?: number;\n thicknessIdle?: number;\n lengthIdle?: number;\n background?: string;\n backgroundEntered?: string;\n}\n\nconst DefaultDropZoneAlignmentTheme: DropZoneAlignmentTheme = {\n thickness: 30,\n thicknessIdle: 13,\n lengthIdle: 60,\n background: '#0096ff',\n backgroundEntered: 'orange'\n};\n\nexport interface DropZoneAlignmentButtonWidgetProps {\n alignment: Alignment;\n engine: WorkspaceEngine;\n model: WorkspaceModel;\n handleDrop: (model: WorkspaceModel) => any;\n theme?: DropZoneAlignmentTheme;\n}\n\nexport const DropZoneAlignmentButtonWidget: React.FC<DropZoneAlignmentButtonWidgetProps> = (props) => {\n const [entered, setEntered] = useState(false);\n const ref = useRef<HTMLDivElement>(null);\n const theme = _.merge({}, DefaultDropZoneAlignmentTheme, props.theme \|\| {});\n useMouseDragEvents({\n forwardRef: ref,\n mouseEnter: () => {\n setEntered(true);\n },\n mouseExit: () => {\n setEntered(false);\n }\n });\n useDroppableModel({\n forwardRef: ref,\n engine: props.engine,\n onDrop: props.handleDrop\n });\n\n const vertical = props.alignment === Alignment.LEFT \|\| props.alignment === Alignment.RIGHT;\n\n let width = theme.thicknessIdle;\n let height = theme.lengthIdle;\n if (!vertical) {\n width = theme.lengthIdle;\n height = theme.thicknessIdle;\n }\n\n return (\n <S.SplitContainer\n thickness={theme.thickness}\n ref={ref}\n vertical={vertical}\n alignment={props.alignment}\n hover={entered}\n >\n <S.SplitContainerIcon theme={theme} hover={entered} width={width} height={height} />\n </S.SplitContainer>\n );\n};\n\nnamespace S {\n export const SplitContainer = styled.div<{\n alignment: Alignment;\n hover: boolean;\n vertical: boolean;\n thickness: number;\n }>`\n ${(p) => p.alignment}: 0;\n position: absolute;\n width: ${(p) => (p.vertical ? `${p.thickness}px` : '100%')};\n height: ${(p) => (!p.vertical ? `${p.thickness}px` : '100%')};\n pointer-events: all;\n display: flex;\n align-items: center;\n justify-content: center;\n `;\n\n export const SplitContainerIcon = styled.div<{\n width: number;\n height: number;\n hover: boolean;\n theme: DropZoneAlignmentTheme;\n }>`\n border-radius: 2px;\n background: ${(p) => (p.hover ? p.theme.backgroundEntered : p.theme.background)};\n transition:\n background 0.3s,\n width ease-out 0.3s,\n height ease-out 0.3s;\n transition-delay: 0.1s;\n pointer-events: none;\n\n width: ${(p) => (p.hover ? '100%' : `${p.width}px`)};\n height: ${(p) => (p.hover ? '100%' : `${p.height}px`)};\n `;\n}\n"]}

+1

-1

dist/DropZoneLayer.jsx.map

		@@ -1,1 +0,1 @@
		{"version":3,"file":"DropZoneLayer.jsx","sourceRoot":"","sources":["../src/DropZoneLayer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAmC,MAAM,qCAAqC,CAAC;AAC7F,OAAO,EAA2B,wBAAwB,EAA0B,MAAM,4BAA4B,CAAC;AASvH,MAAM,OAAO,aAAc,SAAQ,KAAK;IACtC,YAAoB,QAA8B;QAChD,KAAK,CAAC;YACJ,WAAW,EAAE,KAAK;SACnB,CAAC,CAAC;QAHe,aAAQ,GAAR,QAAQ,CAAsB;IAIlD,CAAC;IAED,WAAW,CAAC,KAAK;QACf,OAAO,CACL,CAAC,mBAAmB,CAClB,WAAW,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,CACvC,MAAM,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CACrB,aAAa,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CACrC,mBAAmB,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,mBAAmB,CAAC,CACvD,KAAK,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC3B,CACH,CAAC;IACJ,CAAC;CACF;AAYD,MAAM,CAAC,MAAM,mBAAmB,GAAuC,CAAC,KAAK,EAAE,EAAE;;IAC/E,MAAM,sBAAsB,GAC1B,CAAA,MAAA,KAAK,CAAC,MAAM,CAAC,SAAS;SACnB,OAAO,EAAE;SACT,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,KAAK,CAAC,aAAa,CAAC,0CACxC,OAAO,EAAE,KAAI,EAAE,CAAC;IAEtB,OAAO,CACL,EACE;MAAA,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS;aACpB,OAAO,EAAE;aACT,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;aAC1B,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE;YACZ,+EAA+E;YAC/E,OAAO,CAAC,sBAAsB,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;QACpE,CAAC,CAAC;YACF,2CAA2C;YAC3C,kDAAkD;aACjD,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;YACT,MAAM,SAAS,GAAG,KAAK,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC;YAE/C,IAAI,CAAC,SAAS,EAAE,CAAC;gBACf,OAAO,IAAI,CAAC;YACd,CAAC;YAED,OAAO,CACL,CAAC,wBAAwB,CACvB,KAAK,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,CACzB,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,MAAM,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CACrB,KAAK,CAAC,CAAC,CAAC,CAAC,CACT,KAAK,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CACnB,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EACV,CACH,CAAC;QACJ,CAAC,CAAC,CACN;IAAA,GAAG,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { Layer, WorkspaceEngine, WorkspaceModel } from '@projectstorm/react-workspaces-core';\nimport { DropZoneLayerPanelTheme, DropZoneLayerPanelWidget, DropZonePanelDirective } from './DropZoneLayerPanelWidget';\n\nexport interface DropZoneLayerOptions {\n getDropZoneForModel: (model: WorkspaceModel) => DropZonePanelDirective \| null;\n theme?: DropZoneLayerPanelTheme;\n modelID: string;\n debugModels: boolean;\n}\n\nexport class DropZoneLayer extends Layer {\n constructor(private options2: DropZoneLayerOptions) {\n super({\n mouseEvents: false\n });\n }\n\n renderLayer(event): JSX.Element {\n return (\n <DropZoneLayerWidget\n debugModels={this.options2.debugModels}\n engine={event.engine}\n draggingModel={this.options2.modelID}\n getDropZoneForModel={this.options2.getDropZoneForModel}\n theme={this.options2.theme}\n />\n );\n }\n}\n\n//!--------------- widget ----------------\n\nexport interface DropZoneLayerWidgetProps {\n engine: WorkspaceEngine;\n getDropZoneForModel: (model: WorkspaceModel) => DropZonePanelDirective \| null;\n draggingModel: string;\n debugModels: boolean;\n theme?: DropZoneLayerPanelTheme;\n}\n\nexport const DropZoneLayerWidget: React.FC<DropZoneLayerWidgetProps> = (props) => {\n const draggingModelFlattened =\n props.engine.rootModel\n .flatten()\n .find((m) => m.id === props.draggingModel)\n ?.flatten() \|\| [];\n\n return (\n <>\n {props.engine.rootModel\n .flatten()\n .filter((m) => m.r_visible)\n .filter((m) => {\n // filter out the dragging model and its children (cant add parent to children)\n return !draggingModelFlattened.find((child) => child.id === m.id);\n })\n // dont show a drop zone for the same model\n // .filter((m) => m.id !== props.draggingModel.id)\n .map((m) => {\n const directive = props.getDropZoneForModel(m);\n\n if (!directive) {\n return null;\n }\n\n return (\n <DropZoneLayerPanelWidget\n debug={props.debugModels}\n directive={directive}\n engine={props.engine}\n model={m}\n theme={props.theme}\n key={m.id}\n />\n );\n })}\n </>\n );\n};\n"]}
		{"version":3,"file":"DropZoneLayer.jsx","sourceRoot":"","sources":["../src/DropZoneLayer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAmC,MAAM,qCAAqC,CAAC;AAC7F,OAAO,EAA2B,wBAAwB,EAA0B,MAAM,4BAA4B,CAAC;AASvH,MAAM,OAAO,aAAc,SAAQ,KAAK;IACtC,YAAoB,QAA8B;QAChD,KAAK,CAAC;YACJ,WAAW,EAAE,KAAK;SACnB,CAAC,CAAC;QAHe,aAAQ,GAAR,QAAQ,CAAsB;IAIlD,CAAC;IAED,WAAW,CAAC,KAAK;QACf,OAAO,CACL,CAAC,mBAAmB,CAClB,WAAW,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,CACvC,MAAM,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CACrB,aAAa,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CACrC,mBAAmB,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,mBAAmB,CAAC,CACvD,KAAK,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC3B,CACH,CAAC;IACJ,CAAC;CACF;AAYD,MAAM,CAAC,MAAM,mBAAmB,GAAuC,CAAC,KAAK,EAAE,EAAE;;IAC/E,MAAM,sBAAsB,GAC1B,CAAA,MAAA,KAAK,CAAC,MAAM,CAAC,SAAS;SACnB,OAAO,EAAE;SACT,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,KAAK,CAAC,aAAa,CAAC,0CACxC,OAAO,EAAE,KAAI,EAAE,CAAC;IAEtB,OAAO,CACL,EACE;MAAA,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS;aACpB,OAAO,EAAE;aACT,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;aAC1B,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE;YACZ,+EAA+E;YAC/E,OAAO,CAAC,sBAAsB,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;QACpE,CAAC,CAAC;YACF,2CAA2C;YAC3C,kDAAkD;aACjD,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;YACT,MAAM,SAAS,GAAG,KAAK,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC;YAE/C,IAAI,CAAC,SAAS,EAAE,CAAC;gBACf,OAAO,IAAI,CAAC;YACd,CAAC;YAED,OAAO,CACL,CAAC,wBAAwB,CACvB,KAAK,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,CACzB,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,MAAM,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CACrB,KAAK,CAAC,CAAC,CAAC,CAAC,CACT,KAAK,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CACnB,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EACV,CACH,CAAC;QACJ,CAAC,CAAC,CACN;IAAA,GAAG,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { Layer, WorkspaceEngine, WorkspaceModel } from '@projectstorm/react-workspaces-core';\nimport { DropZoneLayerPanelTheme, DropZoneLayerPanelWidget, DropZonePanelDirective } from './DropZoneLayerPanelWidget';\n\nexport interface DropZoneLayerOptions {\n getDropZoneForModel: (model: WorkspaceModel) => DropZonePanelDirective \| null;\n theme?: DropZoneLayerPanelTheme;\n modelID: string;\n debugModels: boolean;\n}\n\nexport class DropZoneLayer extends Layer {\n constructor(private options2: DropZoneLayerOptions) {\n super({\n mouseEvents: false\n });\n }\n\n renderLayer(event): React.JSX.Element {\n return (\n <DropZoneLayerWidget\n debugModels={this.options2.debugModels}\n engine={event.engine}\n draggingModel={this.options2.modelID}\n getDropZoneForModel={this.options2.getDropZoneForModel}\n theme={this.options2.theme}\n />\n );\n }\n}\n\n//!--------------- widget ----------------\n\nexport interface DropZoneLayerWidgetProps {\n engine: WorkspaceEngine;\n getDropZoneForModel: (model: WorkspaceModel) => DropZonePanelDirective \| null;\n draggingModel: string;\n debugModels: boolean;\n theme?: DropZoneLayerPanelTheme;\n}\n\nexport const DropZoneLayerWidget: React.FC<DropZoneLayerWidgetProps> = (props) => {\n const draggingModelFlattened =\n props.engine.rootModel\n .flatten()\n .find((m) => m.id === props.draggingModel)\n ?.flatten() \|\| [];\n\n return (\n <>\n {props.engine.rootModel\n .flatten()\n .filter((m) => m.r_visible)\n .filter((m) => {\n // filter out the dragging model and its children (cant add parent to children)\n return !draggingModelFlattened.find((child) => child.id === m.id);\n })\n // dont show a drop zone for the same model\n // .filter((m) => m.id !== props.draggingModel.id)\n .map((m) => {\n const directive = props.getDropZoneForModel(m);\n\n if (!directive) {\n return null;\n }\n\n return (\n <DropZoneLayerPanelWidget\n debug={props.debugModels}\n directive={directive}\n engine={props.engine}\n model={m}\n theme={props.theme}\n key={m.id}\n />\n );\n })}\n </>\n );\n};\n"]}

+1

-1

dist/DropZoneLayerPanelWidget.jsx

		@@ -18,3 +18,3 @@ import * as React from 'react';
		export const DropZoneLayerPanelWidget = (props) => {
		const ref = useRef();
		const ref = useRef(null);
		const [show, setShow] = useState(false);
		@@ -21,0 +21,0 @@ const theme = _.merge({}, DefaultDropZoneLayerPanelTheme, props.theme \|\| {});

+1

-1

dist/DropZoneLayerPanelWidget.jsx.map

		@@ -1,1 +0,1 @@
		{"version":3,"file":"DropZoneLayerPanelWidget.jsx","sourceRoot":"","sources":["../src/DropZoneLayerPanelWidget.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport * as _ from 'lodash';\nimport { useRef, useState } from 'react';\nimport styled from '@emotion/styled';\nimport {\n Alignment,\n DimensionTrackingWidget,\n UseMouseDragEventsRootWidget,\n WorkspaceEngine,\n WorkspaceModel\n} from '@projectstorm/react-workspaces-core';\nimport { DropZoneAlignmentButtonWidget, DropZoneAlignmentTheme } from './DropZoneAlignmentButtonWidget';\nimport { DropZoneTransformWidget } from './DropZoneTransformWidget';\nimport { DropZoneLayerButtonTheme } from './DropZoneLayerButtonWidget';\n\nexport interface TransformZoneEvent {\n model: WorkspaceModel;\n zoneModel: WorkspaceModel;\n engine: WorkspaceEngine;\n}\n\nexport interface TransformZone {\n transform: (event: TransformZoneEvent) => any;\n render: (options: { entered: boolean; theme: Partial<DropZoneLayerButtonTheme> }) => any;\n key: string;\n}\n\nexport interface SplitZone {\n alignment: Alignment;\n handleDrop: (model: WorkspaceModel, engine: WorkspaceEngine) => any;\n}\n\nexport interface DropZonePanelDirective {\n splitZones: SplitZone[];\n transformZones: TransformZone[];\n}\n\nexport interface DropZoneLayerPanelTheme {\n border?: number;\n borderColor?: string;\n borderColorEntered?: string;\n background?: string;\n backgroundEntered?: string;\n borderRadius?: number;\n blur?: number;\n splitButtonTheme?: DropZoneAlignmentTheme;\n transformButtonTheme?: Partial<DropZoneLayerButtonTheme>;\n}\n\nexport const DefaultDropZoneLayerPanelTheme: DropZoneLayerPanelTheme = {\n border: 2,\n blur: 0,\n borderColor: 'transparent',\n borderColorEntered: '#0096ff',\n background: 'transparent',\n borderRadius: 10,\n backgroundEntered: 'rgba(0, 0, 0, 0.4)'\n};\n\n// !------------------------------------------\n\nexport interface DropZoneLayerPanelWidgetProps {\n model: WorkspaceModel;\n engine: WorkspaceEngine;\n directive: DropZonePanelDirective;\n debug: boolean;\n theme?: DropZoneLayerPanelTheme;\n}\n\nexport const DropZoneLayerPanelWidget: React.FC<DropZoneLayerPanelWidgetProps> = (props) => {\n const ref = useRef<HTMLDivElement>();\n const [show, setShow] = useState(false);\n const theme = _.merge({}, DefaultDropZoneLayerPanelTheme, props.theme \|\| {});\n\n return (\n <UseMouseDragEventsRootWidget\n forwardRef={ref}\n mouseEnter={() => {\n setShow(true);\n }}\n mouseExit={() => {\n setShow(false);\n }}\n >\n <S.DimensionTracking theme={theme} entered={show} dimension={props.model.r_dimensions}>\n <S.Inside ref={ref}>\n <S.Layer visible={show}>\n {props.directive.splitZones.map((d) => {\n return (\n <DropZoneAlignmentButtonWidget\n key={d.alignment}\n model={props.model}\n engine={props.engine}\n alignment={d.alignment}\n handleDrop={(model) => {\n d.handleDrop(model, props.engine);\n }}\n theme={theme.splitButtonTheme}\n />\n );\n })}\n </S.Layer>\n <S.Layer2 visible={show}>\n <S.ButtonBar>\n {props.directive.transformZones.map((zone) => {\n return (\n <DropZoneTransformWidget\n theme={theme.transformButtonTheme}\n model={props.model}\n zone={zone}\n engine={props.engine}\n key={zone.key}\n />\n );\n })}\n </S.ButtonBar>\n {props.debug ? <S.Debug>{props.model.id.substring(0, 7)}</S.Debug> : null}\n </S.Layer2>\n </S.Inside>\n </S.DimensionTracking>\n </UseMouseDragEventsRootWidget>\n );\n};\n\nnamespace S {\n export const DimensionTracking = styled(DimensionTrackingWidget)<{\n entered: boolean;\n theme: DropZoneLayerPanelTheme;\n }>`\n border-radius: ${(p) => p.theme.borderRadius}px;\n box-sizing: border-box;\n background: ${(p) => (p.entered ? p.theme.backgroundEntered : p.theme.background)};\n border: solid ${(p) => p.theme.border}px ${(p) => (p.entered ? p.theme.borderColorEntered : p.theme.borderColor)};\n transition:\n border 0.5s,\n background 0.5s;\n pointer-events: all;\n ${(p) => (p.theme.blur ? ` backdrop-filter: blur(${p.theme.blur}px)` : ``)};\n `;\n\n export const Debug = styled.span`\n font-size: 10px;\n color: white;\n `;\n\n export const ButtonBar = styled.div`\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n `;\n\n export const Layer = styled.div<{ visible: boolean }>`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n pointer-events: none;\n opacity: ${(p) => (p.visible ? 1 : 0)};\n transition: opacity 0.3s;\n `;\n\n export const Layer2 = styled.div<{ visible: boolean }>`\n position: absolute;\n box-sizing: border-box;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n padding: 20px;\n pointer-events: none;\n opacity: ${(p) => (p.visible ? 1 : 0)};\n transition: opacity 0.3s;\n `;\n\n export const Inside = styled.div`\n box-sizing: border-box;\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n `;\n}\n"]}
		{"version":3,"file":"DropZoneLayerPanelWidget.jsx","sourceRoot":"","sources":["../src/DropZoneLayerPanelWidget.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport * as _ from 'lodash';\nimport { useRef, useState } from 'react';\nimport styled from '@emotion/styled';\nimport {\n Alignment,\n DimensionTrackingWidget,\n UseMouseDragEventsRootWidget,\n WorkspaceEngine,\n WorkspaceModel\n} from '@projectstorm/react-workspaces-core';\nimport { DropZoneAlignmentButtonWidget, DropZoneAlignmentTheme } from './DropZoneAlignmentButtonWidget';\nimport { DropZoneTransformWidget } from './DropZoneTransformWidget';\nimport { DropZoneLayerButtonTheme } from './DropZoneLayerButtonWidget';\n\nexport interface TransformZoneEvent {\n model: WorkspaceModel;\n zoneModel: WorkspaceModel;\n engine: WorkspaceEngine;\n}\n\nexport interface TransformZone {\n transform: (event: TransformZoneEvent) => any;\n render: (options: { entered: boolean; theme: Partial<DropZoneLayerButtonTheme> }) => any;\n key: string;\n}\n\nexport interface SplitZone {\n alignment: Alignment;\n handleDrop: (model: WorkspaceModel, engine: WorkspaceEngine) => any;\n}\n\nexport interface DropZonePanelDirective {\n splitZones: SplitZone[];\n transformZones: TransformZone[];\n}\n\nexport interface DropZoneLayerPanelTheme {\n border?: number;\n borderColor?: string;\n borderColorEntered?: string;\n background?: string;\n backgroundEntered?: string;\n borderRadius?: number;\n blur?: number;\n splitButtonTheme?: DropZoneAlignmentTheme;\n transformButtonTheme?: Partial<DropZoneLayerButtonTheme>;\n}\n\nexport const DefaultDropZoneLayerPanelTheme: DropZoneLayerPanelTheme = {\n border: 2,\n blur: 0,\n borderColor: 'transparent',\n borderColorEntered: '#0096ff',\n background: 'transparent',\n borderRadius: 10,\n backgroundEntered: 'rgba(0, 0, 0, 0.4)'\n};\n\n// !------------------------------------------\n\nexport interface DropZoneLayerPanelWidgetProps {\n model: WorkspaceModel;\n engine: WorkspaceEngine;\n directive: DropZonePanelDirective;\n debug: boolean;\n theme?: DropZoneLayerPanelTheme;\n}\n\nexport const DropZoneLayerPanelWidget: React.FC<DropZoneLayerPanelWidgetProps> = (props) => {\n const ref = useRef<HTMLDivElement>(null);\n const [show, setShow] = useState(false);\n const theme = _.merge({}, DefaultDropZoneLayerPanelTheme, props.theme \|\| {});\n\n return (\n <UseMouseDragEventsRootWidget\n forwardRef={ref}\n mouseEnter={() => {\n setShow(true);\n }}\n mouseExit={() => {\n setShow(false);\n }}\n >\n <S.DimensionTracking theme={theme} entered={show} dimension={props.model.r_dimensions}>\n <S.Inside ref={ref}>\n <S.Layer visible={show}>\n {props.directive.splitZones.map((d) => {\n return (\n <DropZoneAlignmentButtonWidget\n key={d.alignment}\n model={props.model}\n engine={props.engine}\n alignment={d.alignment}\n handleDrop={(model) => {\n d.handleDrop(model, props.engine);\n }}\n theme={theme.splitButtonTheme}\n />\n );\n })}\n </S.Layer>\n <S.Layer2 visible={show}>\n <S.ButtonBar>\n {props.directive.transformZones.map((zone) => {\n return (\n <DropZoneTransformWidget\n theme={theme.transformButtonTheme}\n model={props.model}\n zone={zone}\n engine={props.engine}\n key={zone.key}\n />\n );\n })}\n </S.ButtonBar>\n {props.debug ? <S.Debug>{props.model.id.substring(0, 7)}</S.Debug> : null}\n </S.Layer2>\n </S.Inside>\n </S.DimensionTracking>\n </UseMouseDragEventsRootWidget>\n );\n};\n\nnamespace S {\n export const DimensionTracking = styled(DimensionTrackingWidget)<{\n entered: boolean;\n theme: DropZoneLayerPanelTheme;\n }>`\n border-radius: ${(p) => p.theme.borderRadius}px;\n box-sizing: border-box;\n background: ${(p) => (p.entered ? p.theme.backgroundEntered : p.theme.background)};\n border: solid ${(p) => p.theme.border}px ${(p) => (p.entered ? p.theme.borderColorEntered : p.theme.borderColor)};\n transition:\n border 0.5s,\n background 0.5s;\n pointer-events: all;\n ${(p) => (p.theme.blur ? ` backdrop-filter: blur(${p.theme.blur}px)` : ``)};\n `;\n\n export const Debug = styled.span`\n font-size: 10px;\n color: white;\n `;\n\n export const ButtonBar = styled.div`\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n `;\n\n export const Layer = styled.div<{ visible: boolean }>`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n pointer-events: none;\n opacity: ${(p) => (p.visible ? 1 : 0)};\n transition: opacity 0.3s;\n `;\n\n export const Layer2 = styled.div<{ visible: boolean }>`\n position: absolute;\n box-sizing: border-box;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n padding: 20px;\n pointer-events: none;\n opacity: ${(p) => (p.visible ? 1 : 0)};\n transition: opacity 0.3s;\n `;\n\n export const Inside = styled.div`\n box-sizing: border-box;\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n `;\n}\n"]}

+1

-1

dist/DropZoneTransformWidget.jsx

		@@ -7,3 +7,3 @@ import * as React from 'react';
		const [entered, setEntered] = useState(false);
		const ref = useRef();
		const ref = useRef(null);
		useMouseDragEvents({
		@@ -10,0 +10,0 @@ forwardRef: ref,

+1

-1

dist/DropZoneTransformWidget.jsx.map

		@@ -1,1 +0,1 @@
		{"version":3,"file":"DropZoneTransformWidget.jsx","sourceRoot":"","sources":["../src/DropZoneTransformWidget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAmB,MAAM,qCAAqC,CAAC;AAC7G,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAYzC,MAAM,CAAC,MAAM,uBAAuB,GAA2C,CAAC,KAAK,EAAE,EAAE;IACvF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,GAAG,GAAG,MAAM,EAAkB,CAAC;IACrC,kBAAkB,CAAC;QACjB,UAAU,EAAE,GAAG;QACf,UAAU,EAAE,GAAG,EAAE;YACf,UAAU,CAAC,IAAI,CAAC,CAAC;QACnB,CAAC;QACD,SAAS,EAAE,GAAG,EAAE;YACd,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC;KACF,CAAC,CAAC;IACH,iBAAiB,CAAC;QAChB,UAAU,EAAE,GAAG;QACf,MAAM,EAAE,KAAK,CAAC,MAAM;QACpB,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE;YAChB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC;gBACnB,KAAK;gBACL,SAAS,EAAE,KAAK,CAAC,KAAK;gBACtB,MAAM,EAAE,KAAK,CAAC,MAAM;aACrB,CAAC,CAAC;QACL,CAAC;KACF,CAAC,CAAC;IACH,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC;AACnG,CAAC,CAAC;AACF,IAAU,CAAC,CAEV;AAFD,WAAU,CAAC;IACI,WAAS,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AACxC,CAAC,EAFS,CAAC,KAAD,CAAC,QAEV","sourcesContent":["import * as React from 'react';\nimport styled from '@emotion/styled';\nimport { useDroppableModel, useMouseDragEvents, WorkspaceEngine } from '@projectstorm/react-workspaces-core';\nimport { useRef, useState } from 'react';\nimport { TransformZone } from './DropZoneLayerPanelWidget';\nimport { WorkspaceModel } from '@projectstorm/react-workspaces-core';\nimport { DropZoneLayerButtonTheme } from './DropZoneLayerButtonWidget';\n\nexport interface DropZoneTransformWidgetProps {\n engine: WorkspaceEngine;\n zone: TransformZone;\n model: WorkspaceModel;\n theme: Partial<DropZoneLayerButtonTheme>;\n}\n\nexport const DropZoneTransformWidget: React.FC<DropZoneTransformWidgetProps> = (props) => {\n const [entered, setEntered] = useState(false);\n const ref = useRef<HTMLDivElement>();\n useMouseDragEvents({\n forwardRef: ref,\n mouseEnter: () => {\n setEntered(true);\n },\n mouseExit: () => {\n setEntered(false);\n }\n });\n useDroppableModel({\n forwardRef: ref,\n engine: props.engine,\n onDrop: (model) => {\n props.zone.transform({\n model,\n zoneModel: props.model,\n engine: props.engine\n });\n }\n });\n return <S.Container ref={ref}>{props.zone.render({ entered, theme: props.theme })}</S.Container>;\n};\nnamespace S {\n export const Container = styled.div``;\n}\n"]}
		{"version":3,"file":"DropZoneTransformWidget.jsx","sourceRoot":"","sources":["../src/DropZoneTransformWidget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAmB,MAAM,qCAAqC,CAAC;AAC7G,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAYzC,MAAM,CAAC,MAAM,uBAAuB,GAA2C,CAAC,KAAK,EAAE,EAAE;IACvF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACzC,kBAAkB,CAAC;QACjB,UAAU,EAAE,GAAG;QACf,UAAU,EAAE,GAAG,EAAE;YACf,UAAU,CAAC,IAAI,CAAC,CAAC;QACnB,CAAC;QACD,SAAS,EAAE,GAAG,EAAE;YACd,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC;KACF,CAAC,CAAC;IACH,iBAAiB,CAAC;QAChB,UAAU,EAAE,GAAG;QACf,MAAM,EAAE,KAAK,CAAC,MAAM;QACpB,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE;YAChB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC;gBACnB,KAAK;gBACL,SAAS,EAAE,KAAK,CAAC,KAAK;gBACtB,MAAM,EAAE,KAAK,CAAC,MAAM;aACrB,CAAC,CAAC;QACL,CAAC;KACF,CAAC,CAAC;IACH,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC;AACnG,CAAC,CAAC;AACF,IAAU,CAAC,CAEV;AAFD,WAAU,CAAC;IACI,WAAS,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AACxC,CAAC,EAFS,CAAC,KAAD,CAAC,QAEV","sourcesContent":["import * as React from 'react';\nimport styled from '@emotion/styled';\nimport { useDroppableModel, useMouseDragEvents, WorkspaceEngine } from '@projectstorm/react-workspaces-core';\nimport { useRef, useState } from 'react';\nimport { TransformZone } from './DropZoneLayerPanelWidget';\nimport { WorkspaceModel } from '@projectstorm/react-workspaces-core';\nimport { DropZoneLayerButtonTheme } from './DropZoneLayerButtonWidget';\n\nexport interface DropZoneTransformWidgetProps {\n engine: WorkspaceEngine;\n zone: TransformZone;\n model: WorkspaceModel;\n theme: Partial<DropZoneLayerButtonTheme>;\n}\n\nexport const DropZoneTransformWidget: React.FC<DropZoneTransformWidgetProps> = (props) => {\n const [entered, setEntered] = useState(false);\n const ref = useRef<HTMLDivElement>(null);\n useMouseDragEvents({\n forwardRef: ref,\n mouseEnter: () => {\n setEntered(true);\n },\n mouseExit: () => {\n setEntered(false);\n }\n });\n useDroppableModel({\n forwardRef: ref,\n engine: props.engine,\n onDrop: (model) => {\n props.zone.transform({\n model,\n zoneModel: props.model,\n engine: props.engine\n });\n }\n });\n return <S.Container ref={ref}>{props.zone.render({ entered, theme: props.theme })}</S.Container>;\n};\nnamespace S {\n export const Container = styled.div``;\n}\n"]}

+2

-2

dist/index.umd.js

		@@ -1,2 +0,2 @@
		!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["@projectstorm/react-workspaces-behavior-panel-dropzone"]=t():e["@projectstorm/react-workspaces-behavior-panel-dropzone"]=t()}(self,(()=>(()=>{"use strict";var e={n:t=>{var n=t&&t.__esModule?()=>t.default:()=>t;return e.d(n,{a:n}),n},d:(t,n)=>{for(var o in n)e.o(n,o)&&!e.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:n[o]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{DefaultDropZoneLayerButtonTheme:()=>v,DefaultDropZoneLayerPanelTheme:()=>p,DropZoneAlignmentButtonWidget:()=>l,DropZoneLayer:()=>h,DropZoneLayerButtonWidget:()=>x,DropZoneLayerPanelWidget:()=>g,DropZoneLayerWidget:()=>b,DropZoneTransformWidget:()=>c,ReplaceZone:()=>M,draggingItemBehavior:()=>D,getDirectiveForWorkspaceNode:()=>w});const n=require("react"),o=require("@projectstorm/react-workspaces-core"),r=require("lodash"),i=require("@emotion/styled");var a=e.n(i);const d={thickness:30,thicknessIdle:13,lengthIdle:60,background:"#0096ff",backgroundEntered:"orange"},l=e=>{const[t,i]=(0,n.useState)(!1),a=(0,n.useRef)(),l=r.merge({},d,e.theme\|\|{});(0,o.useMouseDragEvents)({forwardRef:a,mouseEnter:()=>{i(!0)},mouseExit:()=>{i(!1)}}),(0,o.useDroppableModel)({forwardRef:a,engine:e.engine,onDrop:e.handleDrop});const c=e.alignment===o.Alignment.LEFT\|\|e.alignment===o.Alignment.RIGHT;let m=l.thicknessIdle,p=l.lengthIdle;return c\|\|(m=l.lengthIdle,p=l.thicknessIdle),n.createElement(s.SplitContainer,{thickness:l.thickness,ref:a,vertical:c,alignment:e.alignment,hover:t},n.createElement(s.SplitContainerIcon,{theme:l,hover:t,width:m,height:p}))};var s;!function(e){e.SplitContainer=a().div`
		!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["@projectstorm/react-workspaces-behavior-panel-dropzone"]=t():e["@projectstorm/react-workspaces-behavior-panel-dropzone"]=t()}(self,(()=>(()=>{"use strict";var e={n:t=>{var n=t&&t.__esModule?()=>t.default:()=>t;return e.d(n,{a:n}),n},d:(t,n)=>{for(var o in n)e.o(n,o)&&!e.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:n[o]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{DefaultDropZoneLayerButtonTheme:()=>v,DefaultDropZoneLayerPanelTheme:()=>p,DropZoneAlignmentButtonWidget:()=>d,DropZoneLayer:()=>h,DropZoneLayerButtonWidget:()=>x,DropZoneLayerPanelWidget:()=>g,DropZoneLayerWidget:()=>b,DropZoneTransformWidget:()=>c,ReplaceZone:()=>M,draggingItemBehavior:()=>D,getDirectiveForWorkspaceNode:()=>w});const n=require("react"),o=require("@projectstorm/react-workspaces-core"),r=require("lodash"),i=require("@emotion/styled");var a=e.n(i);const l={thickness:30,thicknessIdle:13,lengthIdle:60,background:"#0096ff",backgroundEntered:"orange"},d=e=>{const[t,i]=(0,n.useState)(!1),a=(0,n.useRef)(null),d=r.merge({},l,e.theme\|\|{});(0,o.useMouseDragEvents)({forwardRef:a,mouseEnter:()=>{i(!0)},mouseExit:()=>{i(!1)}}),(0,o.useDroppableModel)({forwardRef:a,engine:e.engine,onDrop:e.handleDrop});const c=e.alignment===o.Alignment.LEFT\|\|e.alignment===o.Alignment.RIGHT;let m=d.thicknessIdle,p=d.lengthIdle;return c\|\|(m=d.lengthIdle,p=d.thicknessIdle),n.createElement(s.SplitContainer,{thickness:d.thickness,ref:a,vertical:c,alignment:e.alignment,hover:t},n.createElement(s.SplitContainerIcon,{theme:d,hover:t,width:m,height:p}))};var s;!function(e){e.SplitContainer=a().div`
		${e=>e.alignment}: 0;
		@@ -22,3 +22,3 @@ position: absolute;
		height: ${e=>e.hover?"100%":`${e.height}px`};
		`}(s\|\|(s={}));const c=e=>{const[t,r]=(0,n.useState)(!1),i=(0,n.useRef)();return(0,o.useMouseDragEvents)({forwardRef:i,mouseEnter:()=>{r(!0)},mouseExit:()=>{r(!1)}}),(0,o.useDroppableModel)({forwardRef:i,engine:e.engine,onDrop:t=>{e.zone.transform({model:t,zoneModel:e.model,engine:e.engine})}}),n.createElement(m.Container,{ref:i},e.zone.render({entered:t,theme:e.theme}))};var m;!function(e){e.Container=a().div``}(m\|\|(m={}));const p={border:2,blur:0,borderColor:"transparent",borderColorEntered:"#0096ff",background:"transparent",borderRadius:10,backgroundEntered:"rgba(0, 0, 0, 0.4)"},g=e=>{const t=(0,n.useRef)(),[i,a]=(0,n.useState)(!1),d=r.merge({},p,e.theme\|\|{});return n.createElement(o.UseMouseDragEventsRootWidget,{forwardRef:t,mouseEnter:()=>{a(!0)},mouseExit:()=>{a(!1)}},n.createElement(u.DimensionTracking,{theme:d,entered:i,dimension:e.model.r_dimensions},n.createElement(u.Inside,{ref:t},n.createElement(u.Layer,{visible:i},e.directive.splitZones.map((t=>n.createElement(l,{key:t.alignment,model:e.model,engine:e.engine,alignment:t.alignment,handleDrop:n=>{t.handleDrop(n,e.engine)},theme:d.splitButtonTheme})))),n.createElement(u.Layer2,{visible:i},n.createElement(u.ButtonBar,null,e.directive.transformZones.map((t=>n.createElement(c,{theme:d.transformButtonTheme,model:e.model,zone:t,engine:e.engine,key:t.key})))),e.debug?n.createElement(u.Debug,null,e.model.id.substring(0,7)):null))))};var u;!function(e){e.DimensionTracking=a()(o.DimensionTrackingWidget)`
		`}(s\|\|(s={}));const c=e=>{const[t,r]=(0,n.useState)(!1),i=(0,n.useRef)(null);return(0,o.useMouseDragEvents)({forwardRef:i,mouseEnter:()=>{r(!0)},mouseExit:()=>{r(!1)}}),(0,o.useDroppableModel)({forwardRef:i,engine:e.engine,onDrop:t=>{e.zone.transform({model:t,zoneModel:e.model,engine:e.engine})}}),n.createElement(m.Container,{ref:i},e.zone.render({entered:t,theme:e.theme}))};var m;!function(e){e.Container=a().div``}(m\|\|(m={}));const p={border:2,blur:0,borderColor:"transparent",borderColorEntered:"#0096ff",background:"transparent",borderRadius:10,backgroundEntered:"rgba(0, 0, 0, 0.4)"},g=e=>{const t=(0,n.useRef)(null),[i,a]=(0,n.useState)(!1),l=r.merge({},p,e.theme\|\|{});return n.createElement(o.UseMouseDragEventsRootWidget,{forwardRef:t,mouseEnter:()=>{a(!0)},mouseExit:()=>{a(!1)}},n.createElement(u.DimensionTracking,{theme:l,entered:i,dimension:e.model.r_dimensions},n.createElement(u.Inside,{ref:t},n.createElement(u.Layer,{visible:i},e.directive.splitZones.map((t=>n.createElement(d,{key:t.alignment,model:e.model,engine:e.engine,alignment:t.alignment,handleDrop:n=>{t.handleDrop(n,e.engine)},theme:l.splitButtonTheme})))),n.createElement(u.Layer2,{visible:i},n.createElement(u.ButtonBar,null,e.directive.transformZones.map((t=>n.createElement(c,{theme:l.transformButtonTheme,model:e.model,zone:t,engine:e.engine,key:t.key})))),e.debug?n.createElement(u.Debug,null,e.model.id.substring(0,7)):null))))};var u;!function(e){e.DimensionTracking=a()(o.DimensionTrackingWidget)`
		border-radius: ${e=>e.theme.borderRadius}px;
		@@ -25,0 +25,0 @@ box-sizing: border-box;

+1

-1

dist/index.umd.js.map

		@@ -1,1 +0,1 @@
		{"version":3,"file":"index.umd.js","mappings":"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","sources":["webpack://@projectstorm/react-workspaces-behavior-panel-dropzone/webpack/universalModuleDefinition","webpack://@projectstorm/react-workspaces-behavior-panel-dropzone/webpack/bootstrap","webpack://@projectstorm/react-workspaces-behavior-panel-dropzone/webpack/runtime/compat get default export","webpack://@projectstorm/react-workspaces-behavior-panel-dropzone/webpack/runtime/define property getters","webpack://@projectstorm/react-workspaces-behavior-panel-dropzone/webpack/runtime/hasOwnProperty shorthand","webpack://@projectstorm/react-workspaces-behavior-panel-dropzone/webpack/runtime/make namespace object","webpack://@projectstorm/react-workspaces-behavior-panel-dropzone/external commonjs \"react\"","webpack://@projectstorm/react-workspaces-behavior-panel-dropzone/external commonjs \"@projectstorm/react-workspaces-core\"","webpack://@projectstorm/react-workspaces-behavior-panel-dropzone/external commonjs \"lodash\"","webpack://@projectstorm/react-workspaces-behavior-panel-dropzone/external commonjs \"@emotion/styled\"","webpack://@projectstorm/react-workspaces-behavior-panel-dropzone/../src/DropZoneAlignmentButtonWidget.tsx","webpack://@projectstorm/react-workspaces-behavior-panel-dropzone/../src/DropZoneTransformWidget.tsx","webpack://@projectstorm/react-workspaces-behavior-panel-dropzone/../src/DropZoneLayerPanelWidget.tsx","webpack://@projectstorm/react-workspaces-behavior-panel-dropzone/../src/DropZoneLayer.tsx","webpack://@projectstorm/react-workspaces-behavior-panel-dropzone/external commonjs \"@fortawesome/react-fontawesome\"","webpack://@projectstorm/react-workspaces-behavior-panel-dropzone/../src/DropZoneLayerButtonWidget.tsx","webpack://@projectstorm/react-workspaces-behavior-panel-dropzone/external commonjs \"@fortawesome/fontawesome-svg-core\"","webpack://@projectstorm/react-workspaces-behavior-panel-dropzone/external commonjs \"@fortawesome/free-solid-svg-icons\"","webpack://@projectstorm/react-workspaces-behavior-panel-dropzone/../src/index.tsx"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"@projectstorm/react-workspaces-behavior-panel-dropzone\"] = factory();\n\telse\n\t\troot[\"@projectstorm/react-workspaces-behavior-panel-dropzone\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nvar __webpack_require__ = {};\n\n","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = (module) => {\n\tvar getter = module && module.__esModule ?\n\t\t() => (module['default']) :\n\t\t() => (module);\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"react\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@projectstorm/react-workspaces-core\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"lodash\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@emotion/styled\");","import * as React from 'react';\nimport { useRef, useState } from 'react';\nimport styled from '@emotion/styled';\nimport * as _ from 'lodash';\nimport {\n Alignment,\n useDroppableModel,\n useMouseDragEvents,\n WorkspaceEngine,\n WorkspaceModel\n} from '@projectstorm/react-workspaces-core';\n\nexport interface DropZoneAlignmentTheme {\n thickness?: number;\n thicknessIdle?: number;\n lengthIdle?: number;\n background?: string;\n backgroundEntered?: string;\n}\n\nconst DefaultDropZoneAlignmentTheme: DropZoneAlignmentTheme = {\n thickness: 30,\n thicknessIdle: 13,\n lengthIdle: 60,\n background: '#0096ff',\n backgroundEntered: 'orange'\n};\n\nexport interface DropZoneAlignmentButtonWidgetProps {\n alignment: Alignment;\n engine: WorkspaceEngine;\n model: WorkspaceModel;\n handleDrop: (model: WorkspaceModel) => any;\n theme?: DropZoneAlignmentTheme;\n}\n\nexport const DropZoneAlignmentButtonWidget: React.FC<DropZoneAlignmentButtonWidgetProps> = (props) => {\n const [entered, setEntered] = useState(false);\n const ref = useRef<HTMLDivElement>();\n const theme = _.merge({}, DefaultDropZoneAlignmentTheme, props.theme \|\| {});\n useMouseDragEvents({\n forwardRef: ref,\n mouseEnter: () => {\n setEntered(true);\n },\n mouseExit: () => {\n setEntered(false);\n }\n });\n useDroppableModel({\n forwardRef: ref,\n engine: props.engine,\n onDrop: props.handleDrop\n });\n\n const vertical = props.alignment === Alignment.LEFT \|\| props.alignment === Alignment.RIGHT;\n\n let width = theme.thicknessIdle;\n let height = theme.lengthIdle;\n if (!vertical) {\n width = theme.lengthIdle;\n height = theme.thicknessIdle;\n }\n\n return (\n <S.SplitContainer\n thickness={theme.thickness}\n ref={ref}\n vertical={vertical}\n alignment={props.alignment}\n hover={entered}\n >\n <S.SplitContainerIcon theme={theme} hover={entered} width={width} height={height} />\n </S.SplitContainer>\n );\n};\n\nnamespace S {\n export const SplitContainer = styled.div<{\n alignment: Alignment;\n hover: boolean;\n vertical: boolean;\n thickness: number;\n }>`\n ${(p) => p.alignment}: 0;\n position: absolute;\n width: ${(p) => (p.vertical ? `${p.thickness}px` : '100%')};\n height: ${(p) => (!p.vertical ? `${p.thickness}px` : '100%')};\n pointer-events: all;\n display: flex;\n align-items: center;\n justify-content: center;\n `;\n\n export const SplitContainerIcon = styled.div<{\n width: number;\n height: number;\n hover: boolean;\n theme: DropZoneAlignmentTheme;\n }>`\n border-radius: 2px;\n background: ${(p) => (p.hover ? p.theme.backgroundEntered : p.theme.background)};\n transition:\n background 0.3s,\n width ease-out 0.3s,\n height ease-out 0.3s;\n transition-delay: 0.1s;\n pointer-events: none;\n\n width: ${(p) => (p.hover ? '100%' : `${p.width}px`)};\n height: ${(p) => (p.hover ? '100%' : `${p.height}px`)};\n `;\n}\n","import * as React from 'react';\nimport styled from '@emotion/styled';\nimport { useDroppableModel, useMouseDragEvents, WorkspaceEngine } from '@projectstorm/react-workspaces-core';\nimport { useRef, useState } from 'react';\nimport { TransformZone } from './DropZoneLayerPanelWidget';\nimport { WorkspaceModel } from '@projectstorm/react-workspaces-core';\nimport { DropZoneLayerButtonTheme } from './DropZoneLayerButtonWidget';\n\nexport interface DropZoneTransformWidgetProps {\n engine: WorkspaceEngine;\n zone: TransformZone;\n model: WorkspaceModel;\n theme: Partial<DropZoneLayerButtonTheme>;\n}\n\nexport const DropZoneTransformWidget: React.FC<DropZoneTransformWidgetProps> = (props) => {\n const [entered, setEntered] = useState(false);\n const ref = useRef<HTMLDivElement>();\n useMouseDragEvents({\n forwardRef: ref,\n mouseEnter: () => {\n setEntered(true);\n },\n mouseExit: () => {\n setEntered(false);\n }\n });\n useDroppableModel({\n forwardRef: ref,\n engine: props.engine,\n onDrop: (model) => {\n props.zone.transform({\n model,\n zoneModel: props.model,\n engine: props.engine\n });\n }\n });\n return <S.Container ref={ref}>{props.zone.render({ entered, theme: props.theme })}</S.Container>;\n};\nnamespace S {\n export const Container = styled.div``;\n}\n","import * as React from 'react';\nimport * as _ from 'lodash';\nimport { useRef, useState } from 'react';\nimport styled from '@emotion/styled';\nimport {\n Alignment,\n DimensionTrackingWidget,\n UseMouseDragEventsRootWidget,\n WorkspaceEngine,\n WorkspaceModel\n} from '@projectstorm/react-workspaces-core';\nimport { DropZoneAlignmentButtonWidget, DropZoneAlignmentTheme } from './DropZoneAlignmentButtonWidget';\nimport { DropZoneTransformWidget } from './DropZoneTransformWidget';\nimport { DropZoneLayerButtonTheme } from './DropZoneLayerButtonWidget';\n\nexport interface TransformZoneEvent {\n model: WorkspaceModel;\n zoneModel: WorkspaceModel;\n engine: WorkspaceEngine;\n}\n\nexport interface TransformZone {\n transform: (event: TransformZoneEvent) => any;\n render: (options: { entered: boolean; theme: Partial<DropZoneLayerButtonTheme> }) => any;\n key: string;\n}\n\nexport interface SplitZone {\n alignment: Alignment;\n handleDrop: (model: WorkspaceModel, engine: WorkspaceEngine) => any;\n}\n\nexport interface DropZonePanelDirective {\n splitZones: SplitZone[];\n transformZones: TransformZone[];\n}\n\nexport interface DropZoneLayerPanelTheme {\n border?: number;\n borderColor?: string;\n borderColorEntered?: string;\n background?: string;\n backgroundEntered?: string;\n borderRadius?: number;\n blur?: number;\n splitButtonTheme?: DropZoneAlignmentTheme;\n transformButtonTheme?: Partial<DropZoneLayerButtonTheme>;\n}\n\nexport const DefaultDropZoneLayerPanelTheme: DropZoneLayerPanelTheme = {\n border: 2,\n blur: 0,\n borderColor: 'transparent',\n borderColorEntered: '#0096ff',\n background: 'transparent',\n borderRadius: 10,\n backgroundEntered: 'rgba(0, 0, 0, 0.4)'\n};\n\n// !------------------------------------------\n\nexport interface DropZoneLayerPanelWidgetProps {\n model: WorkspaceModel;\n engine: WorkspaceEngine;\n directive: DropZonePanelDirective;\n debug: boolean;\n theme?: DropZoneLayerPanelTheme;\n}\n\nexport const DropZoneLayerPanelWidget: React.FC<DropZoneLayerPanelWidgetProps> = (props) => {\n const ref = useRef<HTMLDivElement>();\n const [show, setShow] = useState(false);\n const theme = _.merge({}, DefaultDropZoneLayerPanelTheme, props.theme \|\| {});\n\n return (\n <UseMouseDragEventsRootWidget\n forwardRef={ref}\n mouseEnter={() => {\n setShow(true);\n }}\n mouseExit={() => {\n setShow(false);\n }}\n >\n <S.DimensionTracking theme={theme} entered={show} dimension={props.model.r_dimensions}>\n <S.Inside ref={ref}>\n <S.Layer visible={show}>\n {props.directive.splitZones.map((d) => {\n return (\n <DropZoneAlignmentButtonWidget\n key={d.alignment}\n model={props.model}\n engine={props.engine}\n alignment={d.alignment}\n handleDrop={(model) => {\n d.handleDrop(model, props.engine);\n }}\n theme={theme.splitButtonTheme}\n />\n );\n })}\n </S.Layer>\n <S.Layer2 visible={show}>\n <S.ButtonBar>\n {props.directive.transformZones.map((zone) => {\n return (\n <DropZoneTransformWidget\n theme={theme.transformButtonTheme}\n model={props.model}\n zone={zone}\n engine={props.engine}\n key={zone.key}\n />\n );\n })}\n </S.ButtonBar>\n {props.debug ? <S.Debug>{props.model.id.substring(0, 7)}</S.Debug> : null}\n </S.Layer2>\n </S.Inside>\n </S.DimensionTracking>\n </UseMouseDragEventsRootWidget>\n );\n};\n\nnamespace S {\n export const DimensionTracking = styled(DimensionTrackingWidget)<{\n entered: boolean;\n theme: DropZoneLayerPanelTheme;\n }>`\n border-radius: ${(p) => p.theme.borderRadius}px;\n box-sizing: border-box;\n background: ${(p) => (p.entered ? p.theme.backgroundEntered : p.theme.background)};\n border: solid ${(p) => p.theme.border}px ${(p) => (p.entered ? p.theme.borderColorEntered : p.theme.borderColor)};\n transition:\n border 0.5s,\n background 0.5s;\n pointer-events: all;\n ${(p) => (p.theme.blur ? ` backdrop-filter: blur(${p.theme.blur}px)` : ``)};\n `;\n\n export const Debug = styled.span`\n font-size: 10px;\n color: white;\n `;\n\n export const ButtonBar = styled.div`\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n `;\n\n export const Layer = styled.div<{ visible: boolean }>`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n pointer-events: none;\n opacity: ${(p) => (p.visible ? 1 : 0)};\n transition: opacity 0.3s;\n `;\n\n export const Layer2 = styled.div<{ visible: boolean }>`\n position: absolute;\n box-sizing: border-box;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n padding: 20px;\n pointer-events: none;\n opacity: ${(p) => (p.visible ? 1 : 0)};\n transition: opacity 0.3s;\n `;\n\n export const Inside = styled.div`\n box-sizing: border-box;\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n `;\n}\n","import * as React from 'react';\nimport { Layer, WorkspaceEngine, WorkspaceModel } from '@projectstorm/react-workspaces-core';\nimport { DropZoneLayerPanelTheme, DropZoneLayerPanelWidget, DropZonePanelDirective } from './DropZoneLayerPanelWidget';\n\nexport interface DropZoneLayerOptions {\n getDropZoneForModel: (model: WorkspaceModel) => DropZonePanelDirective \| null;\n theme?: DropZoneLayerPanelTheme;\n modelID: string;\n debugModels: boolean;\n}\n\nexport class DropZoneLayer extends Layer {\n constructor(private options2: DropZoneLayerOptions) {\n super({\n mouseEvents: false\n });\n }\n\n renderLayer(event): JSX.Element {\n return (\n <DropZoneLayerWidget\n debugModels={this.options2.debugModels}\n engine={event.engine}\n draggingModel={this.options2.modelID}\n getDropZoneForModel={this.options2.getDropZoneForModel}\n theme={this.options2.theme}\n />\n );\n }\n}\n\n//!--------------- widget ----------------\n\nexport interface DropZoneLayerWidgetProps {\n engine: WorkspaceEngine;\n getDropZoneForModel: (model: WorkspaceModel) => DropZonePanelDirective \| null;\n draggingModel: string;\n debugModels: boolean;\n theme?: DropZoneLayerPanelTheme;\n}\n\nexport const DropZoneLayerWidget: React.FC<DropZoneLayerWidgetProps> = (props) => {\n const draggingModelFlattened =\n props.engine.rootModel\n .flatten()\n .find((m) => m.id === props.draggingModel)\n ?.flatten() \|\| [];\n\n return (\n <>\n {props.engine.rootModel\n .flatten()\n .filter((m) => m.r_visible)\n .filter((m) => {\n // filter out the dragging model and its children (cant add parent to children)\n return !draggingModelFlattened.find((child) => child.id === m.id);\n })\n // dont show a drop zone for the same model\n // .filter((m) => m.id !== props.draggingModel.id)\n .map((m) => {\n const directive = props.getDropZoneForModel(m);\n\n if (!directive) {\n return null;\n }\n\n return (\n <DropZoneLayerPanelWidget\n debug={props.debugModels}\n directive={directive}\n engine={props.engine}\n model={m}\n theme={props.theme}\n key={m.id}\n />\n );\n })}\n </>\n );\n};\n","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@fortawesome/react-fontawesome\");","import * as React from 'react';\nimport styled from '@emotion/styled';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { IconProp } from '@fortawesome/fontawesome-svg-core';\nimport * as _ from 'lodash';\n\nexport interface DropZoneLayerButtonTheme {\n icon?: {\n color?: string;\n size?: number;\n };\n text?: {\n color?: string;\n size?: number;\n };\n borderSize?: number;\n borderRadius?: number;\n borderColor?: string;\n borderColorEntered?: string;\n background?: string;\n backgroundEntered?: string;\n}\n\nexport const DefaultDropZoneLayerButtonTheme: DropZoneLayerButtonTheme = {\n background: 'transparent',\n backgroundEntered: 'rgba(255, 165, 0, 0.56)',\n borderColor: '#0096ff',\n borderColorEntered: 'orange',\n borderSize: 2,\n borderRadius: 5,\n icon: {\n color: 'white',\n size: 22\n },\n text: {\n color: 'white',\n size: 11\n }\n};\n\nexport interface DropZoneLayerButtonWidgetProps {\n icon: IconProp;\n text: string;\n entered: boolean;\n theme?: DropZoneLayerButtonTheme;\n}\n\nexport const DropZoneLayerButtonWidget: React.FC<DropZoneLayerButtonWidgetProps> = (props) => {\n const theme = _.merge({}, DefaultDropZoneLayerButtonTheme, props.theme \|\| {});\n return (\n <S.Container theme={theme} entered={props.entered}>\n <S.Icon theme={theme} icon={props.icon} />\n <S.Text theme={theme}>{props.text}</S.Text>\n </S.Container>\n );\n};\n\nnamespace S {\n export const Icon = styled(FontAwesomeIcon)<{ theme: DropZoneLayerButtonTheme }>`\n font-size: ${(p) => p.theme.icon.size}px;\n color: ${(p) => p.theme.icon.color};\n pointer-events: none;\n `;\n\n export const Text = styled.div<{ theme: DropZoneLayerButtonTheme }>`\n font-size: ${(p) => p.theme.text.size}px;\n color: ${(p) => p.theme.text.color};\n padding-top: 5px;\n pointer-events: none;\n `;\n\n export const Container = styled.div<{ entered: boolean; theme: DropZoneLayerButtonTheme }>`\n border: solid 2px ${(p) => (p.entered ? p.theme.borderColorEntered : p.theme.borderColor)};\n box-sizing: border-box;\n background: ${(p) => (p.entered ? p.theme.backgroundEntered : p.theme.background)};\n transition:\n border 0.3s,\n background 0.3s;\n pointer-events: all;\n width: 60px;\n height: 60px;\n margin: 2px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border-radius: 5px;\n `;\n}\n","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@fortawesome/fontawesome-svg-core\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@fortawesome/free-solid-svg-icons\");","import * as React from 'react';\nimport {\n Alignment,\n WorkspaceCollectionModel,\n WorkspaceEngine,\n WorkspaceModel,\n WorkspaceNodeModel\n} from '@projectstorm/react-workspaces-core';\nimport { DropZoneLayer } from './DropZoneLayer';\nimport { DropZoneLayerPanelTheme, DropZonePanelDirective, TransformZone } from './DropZoneLayerPanelWidget';\nimport { DropZoneLayerButtonWidget } from './DropZoneLayerButtonWidget';\nimport { library } from '@fortawesome/fontawesome-svg-core';\nimport { faCopy } from '@fortawesome/free-solid-svg-icons';\n\nlibrary.add(faCopy);\n\nexport interface DraggingItemBehaviorOptions {\n getDropZoneForModel: (model: WorkspaceModel) => DropZonePanelDirective \| null;\n engine: WorkspaceEngine;\n debug?: boolean;\n getTheme?: () => DropZoneLayerPanelTheme;\n}\n\nexport const draggingItemBehavior = (options: DraggingItemBehaviorOptions) => {\n let layer: DropZoneLayer = null;\n const { engine } = options;\n engine.registerListener({\n modelDragStart: () => {\n if (layer) {\n return;\n }\n layer = new DropZoneLayer({\n modelID: engine.draggingID,\n getDropZoneForModel: options.getDropZoneForModel,\n debugModels: options.debug,\n theme: options.getTheme?.()\n });\n engine.layerManager.addLayer(layer);\n },\n modelDragEnd: () => {\n layer?.remove();\n layer = null;\n }\n });\n};\n\nexport const ReplaceZone: TransformZone = {\n key: 'REPLACE',\n render: ({ entered, theme }) => {\n return <DropZoneLayerButtonWidget theme={theme} entered={entered} text=\"Replace\" icon=\"copy\" />;\n },\n transform: ({ model, zoneModel, engine }) => {\n (zoneModel.parent as WorkspaceCollectionModel).replaceModel(zoneModel, model);\n engine.normalize();\n }\n};\n\nexport interface GetDirectiveForWorkspaceNodeOptions {\n node: WorkspaceModel;\n transformZones?: TransformZone[];\n generateParentNode?: () => WorkspaceNodeModel;\n}\n\nexport const getDirectiveForWorkspaceNode = (\n options: GetDirectiveForWorkspaceNodeOptions\n): DropZonePanelDirective \| null => {\n const { node, transformZones, generateParentNode } = options;\n if (!(node instanceof WorkspaceCollectionModel) && node.parent instanceof WorkspaceNodeModel) {\n return {\n transformZones: [ReplaceZone, ...(transformZones \|\| [])],\n splitZones: [\n {\n alignment: node.parent.vertical ? Alignment.LEFT : Alignment.TOP,\n handleDrop: (model, engine) => {\n const parent = node.parent as WorkspaceNodeModel;\n const m = generateParentNode?.() \|\| new WorkspaceNodeModel();\n m.setVertical(!parent.vertical);\n m.setExpand(model.expandHorizontal, model.expandHorizontal);\n m.addModel(model);\n parent.replaceModel(node, m);\n m.addModel(node);\n engine.normalize();\n }\n },\n {\n alignment: node.parent.vertical ? Alignment.RIGHT : Alignment.BOTTOM,\n handleDrop: (model, engine) => {\n const parent = node.parent as WorkspaceNodeModel;\n const m = generateParentNode?.() \|\| new WorkspaceNodeModel();\n m.setVertical(!parent.vertical);\n m.setExpand(model.expandHorizontal, model.expandHorizontal);\n m.addModel(model);\n parent.replaceModel(node, m);\n m.addModel(node, 0);\n engine.normalize();\n }\n }\n ]\n };\n }\n};\n\nexport * from './DropZoneLayerPanelWidget';\nexport * from './DropZoneLayerButtonWidget';\nexport * from './DropZoneTransformWidget';\nexport * from './DropZoneAlignmentButtonWidget';\nexport * from './DropZoneLayer';\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","getter","__esModule","d","a","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","require","DefaultDropZoneAlignmentTheme","thickness","thicknessIdle","lengthIdle","background","backgroundEntered","DropZoneAlignmentButtonWidget","props","entered","setEntered","useState","ref","useRef","theme","_","useMouseDragEvents","forwardRef","mouseEnter","mouseExit","useDroppableModel","engine","onDrop","handleDrop","vertical","alignment","Alignment","LEFT","RIGHT","width","height","React","S","SplitContainer","hover","SplitContainerIcon","styled","p","DropZoneTransformWidget","model","zone","transform","zoneModel","Container","render","DefaultDropZoneLayerPanelTheme","border","blur","borderColor","borderColorEntered","borderRadius","DropZoneLayerPanelWidget","show","setShow","UseMouseDragEventsRootWidget","DimensionTracking","dimension","r_dimensions","Inside","Layer","visible","directive","splitZones","map","splitButtonTheme","Layer2","ButtonBar","transformZones","transformButtonTheme","debug","Debug","id","substring","DimensionTrackingWidget","DropZoneLayer","constructor","options2","super","mouseEvents","renderLayer","event","DropZoneLayerWidget","debugModels","this","draggingModel","modelID","getDropZoneForModel","draggingModelFlattened","_a","rootModel","flatten","find","m","filter","r_visible","child","DefaultDropZoneLayerButtonTheme","borderSize","icon","color","size","text","DropZoneLayerButtonWidget","Icon","Text","FontAwesomeIcon","library","add","faCopy","draggingItemBehavior","options","layer","registerListener","modelDragStart","draggingID","getTheme","layerManager","addLayer","modelDragEnd","remove","ReplaceZone","_ref","_ref2","parent","replaceModel","normalize","getDirectiveForWorkspaceNode","node","generateParentNode","WorkspaceCollectionModel","WorkspaceNodeModel","TOP","setVertical","setExpand","expandHorizontal","addModel","BOTTOM"],"sourceRoot":""}
		{"version":3,"file":"index.umd.js","mappings":"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","sources":["webpack://@projectstorm/react-workspaces-behavior-panel-dropzone/webpack/universalModuleDefinition","webpack://@projectstorm/react-workspaces-behavior-panel-dropzone/webpack/bootstrap","webpack://@projectstorm/react-workspaces-behavior-panel-dropzone/webpack/runtime/compat get default export","webpack://@projectstorm/react-workspaces-behavior-panel-dropzone/webpack/runtime/define property getters","webpack://@projectstorm/react-workspaces-behavior-panel-dropzone/webpack/runtime/hasOwnProperty shorthand","webpack://@projectstorm/react-workspaces-behavior-panel-dropzone/webpack/runtime/make namespace object","webpack://@projectstorm/react-workspaces-behavior-panel-dropzone/external commonjs \"react\"","webpack://@projectstorm/react-workspaces-behavior-panel-dropzone/external commonjs \"@projectstorm/react-workspaces-core\"","webpack://@projectstorm/react-workspaces-behavior-panel-dropzone/external commonjs \"lodash\"","webpack://@projectstorm/react-workspaces-behavior-panel-dropzone/external commonjs \"@emotion/styled\"","webpack://@projectstorm/react-workspaces-behavior-panel-dropzone/../src/DropZoneAlignmentButtonWidget.tsx","webpack://@projectstorm/react-workspaces-behavior-panel-dropzone/../src/DropZoneTransformWidget.tsx","webpack://@projectstorm/react-workspaces-behavior-panel-dropzone/../src/DropZoneLayerPanelWidget.tsx","webpack://@projectstorm/react-workspaces-behavior-panel-dropzone/../src/DropZoneLayer.tsx","webpack://@projectstorm/react-workspaces-behavior-panel-dropzone/external commonjs \"@fortawesome/react-fontawesome\"","webpack://@projectstorm/react-workspaces-behavior-panel-dropzone/../src/DropZoneLayerButtonWidget.tsx","webpack://@projectstorm/react-workspaces-behavior-panel-dropzone/external commonjs \"@fortawesome/fontawesome-svg-core\"","webpack://@projectstorm/react-workspaces-behavior-panel-dropzone/external commonjs \"@fortawesome/free-solid-svg-icons\"","webpack://@projectstorm/react-workspaces-behavior-panel-dropzone/../src/index.tsx"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"@projectstorm/react-workspaces-behavior-panel-dropzone\"] = factory();\n\telse\n\t\troot[\"@projectstorm/react-workspaces-behavior-panel-dropzone\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nvar __webpack_require__ = {};\n\n","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = (module) => {\n\tvar getter = module && module.__esModule ?\n\t\t() => (module['default']) :\n\t\t() => (module);\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"react\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@projectstorm/react-workspaces-core\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"lodash\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@emotion/styled\");","import * as React from 'react';\nimport { useRef, useState } from 'react';\nimport styled from '@emotion/styled';\nimport * as _ from 'lodash';\nimport {\n Alignment,\n useDroppableModel,\n useMouseDragEvents,\n WorkspaceEngine,\n WorkspaceModel\n} from '@projectstorm/react-workspaces-core';\n\nexport interface DropZoneAlignmentTheme {\n thickness?: number;\n thicknessIdle?: number;\n lengthIdle?: number;\n background?: string;\n backgroundEntered?: string;\n}\n\nconst DefaultDropZoneAlignmentTheme: DropZoneAlignmentTheme = {\n thickness: 30,\n thicknessIdle: 13,\n lengthIdle: 60,\n background: '#0096ff',\n backgroundEntered: 'orange'\n};\n\nexport interface DropZoneAlignmentButtonWidgetProps {\n alignment: Alignment;\n engine: WorkspaceEngine;\n model: WorkspaceModel;\n handleDrop: (model: WorkspaceModel) => any;\n theme?: DropZoneAlignmentTheme;\n}\n\nexport const DropZoneAlignmentButtonWidget: React.FC<DropZoneAlignmentButtonWidgetProps> = (props) => {\n const [entered, setEntered] = useState(false);\n const ref = useRef<HTMLDivElement>(null);\n const theme = _.merge({}, DefaultDropZoneAlignmentTheme, props.theme \|\| {});\n useMouseDragEvents({\n forwardRef: ref,\n mouseEnter: () => {\n setEntered(true);\n },\n mouseExit: () => {\n setEntered(false);\n }\n });\n useDroppableModel({\n forwardRef: ref,\n engine: props.engine,\n onDrop: props.handleDrop\n });\n\n const vertical = props.alignment === Alignment.LEFT \|\| props.alignment === Alignment.RIGHT;\n\n let width = theme.thicknessIdle;\n let height = theme.lengthIdle;\n if (!vertical) {\n width = theme.lengthIdle;\n height = theme.thicknessIdle;\n }\n\n return (\n <S.SplitContainer\n thickness={theme.thickness}\n ref={ref}\n vertical={vertical}\n alignment={props.alignment}\n hover={entered}\n >\n <S.SplitContainerIcon theme={theme} hover={entered} width={width} height={height} />\n </S.SplitContainer>\n );\n};\n\nnamespace S {\n export const SplitContainer = styled.div<{\n alignment: Alignment;\n hover: boolean;\n vertical: boolean;\n thickness: number;\n }>`\n ${(p) => p.alignment}: 0;\n position: absolute;\n width: ${(p) => (p.vertical ? `${p.thickness}px` : '100%')};\n height: ${(p) => (!p.vertical ? `${p.thickness}px` : '100%')};\n pointer-events: all;\n display: flex;\n align-items: center;\n justify-content: center;\n `;\n\n export const SplitContainerIcon = styled.div<{\n width: number;\n height: number;\n hover: boolean;\n theme: DropZoneAlignmentTheme;\n }>`\n border-radius: 2px;\n background: ${(p) => (p.hover ? p.theme.backgroundEntered : p.theme.background)};\n transition:\n background 0.3s,\n width ease-out 0.3s,\n height ease-out 0.3s;\n transition-delay: 0.1s;\n pointer-events: none;\n\n width: ${(p) => (p.hover ? '100%' : `${p.width}px`)};\n height: ${(p) => (p.hover ? '100%' : `${p.height}px`)};\n `;\n}\n","import * as React from 'react';\nimport styled from '@emotion/styled';\nimport { useDroppableModel, useMouseDragEvents, WorkspaceEngine } from '@projectstorm/react-workspaces-core';\nimport { useRef, useState } from 'react';\nimport { TransformZone } from './DropZoneLayerPanelWidget';\nimport { WorkspaceModel } from '@projectstorm/react-workspaces-core';\nimport { DropZoneLayerButtonTheme } from './DropZoneLayerButtonWidget';\n\nexport interface DropZoneTransformWidgetProps {\n engine: WorkspaceEngine;\n zone: TransformZone;\n model: WorkspaceModel;\n theme: Partial<DropZoneLayerButtonTheme>;\n}\n\nexport const DropZoneTransformWidget: React.FC<DropZoneTransformWidgetProps> = (props) => {\n const [entered, setEntered] = useState(false);\n const ref = useRef<HTMLDivElement>(null);\n useMouseDragEvents({\n forwardRef: ref,\n mouseEnter: () => {\n setEntered(true);\n },\n mouseExit: () => {\n setEntered(false);\n }\n });\n useDroppableModel({\n forwardRef: ref,\n engine: props.engine,\n onDrop: (model) => {\n props.zone.transform({\n model,\n zoneModel: props.model,\n engine: props.engine\n });\n }\n });\n return <S.Container ref={ref}>{props.zone.render({ entered, theme: props.theme })}</S.Container>;\n};\nnamespace S {\n export const Container = styled.div``;\n}\n","import * as React from 'react';\nimport * as _ from 'lodash';\nimport { useRef, useState } from 'react';\nimport styled from '@emotion/styled';\nimport {\n Alignment,\n DimensionTrackingWidget,\n UseMouseDragEventsRootWidget,\n WorkspaceEngine,\n WorkspaceModel\n} from '@projectstorm/react-workspaces-core';\nimport { DropZoneAlignmentButtonWidget, DropZoneAlignmentTheme } from './DropZoneAlignmentButtonWidget';\nimport { DropZoneTransformWidget } from './DropZoneTransformWidget';\nimport { DropZoneLayerButtonTheme } from './DropZoneLayerButtonWidget';\n\nexport interface TransformZoneEvent {\n model: WorkspaceModel;\n zoneModel: WorkspaceModel;\n engine: WorkspaceEngine;\n}\n\nexport interface TransformZone {\n transform: (event: TransformZoneEvent) => any;\n render: (options: { entered: boolean; theme: Partial<DropZoneLayerButtonTheme> }) => any;\n key: string;\n}\n\nexport interface SplitZone {\n alignment: Alignment;\n handleDrop: (model: WorkspaceModel, engine: WorkspaceEngine) => any;\n}\n\nexport interface DropZonePanelDirective {\n splitZones: SplitZone[];\n transformZones: TransformZone[];\n}\n\nexport interface DropZoneLayerPanelTheme {\n border?: number;\n borderColor?: string;\n borderColorEntered?: string;\n background?: string;\n backgroundEntered?: string;\n borderRadius?: number;\n blur?: number;\n splitButtonTheme?: DropZoneAlignmentTheme;\n transformButtonTheme?: Partial<DropZoneLayerButtonTheme>;\n}\n\nexport const DefaultDropZoneLayerPanelTheme: DropZoneLayerPanelTheme = {\n border: 2,\n blur: 0,\n borderColor: 'transparent',\n borderColorEntered: '#0096ff',\n background: 'transparent',\n borderRadius: 10,\n backgroundEntered: 'rgba(0, 0, 0, 0.4)'\n};\n\n// !------------------------------------------\n\nexport interface DropZoneLayerPanelWidgetProps {\n model: WorkspaceModel;\n engine: WorkspaceEngine;\n directive: DropZonePanelDirective;\n debug: boolean;\n theme?: DropZoneLayerPanelTheme;\n}\n\nexport const DropZoneLayerPanelWidget: React.FC<DropZoneLayerPanelWidgetProps> = (props) => {\n const ref = useRef<HTMLDivElement>(null);\n const [show, setShow] = useState(false);\n const theme = _.merge({}, DefaultDropZoneLayerPanelTheme, props.theme \|\| {});\n\n return (\n <UseMouseDragEventsRootWidget\n forwardRef={ref}\n mouseEnter={() => {\n setShow(true);\n }}\n mouseExit={() => {\n setShow(false);\n }}\n >\n <S.DimensionTracking theme={theme} entered={show} dimension={props.model.r_dimensions}>\n <S.Inside ref={ref}>\n <S.Layer visible={show}>\n {props.directive.splitZones.map((d) => {\n return (\n <DropZoneAlignmentButtonWidget\n key={d.alignment}\n model={props.model}\n engine={props.engine}\n alignment={d.alignment}\n handleDrop={(model) => {\n d.handleDrop(model, props.engine);\n }}\n theme={theme.splitButtonTheme}\n />\n );\n })}\n </S.Layer>\n <S.Layer2 visible={show}>\n <S.ButtonBar>\n {props.directive.transformZones.map((zone) => {\n return (\n <DropZoneTransformWidget\n theme={theme.transformButtonTheme}\n model={props.model}\n zone={zone}\n engine={props.engine}\n key={zone.key}\n />\n );\n })}\n </S.ButtonBar>\n {props.debug ? <S.Debug>{props.model.id.substring(0, 7)}</S.Debug> : null}\n </S.Layer2>\n </S.Inside>\n </S.DimensionTracking>\n </UseMouseDragEventsRootWidget>\n );\n};\n\nnamespace S {\n export const DimensionTracking = styled(DimensionTrackingWidget)<{\n entered: boolean;\n theme: DropZoneLayerPanelTheme;\n }>`\n border-radius: ${(p) => p.theme.borderRadius}px;\n box-sizing: border-box;\n background: ${(p) => (p.entered ? p.theme.backgroundEntered : p.theme.background)};\n border: solid ${(p) => p.theme.border}px ${(p) => (p.entered ? p.theme.borderColorEntered : p.theme.borderColor)};\n transition:\n border 0.5s,\n background 0.5s;\n pointer-events: all;\n ${(p) => (p.theme.blur ? ` backdrop-filter: blur(${p.theme.blur}px)` : ``)};\n `;\n\n export const Debug = styled.span`\n font-size: 10px;\n color: white;\n `;\n\n export const ButtonBar = styled.div`\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n `;\n\n export const Layer = styled.div<{ visible: boolean }>`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n pointer-events: none;\n opacity: ${(p) => (p.visible ? 1 : 0)};\n transition: opacity 0.3s;\n `;\n\n export const Layer2 = styled.div<{ visible: boolean }>`\n position: absolute;\n box-sizing: border-box;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n padding: 20px;\n pointer-events: none;\n opacity: ${(p) => (p.visible ? 1 : 0)};\n transition: opacity 0.3s;\n `;\n\n export const Inside = styled.div`\n box-sizing: border-box;\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n `;\n}\n","import * as React from 'react';\nimport { Layer, WorkspaceEngine, WorkspaceModel } from '@projectstorm/react-workspaces-core';\nimport { DropZoneLayerPanelTheme, DropZoneLayerPanelWidget, DropZonePanelDirective } from './DropZoneLayerPanelWidget';\n\nexport interface DropZoneLayerOptions {\n getDropZoneForModel: (model: WorkspaceModel) => DropZonePanelDirective \| null;\n theme?: DropZoneLayerPanelTheme;\n modelID: string;\n debugModels: boolean;\n}\n\nexport class DropZoneLayer extends Layer {\n constructor(private options2: DropZoneLayerOptions) {\n super({\n mouseEvents: false\n });\n }\n\n renderLayer(event): React.JSX.Element {\n return (\n <DropZoneLayerWidget\n debugModels={this.options2.debugModels}\n engine={event.engine}\n draggingModel={this.options2.modelID}\n getDropZoneForModel={this.options2.getDropZoneForModel}\n theme={this.options2.theme}\n />\n );\n }\n}\n\n//!--------------- widget ----------------\n\nexport interface DropZoneLayerWidgetProps {\n engine: WorkspaceEngine;\n getDropZoneForModel: (model: WorkspaceModel) => DropZonePanelDirective \| null;\n draggingModel: string;\n debugModels: boolean;\n theme?: DropZoneLayerPanelTheme;\n}\n\nexport const DropZoneLayerWidget: React.FC<DropZoneLayerWidgetProps> = (props) => {\n const draggingModelFlattened =\n props.engine.rootModel\n .flatten()\n .find((m) => m.id === props.draggingModel)\n ?.flatten() \|\| [];\n\n return (\n <>\n {props.engine.rootModel\n .flatten()\n .filter((m) => m.r_visible)\n .filter((m) => {\n // filter out the dragging model and its children (cant add parent to children)\n return !draggingModelFlattened.find((child) => child.id === m.id);\n })\n // dont show a drop zone for the same model\n // .filter((m) => m.id !== props.draggingModel.id)\n .map((m) => {\n const directive = props.getDropZoneForModel(m);\n\n if (!directive) {\n return null;\n }\n\n return (\n <DropZoneLayerPanelWidget\n debug={props.debugModels}\n directive={directive}\n engine={props.engine}\n model={m}\n theme={props.theme}\n key={m.id}\n />\n );\n })}\n </>\n );\n};\n","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@fortawesome/react-fontawesome\");","import * as React from 'react';\nimport styled from '@emotion/styled';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { IconProp } from '@fortawesome/fontawesome-svg-core';\nimport * as _ from 'lodash';\n\nexport interface DropZoneLayerButtonTheme {\n icon?: {\n color?: string;\n size?: number;\n };\n text?: {\n color?: string;\n size?: number;\n };\n borderSize?: number;\n borderRadius?: number;\n borderColor?: string;\n borderColorEntered?: string;\n background?: string;\n backgroundEntered?: string;\n}\n\nexport const DefaultDropZoneLayerButtonTheme: DropZoneLayerButtonTheme = {\n background: 'transparent',\n backgroundEntered: 'rgba(255, 165, 0, 0.56)',\n borderColor: '#0096ff',\n borderColorEntered: 'orange',\n borderSize: 2,\n borderRadius: 5,\n icon: {\n color: 'white',\n size: 22\n },\n text: {\n color: 'white',\n size: 11\n }\n};\n\nexport interface DropZoneLayerButtonWidgetProps {\n icon: IconProp;\n text: string;\n entered: boolean;\n theme?: DropZoneLayerButtonTheme;\n}\n\nexport const DropZoneLayerButtonWidget: React.FC<DropZoneLayerButtonWidgetProps> = (props) => {\n const theme = _.merge({}, DefaultDropZoneLayerButtonTheme, props.theme \|\| {});\n return (\n <S.Container theme={theme} entered={props.entered}>\n <S.Icon theme={theme} icon={props.icon} />\n <S.Text theme={theme}>{props.text}</S.Text>\n </S.Container>\n );\n};\n\nnamespace S {\n export const Icon = styled(FontAwesomeIcon)<{ theme: DropZoneLayerButtonTheme }>`\n font-size: ${(p) => p.theme.icon.size}px;\n color: ${(p) => p.theme.icon.color};\n pointer-events: none;\n `;\n\n export const Text = styled.div<{ theme: DropZoneLayerButtonTheme }>`\n font-size: ${(p) => p.theme.text.size}px;\n color: ${(p) => p.theme.text.color};\n padding-top: 5px;\n pointer-events: none;\n `;\n\n export const Container = styled.div<{ entered: boolean; theme: DropZoneLayerButtonTheme }>`\n border: solid 2px ${(p) => (p.entered ? p.theme.borderColorEntered : p.theme.borderColor)};\n box-sizing: border-box;\n background: ${(p) => (p.entered ? p.theme.backgroundEntered : p.theme.background)};\n transition:\n border 0.3s,\n background 0.3s;\n pointer-events: all;\n width: 60px;\n height: 60px;\n margin: 2px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border-radius: 5px;\n `;\n}\n","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@fortawesome/fontawesome-svg-core\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@fortawesome/free-solid-svg-icons\");","import * as React from 'react';\nimport {\n Alignment,\n WorkspaceCollectionModel,\n WorkspaceEngine,\n WorkspaceModel,\n WorkspaceNodeModel\n} from '@projectstorm/react-workspaces-core';\nimport { DropZoneLayer } from './DropZoneLayer';\nimport { DropZoneLayerPanelTheme, DropZonePanelDirective, TransformZone } from './DropZoneLayerPanelWidget';\nimport { DropZoneLayerButtonWidget } from './DropZoneLayerButtonWidget';\nimport { library } from '@fortawesome/fontawesome-svg-core';\nimport { faCopy } from '@fortawesome/free-solid-svg-icons';\n\nlibrary.add(faCopy);\n\nexport interface DraggingItemBehaviorOptions {\n getDropZoneForModel: (model: WorkspaceModel) => DropZonePanelDirective \| null;\n engine: WorkspaceEngine;\n debug?: boolean;\n getTheme?: () => DropZoneLayerPanelTheme;\n}\n\nexport const draggingItemBehavior = (options: DraggingItemBehaviorOptions) => {\n let layer: DropZoneLayer = null;\n const { engine } = options;\n engine.registerListener({\n modelDragStart: () => {\n if (layer) {\n return;\n }\n layer = new DropZoneLayer({\n modelID: engine.draggingID,\n getDropZoneForModel: options.getDropZoneForModel,\n debugModels: options.debug,\n theme: options.getTheme?.()\n });\n engine.layerManager.addLayer(layer);\n },\n modelDragEnd: () => {\n layer?.remove();\n layer = null;\n }\n });\n};\n\nexport const ReplaceZone: TransformZone = {\n key: 'REPLACE',\n render: ({ entered, theme }) => {\n return <DropZoneLayerButtonWidget theme={theme} entered={entered} text=\"Replace\" icon=\"copy\" />;\n },\n transform: ({ model, zoneModel, engine }) => {\n (zoneModel.parent as WorkspaceCollectionModel).replaceModel(zoneModel, model);\n engine.normalize();\n }\n};\n\nexport interface GetDirectiveForWorkspaceNodeOptions {\n node: WorkspaceModel;\n transformZones?: TransformZone[];\n generateParentNode?: () => WorkspaceNodeModel;\n}\n\nexport const getDirectiveForWorkspaceNode = (\n options: GetDirectiveForWorkspaceNodeOptions\n): DropZonePanelDirective \| null => {\n const { node, transformZones, generateParentNode } = options;\n if (!(node instanceof WorkspaceCollectionModel) && node.parent instanceof WorkspaceNodeModel) {\n return {\n transformZones: [ReplaceZone, ...(transformZones \|\| [])],\n splitZones: [\n {\n alignment: node.parent.vertical ? Alignment.LEFT : Alignment.TOP,\n handleDrop: (model, engine) => {\n const parent = node.parent as WorkspaceNodeModel;\n const m = generateParentNode?.() \|\| new WorkspaceNodeModel();\n m.setVertical(!parent.vertical);\n m.setExpand(model.expandHorizontal, model.expandHorizontal);\n m.addModel(model);\n parent.replaceModel(node, m);\n m.addModel(node);\n engine.normalize();\n }\n },\n {\n alignment: node.parent.vertical ? Alignment.RIGHT : Alignment.BOTTOM,\n handleDrop: (model, engine) => {\n const parent = node.parent as WorkspaceNodeModel;\n const m = generateParentNode?.() \|\| new WorkspaceNodeModel();\n m.setVertical(!parent.vertical);\n m.setExpand(model.expandHorizontal, model.expandHorizontal);\n m.addModel(model);\n parent.replaceModel(node, m);\n m.addModel(node, 0);\n engine.normalize();\n }\n }\n ]\n };\n }\n};\n\nexport * from './DropZoneLayerPanelWidget';\nexport * from './DropZoneLayerButtonWidget';\nexport * from './DropZoneTransformWidget';\nexport * from './DropZoneAlignmentButtonWidget';\nexport * from './DropZoneLayer';\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","getter","__esModule","d","a","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","require","DefaultDropZoneAlignmentTheme","thickness","thicknessIdle","lengthIdle","background","backgroundEntered","DropZoneAlignmentButtonWidget","props","entered","setEntered","useState","ref","useRef","theme","_","useMouseDragEvents","forwardRef","mouseEnter","mouseExit","useDroppableModel","engine","onDrop","handleDrop","vertical","alignment","Alignment","LEFT","RIGHT","width","height","React","S","SplitContainer","hover","SplitContainerIcon","styled","p","DropZoneTransformWidget","model","zone","transform","zoneModel","Container","render","DefaultDropZoneLayerPanelTheme","border","blur","borderColor","borderColorEntered","borderRadius","DropZoneLayerPanelWidget","show","setShow","UseMouseDragEventsRootWidget","DimensionTracking","dimension","r_dimensions","Inside","Layer","visible","directive","splitZones","map","splitButtonTheme","Layer2","ButtonBar","transformZones","transformButtonTheme","debug","Debug","id","substring","DimensionTrackingWidget","DropZoneLayer","constructor","options2","super","mouseEvents","renderLayer","event","DropZoneLayerWidget","debugModels","this","draggingModel","modelID","getDropZoneForModel","draggingModelFlattened","_a","rootModel","flatten","find","m","filter","r_visible","child","DefaultDropZoneLayerButtonTheme","borderSize","icon","color","size","text","DropZoneLayerButtonWidget","Icon","Text","FontAwesomeIcon","library","add","faCopy","draggingItemBehavior","options","layer","registerListener","modelDragStart","draggingID","getTheme","layerManager","addLayer","modelDragEnd","remove","ReplaceZone","_ref","_ref2","parent","replaceModel","normalize","getDirectiveForWorkspaceNode","node","generateParentNode","WorkspaceCollectionModel","WorkspaceNodeModel","TOP","setVertical","setExpand","expandHorizontal","addModel","BOTTOM"],"sourceRoot":""}

+9

-9

package.json

		{
		"name": "@projectstorm/react-workspaces-behavior-panel-dropzone",
		"version": "2.3.11",
		"version": "2.3.12",
		"main": "./dist/index.umd.js",
		@@ -11,13 +11,13 @@ "module": "./dist/index.jsx",
		"dependencies": {
		"@fortawesome/free-solid-svg-icons": "^6.7.1",
		"@fortawesome/react-fontawesome": "^0.2.2",
		"@fortawesome/fontawesome-svg-core": "^6.7.1",
		"react": "^18.3.1",
		"@fortawesome/free-solid-svg-icons": "^7.0.0",
		"@fortawesome/react-fontawesome": "^0.2.3",
		"@fortawesome/fontawesome-svg-core": "^7.0.0",
		"react": "^19.1.1",
		"lodash": "^4.17.21",
		"@emotion/styled": "^11.13.5",
		"@projectstorm/react-workspaces-core": "4.2.1"
		"@emotion/styled": "^11.14.1",
		"@projectstorm/react-workspaces-core": "4.2.2"
		},
		"devDependencies": {
		"@types/lodash": "^4.17.13",
		"@types/react": "^18.3.12"
		"@types/lodash": "^4.17.20",
		"@types/react": "^19.1.9"
		},
		@@ -24,0 +24,0 @@ "scripts": {

dist/tsconfig.tsbuildinfo

Sorry, the diff of this file is not supported yet

@projectstorm/react-workspaces-behavior-panel-dropzone - npm Package Compare versions

Improved metrics

Dependency changes