Skip to content

Commit

Permalink
fix rendering
Browse files Browse the repository at this point in the history
  • Loading branch information
@zindlerb
zindlerb committed Feb 11, 2017
1 parent c86c0b5 commit 3eb76c3
Show file tree
Hide file tree
Showing 12 changed files with 243 additions and 202 deletions.
55 changes: 11 additions & 44 deletions __tests__/actions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,50 +3,17 @@

var _ = require('lodash');

//var { getNewStore, actions } = require('../app/stateManager.js');
//var { componentTypes } = require('../app/constants.js');
var { getNewStore, actions } = require('../app/stateManager.js');
var { componentTypes } = require('../app/constants.js');

// Requires mocking the file save...
/*
describe('save and load sites', () => {
var store = getNewStore();
it('saves and loads simple state correctly', () => {
describe('dumb', () => {
it('dumb', () => {
expect(true).toBeTruthy();
});
});

/* describe('Creates variants correctly', () => {
* const store = getNewStore();
* const state = store.getState();
* let rootComponent;
* const currentPage = _.find(state.pages, (page) => {
* return page.id === state.currentPageId;
* });
*
* const rootComponentId = currentPage.componentTreeId;
*
* store.dispatch(actions.addVariant(componentTypes.HEADER, rootComponentId));
* const headerVariantId = state.siteComponents._lastCreatedId;
* rootComponent = state.siteComponents.components[rootComponentId];
*
* it('Adds variant', () => {
* expect(_.some(rootComponent.childIds, (childId) => {
* return childId === headerVariantId;
* })).toBeTruthy();
* });
*
* it('replaces self with variant', () => {
* store.dispatch(actions.createComponentBlock(headerVariantId));
* rootComponent = store.getState().siteComponents.components[rootComponentId];
*
* expect(_.some(rootComponent.childIds, (childId) => {
* return childId === headerVariantId;
* })).toBeFalsy();
*
* const newVariantId = state.siteComponents.components[headerVariantId].variantIds[0];
* const newVariant = state.siteComponents.components[newVariantId];
*
* expect(_.some(rootComponent.childIds, (childId) => {
* return childId === newVariantId;
* })).toBeTruthy();
*
* expect(newVariant.parentId).toBeDefined();
* });
* });*/
*/
14 changes: 1 addition & 13 deletions app/app.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
// ES6 Component
// Import React and ReactDOM
import fs from 'fs';
import { remote } from 'electron';
import { DragDropContext } from 'react-dnd';
Expand All @@ -15,7 +13,6 @@ import { store, actions } from './stateManager';
import OpenSiteModal from './containers/OpenSiteModal';
import LeftPanel from './containers/LeftPanel';
import StaticRenderer from './containers/StaticRenderer';
import DropPointRenderer from './containers/DropPointRenderer';
import ComponentMenu from './containers/ComponentMenu';
import ViewChoiceDropdown from './components/ViewChoiceDropdown';
import Attributes from './containers/Attributes';
Expand Down Expand Up @@ -111,7 +108,6 @@ const Editor = React.createClass({
<div className="sidebar h-100 flex-none">
<Attributes actions={actions} />
</div>
<DropPointRenderer />
<OpenSiteModal actions={actions} />
</div>
);
Expand All @@ -134,17 +130,9 @@ const Editor = React.createClass({
},
});

/*
Top level inject just actions
All components connect from there.
Turn off pure for all.
*/

