Skip to content

Commit

Permalink
refactored refreshing styles sample displays
Browse files Browse the repository at this point in the history
  • Loading branch information
@micrology
micrology committed Jan 5, 2025
1 parent 4770763 commit 78f3e1c
Show file tree
Hide file tree
Showing 5 changed files with 203 additions and 158 deletions.
6 changes: 6 additions & 0 deletions html/prsm.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -774,6 +774,12 @@ <h1>Welcome to PRSM</h1>
<div class="sampleNode" id="nodeSample7"></div>
<div class="sampleNode" id="nodeSample8"></div>
<div class="sampleNode" id="nodeSample9"></div>
<div class="sampleNode" id="nodeSample10"></div>
<div class="sampleNode" id="nodeSample11"></div>
<div class="sampleNode" id="nodeSample12"></div>
<div class="sampleNode" id="nodeSample13"></div>
<div class="sampleNode" id="nodeSample14"></div>
<div class="sampleNode" id="nodeSample15"></div>
</div>
<div class="panelRow centered">
<button type="button" class="btn" id="allFactors">Select all factors</button>
Expand Down
8 changes: 3 additions & 5 deletions js/files.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,6 @@ import {
toggleDeleteButton,
undoRedoButtonStatus,
updateLastSamples,
refreshSampleNodes,
refreshSampleLinks,
setMapTitle,
setSideDrawer,
disableSideDrawerEditing,
Expand Down Expand Up @@ -74,7 +72,7 @@ import {
} from './utils.js'
import { styles } from './samples.js'
import { canvas, refreshFromMap, setUpBackground, upgradeFromV1 } from './background.js'
import { updateLegend } from './styles.js'
import { refreshSampleNode, refreshSampleLink, updateLegend } from './styles.js'
import Quill from 'quill'
import { saveAs } from 'file-saver'
import * as quillToWord from 'quill-to-word'
Expand Down Expand Up @@ -277,17 +275,17 @@ function loadPRSMfile(str) {
for (let e in styles.edges) {
delete styles.edges[e].chosen
}
refreshSampleNodes()
refreshSampleLinks()
for (let groupId in styles.nodes) {
ySamplesMap.set(groupId, {
node: styles.nodes[groupId],
})
if (groupId.match(/\d+/)?.[0]) refreshSampleNode(groupId)
}
for (let edgeId in styles.edges) {
ySamplesMap.set(edgeId, {
edge: styles.edges[edgeId],
})
if (edgeId.match(/\d+/)?.[0]) refreshSampleLink(edgeId)
}
}
yDrawingMap.clear()
Expand Down
45 changes: 6 additions & 39 deletions js/prsm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ import {cluster, openCluster} from './cluster.js'
import {mergeRoom, diffRoom} from './merge.js'
import Quill from 'quill'
import Hammer from '@egjs/hammerjs'
import {setUpSamples, reApplySampleToNodes, reApplySampleToLinks, legend, clearLegend} from './styles.js'
import {setUpSamples, reApplySampleToNodes, refreshSampleNode, reApplySampleToLinks, refreshSampleLink, legend, clearLegend} from './styles.js'
import {
nChanges,
setUpBackground,
Expand Down Expand Up @@ -338,10 +338,12 @@ function setUpPage() {
container = elem('container')
netPane = elem('net-pane')
panel = elem('panel')
// check options set on URL: ?debug=yjs|gui|cluster&viewing&start&copyButton
// check debug options set on URL: ?debug=yjs|gui|cluster|viewing|start|copyButton
// each of these generates trace output on the console
let searchParams = new URL(document.location).searchParams
if (searchParams.has('debug')) debug = searchParams.get('debug')
// don't allow user to change anything if URL includes ?viewing
// this is now obsolete, but retained for backwards compatibility
viewOnly = searchParams.has('viewing')
if (viewOnly) hideNavButtons()
if (searchParams.has('copyButton')) showCopyMapButton = true
Expand Down Expand Up @@ -642,21 +644,21 @@ function startY(newRoom) {
if (sample.node !== undefined) {
if (!object_equals(styles.nodes[key], sample.node)) {
styles.nodes[key] = sample.node
refreshSampleNode(key)
nodesToUpdate.push(key)
}
} else {
if (!object_equals(styles.edges[key], sample.edge)) {
styles.edges[key] = sample.edge
refreshSampleLink(key)
edgesToUpdate.push(key)
}
}
}
if (nodesToUpdate) {
refreshSampleNodes()
reApplySampleToNodes(nodesToUpdate)
}
if (edgesToUpdate) {
refreshSampleLinks()
reApplySampleToLinks(edgesToUpdate)
}
})
Expand Down Expand Up @@ -3580,41 +3582,6 @@ function updateFactorsOrLinksHiddenByStyle(obj) {
}
}

