boomack 0.15.0-preview6 → 0.15.0-preview7

package/client/public/js/client.js

@@ -214,12 +214,13 @@ window.boomack = window.boomack || {};
     }
 
 	function getSlotInnerSize(slotE) {
+		var slotBackgroundE = slotE.find('.slot-background');
 		var contentWrapperE = slotE.find('.slot-content-wrapper');
 		return {
-			width: contentWrapperE.innerWidth() -
+			width: slotBackgroundE.innerWidth() -
 				parseFloat(contentWrapperE.css('padding-left')) -
 				parseFloat(contentWrapperE.css('padding-right')),
-			height: contentWrapperE.innerHeight() -
+			height: slotBackgroundE.innerHeight() -
 				parseFloat(contentWrapperE.css('padding-top')) -
 				parseFloat(contentWrapperE.css('padding-bottom')),
 		};

package/client/views/panel.ejs

@@ -71,8 +71,11 @@
 				themeOverride,
 				themeProperties,
 				panel,
+				forceMargin,
 				tools,
 				toolbars,
+				borders,
+				showSlotIds,
 				offline,
 			}); %><%
 		} else {
@@ -82,8 +85,11 @@
 				themeOverride,
 				themeProperties,
 				panel,
+				forceMargin,
 				tools,
 				toolbars,
+				borders,
+				showSlotIds,
 				offline,
 			}); %><%
 		}

package/client/views/parts/document-layout.ejs

@@ -9,10 +9,15 @@ expects context:
 - panel {Panel}
 - tools {boolean}
 - toolbars {boolean}
+- borders {boolean}
+- showSlotIds {boolean}
+- forceMargin {boolean|null}
 - offline {boolean}
 
-*/%>
-<div class="layout layout-document<%= panel.layout.document.noGap ? ' no-gap' : '' %><%= panel.layout.document.noMargin ? ' no-margin' : '' %>" style="<%
+*/%><%
+var noMargin = typeof forceMargin === 'boolean' ? !forceMargin : panel.layout.document.noMargin;
+%>
+<div class="layout layout-document<%= panel.layout.document.noGap ? ' no-gap' : '' %><%= noMargin ? ' no-margin' : '' %>" style="<%
 	%>transform:scale(<%= panel.layout.document.zoom %>);<%
 	%>max-width:calc(<%= panel.layout.document.maxWidth %> / <%= panel.layout.document.zoom %>);<%
 %>">
@@ -30,6 +35,8 @@ expects context:
 			slot,
 			tools,
 			toolbar: toolbars,
+			border: borders,
+			showSlotId: showSlotIds,
 			offline,
 			singled: false,
 		}) %>

package/client/views/parts/grid-layout.ejs

@@ -9,10 +9,15 @@ expects context:
 - panel {Panel}
 - tools {boolean}
 - toolbars {boolean}
+- borders {boolean}
+- showSlotIds {boolean}
+- forceMargin {boolean|null}
 - offline {boolean}
 
-*/%>
-<div class="layout layout-grid<%= panel.layout.grid.noGap ? ' no-gap' : '' %><%= panel.layout.grid.noMargin ? ' no-margin' : '' %>" style="<%
+*/%><%
+var noMargin = typeof forceMargin === 'boolean' ? !forceMargin : panel.layout.grid.noMargin;
+%>
+<div class="layout layout-grid<%= panel.layout.grid.noGap ? ' no-gap' : '' %><%= noMargin ? ' no-margin' : '' %>" style="<%
 	%>grid-template-columns:repeat(<%= panel.layout.grid.columns %>, 1fr);<%
 	%>grid-template-rows:repeat(<%= panel.layout.grid.rows %>, 1fr);<%
 	%>transform:scale(<%= panel.layout.grid.zoom %>);<%
@@ -32,6 +37,8 @@ expects context:
 			slot,
 			tools,
 			toolbar: toolbars,
+			border: borders,
+			showSlotId: showSlotIds,
 			offline,
 			singled: false,
 		}) %>

package/client/views/parts/slot.ejs

@@ -10,6 +10,8 @@ expects context:
 - themeProperties {Object}
 - tools {boolean}
 - toolbar {boolean}
+- border {boolean}
+- showSlotId {boolean}
 - offline {boolean}
 - singled {boolean}
 
@@ -22,6 +24,8 @@ var contentScale = command ? command.scale : null;
 var contentAlign = command ? command.align : null;
 var commandBackground = command ? command.background : null;
 