const connector = connect(
(state) => {
return {
currentMainView: state.currentMainView
}
return { currentMainView: state.get('currentMainView') };
},
(dispatch) => {
return { actions: bindActionCreators(actions, dispatch) };
Expand Down
82 changes: 43 additions & 39 deletions app/base_components.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -391,7 +391,7 @@ ComponentsContainer.prototype = {

_getName(componentMap, componentId) {
let component = componentMap.get(componentId);
if (!component.has('name')) {
if (!component.get('name')) {
return componentMap.get(component.get('masterId')).get('name');
} else {
return component.get('name');
Expand Down Expand Up @@ -463,52 +463,56 @@ ComponentsContainer.prototype = {
*/

// TD: if I only take certain properties I can make this cheaper
let componentJs = componentMap.get(componentId).toJS();
let breakpoint = NONE;
let state = NONE;
let defaultFont = 16; // TD: read from dom.

if (context) {
if (context.width > (30 * defaultFont) && context.width < (60 * defaultFont)) {
breakpoint = breakpointTypes.MEDIUM;
} if (context.width > (60 * defaultFont)) {
breakpoint = breakpointTypes.LARGE;
}
if (componentId) {
let componentJs = componentMap.get(componentId).toJS();
let breakpoint = NONE;
let state = NONE;
let defaultFont = 16; // TD: read from dom.

if (context) {
if (context.width > (30 * defaultFont) && context.width < (60 * defaultFont)) {
breakpoint = breakpointTypes.MEDIUM;
} if (context.width > (60 * defaultFont)) {
breakpoint = breakpointTypes.LARGE;
}

if (context.states[componentId]) {
state = context.states[componentId];
if (context.states[componentId]) {
state = context.states[componentId];
}
}
}

let { sx, htmlProperties } = this._getRenderableProperties(
componentMap,
componentId,
{
breakpoint,
state
}
);
let { sx, htmlProperties } = this._getRenderableProperties(
componentMap,
componentId,
{
breakpoint,
state
}
);

componentJs.sx = sx;
componentJs.htmlProperties = htmlProperties;
componentJs.index = index;
componentJs.name = this._getName(componentMap, componentId);
componentJs.sx = sx;
componentJs.htmlProperties = htmlProperties;
componentJs.index = index;
componentJs.name = this._getName(componentMap, componentId);

if (componentJs.parentId) {
componentJs.parent = componentMap.get(componentJs.parentId).toJS();
}
if (componentJs.parentId) {
componentJs.parent = componentMap.get(componentJs.parentId).toJS();
}

if (componentJs.masterId) {
componentJs.master = componentMap.get(componentJs.masterId).toJS();
}
if (componentJs.masterId) {
componentJs.master = componentMap.get(componentJs.masterId).toJS();
}

let children = [];
componentJs.childIds.forEach((id, ind) => {
children.push(this._getRenderTree(componentMap, id, context, ind));
});
componentJs.children = children;
let children = [];
componentJs.childIds.forEach((id, ind) => {
children.push(this._getRenderTree(componentMap, id, context, ind));
});
componentJs.children = children;

return componentJs;
return componentJs;
} else {
return;
}
},

_hydrateComponent(componentMap, componentId) {
Expand Down
39 changes: 23 additions & 16 deletions app/containers/Attributes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -348,23 +348,30 @@ const Attributes = function (props) {
}

export default connect((state) => {
const componentsContainer = state.get('componentsContainer');
const activeComponentId = state.get('activeComponentId');
const activeComponentState = state.get('activeComponentState');
const activeComponentBreakpoint = state.get('activeComponentBreakpoint');

return {
componentName: componentsContainer.getName(activeComponentId),
componentType: componentsContainer.getIn([
activeComponentId,
'componentType'
]),
attributes: componentsContainer.getAttributes(activeComponentId, {
state: activeComponentState,
breakpoint: activeComponentBreakpoint,
}),
componentId: activeComponentId,
componentState: activeComponentState,
componentBreakpoint: activeComponentBreakpoint,
if (activeComponentId) {
const componentsContainer = state.get('componentsContainer');
const activeComponentState = state.get('activeComponentState');
const activeComponentBreakpoint = state.get('activeComponentBreakpoint');

return {
componentName: componentsContainer.getName(activeComponentId),
componentType: componentsContainer.getIn([
activeComponentId,
'componentType'
]),
attributes: componentsContainer.getAttributes(activeComponentId, {
state: activeComponentState,
breakpoint: activeComponentBreakpoint,
}),
componentId: activeComponentId,
componentState: activeComponentState,
componentBreakpoint: activeComponentBreakpoint,
}
} else {
return {
componentId: activeComponentId
};
}
}, null, null, { pure: false })(Attributes);
20 changes: 15 additions & 5 deletions app/containers/LeftPanel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,9 +69,10 @@ const LeftPanel = React.createClass({
<h2 className="suggestion">No Page Selected</h2>
);
} else if (activePanel === leftPanelTypes.TREE) {
body = (
<div>
<SidebarHeader text="Component Tree" />
let componentTreeElement;

if (componentTreeId) {
componentTreeElement = (
<ComponentTree
node={componentsContainer.getRenderTree(componentTreeId)}
actions={this.props.actions}
Expand All @@ -82,6 +83,17 @@ const LeftPanel = React.createClass({
hoveredComponentId,
}}
/>
);
} else {
componentTreeElement = (
<p>Please select a page</p>
);
}

body = (
<div>
<SidebarHeader text="Component Tree" />
{ componentTreeElement }
</div>
);
} else if (activePanel === leftPanelTypes.DETAILS) {
Expand Down Expand Up @@ -133,8 +145,6 @@ const LeftPanel = React.createClass({
},
});



export default connect((state) => {
/*
Next:
Expand Down
2 changes: 1 addition & 1 deletion app/containers/OpenSiteModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ const OpenSiteModal = React.createClass({
export default connect(
function (state) {
return {
isOpen: !state.hasIn(['fileMetaData', filename]),
isOpen: !state.hasIn(['fileMetaData', 'filename']),
recentSites: state.get('recentSites').toJS()
}
}
Expand Down
Loading

0 comments on commit 3eb76c3

Please sign in to comment.