work on the new theming system

frontend/code/components/align.ts

@@ -1,6 +1,6 @@
 import { componentsById } from '../componentManagement';
 import { LayoutContext } from '../layouting';
-import { ComponentId } from '../models';
+import { ComponentId } from '../dataModels';
 import { ComponentBase, ComponentState } from './componentBase';
 
 export type AlignState = ComponentState & {

frontend/code/components/button.ts

@@ -1,5 +1,5 @@
 import { applyColorSet } from '../designApplication';
-import { ColorSet, ComponentId } from '../models';
+import { ColorSet, ComponentId } from '../dataModels';
 import { ComponentBase, ComponentState } from './componentBase';
 import { MDCRipple } from '@material/ripple';
 import { LayoutContext } from '../layouting';

frontend/code/components/card.ts

@@ -1,5 +1,5 @@
 import { applyColorSet } from '../designApplication';
-import { ColorSet, ComponentId } from '../models';
+import { ColorSet, ComponentId } from '../dataModels';
 import { ComponentBase, ComponentState } from './componentBase';
 import { SingleContainer } from './singleContainer';
 

frontend/code/components/classContainer.ts

@@ -1,6 +1,6 @@
 import { SingleContainer } from './singleContainer';
 import { ComponentBase, ComponentState } from './componentBase';
-import { ComponentId } from '../models';
+import { ComponentId } from '../dataModels';
 
 export type ClassContainerState = ComponentState & {
     _type_: 'ClassContainer-builtin';

frontend/code/components/codeExplorer.ts

@@ -2,7 +2,7 @@ import hljs from 'highlight.js/lib/common';
 import { componentsByElement, componentsById } from '../componentManagement';
 import { getElementDimensions, getElementHeight } from '../layoutHelpers';
 import { LayoutContext } from '../layouting';
-import { ComponentId } from '../models';
+import { ComponentId } from '../dataModels';
 import { ComponentBase, ComponentState } from './componentBase';
 import { applyIcon } from '../designApplication';
 import { commitCss, disableTransitions, enableTransitions } from '../utils';

frontend/code/components/colorPicker.ts

@@ -1,4 +1,4 @@
-import { Color } from '../models';
+import { Color } from '../dataModels';
 import { ComponentBase, ComponentState } from './componentBase';
 import { hsvToRgb, rgbToHsv, rgbToHex, rgbaToHex } from '../colorConversion';
 import { LayoutContext } from '../layouting';

frontend/code/components/componentBase.ts

@@ -9,7 +9,7 @@ import {
     ClickHandler,
 } from '../eventHandling';
 import { DebuggerConnectorComponent } from './debuggerConnector';
-import { ComponentId } from '../models';
+import { ComponentId } from '../dataModels';
 
 /// Base for all component states. Updates received from the backend are
 /// partial, hence most properties may be undefined.

frontend/code/components/componentTree.ts

@@ -1,6 +1,6 @@
 import { componentsById, getRootScroller } from '../componentManagement';
 import { applyIcon } from '../designApplication';
-import { ComponentId } from '../models';
+import { ComponentId } from '../dataModels';
 import { ComponentBase, ComponentState } from './componentBase';
 import { DebuggerConnectorComponent } from './debuggerConnector';
 

frontend/code/components/customListItem.ts

@@ -2,7 +2,7 @@ import { MDCRipple } from '@material/ripple';
 import { ComponentBase, ComponentState } from './componentBase';
 import { componentsById } from '../componentManagement';
 import { LayoutContext } from '../layouting';
-import { ComponentId } from '../models';
+import { ComponentId } from '../dataModels';
 
 const PADDING_X: number = 1.5;
 const PADDING_Y: number = 0.7;

frontend/code/components/drawer.ts

@@ -3,7 +3,7 @@ import { commitCss } from '../utils';
 import { componentsById } from '../componentManagement';
 import { ComponentBase, ComponentState } from './componentBase';
 import { LayoutContext } from '../layouting';
-import { ComponentId } from '../models';
+import { ComponentId } from '../dataModels';
 
 export type DrawerState = ComponentState & {
     _type_: 'Drawer-builtin';

frontend/code/components/flowContainer.ts

@@ -1,5 +1,5 @@
 import { LayoutContext } from '../layouting';
-import { ComponentId } from '../models';
+import { ComponentId } from '../dataModels';
 import { ComponentBase, ComponentState } from './componentBase';
 
 export type FlowState = ComponentState & {

frontend/code/components/fundamentalRootComponent.ts

@@ -1,7 +1,7 @@
 import { pixelsPerRem } from '../app';
 import { componentsById } from '../componentManagement';
 import { LayoutContext } from '../layouting';
-import { ComponentId } from '../models';
+import { ComponentId } from '../dataModels';
 import { setConnectionLostPopupVisibleUnlessGoingAway } from '../rpc';
 import { ComponentBase, ComponentState } from './componentBase';
 

frontend/code/components/grid.ts

@@ -1,6 +1,6 @@
 import { componentsById } from '../componentManagement';
 import { LayoutContext } from '../layouting';
-import { ComponentId } from '../models';
+import { ComponentId } from '../dataModels';
 import { range } from '../utils';
 import { ComponentBase, ComponentState } from './componentBase';
 

frontend/code/components/icon.ts

@@ -1,4 +1,4 @@
-import { ColorSet, Fill } from '../models';
+import { ColorSet, Fill } from '../dataModels';
 import { ComponentBase, ComponentState } from './componentBase';
 import { applyFillToSVG } from '../designApplication';
 import { pixelsPerRem } from '../app';

frontend/code/components/keyEventListener.ts

@@ -1,6 +1,6 @@
 import { SingleContainer } from './singleContainer';
 import { ComponentBase, ComponentState } from './componentBase';
-import { ComponentId } from '../models';
+import { ComponentId } from '../dataModels';
 import { firstDefined } from '../utils';
 
 // https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_code_values

frontend/code/components/linearContainers.ts

@@ -1,7 +1,7 @@
 import { pixelsPerRem } from '../app';
 import { componentsById } from '../componentManagement';
 import { LayoutContext } from '../layouting';
-import { ComponentId } from '../models';
+import { ComponentId } from '../dataModels';
 import { ComponentBase, ComponentState } from './componentBase';
 
 export type LinearContainerState = ComponentState & {
@@ -364,7 +364,7 @@ export class ColumnComponent extends LinearContainer {
             let spacing =
                 Math.max(this.children.size - 1, 0) * this.state.spacing;
             let proportionSize =
-                (this.allocatedWidth - spacing) / this.totalProportions;
+                (this.allocatedHeight - spacing) / this.totalProportions;
 
             for (let i = 0; i < proportions.length; i++) {
                 let child = componentsById[this.state.children[i]]!;

frontend/code/components/link.ts

@@ -1,7 +1,7 @@
 import { componentsById } from '../componentManagement';
 import { getTextDimensions } from '../layoutHelpers';
 import { LayoutContext } from '../layouting';
-import { ComponentId } from '../models';
+import { ComponentId } from '../dataModels';
 import { ComponentBase, ComponentState } from './componentBase';
 
 export type LinkState = ComponentState & {

frontend/code/components/listView.ts

@@ -1,5 +1,5 @@
 import { componentsByElement } from '../componentManagement';
-import { ComponentId } from '../models';
+import { ComponentId } from '../dataModels';
 import { ComponentBase } from './componentBase';
 import { CustomListItemComponent } from './customListItem';
 import { HeadingListItemComponent } from './headingListItem';

frontend/code/components/margin.ts

@@ -1,7 +1,7 @@
 import { ComponentBase, ComponentState } from './componentBase';
 import { componentsById } from '../componentManagement';
 import { LayoutContext } from '../layouting';
-import { ComponentId } from '../models';
+import { ComponentId } from '../dataModels';
 
 export type MarginState = ComponentState & {
     _type_: 'Margin-builtin';

frontend/code/components/mediaPlayer.ts

@@ -1,7 +1,7 @@
 import { fillToCss } from '../cssUtils';
 import { applyIcon } from '../designApplication';
 import { LayoutContext } from '../layouting';
-import { Fill } from '../models';
+import { Fill } from '../dataModels';
 import { sleep } from '../utils';
 import { ComponentBase, ComponentState } from './componentBase';
 
@@ -209,7 +209,11 @@ export class MediaPlayerComponent extends ComponentBase {
         this._isFullScreen = document.fullscreenElement === this.element;
 
         if (this._isFullScreen) {
-            applyIcon(this.fullscreenButton, 'material/fullscreen-exit', 'white');
+            applyIcon(
+                this.fullscreenButton,
+                'material/fullscreen-exit',
+                'white'
+            );
         } else {
             applyIcon(this.fullscreenButton, 'material/fullscreen', 'white');
         }
@@ -644,7 +648,11 @@ export class MediaPlayerComponent extends ComponentBase {
             this.volumeCurrent.style.width = `${humanVolume * 100}%`;
 
             if (humanVolume < 0.5) {
-                applyIcon(this.muteButton, 'material/volume-down:fill', 'white');
+                applyIcon(
+                    this.muteButton,
+                    'material/volume-down:fill',
+                    'white'
+                );
             } else {
                 applyIcon(this.muteButton, 'material/volume-up:fill', 'white');
             }

frontend/code/components/mouseEventListener.ts

@@ -3,7 +3,7 @@ import { SingleContainer } from './singleContainer';
 import { ComponentBase, ComponentState } from './componentBase';
 import { DragHandler } from '../eventHandling';
 import { tryGetComponentByElement } from '../componentManagement';
-import { ComponentId } from '../models';
+import { ComponentId } from '../dataModels';
 
 function eventMouseButtonToString(event: MouseEvent): object {
     return {

frontend/code/components/nodeInput.ts

@@ -1,6 +1,6 @@
 import { ComponentBase, ComponentState } from './componentBase';
 import { LayoutContext } from '../layouting';
-import { Color } from '../models';
+import { Color } from '../dataModels';
 import { getTextDimensions } from '../layoutHelpers';
 import { colorToCssString } from '../cssUtils';
 

frontend/code/components/nodeOutput.ts

@@ -1,6 +1,6 @@
 import { ComponentBase, ComponentState } from './componentBase';
 import { LayoutContext } from '../layouting';
-import { Color } from '../models';
+import { Color } from '../dataModels';
 import { getTextDimensions } from '../layoutHelpers';
 import { colorToCssString } from '../cssUtils';
 

frontend/code/components/overlay.ts

@@ -1,6 +1,6 @@
 import { componentsById, getRootComponent } from '../componentManagement';
 import { LayoutContext } from '../layouting';
-import { ComponentId } from '../models';
+import { ComponentId } from '../dataModels';
 import { ComponentBase, ComponentState } from './componentBase';
 
 export type OverlayState = ComponentState & {

frontend/code/components/placeholder.ts

@@ -1,6 +1,6 @@
 import { SingleContainer } from './singleContainer';
 import { ComponentBase, ComponentState } from './componentBase';
-import { ComponentId } from '../models';
+import { ComponentId } from '../dataModels';
 
 export type PlaceholderState = ComponentState & {
     _type_: 'Placeholder'; // Not 'Placeholder-builtin'!

frontend/code/components/plot.ts

@@ -1,7 +1,7 @@
 import { pixelsPerRem } from '../app';
 import { fillToCss } from '../cssUtils';
 import { LayoutContext } from '../layouting';
-import { Fill } from '../models';
+import { Fill } from '../dataModels';
 import { ComponentBase, ComponentState } from './componentBase';
 
 type PlotlyPlot = {

frontend/code/components/popup.ts

@@ -2,7 +2,7 @@ import { pixelsPerRem } from '../app';
 import { componentsById } from '../componentManagement';
 import { applyColorSet } from '../designApplication';
 import { LayoutContext } from '../layouting';
-import { ColorSet, ComponentId } from '../models';
+import { ColorSet, ComponentId } from '../dataModels';
 import { ComponentBase, ComponentState } from './componentBase';
 
 export type PopupState = ComponentState & {

frontend/code/components/progressCircle.ts

@@ -1,5 +1,5 @@
 import { applyColorSet } from '../designApplication';
-import { ColorSet } from '../models';
+import { ColorSet } from '../dataModels';
 import { ComponentBase, ComponentState } from './componentBase';
 
 export type ProgressCircleState = ComponentState & {

frontend/code/components/rectangle.ts

@@ -1,4 +1,4 @@
-import { Color, ComponentId, Fill } from '../models';
+import { Color, ComponentId, Fill } from '../dataModels';
 import { colorToCssString, fillToCssString } from '../cssUtils';
 import { ComponentBase, ComponentState } from './componentBase';
 import { MDCRipple } from '@material/ripple';

frontend/code/components/revealer.ts

@@ -4,7 +4,7 @@ import { applyIcon } from '../designApplication';
 import { easeInOut } from '../easeFunctions';
 import { getTextDimensions } from '../layoutHelpers';
 import { LayoutContext, updateLayout } from '../layouting';
-import { ComponentId, TextStyle } from '../models';
+import { ComponentId, TextStyle } from '../dataModels';
 import { firstDefined } from '../utils';
 import { ComponentBase, ComponentState } from './componentBase';
 

frontend/code/components/scrollContainer.ts

@@ -1,7 +1,7 @@
 import { pixelsPerRem, scrollBarSize } from '../app';
 import { componentsById } from '../componentManagement';
 import { LayoutContext } from '../layouting';
-import { ComponentId } from '../models';
+import { ComponentId } from '../dataModels';
 import { ComponentBase, ComponentState } from './componentBase';
 
 export type ScrollContainerState = ComponentState & {

frontend/code/components/scrollTarget.ts

@@ -1,4 +1,4 @@
-import { ComponentId } from '../models';
+import { ComponentId } from '../dataModels';
 import { ComponentBase, ComponentState } from './componentBase';
 import { SingleContainer } from './singleContainer';
 

frontend/code/components/separator.ts

@@ -1,4 +1,4 @@
-import { Color } from '../models';
+import { Color } from '../dataModels';
 import { ComponentBase, ComponentState } from './componentBase';
 import { pixelsPerRem } from '../app';
 import { LayoutContext } from '../layouting';

frontend/code/components/slideshow.ts

@@ -1,7 +1,7 @@
 import { ComponentBase, ComponentState } from './componentBase';
 import { easeIn, easeInOut, easeOut } from '../easeFunctions';
 import { SingleContainer } from './singleContainer';
-import { ComponentId } from '../models';
+import { ComponentId } from '../dataModels';
 
 const switchDuration = 0.8;
 const progressBarFadeDuration = 0.2;

frontend/code/components/stack.ts

@@ -1,4 +1,4 @@
-import { ComponentId } from '../models';
+import { ComponentId } from '../dataModels';
 import { ComponentBase, ComponentState } from './componentBase';
 import { SingleContainer } from './singleContainer';
 

frontend/code/components/switcher.ts

@@ -1,4 +1,4 @@
-import { ComponentId } from '../models';
+import { ComponentId } from '../dataModels';
 import { ComponentBase, ComponentState } from './componentBase';
 import { componentsById } from '../componentManagement';
 import { LayoutContext, updateLayout } from '../layouting';

frontend/code/components/switcherBar.ts

@@ -1,6 +1,6 @@
 import { ComponentBase, ComponentState } from './componentBase';
 import { MDCRipple } from '@material/ripple';
-import { ColorSet, TextStyle } from '../models';
+import { ColorSet, TextStyle } from '../dataModels';
 import { applyColorSet } from '../designApplication';
 import { getTextDimensions } from '../layoutHelpers';
 import { LayoutContext } from '../layouting';

frontend/code/components/text.ts

@@ -1,4 +1,4 @@
-import { TextStyle } from '../models';
+import { TextStyle } from '../dataModels';
 import { textStyleToCss } from '../cssUtils';
 import { ComponentBase, ComponentState } from './componentBase';
 import { LayoutContext } from '../layouting';

frontend/code/components/themeContextSwitcher.ts

@@ -1,5 +1,5 @@
 import { applyColorSet } from '../designApplication';
-import { ColorSet, ComponentId } from '../models';
+import { ColorSet, ComponentId } from '../dataModels';
 import { ComponentBase, ComponentState } from './componentBase';
 import { SingleContainer } from './singleContainer';
 

frontend/code/components/tooltip.ts

@@ -1,6 +1,6 @@
 import { componentsById } from '../componentManagement';
 import { LayoutContext } from '../layouting';
-import { ComponentId } from '../models';
+import { ComponentId } from '../dataModels';
 import { ComponentBase, ComponentState } from './componentBase';
 import { SingleContainer } from './singleContainer';