tandem-front-end
Version:
Visual editor for web components
83 lines • 3.77 kB
JavaScript
;
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
require("./index.scss");
var React = require("react");
var cx = require("classnames");
var state_1 = require("../../../../../../../state");
var recompose_1 = require("recompose");
var layers_1 = require("../../../../../../layers");
var tandem_common_1 = require("tandem-common");
var actions_1 = require("../../../../../../../actions");
var DRAG_TYPE = "SYNTHETIC_NODE";
var isMovableNode = function (_a) {
var node = _a.node, inComponentInstance = _a.inComponentInstance;
var sn = node;
return !node.immutable;
};
var canDropNode = function (child, _a, offset) {
var node = _a.node, inComponentInstance = _a.inComponentInstance;
if (child.isContentNode) {
if (child.isCreatedFromComponent) {
if (child.isComponentInstance) {
return true;
}
else if (offset !== tandem_common_1.TreeMoveOffset.APPEND && node.isContentNode) {
return true;
}
else {
return false;
}
}
}
return true;
};
var TreeNodeLayerComponent = layers_1.createTreeLayerComponents({
actionCreators: {
treeLayerDroppedNode: actions_1.pcLayerDroppedNode,
treeLayerClick: actions_1.pcLayerClick,
treeLayerExpandToggleClick: actions_1.pcLayerExpandToggleClick,
treeLayerMouseOut: actions_1.pcLayerMouseOut,
treeLayerMouseOver: actions_1.pcLayerMouseOver,
treeLayerDoubleClick: actions_1.pcLayerDoubleClick,
treeLayerLabelChanged: actions_1.pcLayerLabelChanged,
treeLayerEditLabelBlur: actions_1.pcEditLayerLabelBlur
},
attributeOptions: {
nodeLabelAttr: function (node) { return node.label; },
expandAttr: function (node) {
return node.metadata[state_1.SyntheticVisibleNodeMetadataKeys.EXPANDED];
},
editingLabelAttr: function (node) {
return node.metadata[state_1.SyntheticVisibleNodeMetadataKeys.EDITING_LABEL];
}
},
canDrop: canDropNode,
canDrag: isMovableNode,
dragType: DRAG_TYPE,
getLabelProps: function (attribs, props) { return (__assign({}, attribs, { className: cx(attribs.className, {
"is-component-instance": props.node.isComponentInstance,
immutable: props.node.immutable,
"is-component-root": props.isContentNode &&
props.node.isCreatedFromComponent &&
!props.node.isComponentInstance
}) })); },
layerRenderer: function (Base) { return function (props) {
return (React.createElement(Base, __assign({}, props, { isContentNode: props.node.isContentNode })));
}; }
}).TreeNodeLayerComponent;
var BaseFrameLayersComponent = function (_a) {
var hoveringNodeIds = _a.hoveringNodeIds, selectedReferences = _a.selectedReferences, dispatch = _a.dispatch, frames = _a.frames, document = _a.document;
return (React.createElement("div", { className: "m-synthetic-window-layers" }, frames.map(function (frame) {
return (React.createElement(TreeNodeLayerComponent, { key: frame.contentNodeId, node: tandem_common_1.getNestedTreeNodeById(frame.contentNodeId, document), depth: 0, hoveringNodeIds: hoveringNodeIds, selectedNodeIds: selectedReferences, dispatch: dispatch }));
})));
};
exports.FrameLayersComponent = recompose_1.compose(recompose_1.pure)(BaseFrameLayersComponent);
//# sourceMappingURL=index.js.map