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

Comparing version 2.3.5 to 2.3.6

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>();\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"]}

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;gBACd,OAAO,IAAI,CAAC;aACb;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): 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"]}

dist/index.jsx.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"index.jsx","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}
+{"version":3,"file":"index.jsx","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

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>();\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":""}

package.json

 {
   "name": "@projectstorm/react-workspaces-behavior-panel-dropzone",
-  "version": "2.3.5",
+  "version": "2.3.6",
   "main": "./dist/index.umd.js",
@@ -11,13 +11,13 @@ "module": "./dist/index.jsx",
   "dependencies": {
-    "@fortawesome/free-solid-svg-icons": "^6.4.0",
-    "@fortawesome/react-fontawesome": "^0.2.0",
-    "@fortawesome/fontawesome-svg-core": "^6.4.0",
-    "react": "^18.2.0",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "react": "^18.3.1",
     "lodash": "^4.17.21",
-    "@emotion/styled": "^11.11.0",
-    "@projectstorm/react-workspaces-core": "2.8.1"
+    "@emotion/styled": "^11.13.0",
+    "@projectstorm/react-workspaces-core": "3.0.0"
   },
   "devDependencies": {
-    "@types/lodash": "^4.14.195",
-    "@types/react": "^18.2.14"
+    "@types/lodash": "^4.17.9",
+    "@types/react": "^18.3.9"
   },
@@ -24,0 +24,0 @@ "scripts": {

No alert changes

Improved metrics

Total package byte prevSize

128394

3.52%

Dependency changes

• + Added

  @projectstorm/react-workspaces-core@3.0.0
  (transitive)

• + Added

  uuid@10.0.0
  (transitive)

• - Removed

  @projectstorm/react-workspaces-core@2.8.1
  (transitive)

• - Removed

  uuid@9.0.1
  (transitive)

• Updated

  @emotion/styled@^11.13.0

• Updated

  @fortawesome/fontawesome-svg-core@^6.6.0

• Updated

  @fortawesome/free-solid-svg-icons@^6.6.0

• Updated

  @fortawesome/react-fontawesome@^0.2.2

• Updated

  @projectstorm/react-workspaces-core@3.0.0

• Updated

  react@^18.3.1