+var showBorder = slot.border && border;
+
 var tbPause = !offline && tools && !slot.noPause;
 var tbZoom = !offline && tools && !slot.noZoom;
 var tbClear = !offline && tools&&  !slot.noClear;
@@ -45,7 +49,7 @@ function replaceThemePropsInStr(s) {
 	class="slot<%
 		%><%= theme !== 'none' ? ' ui segment' : '' %><%
 		%><%= command ? '' : ' empty' %><%
-		%><%= slot.border ? ' with-border' : ' without-border' %><%
+		%><%= showBorder ? ' with-border' : ' without-border' %><%
 		%><%= slot.toolbar && toolbar ? ' with-toolbar' : ' without-toolbar' %><%
 		%><%= contentScale ? ' content-scale ' + contentScale : '' %><%
 		%><%= contentAlign ? ' content-align ' + contentAlign : '' %><%
@@ -76,7 +80,7 @@ function replaceThemePropsInStr(s) {
 	data-align="<%= contentAlign %>"
 >
 <% if (slot.toolbar && toolbar) { %>
-	<div class="slot-toolbar ui <%= slot.border ? ' attached' : '' %> mini icon menu">
+	<div class="slot-toolbar ui <%= showBorder ? ' attached' : '' %> mini icon menu">
 <%		if (slot.history && !offline && tools) { %>
 		<a class="cmd-history-backward item<%= command && command.no > 1 ? '' : ' disabled' %>" onclick="boomack.cmdHistoryBackward('<%= slot.id %>')" style="display: none;"><i class="icon arrow circle left"></i></a>
 		<span class="txt-history item" style="display: none;"><%- command ? '1' : '&ndash;' %>&nbsp;/&nbsp;<%- command ? Math.min(command.no, slot.history + 1) : '&ndash;' %></span>
@@ -194,7 +198,7 @@ function replaceThemePropsInStr(s) {
 			%>height: <%= slot.height %>;<%
 		}
 	%>">
-		<% if (slot.showId) { %><div class="slot-id"><%= slot.id %></div><% } %>
+		<% if (slot.showId && showSlotId) { %><div class="slot-id"><%= slot.id %></div><% } %>
 	</div>
 	<div class="slot-content-box" style="<%
 		if (slot.minHeight) {

package/client/views/slot-panel.ejs

@@ -15,7 +15,7 @@
 <body class="slot-panel">
 <%
 	const layoutSpec = panel.layout[panel.layout.type];
-	const noMargin = layoutSpec && layoutSpec.noMargin;
+	const noMargin = typeof forceMargin === 'boolean' ? !forceMargin : layoutSpec && layoutSpec.noMargin;
 %>
 <div class="panel-wrapper layout-grid<%= noMargin ? ' no-margin' : '' %>" style="<%
 	if (zoom !== 1.0) {
@@ -33,6 +33,8 @@
 		slot,
 		tools,
 		toolbar,
+		border,
+		showSlotId,
 		offline,
 		singled: true,
 	}); %></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "boomack",
-  "version": "0.15.0-preview6",
+  "version": "0.15.0-preview7",
   "description": "web app for displaying hyper-media items in concert with e.g. an IDE",
   "author": "Tobias Kiertscher <dev@mastersign.de>",
   "license": "MIT",
@@ -74,7 +74,6 @@
     "@types/lodash": "^4.17.5",
     "@types/markdown-it": "^14.1.1",
     "@types/node": "^18.0.0",
-    "@types/rimraf": "^3.0.0",
     "chai": "^6.2.0",
     "css-element-queries": "1.2.3",
     "jquery": "^3.7.1",

package/server-build/routes/export.js

@@ -88,11 +88,14 @@ export function setup(app) {
             themeOverride: options.themeOverride,
             themeVariation: options.themeVariation,
             zoom: options.zoom || 1.0,
+            forceMargin: options.forceMargin,
             header: options.header,
             headerTools: false,
             showLogo: options.showLogo,
             toolbars: options.toolbars,
             tools: options.tools,
+            borders: options.borders,
+            showSlotIds: options.showSlotIds,
             update: 'never',
             clientResGroups: plugins.getClientResourceGroupMap(),
             modules: plugins.getESModuleResourceMap(),
@@ -231,10 +234,13 @@ export function setup(app) {
                     themeOverride: !!req.query.theme,
                     themeVariation: layout.themeVariation,
                     zoom: req.query.zoom,
+                    forceMargin: enforceBoolean(req.query.margin),
                     header: layout.header ? enforceBoolean(req.query.header, true) : false,
                     showLogo: layout.showLogo ? enforceBoolean(req.query.logo, true) : false,
                     toolbars: enforceBoolean(req.query.toolbars, true),
                     tools: enforceBoolean(req.query.tools, true),
+                    borders: enforceBoolean(req.query.borders, true),
+                    showSlotIds: enforceBoolean(req.query['slot-ids'], true),
                     update: 'never',
                     compression: enforceInteger(req.query.comp),
                     name: req.query.name,

package/server-build/routes/panels.js

@@ -109,8 +109,11 @@ export function setup(app, io) {
                             themeOverride: false,
                             themeVariation: panel.layout.themeVariation,
                             themeProperties,
+                            forceMargin: null,
                             tools: true,
                             toolbars: true,
+                            borders: true,
+                            showSlotIds: true,
                             panel: { ...panel, layout },
                             offline: true,
                         });

package/server-build/routes/web-client.js

@@ -6,7 +6,7 @@ import express from 'express';
 import ms from 'ms';
 import cookieParser from 'cookie-parser';
 import bodyParser from 'body-parser';
-import { enforceEnum, logError, moduleDirname, parseBoolean, timestamp, } from '../utils.js';
+import { enforceBoolean, enforceEnum, logError, moduleDirname, parseBoolean, timestamp, } from '../utils.js';
 import { log } from '../service/logging.js';
 import cfg from '../service/config.js';
 import plugins from '../service/plugins.js';
@@ -279,8 +279,11 @@ export function setup(app, io) {
                         themeProperties,
                         themeOverride: !!req.query.theme,
                         themeVariation: layout.themeVariation,
+                        forceMargin: null,
                         tools: true,
                         toolbars: true,
+                        borders: true,
+                        showSlotIds: true,
                         panel: { ...panel, layout },
                         offline: false,
                     });
@@ -338,11 +341,14 @@ export function setup(app, io) {
                         themeVariation: panel.layout.themeVariation,
                         panel: { ...panel, layout },
                         zoom: req.query.zoom || 1.0,
+                        forceMargin: enforceBoolean(req.query.margin),
                         header: layout.header ? parseBoolean(req.query.header, true) : false,
                         showLogo: layout.showLogo ? parseBoolean(req.query.logo, true) : false,
                         headerTools: layout.headerTools ? parseBoolean(req.query['header-tools'], true) : false,
                         toolbars: parseBoolean(req.query.toolbars, true),
                         tools: parseBoolean(req.query.tools, true),
+                        borders: parseBoolean(req.query.borders, true),
+                        showSlotIds: parseBoolean(req.query['slot-ids'], true),
                         clientResGroups: plugins.getClientResourceGroupMap(),
                         modules: plugins.getESModuleResourceMap(),
                         update: update,
@@ -434,8 +440,11 @@ export function setup(app, io) {
                             zoom: req.query.zoom || 1.0,
                             clientResGroups: plugins.getClientResourceGroupMap(),
                             modules: plugins.getESModuleResourceMap(),
-                            tools: parseBoolean(req.query.tools, true),
+                            forceMargin: enforceBoolean(req.query.margin),
                             toolbar: parseBoolean(req.query.toolbar, true),
+                            tools: parseBoolean(req.query.tools, true),
+                            border: parseBoolean(req.query.border, true),
+                            showSlotId: parseBoolean(req.query['slot-id'], true),
                             offline: parseBoolean(req.query.offline),
                             update: update,
                             auth: req.auth,

package/server-build/utils.js

@@ -46,8 +46,8 @@ export function enforceString(value, defaultValue) {
 }
 /**
  * Makes sure the return value is a boolean or null.
- * The following values are treated truthy: true, 1, case insensitive strings "true", "yes", "on".
- * The following values are treated falsy: false, 0, case insensitive strings "false", "no", "off".
+ * The following values are treated truthy: true, 1, "1", case insensitive strings "true", "yes", "on".
+ * The following values are treated falsy: false, 0, "0", case insensitive strings "false", "no", "off".
  * Everything else is treated invalid and replaced by defaultValue.
  *
  * @param {*} value - A boolean or any other value.
@@ -60,9 +60,9 @@ export function enforceBoolean(value, defaultValue) {
     if (defaultValue !== null && !_.isBoolean(defaultValue)) {
         throw new Error("Invalid argument for defaultValue. Must be boolean or null.");
     }
-    if (value === true || value === 1)
+    if (value === true || value === 1 || value === '1')
         return true;
-    if (value === false || value === 0)
+    if (value === false || value === 0 || value === '0')
         return false;
     if (_.isString(value)) {
         value = value.toLowerCase();