diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index 83988dec0..4bc3b5eee 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -219,7 +219,7 @@ function newCircularMenuItem() { } function backgroundColorPhysics(){ - defaultBackgroudColor = canvas.floatingSpace.style.backgroundColor + defaultBackgroudColor = canvas.floatingSpace.style.node.menuItem.backgroundColor } function iconPhysics() { @@ -460,7 +460,7 @@ function newCircularMenuItem() { } let labelPoint - let fontSize = 15 + let fontSize = canvas.floatingSpace.style.node.menuItem.fontSize browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY @@ -471,7 +471,7 @@ function newCircularMenuItem() { } browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' + browserCanvasContext.fillStyle = 'rgba(' + canvas.floatingSpace.style.node.menuItem.fontColor + ', 1)' browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } } diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index c598f0d88..92c98df33 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -29,6 +29,8 @@ function newFloatingObject() { isParentCollapsed: false, frozenManually: false, collapsedManually: false, + typeStrokeStyle: undefined, + nameStrokeStyle: undefined, forceFocus: forceFocus, removeForceFocus: removeForceFocus, setFocus: setFocus, @@ -76,6 +78,8 @@ function newFloatingObject() { thisObject.container.frame.radius = 0 thisObject.container.frame.position.x = 0 thisObject.container.frame.position.y = 0 + thisObject.typeStrokeStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' + thisObject.nameStrokeStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' let selfMouseOverEventSubscriptionId let selfMouseClickEventSubscriptionId @@ -83,7 +87,7 @@ function newFloatingObject() { let spaceFocusAquiredEventSubscriptionId let lastParentAngle let forcedFocusCounter = 0 - + return thisObject function finalize() { @@ -297,6 +301,20 @@ function newFloatingObject() { } positionContraintsPhysics() focusPhysics() + syncStylePhysics() + } + + function syncStylePhysics() { + if (thisObject.rawFontSize !== canvas.floatingSpace.style.node.fontSize) { + thisObject.rawFontSize = canvas.floatingSpace.style.node.fontSize + thisObject.targetFontSize = thisObject.rawFontSize * 1 + } + if (thisObject.rawImageSize !== canvas.floatingSpace.style.node.imageSize) { + thisObject.rawImageSize = canvas.floatingSpace.style.node.imageSize + thisObject.targetImageSize = thisObject.rawImageSize * 1 + } + thisObject.typeStrokeStyle = 'rgba(' + canvas.floatingSpace.style.node.type.fontColor + ', 1)' + thisObject.nameStrokeStyle = 'rgba(' + canvas.floatingSpace.style.node.name.fontColor + ', 1)' } function focusPhysics() { @@ -564,8 +582,6 @@ function newFloatingObject() { thisObject.payload.position.y = thisObject.container.frame.position.y } - - function onMouseOver(point) { if (thisObject.isOnFocus === false) { setFocus(point) diff --git a/FloatingSpace/UiObject.js b/FloatingSpace/UiObject.js index e6d418ba0..a753f6a41 100644 --- a/FloatingSpace/UiObject.js +++ b/FloatingSpace/UiObject.js @@ -1522,6 +1522,7 @@ function newUiObject() { /* Label Text */ let labelPoint let fontSize = thisObject.payload.floatingObject.currentFontSize + let lineSeparator = thisObject.payload.floatingObject.currentFontSize * 1.2 let label if (radius > 6) { @@ -1535,9 +1536,16 @@ function newUiObject() { label = label.substring(0, MAX_LABEL_LENGTH) + '...' } - labelPoint = { - x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 5, - y: position.y + radius * 2 / 3 + fontSize * FONT_ASPECT_RATIO + 15 + if (thisObject.isOnFocus === true) { + labelPoint = { + x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 5, + y: position.y + radius * 2 / 3 + lineSeparator * 1 + 15 + } + } else { + labelPoint = { + x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 5, + y: position.y + thisObject.payload.floatingObject.currentImageSize / 2 + lineSeparator * 1 + } } if (canvas.floatingSpace.inMapMode === true) { @@ -1551,7 +1559,7 @@ function newUiObject() { } browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = thisObject.payload.floatingObject.labelStrokeStyle + browserCanvasContext.fillStyle = thisObject.payload.floatingObject.nameStrokeStyle browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } } @@ -1593,10 +1601,11 @@ function newUiObject() { position = canvas.floatingSpace.transformPointToMap(position) } - let radius = thisObject.payload.floatingObject.container.frame.radius * 2.5 + let radius = thisObject.payload.floatingObject.container.frame.radius /* Label Text */ let labelPoint let fontSize = thisObject.payload.floatingObject.currentFontSize * 3 / 4 + let lineSeparator = thisObject.payload.floatingObject.currentFontSize * 1.2 let label if (radius > 6) { @@ -1612,9 +1621,16 @@ function newUiObject() { fontSize = thisObject.payload.floatingObject.currentFontSize * 2 / 4 } - labelPoint = { - x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 5, - y: position.y + radius * 2 / 5 + fontSize * FONT_ASPECT_RATIO + 10 + if (thisObject.isOnFocus === true) { + labelPoint = { + x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 5, + y: position.y + radius * 2 / 3 + lineSeparator * 5 + 15 + } + } else { + labelPoint = { + x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 5, + y: position.y + thisObject.payload.floatingObject.currentImageSize / 2 + lineSeparator * 5 + } } browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY @@ -1646,10 +1662,11 @@ function newUiObject() { position = canvas.floatingSpace.transformPointToMap(position) } - let radius = thisObject.payload.floatingObject.container.frame.radius * 1.00 + let radius = thisObject.payload.floatingObject.container.frame.radius /* Label Text */ let labelPoint - let fontSize = thisObject.payload.floatingObject.currentFontSize * 8 / 7 + let fontSize = thisObject.payload.floatingObject.currentFontSize + let lineSeparator = thisObject.payload.floatingObject.currentFontSize * 1.2 let label if (radius > 6) { @@ -1679,9 +1696,16 @@ function newUiObject() { labelPoint.x = labelPoint.x + radius * 7 / 3 * Math.cos(toRadians(thisObject.payload.angle)) labelPoint.y = labelPoint.y + radius * 7 / 3 * Math.sin(toRadians(thisObject.payload.angle)) } else { - labelPoint = { - x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 10, - y: position.y + radius * 7 / 5 + fontSize * FONT_ASPECT_RATIO + 15 + if (thisObject.isOnFocus === true) { + labelPoint = { + x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 10, + y: position.y + radius * 2 / 3 + lineSeparator * 3 + 15 + } + } else { + labelPoint = { + x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 10, + y: position.y + thisObject.payload.floatingObject.currentImageSize / 2 + lineSeparator * 3 + } } } @@ -1709,10 +1733,11 @@ function newUiObject() { position = canvas.floatingSpace.transformPointToMap(position) } - let radius = thisObject.payload.floatingObject.container.frame.radius * 1.30 + let radius = thisObject.payload.floatingObject.container.frame.radius /* Label Text */ let labelPoint - let fontSize = thisObject.payload.floatingObject.currentFontSize * 6 / 4 + let fontSize = thisObject.payload.floatingObject.currentFontSize + let lineSeparator = thisObject.payload.floatingObject.currentFontSize * 1.2 let label if (radius > 6) { @@ -1725,9 +1750,16 @@ function newUiObject() { label = label.substring(0, MAX_LABEL_LENGTH) + '...' } - labelPoint = { - x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 5, - y: position.y + radius * 7 / 5 + fontSize * FONT_ASPECT_RATIO + 15 + if (thisObject.isOnFocus === true) { + labelPoint = { + x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 5, + y: position.y + radius * 2 / 3 + lineSeparator * 4 + 15 + } + } else { + labelPoint = { + x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 10, + y: position.y + thisObject.payload.floatingObject.currentImageSize / 2 + lineSeparator * 4 + } } browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY @@ -1752,10 +1784,11 @@ function newUiObject() { position = canvas.floatingSpace.transformPointToMap(position) } - let radius = thisObject.payload.floatingObject.container.frame.radius * 0.8 + let radius = thisObject.payload.floatingObject.container.frame.radius /* Label Text */ let labelPoint let fontSize = thisObject.payload.floatingObject.currentFontSize * 6 / 4 / 2 + let lineSeparator = thisObject.payload.floatingObject.currentFontSize * 1.2 let label if (radius > 6) { @@ -1768,9 +1801,16 @@ function newUiObject() { label = label.substring(0, MAX_LABEL_LENGTH) + '...' } - labelPoint = { - x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 10, - y: position.y + radius * 7 / 5 + fontSize * FONT_ASPECT_RATIO + 15 + if (thisObject.isOnFocus === true) { + labelPoint = { + x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 10, + y: position.y + radius * 2 / 3 + lineSeparator * 2 + 15 + } + } else { + labelPoint = { + x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 10, + y: position.y + thisObject.payload.floatingObject.currentImageSize / 2 + lineSeparator * 2 + } } browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY diff --git a/FloatingSpace/UiObjectConstructor.js b/FloatingSpace/UiObjectConstructor.js index 643fde2a0..a71e68aa3 100644 --- a/FloatingSpace/UiObjectConstructor.js +++ b/FloatingSpace/UiObjectConstructor.js @@ -632,8 +632,6 @@ function newUiObjectConstructor() { floatingObject.fillStyle = 'rgba(' + UI_COLOR.RED + ', 1)' } - - floatingObject.labelStrokeStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' } function destroyUiObject(payload) { diff --git a/FloatingSpace/UiObjectTitle.js b/FloatingSpace/UiObjectTitle.js index 3f60ccb26..1fe566f5b 100644 --- a/FloatingSpace/UiObjectTitle.js +++ b/FloatingSpace/UiObjectTitle.js @@ -207,8 +207,14 @@ function newUiObjectTitle() { const FRAME_HEIGHT = 25 const Y_OFFSET = -20 const FRAME_WIDTH = (title.length + 2) / 2 * thisObject.payload.floatingObject.currentFontSize * FONT_ASPECT_RATIO * 1.2 * 2 - thisObject.container.frame.position.x = 0 - FRAME_WIDTH / 2 - thisObject.container.frame.position.y = 0 - thisObject.container.frame.radius * 1 / 2 - thisObject.payload.floatingObject.currentFontSize * FONT_ASPECT_RATIO + Y_OFFSET - FRAME_HEIGHT + + if (thisObject.isOnFocus === true) { + thisObject.container.frame.position.x = 0 - FRAME_WIDTH / 2 + thisObject.container.frame.position.y = 0 - thisObject.container.frame.radius * 1 / 2 - thisObject.payload.floatingObject.currentFontSize * FONT_ASPECT_RATIO + Y_OFFSET - FRAME_HEIGHT + } else { + thisObject.container.frame.position.x = 0 - FRAME_WIDTH / 2 + thisObject.container.frame.position.y = 0 - thisObject.payload.floatingObject.currentImageSize / 2 - FRAME_HEIGHT + } thisObject.container.frame.width = FRAME_WIDTH thisObject.container.frame.height = FRAME_HEIGHT @@ -325,7 +331,7 @@ function newUiObjectTitle() { let label if (radius > 6 && (thisObject.isOnFocus === true || thisObject.allwaysVisible === true || thisObject.isDefault === false)) { - browserCanvasContext.strokeStyle = thisObject.payload.floatingObject.labelStrokeStyle + browserCanvasContext.strokeStyle = thisObject.payload.floatingObject.typeStrokeStyle browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY @@ -355,7 +361,7 @@ function newUiObjectTitle() { } browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = thisObject.payload.floatingObject.labelStrokeStyle + browserCanvasContext.fillStyle = thisObject.payload.floatingObject.typeStrokeStyle browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } } diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index e1cea91d3..b6502af55 100644 --- a/Spaces/FloatingSpace.js +++ b/Spaces/FloatingSpace.js @@ -14,7 +14,7 @@ function newFloatingSpace() { inMapMode: false, drawReferenceLines: false, drawChainLines: true, - style: undefined, + style: undefined, toggleDrawChainLines: toggleDrawChainLines, toggleDrawReferenceLines: toggleDrawReferenceLines, toggleMapMode: toggleMapMode, @@ -63,10 +63,25 @@ function newFloatingSpace() { const PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT = 25 let onDragStartedEventSubscriptionId let spaceFocusAquiredEventSubscriptionId - + /* Default Style */ thisObject.style = { - backgroundColor: UI_COLOR.BLACK + backgroundColor: UI_COLOR.BLACK, + node: { + imageSize: 96, + fontSize: 18, + type: { + fontColor: UI_COLOR.WHITE + }, + name: { + fontColor: UI_COLOR.WHITE + }, + menuItem: { + backgroundColor: UI_COLOR.BLACK, + fontColor: UI_COLOR.WHITE, + fontSize: 15 + } + } } return thisObject @@ -397,14 +412,53 @@ function newFloatingSpace() { thisObject.floatingLayer.physics() } - function syncStylePhysics(){ - if (canvas.designSpace === undefined) {return} - if (canvas.designSpace.workspace === undefined) {return} + function syncStylePhysics() { + if (canvas.designSpace === undefined) { return } + if (canvas.designSpace.workspace === undefined) { return } let designSpaceNode = canvas.designSpace.workspace.getHierarchyHeadsByType('Design Space') - if (designSpaceNode.spaceStyle !== undefined) { + if (designSpaceNode === undefined) { return } + if (designSpaceNode.spaceStyle === undefined) { return } + try { configStyle = JSON.parse(designSpaceNode.spaceStyle.config) + } catch (err) { + if (thisObject.payload !== undefined) { + thisObject.payload.uiObject.setErrorMessage(err.message) + } + return + } + if (configStyle.backgroundColor !== undefined) { thisObject.style.backgroundColor = eval(configStyle.backgroundColor) } + if (configStyle.node !== undefined) { + if (configStyle.node.fontSize !== undefined) { + thisObject.style.node.fontSize = configStyle.node.fontSize + } + if (configStyle.node.imageSize !== undefined) { + thisObject.style.node.imageSize = configStyle.node.imageSize + } + if (configStyle.node.name !== undefined) { + if (configStyle.node.name.fontColor !== undefined) { + thisObject.style.node.name.fontColor = eval(configStyle.node.name.fontColor) + } + } + if (configStyle.node.type !== undefined) { + if (configStyle.node.type.fontColor !== undefined) { + thisObject.style.node.type.fontColor = eval(configStyle.node.type.fontColor) + } + } + if (configStyle.node.menuItem !== undefined) { + if (configStyle.node.menuItem.fontColor !== undefined) { + thisObject.style.node.menuItem.fontColor = eval(configStyle.node.menuItem.fontColor) + } + if (configStyle.node.menuItem.backgroundColor !== undefined) { + thisObject.style.node.menuItem.backgroundColor = eval(configStyle.node.menuItem.backgroundColor) + } + if (configStyle.node.menuItem.fontSize !== undefined) { + thisObject.style.node.menuItem.fontSize = configStyle.node.menuItem.fontSize + } + } + } + } function positionContraintsPhysics() {