fez5587/Superalgos
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Design Space Style

Browse Source
This commit is contained in:
Luis Fernando Molina committed 2020-10-06 21:18:01 +02:00
1 parent 77f47dc5aa
commit c6c48497b8
6 files changed
+155 -41
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

FloatingSpace/CircularMenuItem.js
+3 -3
View File
@@ -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)
}
}
FloatingSpace/FloatingObject.js
+19 -3
View File
@@ -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)
FloatingSpace/UiObject.js
+62 -22
View File
@@ -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
FloatingSpace/UiObjectConstructor.js
-2
View File
@@ -632,8 +632,6 @@ function newUiObjectConstructor() {
floatingObject.fillStyle = 'rgba(' + UI_COLOR.RED + ', 1)'
}
floatingObject.labelStrokeStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
}
function destroyUiObject(payload) {
FloatingSpace/UiObjectTitle.js
+10 -4
View File
@@ -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)
}
}
Spaces/FloatingSpace.js
+61 -7
View File
@@ -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() {