/**
* ensure that the styles displayed in the node styles panel display the styles defined in the styles array
*/
export function refreshSampleNodes() {
let sampleElements = Array.from(document.getElementsByClassName('sampleNode'))
for (let i = 0; i < sampleElements.length; i++) {
let sampleElement = sampleElements[i]
let node = sampleElement.dataSet.get()[0]
node = deepMerge(node, styles.nodes[`group${i}`], {
chosen: false,
size: 25,
widthConstraint: 25,
heightConstraint: 25,
})
node.label = node.groupLabel
sampleElement.dataSet.remove(node.id)
sampleElement.dataSet.update(node)
sampleElement.net.fit()
}
}
/**
* ensure that the styles displayed in the link styles panel display the styles defined in the styles array
*/
export function refreshSampleLinks() {
let sampleElements = Array.from(document.getElementsByClassName('sampleLink'))
for (let i = 0; i < sampleElements.length; i++) {
let sampleElement = sampleElements[i]
let edge = sampleElement.dataSet.get()[0]
edge = deepMerge(edge, styles.edges[`edge${i}`])
edge.label = edge.groupLabel
sampleElement.dataSet.remove(edge.id)
sampleElement.dataSet.update(edge)
sampleElement.net.fit()
}
}
/********************************************************Notes********************************************** */
/**
* Globally either display or don't display notes when a factor or link is selected
Expand Down
113 changes: 84 additions & 29 deletions js/samples.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,20 @@
PRSM Participatory System Mapper
Copyright (C) 2022 Nigel Gilbert prsm@prsm.uk
Copyright (C) 2022 Nigel Gilbert prsm@prsm.uk
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
You should have received a copy of the GNU General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
This module provides the standard set of Styles for Factors and Links.
Expand All @@ -24,7 +24,7 @@ export const styles = {
nodes: {
base: {
groupLabel: 'Sample',
borderWidth: 4,
borderWidth: 0,
borderWidthSelected: 4,
color: {
border: 'rgb(0, 0, 0)',
Expand Down Expand Up @@ -64,31 +64,27 @@ export const styles = {
widthConstraint: false,
},
group0: {
borderWidth: 0,
color: {
border: 'rgb(154, 219, 180)',
background: 'rgb(154, 219, 180)',
},
shape: 'box',
},
group1: {
borderWidth: 0,
color: {
border: 'rgb(202, 219, 92)',
background: 'rgb(202, 219, 92)',
},
shape: 'box',
},
group2: {
borderWidth: 0,
color: {
border: 'rgb(219, 165, 66)',
background: 'rgb(219, 165, 66)',
},
shape: 'box',
},
group3: {
borderWidth: 0,
color: {
border: 'rgb(219, 110, 103)',
background: 'rgb(219, 110, 103)',
Expand All @@ -99,7 +95,6 @@ export const styles = {
shape: 'box',
},
group4: {
borderWidth: 0,
color: {
border: 'rgb(131, 113, 183)',
background: 'rgb(131, 113, 183)',
Expand All @@ -110,20 +105,21 @@ export const styles = {
shape: 'box',
},
group5: {
borderWidth: 1,
color: {
border: 'rgb(0, 0, 255)',
background: 'rgb(179, 204, 255)',
},
shape: 'ellipse',
},
group6: {
font: {
color: 'rgb(28, 95, 27)',
},
shape: 'text',
},
group6: {
borderWidth: 4,
color: {
border: 'rgb(0, 0, 255)',
background: 'rgb(179, 204, 255)',
},
shape: 'diamond',
},
group7: {
borderWidth: 4,
color: {
border: 'rgb(0, 0, 0)',
background: 'rgb(255, 255, 153)',
Expand All @@ -134,16 +130,75 @@ export const styles = {
},
},
group8: {
borderWidth: 0,
color: {
border: 'rgb(122, 122, 122)',
background: 'rgb(122, 122, 122)',
border: 'rgb(2, 71, 254)',
background: 'rgb(2, 71, 254)',
},
font: {
color: 'rgb(122, 122, 122)',
color: 'rgb(255, 0, 0)',
},
shape: 'star',
},
group9: {
color: {
border: 'rgb(255, 0, 0)',
background: 'rgb(255, 0, 0)',
},
font: {
color: 'rgb(255, 255, 255)',
},
shape: 'box',
},
group10: {
color: {
border: 'rgb(0, 0, 255)',
background: 'rgb(0, 0, 255)',
},
font: {
color: 'rgb(255, 255, 255)',
},
shape: 'box',
},
group11: {
color: {
border: 'rgb(0, 255, 0)',
background: 'rgb(0, 255, 0)',
},
font: {
color: 'rgb(0, 0, 0)',
},
shape: 'box',
},
group12: {
color: {
border: 'rgb(254, 254, 51)',
background: 'rgb(254, 254, 51)',
},
font: {
color: 'rgb(0, 0, 0)',
},
shape: 'box',
},
group13: {
color: {
border: 'rgb(255, 0, 255)',
background: 'rgb(255, 0, 255)',
},
font: {
color: 'rgb(255, 255, 255)',
},
shape: 'box',
},
group14: {
color: {
border: 'rgb(0, 255, 255)',
background: 'rgb(0, 255, 255)',
},
font: {
color: 'rgb(0, 0, 0)',
},
shape: 'box',
},
cluster: {
borderWidth: 3,
color: {
Expand Down
Loading

0 comments on commit 78f3e1c

Please sign in to comment.