diff --git a/tornado-frontend/src/routes/content/widgets/react-canvas/ConceptCanvasEngine.ts b/tornado-frontend/src/routes/content/widgets/react-canvas/ConceptCanvasEngine.ts index b507134..4d39e52 100644 --- a/tornado-frontend/src/routes/content/widgets/react-canvas/ConceptCanvasEngine.ts +++ b/tornado-frontend/src/routes/content/widgets/react-canvas/ConceptCanvasEngine.ts @@ -12,6 +12,7 @@ import { ImageLayerFactory } from './image-layer/ImageLayerFactory'; import { DefaultCanvasState } from './DefaultCanvasState'; import { CanvasEngineListener } from '@projectstorm/react-canvas-core'; import { ConceptCanvasModel } from './ConceptCanvasModel'; +import { ControlsLayerFactory } from './controls-layer/ControlsLayerFactory'; export class ConceptCanvasEngine extends CanvasEngine { elementBank: FactoryBank; @@ -26,6 +27,8 @@ export class ConceptCanvasEngine extends CanvasEngine = (props) => { + const forceUpdate = useForceUpdate(); + useEffect(() => { + const l = props.model.registerListener({ + selectionChanged: () => { + forceUpdate(); + } + }); + return l.deregister; + }, []); + if (!props.model.isSelected()) { + return null; + } + + const canvas = (props.model.getParent() as ImageLayerModel).getParent(); + const zoom = canvas.getZoomLevel() / 100; + + return ( + + ); +}; +namespace S { + export const Container = styled.div` + position: absolute; + border: solid 2px ${(p) => p.theme.editor.selected}; + box-shadow: 0 0 20px ${(p) => p.theme.editor.selectedShadow}; + box-sizing: border-box; + pointer-events: none; + `; +} diff --git a/tornado-frontend/src/routes/content/widgets/react-canvas/controls-layer/ControlsLayerFactory.tsx b/tornado-frontend/src/routes/content/widgets/react-canvas/controls-layer/ControlsLayerFactory.tsx new file mode 100644 index 0000000..dcc4e20 --- /dev/null +++ b/tornado-frontend/src/routes/content/widgets/react-canvas/controls-layer/ControlsLayerFactory.tsx @@ -0,0 +1,54 @@ +import * as React from 'react'; +import { + AbstractReactFactory, + FactoryBank, + GenerateModelEvent, + GenerateWidgetEvent, + LayerModel, + LayerModelGenerics +} from '@projectstorm/react-canvas-core'; +import { ImageElement, ImageElementFactory } from '../image-element/ImageElementFactory'; +import * as _ from 'lodash'; +import { ConceptCanvasEngine } from '../ConceptCanvasEngine'; +import { ConceptCanvasModel } from '../ConceptCanvasModel'; +import { ControlsElementWidget } from './ControlsElementWidget'; + +export class ControlsLayerFactory extends AbstractReactFactory { + static TYPE = 'concept/controls/layer'; + + constructor() { + super(ControlsLayerFactory.TYPE); + } + + generateModel(event: GenerateModelEvent): ControlsLayerModel { + return new ControlsLayerModel(); + } + + generateReactWidget(event: GenerateWidgetEvent): JSX.Element { + return ( + <> + {_.map(event.model.getParent().getLayers()[0].getModels(), (m: ImageElement) => { + return ; + })} + + ); + } +} + +export type ControlsLayerGenerics = LayerModelGenerics & { + ENGINE: ConceptCanvasEngine; + PARENT: ConceptCanvasModel; +}; + +export class ControlsLayerModel extends LayerModel { + constructor() { + super({ + type: ControlsLayerFactory.TYPE, + transformed: false + }); + } + + getChildModelFactoryBank(engine: ControlsLayerGenerics['ENGINE']): FactoryBank { + return engine.elementBank; + } +} diff --git a/tornado-frontend/src/routes/content/widgets/react-canvas/image-element/ImageElementWidget.tsx b/tornado-frontend/src/routes/content/widgets/react-canvas/image-element/ImageElementWidget.tsx index b967e3f..d52998d 100644 --- a/tornado-frontend/src/routes/content/widgets/react-canvas/image-element/ImageElementWidget.tsx +++ b/tornado-frontend/src/routes/content/widgets/react-canvas/image-element/ImageElementWidget.tsx @@ -10,20 +10,9 @@ export interface ImageElementWidgetProps { } export const ImageElementWidget: React.FC = (props) => { - const forceUpdate = useForceUpdate(); - useEffect(() => { - const l = props.model.registerListener({ - selectionChanged: () => { - forceUpdate(); - } - }); - return l.deregister; - }, []); - return ( = (props) => ); }; namespace S { - export const Container = styled.div<{ selected: boolean }>` + export const Container = styled.div` position: absolute; - border: solid 2px ${(p) => (p.selected ? p.theme.editor.selected : 'transparent')}; - ${(p) => (p.selected ? `box-shadow: 0 0 20px ${p.theme.editor.selectedShadow}` : '')}; box-sizing: border-box; pointer-events: all; `;