\n
);\n }\n}\nexport default ResendConfirmation;","import React, { Component } from 'react';\nimport ResendConfirmation from './ResendConfirmation';\nimport TextField from 'material-ui/TextField';\nimport RaisedButton from 'material-ui/RaisedButton';\nimport FlatButton from 'material-ui/FlatButton';\nimport { btnLg, btnAuthCancel } from '../../styles/button';\nimport {floatFieldDark} from '../../styles/textfield';\n\n/**\n * Contains the login form that is used by the landing page component called `Landing`.\n */\nclass Login extends Component {\n constructor(props) {\n super(props);\n this.state = {\n email: \"\",\n password: \"\",\n error: \"\",\n };\n }\n\n componentWillReceiveProps(nextProps) {\n if (nextProps.user.errors.login.errorMessage!==undefined) {\n this.setState({error: nextProps.user.errors.login.errorMessage[0]});\n }\n }\n\n componentDidUpdate() {\n if (this.props.user.authenticated) {\n this.props.history.push(\"/dashboard\");\n }\n }\n\n /**\n * Update state when user inputs new value in a text field \n */\n onInputChange(v, type) {\n this.setState({[type]: v});\n }\n /**\n * Submit login information and clear any message\n */\n submit = (e) => {\n if (e) e.preventDefault();\n this.setState({ error: \"\"});\n this.props.action.loginUser({email: this.state.email, password: this.state.password});\n }\n\n /**\n * Cancel button. Resets local Login state.\n */\n cancel = () => {\n this.setState({email:\"\",password:\"\",error:\"\"});\n this.props.tapCancel();\n }\n\n render() {\n let submitButton = {this.state.message}
\n {form}\n\n {cancel}\n
\n \n this.resetPasswordRequest(null)}\n />\n
;\n if (this.state.requested) {\n cancelButton = \n {logo}\n
\n Cannot connect to VCEditor. Trying to re-connect..\n
\n \n );\n }\n}","\nexport function login(session) {\n return { \n types: ['NO_LOADING','LOGIN_SUCCESS','LOGIN_FAILED'],\n payload: {\n request : {\n url: `/session`,\n method: 'post',\n data: { session },\n successMessage: \"You have successfully logged in\" ,\n errorMessage: \"Ooops! Something went wrong\"\n }\n }\n };\n}\n\nexport function register(user) {\n return { \n types: ['NO_LOADING','REGISTER_SUCCESS','REGISTER_FAILED'],\n payload: {\n request : {\n url: `/registration`,\n method: 'post',\n data: {user},\n successMessage: \"You have successfully registered\" ,\n errorMessage: \"Ooops! Something went wrong\"\n }\n }\n };\n}\n\nexport function confirm(confirmation_token) {\n return { \n types: ['NO_LOADING','CONFIRM_SUCCESS','CONFIRM_FAILED'],\n payload: {\n request : {\n url: `/confirmation`,\n method: 'put',\n data: { confirmation_token },\n successMessage: \"You have successfully confirmed your account\" ,\n errorMessage: \"Ooops! Something went wrong\"\n }\n }\n };\n}\n\nexport function resendConfirmation(email) {\n return {\n type: 'RESEND_CONFIRMATION',\n payload: {\n request : {\n url: `/confirmation`,\n method: 'post',\n data: {\n confirmation: {\n email: email\n }\n },\n successMessage: \"You have successfully resent the confirmation email\" ,\n errorMessage: \"Ooops! Something went wrong\"\n }\n }\n }\n}\n\nexport function logout() {\n return { \n types: ['NO_LOADING','LOGOUT_SUCCESS','LOGOUT_FAILED'],\n payload: {\n request : {\n url: `/session`,\n method: 'delete',\n successMessage: \"You have successfully logged out\" ,\n errorMessage: \"Ooops! Something went wrong\"\n }\n }\n };\n}\n\nexport function resetPasswordRequest(email) {\n return { \n types: ['NO_LOADING','REQUEST_RESET_SUCCESS','REQUEST_RESET_FAILED'],\n payload: {\n request : {\n url: `/password`,\n method: 'post',\n data: {password: { email }},\n successMessage: \"You have successfully requested to reset password\" ,\n errorMessage: \"Ooops! Something went wrong\"\n }\n }\n };\n}\n\nexport function resetPassword(reset_password_token, password) {\n return { \n types: ['NO_LOADING','RESET_SUCCESS','RESET_FAILED'],\n payload: {\n request : {\n url: `/password`,\n method: 'put',\n data: {reset_password_token, password},\n successMessage: \"You have successfully reset your password\" ,\n errorMessage: \"Ooops! Something went wrong\"\n }\n }\n };\n}\n\nexport function updateProfile(user, userID) {\n return { \n types: ['SHOW_LOADING','UPDATE_PROFILE_SUCCESS','UPDATE_PROFILE_FAILED'],\n payload: {\n request : {\n url: `/users/${userID}`,\n method: 'put',\n data: user,\n successMessage: \"You have successfully updated your account\" ,\n errorMessage: \"Ooops! Something went wrong\"\n }\n }\n };\n}\n\nexport function deleteProfile(userID) {\n return { \n types: ['SHOW_LOADING','DELETE_PROFILE_SUCCESS','DELETE_PROFILE_FAILED'],\n payload: {\n request : {\n url: `/users/${userID}`,\n method: 'delete',\n successMessage: \"You have successfully deleted your account\" ,\n errorMessage: \"Ooops! Something went wrong\"\n }\n }\n };\n}\n\nexport function sendFeedback(title, message, browserInformation, project) {\n return {\n types: ['NO_LOADING', 'SEND_FEEDBACK_SUCCESS', 'SEND_FEEDBACK_FAILED'],\n payload: {\n request: {\n url: `/feedback`,\n method: 'post',\n data: {title, message, browserInformation, project},\n successMessage: \"You have successfully sent a feedback!\",\n errorMessage: \"Ooops! Something went wrong\"\n }\n }\n }\n}\n\n","import React, { Component } from 'react';\nimport RaisedButton from 'material-ui/RaisedButton';\nimport imgCollation from '../assets/collation.png';\nimport imgLogo from '../assets/vceditor_logo.png';\nimport Register from '../components/authentication/Register';\nimport Login from '../components/authentication/Login';\nimport ResetPassword from '../components/authentication/ResetPassword';\nimport ResetPasswordRequest from '../components/authentication/ResetPasswordRequest';\nimport ResendConfirmation from '../components/authentication/ResendConfirmation';\nimport { btnLg } from '../styles/button';\nimport { connect } from 'react-redux';\nimport NetworkErrorScreen from '../components/global/NetworkErrorScreen';\nimport {\n login,\n register,\n confirm,\n resetPasswordRequest,\n resetPassword,\n logout,\n resendConfirmation,\n} from '../actions/backend/userActions';\nimport { API_URL } from '../store/axiosConfig';\nimport light from \"../styles/light.js\";\n\n/** Landing page of the app. Contain register, login and password reset forms. */\nclass Landing extends Component {\n constructor(props) {\n super(props);\n this.state = {\n register: false,\n login: false,\n reset: false,\n resetRequest: false,\n reset_token: '',\n message: '',\n resendConfirmation: false,\n resendConfirmationSuccess: false,\n };\n }\n\n toggleRegister = () => {\n this.setState({ register: !this.state.register, message: '' });\n };\n\n toggleLogin = () => {\n this.setState({ login: !this.state.login, message: '' });\n };\n\n toggleResetRequest = () => {\n this.setState({ resetRequest: !this.state.resetRequest, message: '' });\n };\n\n tapCancel = () => {\n this.setState({\n login: false,\n register: false,\n resetRequest: false,\n resendConfirmation: false,\n message: '',\n });\n };\n\n handleResetPasswordSuccess = () => {\n this.setState({\n reset: false,\n message:\n 'Your password has been successfully updated. Go ahead and login.',\n });\n };\n\n componentWillReceiveProps(nextProps) {\n if (nextProps.user.errors.confirmation.length > 0) {\n this.setState({ resendConfirmation: true });\n }\n if (\n nextProps.notification.includes('Successfully confirmed your account')\n ) {\n this.setState({\n message: nextProps.notification,\n resendConfirmationSuccess: true,\n });\n }\n }\n\n componentDidMount() {\n const token = this.props.location.search.split('=')[1];\n if (token) {\n if (this.props.location.pathname.includes('confirmation')) {\n this.props.confirmUser(token);\n if (this.props.user.authenticated) this.props.logoutUser();\n } else if (this.props.location.pathname.includes('password')) {\n this.setState({ reset: true, reset_token: token });\n }\n } else {\n if (this.props.user.authenticated) {\n this.props.history.push('/dashboard');\n }\n }\n // set instance into state\n let instanceURL = API_URL + '/instance'\n let instanceRequest = () => {\n fetch(instanceURL).then(async (response) => {\n const data = await response.json();\n this.setState({instance:data.current_instance})\n })\n }\n instanceRequest();\n }\n\n render() {\n const message = this.state.message ? \n Cannot connect to VCEditor. Trying to re-connect..\n
{this.state.message}
: '';\n let resetPassword = '';\n let resetPasswordRequest = '';\n let resendConfirmation = '';\n\n let register = (\n\n this.toggleRegister()}\n label=\"Create account\"\n {...btnLg}\n />\n
\n );\n let login = (\n \n this.toggleLogin()}\n label=\"Login\"\n {...btnLg}\n />\n
\n );\n\n if (this.state.register) {\n register = (\n \n
\n );\n }\n}\n\nconst mapStateToProps = state => {\n return {\n user: state.user,\n notification:\n 'notification' in state.user\n ? state.user.notification\n : state.global.notification,\n };\n};\n\nconst mapDispatchToProps = dispatch => {\n return {\n logoutUser: () => {\n dispatch(logout());\n },\n loginUser: user => {\n dispatch(login(user));\n },\n registerUser: user => {\n dispatch(register(user));\n },\n confirmUser: confirmation_token => {\n dispatch(confirm(confirmation_token));\n },\n resetPasswordRequest: email => {\n dispatch(resetPasswordRequest(email));\n },\n resetPassword: (reset_token, password) => {\n dispatch(resetPassword(reset_token, password));\n },\n resendConfirmation: email => {\n dispatch(resendConfirmation(email));\n },\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Landing);\n","import React from 'react';\nimport AddIcon from 'material-ui/svg-icons/content/add';\nimport CopyIcon from 'material-ui/svg-icons/content/content-copy';\nimport ImportIcon from 'material-ui/svg-icons/action/system-update-alt';\n\n/** New Project dialog - select between creating new, importing and cloning project */\nconst NewProjectSelection = (props) => {\n return (\n \n
\n \n \n 
\n
\n \n 
\n
\n
\n {message}\n {register}\n {login}\n {resetPasswordRequest}\n {resetPassword}\n {resendConfirmation}\n
\n \n
\n {message}\n {register}\n {login}\n {resetPasswordRequest}\n {resetPassword}\n {resendConfirmation}\n
\n \n\n props.setProjectType(\"import\")}\n tabIndex=\"2\"\n >\n
\n );\n}\nexport default NewProjectSelection;","import React from 'react';\nimport { floatFieldLight } from '../../styles/textfield';\nimport TextField from 'material-ui/TextField';\nimport RaisedButton from 'material-ui/RaisedButton';\nimport FlatButton from 'material-ui/FlatButton';\n\n/** New Project dialog - panel with a form to fill out project details */\nconst ProjectDetails = props => {\n let submit = event => {\n if (event) event.preventDefault();\n if (!props.doErrorsExist()) props.nextStep();\n };\n return (\n \n
\n \n\n \n \n
\n \n Import\n Import a collation from VCEditor (JSON Only)\n
\n \n
\n );\n};\nexport default ProjectDetails;\n","import React from 'react';\nimport AutoComplete from 'material-ui/AutoComplete';\nimport {floatFieldLight} from '../../styles/textfield';\n\n/** Custom select field */\nexport default class SelectField extends React.Component {\n\n constructor(props) {\n super(props);\n let searchText = \"\";\n if (props.value!==undefined) {\n const targetData = props.data.find((data)=>data.value===props.value);\n if (targetData) searchText = targetData.text;\n }\n this.state = {\n searchText: searchText.toString(),\n prevSearchText: searchText.toString(),\n filteredDropDown: [],\n }\n }\n\n componentWillReceiveProps(nextProps) {\n if (nextProps.value && nextProps.value!==this.props.value) {\n const targetData = nextProps.data.find((data)=>data.value===nextProps.value);\n if (targetData) this.setState({searchText: targetData.text, prevSearchText: targetData.text});\n } else if (nextProps.value===\"\") {\n this.setState({searchText:\"\", prevSearchText:\"\"});\n }\n }\n\n onMenuClose = () => {\n const targetIndex = this.props.data.findIndex((data)=>data.text===this.state.searchText);\n if (targetIndex>=0) {\n const target = this.props.data[targetIndex];\n if (this.state.searchText!==this.state.prevSearchText) {\n const searchTextExists = target !==undefined;\n if (searchTextExists) {\n // User entered a valid value \n this.setState({prevSearchText: this.state.searchText});\n // Return selected value to caller component\n this.props.onChange(target.value, targetIndex);\n } else {\n // Reset text field to have the previous valid search text\n this.setState({searchText: this.state.prevSearchText});\n }\n }\n }\n \n // Unfocus the input field\n document.querySelector(\"#\"+this.props.id).blur();\n }\n\n filter = (searchText, key) => {\n if (searchText===this.state.prevSearchText || searchText.length===0) { \n return AutoComplete.noFilter(searchText, key);\n } else {\n return AutoComplete.caseInsensitiveFilter(searchText, key);\n }\n }\n\n render() {\n let style=this.props.style? this.props.style : {};\n if (this.props.width) style[\"width\"] = this.props.width.width;\n return Object Details
\n \n\n
\n );\n}\nexport default ProjectStructure;\n","import React from 'react';\nimport FlatButton from 'material-ui/FlatButton';\nimport RaisedButton from 'material-ui/RaisedButton';\nimport {RadioButton, RadioButtonGroup} from 'material-ui/RadioButton';\n\n/** New Project dialog - import existing project */\nexport default class ImportProject extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n importData: \"\",\n importFormat: \"json\",\n imageData:\"\",\n }\n }\n\n isDisabled = () => {\n if (this.state.importData)\n return (this.state.importData.length===0);\n else \n return true\n }\n\n submit = (event) => {\n if (event) event.preventDefault();\n if (!this.isDisabled()) {\n this.props.importProject({importData: this.state.importData, importFormat: this.state.importFormat, imageData: this.state.imageData});\n } \n }\n\n onChange = (value, type) => {\n this.setState({ [type]: value });\n }\n\n componentWillReceiveProps = (nextProps) => {\n if (nextProps.importStatus===\"SUCCESS\") {\n nextProps.reset();\n nextProps.close();\n }\n }\n\n checkIfFileTypeIsInvalid = (file) => {\n const allowedFileTypes = [\"json\", \"xml\"];\n return !allowedFileTypes.includes(file.type)\n }\n\n\n handleFileSelected = (files) => {\n let file = files[0];\n let importFormat = file.type.split(\"/\")[1];\n let reader = new FileReader();\n reader.readAsText(file);\n reader.onloadend = ()=>this.setState({importData: reader.result, importFormat})\n }\n\n handleImageFile = (files) => {\n let file = files[0];\n let reader = new FileReader();\n reader.readAsDataURL(file);\n reader.onloadend = ()=> {this.setState({imageData: reader.result})}\n }\n\n render() {\n let xmlMessage = \"\";\n if (this.state.importFormat===\"xml\")\n xmlMessage = \n \n \n
\n Structure
\n\n Pre-populate your collation with quires and leaves by using the formula below. \n Generate the items by clicking the \"Add\" button. You can add multiple times.\n
\n\n Note: you can change this later.\n
\n\n \n
\n {collationGroupsRows.length>0?\n \n {props.set(\"quireNo\", parseInt(newValue, 10))}}\n style={{width:50}}\n type=\"number\"\n />\n
\n \n \n {props.set(\"leafNo\", parseInt(newValue, 10))}}\n style={{width:50}}\n type=\"number\"\n min=\"1\"\n />\n
\n \n props.set(\"conjoined\", !props.conjoined)}\n />\n
\n \n props.addCollationRows()}\n primary\n />\n
\n \n \n
\n
: \"\"\n }\n \n \n props.previousStep()}\n />\n {props.collationGroups.length>0?\n props.nextStep()}\n />:\"\"}\n
\n Note: If the XML file was not originally created by this application, \n some attributes and mappings may not be successfully imported. \n However, the collation structure will always be importable from any XML file that follows the VisColl schema.
\n return (\n\n
\n );\n };\n}\n","import React from 'react';\nimport RaisedButton from 'material-ui/RaisedButton';\nimport FlatButton from 'material-ui/FlatButton';\nimport SelectField from '../global/SelectField';\n\n/** New Project dialog - clone existing project */\nexport default class CloneProject extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n projectIndex: -1\n }\n }\n\n onChange = (projectIndex) => {\n this.setState({ projectIndex });\n }\n\n submit = (event) => {\n if (event) event.preventDefault();\n this.props.cloneProject(this.props.allProjects[this.state.projectIndex].id);\n this.props.reset();\n this.props.close();\n }\n\n render(){\n if (this.props.allProjects.length>0) {\n const data = this.props.allProjects.map((project, index)=>{\n return (\n {text: project.title, value:index} \n );\n });\n return (\n \n
\n Import
\nImport collation
\nUpload your exported collation file or directly paste the content of the file in the textbox below.
\n \n\n
\n );\n } else {\n return Clone Existing Collation
\n \n\n
\n }\n }\n}\n","import React from 'react';\nimport RaisedButton from 'material-ui/RaisedButton';\nimport {btnMd} from '../../styles/button';\n\n/** New Project dialog - select between starting with an empty project or pre-poulating it */\nconst NewProjectChoice = (props) => {\n return Clone Existing Collation
\nYou do not have any projects to clone.
\n\n this.props.previousStep()}\n />\n
\n \n
\n}\nexport default NewProjectChoice;","import React from 'react';\nimport TextField from 'material-ui/TextField';\nimport RaisedButton from 'material-ui/RaisedButton';\nimport FlatButton from 'material-ui/FlatButton';\nimport {RadioButton, RadioButtonGroup} from 'material-ui/RadioButton';\nimport SelectField from '../global/SelectField';\nimport IconButton from 'material-ui/IconButton';\nimport IconHelp from 'material-ui/svg-icons/action/help';\n\n/** New Project dialog - panel with additional options for project creation */\nconst ProjectOptions = props => {\n\n let handleChange = (e, v) => {\n // assigning values to null would not have to happen if generateFolioNumber\n // and generatePageNumber were combined into a single variable\n if (v === 'folio_number') {\n props.set('generateFolioNumber', v);\n props.set('generatePageNumber', null)\n } else if (v === 'page_number') {\n props.set('generatePageNumber', v);\n props.set('generateFolioNumber', null)\n } else {\n console.log(e, v);\n }\n };\n\n return (\n \n \n \n Starting number\n \n
\n ) : (\n ''\n )}\n\n Project Options
\nGenerate page/folio numbers
\n\n handleChange(e, v)}\n style={{width: 240}}\n >\n
\n\n {props.generateFolioNumber || props.generatePageNumber ? (\n \n {\n props.set('startFolioPageNumber', parseInt(newValue, 10));\n }}\n style={{width: 50}}\n type=\"number\"\n />\n
\n \n Select starting texture\n \n
\n \n Select side notation style\n \n
\n \n props.previousStep()}\n />\n props.finish()}\n />\n
\n \n );\n};\nexport default ProjectOptions;\n","import React from 'react';\nimport Dialog from 'material-ui/Dialog';\nimport NewProjectSelection from './NewProjectSelection';\nimport ProjectDetails from './ProjectDetails';\nimport ProjectStructure from './ProjectStructure';\nimport ImportProject from './ImportProject';\nimport CloneProject from './CloneProject';\nimport NewProjectChoice from './NewProjectChoice';\nimport ProjectOptions from './ProjectOptions';\n\n/** New Project dialog wrapper */\nexport default class NewProjectContainer extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n projectType: '',\n step: 1,\n title: '',\n shelfmark: '',\n notationStyle: 'r-v',\n date: '',\n quireNo: 2,\n leafNo: 10,\n conjoined: true,\n startFolioPageNumber: 1,\n generateFolioNumber: 'folio_number',\n generatePageNumber: 'page_number',\n startingTexture: 'Hair',\n collationGroups: [],\n errors: {\n title: '',\n shelfmark: '',\n date: '',\n },\n };\n }\n\n set = (name, value) => {\n this.setState({ [name]: value }, () => {\n this.setState({\n errors: { ...this.state.errors, ...this.checkValidationError(name) },\n });\n });\n };\n\n reset = () => {\n this.setState({\n projectType: '',\n step: 1,\n title: '',\n shelfmark: '',\n notationStyle: '',\n date: '',\n quireNo: 1,\n leafNo: 10,\n conjoined: true,\n startFolioPageNumber: 1,\n generateFolioNumber: null,\n generatePageNumber: null,\n collationGroups: [],\n errors: {\n title: '',\n shelfmark: '',\n date: '',\n },\n });\n };\n\n /**\n * Validate user input and display appropriate error message\n * @param {string} type text field name\n * @public\n */\n checkValidationError = type => {\n const errors = {};\n this.props.allProjects.forEach(project => {\n if (type === 'title') {\n if (project.title === this.state.title) {\n errors.title = 'Project title should be unique';\n } else if (!this.state.title) {\n errors.title = 'Project title is required';\n }\n } else if (type === 'shelfmark') {\n if (project.shelfmark === this.state.shelfmark) {\n errors.shelfmark = 'Manuscript shelfmark should be unique';\n } else if (!this.state.shelfmark) {\n errors.shelfmark = 'Manuscript shelfmark is required';\n }\n }\n });\n if (Object.keys(errors).length === 0) {\n errors[type] = '';\n }\n return errors;\n };\n /**\n * Return true if any errors exist in the project form\n * @public\n */\n doErrorsExist = () => {\n if (this.state.errors.title) return true;\n if (this.state.errors.shelfmark) return true;\n for (let group in this.state.collationGroups) {\n if (!this.state.collationGroups[group].leaves && this.state.step === 2)\n return true;\n }\n if (!this.state.title && this.state.step === 1) return true;\n if (!this.state.shelfmark && this.state.step === 1) return true;\n return false;\n };\n\n /**\n * Remove a group\n * @param {number} groupNo group number\n * @public\n */\n handleRemoveCollationGroupRow = groupNo => {\n let newCollationGroups = [];\n this.state.collationGroups.forEach(group => {\n if (group.number < groupNo) {\n newCollationGroups.push(group);\n } else if (group.number > groupNo) {\n newCollationGroups.push({ ...group, number: group.number - 1 });\n }\n });\n this.setState({ collationGroups: newCollationGroups });\n };\n\n /**\n * Add a new group\n * @public\n */\n handleAddNewCollationGroupRow = () => {\n let newCollationGroups = [].concat(this.state.collationGroups);\n for (let i = 0; i < parseInt(this.state.quireNo, 10); i++) {\n newCollationGroups.push({\n number: newCollationGroups.length + 1,\n leaves: this.state.leafNo,\n conjoin: this.state.conjoined,\n oddLeaf: 1,\n });\n }\n this.setState({ collationGroups: newCollationGroups });\n };\n\n /**\n * Update a group\n * @param {object} event\n * @param {object} updatedGroup\n * @param {string} field\n * @param {string} value\n * @public\n */\n onInputChangeCollationGroupsRows = (event, updatedGroup, field, value) => {\n let newCollationGroups = [];\n this.state.collationGroups.forEach((group, i) => {\n if (updatedGroup.number === i + 1) {\n updatedGroup = { ...group };\n if (field === 'oddLeaf') {\n updatedGroup[field] = value;\n } else if (field === 'leaves') {\n updatedGroup[field] = parseInt(event.target.value, 10);\n if (updatedGroup[field] < updatedGroup['oddLeaf']) {\n updatedGroup['oddLeaf'] = 1;\n }\n if (updatedGroup[field] === 1) {\n updatedGroup['conjoin'] = false;\n }\n }\n newCollationGroups.push(updatedGroup);\n } else {\n newCollationGroups.push(group);\n }\n });\n this.setState({ collationGroups: newCollationGroups });\n };\n\n /**\n * Toggle the conjoin option for a specific group\n * @param {object} updatedGroup\n * @public\n */\n handleToggleConjoin = updatedGroup => {\n let newCollationGroups = [];\n this.state.collationGroups.forEach((group, i) => {\n if (updatedGroup.number === i + 1) {\n updatedGroup = { ...group };\n updatedGroup.conjoin = !updatedGroup.conjoin;\n newCollationGroups.push(updatedGroup);\n } else {\n newCollationGroups.push(group);\n }\n });\n this.setState({ collationGroups: newCollationGroups });\n };\n\n finish = () => {\n const user = {\n id: this.props.user.id,\n token: this.props.user.token,\n };\n let request = {\n project: {\n title: this.state.title,\n shelfmark: this.state.shelfmark,\n notationStyle: this.state.notationStyle,\n metadata: {\n date: this.state.date,\n },\n preferences: {\n showTips: true,\n side:\n this.state.generatePageNumber !== null\n ? { [this.state.generatePageNumber]: true }\n : {},\n leaf:\n this.state.generateFolioNumber !== null\n ? { [this.state.generateFolioNumber]: true }\n : {},\n },\n },\n groups: [],\n folioNumber:\n // generateFolioNumber and generatePageNumber could be replaced by a single\n // generateFolioPageNumber variable that is assigned the correct value based on state\n // either 'folio_number' or 'page_number'\n this.state.generateFolioNumber === 'folio_number'\n ? this.state.startFolioPageNumber\n : null,\n pageNumber:\n this.state.generatePageNumber === 'page_number'\n ? this.state.startFolioPageNumber\n : null,\n startingTexture: this.state.startingTexture,\n };\n this.state.collationGroups.forEach(group => request.groups.push(group));\n this.props.createProject(request, user);\n this.reset();\n this.props.close();\n console.log(request);\n };\n\n handleRequestClose = () => {\n if (this.state.step === 1) {\n this.reset();\n this.props.close();\n }\n };\n\n render() {\n let content = (\n \n this.handleRequestClose()}\n className=\"newProjectDialog\"\n autoScrollBodyContent\n >\n {content}\n \n
\n );\n } else {\n return ;\n }\n }\n}\n","import React from 'react';\nimport IconButton from 'material-ui/IconButton';\nimport CloseIcon from 'material-ui/svg-icons/navigation/close';\nimport RaisedButton from 'material-ui/RaisedButton';\nimport TextField from 'material-ui/TextField';\nimport Dialog from 'material-ui/Dialog';\nimport FlatButton from 'material-ui/FlatButton';\nimport IconSubmit from 'material-ui/svg-icons/action/done';\nimport IconClear from 'material-ui/svg-icons/content/clear';\nimport Checkbox from 'material-ui/Checkbox';\n\n/** Form to edit project information on the project panel in the dashboard */\nclass EditProjectForm extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n unsavedDialog: false,\n deleteDialog: false,\n deleteUnlinkedImages: false,\n editing: {\n title: false,\n shelfmark: false,\n date: false,\n },\n errors: {\n title: \"\",\n shelfmark: \"\",\n date: \"\",\n },\n };\n }\n\n /**\n * Update project pane if a new project was selected in the dashboard\n */\n componentWillReceiveProps(nextProps) {\n if (nextProps.selectedProject) {\n let title = nextProps.selectedProject.title;\n let shelfmark = nextProps.selectedProject.shelfmark;\n let date = nextProps.selectedProject.metadata.date;\n if (this.props.selectedProject && this.props.selectedProject.id === nextProps.selectedProject.id) {\n // Do not update the fields if they are currently editing and did not submit\n if (this.state.title !== title && this.state.editing.title) title = this.state.title;\n if (this.state.shelfmark !== shelfmark && this.state.editing.shelfmark) shelfmark = this.state.shelfmark;\n if (this.state.date !== date && this.state.editing.date) date = this.state.date;\n } else {\n // Switched project selection - reset editing states\n this.setState({\n editing: {\n title: false,\n shelfmark: false,\n date: false,\n },\n });\n }\n this.setState({\n title: title,\n shelfmark: shelfmark,\n date: date,\n errors: {\n title: \"\",\n shelfmark: \"\",\n date: \"\",\n },\n selectedProject: nextProps.selectedProject,\n allProjects: nextProps.allProjects,\n })\n }\n }\n\n /**\n * Validate user input and display appropriate error message\n */\n checkValidationError = (type) => {\n const errors = {title:\"\", shelfmark:\"\", date:\"\"};\n const allProjectsExceptCurrent = [...this.state.allProjects];\n const selectedProjectIndex = this.state.allProjects.findIndex((project)=>project.id===this.props.selectedProject.id);\n allProjectsExceptCurrent.splice(selectedProjectIndex, 1);\n allProjectsExceptCurrent.forEach(project => {\n if (type===\"title\"){\n if (project.title === this.state.title)\n errors.title = \"Project title should be unique\";\n if (!this.state.title)\n errors.title = \"Project title is required\";\n } else {\n if (project.shelfmark === this.state.shelfmark)\n errors.shelfmark = \"Manuscript shelfmark should be unique\";\n if (!this.state.shelfmark)\n errors.shelfmark = \"Manuscript shelfmark is required\";\n }\n });\n return errors;\n }\n\n /**\n * Return true if any errors exist in the project form\n */\n ifErrorsExist = () => {\n if (this.state.errors.title)\n return true;\n if (this.state.errors.shelfmark)\n return true;\n return false;\n }\n\n /**\n * Update state when user inputs new value in a text field \n */\n onInputChange = (event, newValue, type) => {\n this.setState({[type]: newValue, editing: {...this.state.editing, [type]:true}}, () => {\n this.setState({errors: this.checkValidationError(type)}) \n });\n }\n\n /**\n * Toggle delete confirmation dialog\n */\n handleDeleteDialogToggle = (deleteDialog=false) => {\n this.props.togglePopUp(deleteDialog);\n this.setState({ deleteDialog });\n };\n\n /**\n * Toggle unsaved changes dialog\n */\n handleUnsavedDialogToggle = (unsavedDialog=false) => {\n this.setState({ unsavedDialog });\n };\n\n /**\n * Submit project update of a specific input field \n */\n handleProjectUpdate = (event, field) => {\n if (event) event.preventDefault();\n const projectID = this.props.selectedProject.id;\n const project = {\n title: this.state.title,\n shelfmark: this.state.shelfmark, \n metadata: {\n date: this.state.date\n }\n };\n const user = {\n id: this.props.user.id,\n token: this.props.user.token\n };\n this.setState({editing: {...this.state.editing, [field]: false }});\n this.props.updateProject(projectID, project, user);\n }\n /**\n * Submit project delete \n */\n handleProjectDelete = () => {\n this.props.closeProjectPanel();\n this.setState({deleteDialog: false});\n const projectID = this.props.selectedProject.id;\n this.props.deleteProject(projectID, this.state.deleteUnlinkedImages);\n };\n\n /**\n * Close project panel\n */\n handleProjectPanelClose = (ignoreChanges=false) => {\n // Check for any unsaved changes before closing and show the warning dialog.\n if (!ignoreChanges && this.isEditing()) \n this.setState({ unsavedDialog: true });\n else {\n this.setState({ unsavedDialog: false });\n this.props.closeProjectPanel();\n }\n }\n\n /**\n * Return true if any input fields have been changed and not saved\n */\n isEditing = () => {\n return (this.state.editing.title||this.state.editing.shelfmark||this.state.editing.uri||this.state.editing.date);\n }\n\n /**\n * Reset text field to original values\n */\n handleProjectCancelUpdate = (field) => {\n this.setState({\n [field]: this.props.selectedProject[field], \n editing: {...this.state.editing, [field]: false },\n errors: {...this.state.errors, [field]: \"\"},\n });\n }\n\n /**\n * Return a generated HTML of submit and cancel buttons for a specific input name\n */\n submitButtons = (field) => {\n if (this.state.editing[field]) {\n return (\n \n
\n )\n } else {\n return \"\";\n }\n }\n\n render() {\n const selectedProject = this.props.selectedProject;\n if (!selectedProject)\n return ;\n\n let projectPanelData = (\n \n \n \n \n
\n );\n\n const deleteActions = [\n \n Created at: {new Date(selectedProject.created_at).toLocaleString('en-US')}
\n Last modified: {new Date(selectedProject.updated_at).toLocaleString('en-US')}
\n
\n\n \n Last modified: {new Date(selectedProject.updated_at).toLocaleString('en-US')}
\n
\n\n this.handleProjectPanelClose()}\n tabIndex={this.props.tabIndex}\n > \n \n\n {projectPanelData}\n\n
\n\n this.props.history.push(`/project/${this.props.selectedProject.id}`)}\n style={{width:\"49%\",float:\"left\",marginRight:\"2%\"}}\n tabIndex={this.props.tabIndex}\n />\n this.handleDeleteDialogToggle(true)}\n labelColor=\"#b53c3c\"\n style={{width:\"49%\"}}\n tabIndex={this.props.tabIndex}\n />\n\n \n this.setState({deleteUnlinkedImages: !this.state.deleteUnlinkedImages})}\n />\n \n \n
\n );\n }\n}\nexport default EditProjectForm;\n","import React from 'react';\nimport Dialog from 'material-ui/Dialog';\nimport FlatButton from 'material-ui/FlatButton';\nimport RaisedButton from 'material-ui/RaisedButton';\n\n/** Confirmation dialog to delete or unlink image(s) */\nexport default class RemveImageConfirmation extends React.Component {\n\n submit = () => {\n if (this.props.actionType===\"delete\") {\n this.props.deleteImages(this.props.imgs.map((img)=>img.id));\n } else {\n this.props.unlinkImages(this.props.imgs.map((img)=>img.id));\n }\n this.props.toggleConfirmation(\"\");\n }\n render() {\n const actions = [\n \n\n
\n this.props.toggleConfirmation(\"\")}\n >\n { message }\n \n
\n );\n }\n}","import React, {Component} from 'react';\nimport update from 'immutability-helper';\nimport RaisedButton from 'material-ui/RaisedButton';\nimport Checkbox from 'material-ui/Checkbox';\nimport { btnBase } from '../../styles/button';\n\n/** Upload image component */\nclass UploadImages extends Component {\n constructor(props) {\n super(props);\n this.state = {\n uploadedImages: [],\n uploadedDuplicates: [],\n duplicatesToUpload: [],\n filesizeExceeded: [],\n };\n }\n\n /**\n * Removes file extension and replaces any \".\" with underscore\n */\n parseFilename = (filename) => {\n let tokenizedName = filename.split(/[\\s.-]+/);\n tokenizedName.splice(-1);\n tokenizedName = tokenizedName.join(\"_\");\n return tokenizedName.toLowerCase();\n }\n\n submitUpload = (e) => {\n e.preventDefault();\n const duplicateImageUploads = this.state.uploadedDuplicates.filter((item,i)=>this.state.duplicatesToUpload[i]);\n const uploadedImages = this.state.uploadedImages.concat(duplicateImageUploads);\n this.props.action.uploadImages(uploadedImages);\n // Clear input file list\n this.setState({uploadedImages:[], filesizeExceeded: [], duplicatesToUpload:[], uploadedDuplicates:[]});\n document.getElementById(\"uploadImages\").value=\"\";\n }\n\n resetUpload = (e) => {\n e.preventDefault();\n this.setState({uploadedImages:[], filesizeExceeded:[], duplicatesToUpload:[], uploadedDuplicates:[]});\n document.getElementById(\"uploadImages\").value=\"\";\n }\n\n handleFiles = (files) => {\n let findIfExists = function(img) {\n return img.label===this.filename+\".\"+this.fileExtension;\n }\n let that = this;\n let onLoadEnd = function(filename, targetState) {\n return function (event) {\n const newImageList = update(that.state[targetState], {$push:[{filename, content:this.result}]});\n that.setState({[targetState]: newImageList});\n }\n }\n this.setState({uploadedImages: []}, ()=>{\n let duplicatesToUpload = [];\n let filesizeExceeded = [];\n for (let i=0; i\n
\n }\n if (this.state.filesizeExceeded.length>0) {\n filesizeErrorSection = \n 30?file.filename.substring(0,30)+\"...\": file.filename} \n labelStyle={{color:\"#bd4a4a\"}}\n checked={this.state.duplicatesToUpload[i]}\n onClick={()=>this.toggleCheckbox(i)}\n />\n )\n }\n
\n The following file{this.state.duplicatesToUpload.length>1?\"s \":\" \"} \n already exist{this.state.duplicatesToUpload.length>1?\"\":\"s\"}. If you choose to upload \n {this.state.duplicatesToUpload.length>1?\" them\":\" it\"}, {this.state.duplicatesToUpload.length>1?\"they \":\"it \"} \n will get renamed.
\n {\n this.state.uploadedDuplicates.map((file,i)=>\n0?{wordWrap: \"break-word\",marginTop:5}:{wordWrap: \"break-word\"}}>\n
\n }\n\n if ((duplicateErrorSection || filesizeErrorSection) && this.state.uploadedImages.length>0) {\n errorText = \n
\n The following file{this.state.filesizeExceeded.length>1?\"s are\":\" is\"} greater than 15mb and will not be uploaded:
\n- \n {this.state.filesizeExceeded.map((filename)=>
- {filename} )}\n
There {this.state.uploadedImages.length>1?\"are\":\"is\"} {this.state.uploadedImages.length} other file{this.state.uploadedImages.length>1?\"s\":\"\"} ready for upload.
;\n }\n\n return \n
\n }\n}\nexport default UploadImages;","import React, {Component} from 'react';\nimport { Grid } from 'react-virtualized';\nimport Checkbox from 'material-ui/Checkbox';\nimport RaisedButton from 'material-ui/RaisedButton';\nimport FlatButton from 'material-ui/FlatButton';\nimport ChipInput from 'material-ui-chip-input'\nimport Popover from 'material-ui/Popover';\nimport Menu from 'material-ui/Menu';\nimport MenuItem from 'material-ui/MenuItem';\nimport IconFilter from 'material-ui/svg-icons/content/filter-list';\nimport ArrowDropRight from 'material-ui/svg-icons/navigation-arrow-drop-right';\nimport RemoveImageConfirmation from '../imageManager/RemoveImageConfirmation';\nimport UploadImages from '../imageManager/UploadImages';\nimport { btnBase } from '../../styles/button';\n\n/** Image collection page in dashboard section */\nclass ImageCollection extends Component {\n constructor(props) {\n super(props);\n this.state = {\n columnCount: 3,\n selectedImages: props.images? props.images.map((image)=>false):[],\n filterOpen: false,\n filter: {value:\"all\", text:\"Show all images\"},\n removeConfirmationOpen: \"\",\n windowWidth: window.innerWidth,\n gridWidth: window.innerWidth*0.50,\n gridHeight: window.innerHeight-150,\n columnWidth: window.innerWidth*0.50*0.33,\n };\n }\n\n componentWillReceiveProps(nextProps) {\n if (this.state.selectedImages.length===0||nextProps.images.length!==this.props.images.length) {\n this.setState({selectedImages:nextProps.images.map((image)=>false)});\n }\n }\n\n componentDidMount() {\n window.addEventListener(\"resize\", this.windowResize);\n }\n\n componentWillUnmount() {\n window.removeEventListener(\"resize\", this.windowResize);\n }\n\n toggleConfirmation = (value) => {\n this.setState({removeConfirmationOpen:value});\n if (value.length>0) {\n this.props.togglePopUp(true);\n } else {\n this.props.togglePopUp(false);\n }\n }\n\n windowResize = () => {\n this.setState({\n windowWidth: window.innerWidth,\n gridWidth: window.innerWidth*0.50,\n gridHeight: window.innerHeight-150,\n columnWidth: window.innerWidth*0.50*0.33,\n });\n }\n\n handleFilterClick = (e) => {\n e.preventDefault(); // Prevent ghost click\n this.setState({\n filterOpen: true,\n anchorEl: e.currentTarget,\n });\n }\n handleFilterClose = () => {\n this.setState({\n filterOpen: false,\n });\n }\n handleFilterChoice = (value, text) => {\n this.setState({\n filter: {value, text},\n filterOpen: false,\n selectedImages: this.props.images.map((image)=>false),\n })\n }\n\n toggleCheckbox = (index) => {\n let newArray = Object.assign([], this.state.selectedImages);\n newArray[index] = !newArray[index];\n this.setState({selectedImages: newArray}, ()=>this.forceUpdate());\n }\n\n cellRenderer = ({ columnIndex, key, rowIndex, style }, imagesToRender) => {\n const index = this.state.columnCount*rowIndex+columnIndex;\n if (index\n this.handleFiles(event.target.files)}\n onClick={(event)=>{event.target.value=null; this.setState({uploadedImages:[], filesizeExceeded:[], duplicatesToUpload:[], uploadedDuplicates:[]})}}\n multiple\n style={{width:\"100%\"}}\n />\n
\n {duplicateErrorSection}\n {filesizeErrorSection}\n {errorText}\n \n Accepted formats: .png, .jpeg, .jpg, .gif, .tiff\n
\n\n this.resetUpload(e)}\n tabIndex={this.props.tabIndex}\n {...btnBase()}\n style={{...btnBase().style, marginRight: 5}}\n />\n x)<0)}\n onClick={this.submitUpload}\n primary\n {...btnBase()}\n />\n
\n Select one or more images to edit
\n this.handleAddChip(chip)}\n onRequestDelete={(chip, index) => this.handleDeleteChip(chip, index)}\n dataSource={projectDataSource}\n dataSourceConfig={{text:'title', value:'id'}}\n openOnFocus={true}\n fullWidth\n hintText={\"Choose project..\"}\n />\n
\n infoPanel = {numSelected>1?\"Projects in common\":\"Projects\"}
\n\n {this.toggleConfirmation(\"delete\")}}\n backgroundColor=\"#b53c3c\"\n labelColor=\"#ffffff\" \n fullWidth\n />\n
\n }\n // Generate file upload panel\n const uploadPanel = {numSelected} image{numSelected>1?\"s\":\"\"} selected
\n {projectInfo}\n\n
\n // Generate filter panel\n const filterPanel = Upload images
\n\n
\n\n return \n }\n {...btnBase()}\n />\n \n \n \n
\n \n !x)===-1}\n />\n this.setState({selectedImages:this.props.images.map((image)=>false)})}\n labelStyle={this.state.windowWidth<=768?{fontSize:\"0.6em\"}:{}}\n disabled={this.state.selectedImages.findIndex((x)=>x)===-1}\n />\n
\n \n 0}\n toggleConfirmation={this.toggleConfirmation}\n deleteImages={this.props.action.deleteImages}\n unlinkImages={this.props.action.unlinkImages}\n imgs={activeImages.map((img)=>{return {id:img.id, label:img.label}})}\n actionType={\"delete\"}\n numToRemove={numSelected}\n collectionsMode={true}\n />\n
\n } else {\n return \n }\n }\n}\nexport default ImageCollection;","import React from 'react';\n\n/**\n * List the projects in a table format\n */\nconst ListView = ({selectedProjectID, selectProject, allProjects=[], doubleClick, tabIndex}) => {\n const viewDate = {year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit'}\n const ariaDate = {year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit'}\n const projectsList = allProjects.map((project, i) => {\n return ( \n \n );\n });\n return (\n \n
\n \n {filterPanel}\n this.cellRenderer(data, imagesToRender)}\n columnCount={this.state.columnCount}\n columnWidth={this.state.columnWidth}\n height={this.state.gridHeight}\n rowCount={imagesToRender.length%3===0? imagesToRender.length/3 : Math.floor(imagesToRender.length/3)+1}\n rowHeight={200}\n width={this.state.gridWidth}\n id=\"grid\"\n />\n
\n \n {numSelected>0?infoPanel:uploadPanel}\n
\n \n
\n );\n};\nexport default ListView;\n","import React from 'react';\nimport Dialog from 'material-ui/Dialog';\nimport loadingImg from '../../assets/viscoll_loading.gif';\n\n/** Stateless functional component for the loading screen */\nconst LoadingScreen = (props) => {\n const logo = \n
\n Name
\n Date Modified
\n \n {projectsList}\n
\n \n Re-login into your account to get back to business.
\n \n );\n }\n}\n\nconst mapStateToProps = state => {\n return {\n serverError: state.global.serverError,\n };\n};\n\nconst mapDispatchToProps = dispatch => {\n return {\n logout: () => {\n dispatch({ type: 'LOGOUT_SUCCESS' });\n },\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ServerErrorScreen);\n","import React from 'react';\nimport Snackbar from 'material-ui/Snackbar';\n\n/** Stateless functional component for snackbar notification */\nconst Notification = (props) => {\n return (\n
\n
\n )\n } else {\n return \"\";\n }\n }\n\n handleUserUpdate = (event, type) => {\n if (event) event.preventDefault();\n let updatedUser = { \n user: {\n [type]: this.state[type],\n }\n };\n if (this.state.currentPassword!==\"\") {\n updatedUser = {user: {\n current_password: this.state.currentPassword,\n password: this.state.newPassword\n }};\n }\n this.props.handleUserProfileUpdate(updatedUser);\n let types = {};\n if (type===\"password\") {\n types = {currentPassword: false, newPassword: false, newPasswordConfirm: false};\n } else {\n types = {[type]: false};\n }\n this.setState({editing:{...this.state.editing, ...types}}, ()=> {\n if (type===\"email\") {\n this.setState({emailMessagePending:true});\n }\n });\n }\n\n render() {\n const userProfileActions = [\n \n \n
\n );\n\n let emailField = (\n \n \n
\n );\n\n let password = (\n \n \n
\n );\n\n\n return (\n \n \n \n {nameField}\n
\n {emailField}\n
\n\n A confirmation link has been sent to your new email address. \n
\n Your current email will still remain active until the new email is activated.\n \n\n
\n );\n }\n}\n \nexport default UserProfileForm;\n","import React, {Component} from 'react';\nimport TextField from 'material-ui/TextField';\nimport Checkbox from 'material-ui/Checkbox';\nimport {floatFieldLight} from '../../styles/textfield';\n\n/** Filter terms */\nclass TermsFilter extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n value: \"\",\n }\n }\n \n render() {\n return ( \n \n {emailField}\n
\n
Update your password
\n {password}\n\n\n Your current email will still remain active until the new email is activated.\n \n\n
\n
\n );\n }\n}\n\n\nexport default TermsFilter;\n","import React, { Component } from 'react';\nimport Toolbar from 'material-ui/Toolbar';\nimport { ToolbarGroup } from 'material-ui/Toolbar';\nimport IconMenu from 'material-ui/IconMenu';\nimport MenuItem from 'material-ui/MenuItem';\nimport IconButton from 'material-ui/IconButton';\nimport Avatar from 'material-ui/Avatar';\nimport UserProfileForm from '../components/topbar/UserProfileForm';\nimport FlatButton from 'material-ui/FlatButton';\nimport TermsFilter from '../components/termsManager/TermsFilter';\nimport FilterIcon from 'material-ui/svg-icons/content/filter-list';\nimport Undo from 'material-ui/svg-icons/content/undo';\nimport Redo from 'material-ui/svg-icons/content/redo';\nimport Image from 'material-ui/svg-icons/image/image';\nimport imgLogo from '../assets/vceditor_logo.svg';\nimport { btnBase } from '../styles/button';\nimport { connect } from 'react-redux';\nimport {\n logout,\n updateProfile,\n deleteProfile,\n} from '../actions/backend/userActions';\nimport { API_URL } from '../store/axiosConfig';\nimport light from '../styles/light';\n\n/** The topbar menu used in `Dashboard` and `Project` components */\nclass TopBar extends Component {\n constructor(props) {\n super(props);\n this.state = {\n userProfileModalOpen: false,\n };\n }\n\n componentDidMount() {\n window.addEventListener('keydown', this.shortcutListener);\n // set instance into state\n let instanceURL = API_URL + '/instance'\n let instanceRequest = () => {\n fetch(instanceURL).then(async (response) => {\n const data = await response.json();\n this.setState({instance:data.current_instance})\n })\n }\n instanceRequest();\n }\n\n componentWillUnmount() {\n window.removeEventListener('keydown', this.shortcutListener);\n }\n\n shortcutListener = event => {\n if ((event.ctrlKey || event.metaKey) && event.code === 'KeyZ') {\n if (this.props.actionHistory.undo.length > 0) this.props.undo();\n } else if ((event.ctrlKey || event.metaKey) && event.code === 'KeyY') {\n event.preventDefault();\n if (this.props.actionHistory.redo.length > 0) this.props.redo();\n }\n };\n\n handleUserProfileUpdate = user => {\n const userID = this.props.user.id;\n this.props.updateProfile(user, userID);\n };\n\n toggleUserProfile = (userProfileModalOpen = false) => {\n this.setState({ userProfileModalOpen });\n this.props.togglePopUp(userProfileModalOpen);\n };\n\n handleUserAccountDelete = () => {\n const userID = this.props.user.id;\n this.props.deleteProfile(userID);\n };\n\n handleUserLogout = () => {\n this.props.logoutUser();\n };\n\n goHome = () => {\n if (this.props.history.location.pathname.includes('dashboard')) {\n this.props.goToDashboardProjectList();\n } else {\n this.props.resetActionHistory();\n this.props.history.push('/dashboard');\n }\n };\n\n render() {\n // User icon menu on the right corner of Toolbar\n let UserMenu = (\n \n {this.setState({value});this.props.onValueChange(e,value)}}\n style={window.innerWidth<=890?{marginLeft:10,marginRight:10, width:150}:{marginLeft:10,marginRight:10, width:200}}\n value={this.state.value}\n {...floatFieldLight}\n tabIndex={this.props.tabIndex}\n />\n
\n 0)?\"searchOptions active\":\"searchOptions\"}>\n this.props.onTypeChange(\"title\", !this.props.filterTypes[\"title\"])}\n tabIndex={this.props.tabIndex}\n />\n this.props.onTypeChange(\"type\", !this.props.filterTypes[\"type\"])}\n tabIndex={this.props.tabIndex}\n />\n this.props.onTypeChange(\"description\", !this.props.filterTypes[\"description\"])}\n tabIndex={this.props.tabIndex}\n />\n
\n \n {\n e.preventDefault();\n this.props.undo();\n }}\n >\n {\n e.preventDefault();\n this.props.redo();\n }}\n >\n
\n ) : null}\n\n {this.props.showImageViewerButton ? (\n \n \n \n
\n );\n }\n}\nconst mapStateToProps = (state) => {\n return {\n userID: state.user.id,\n projectID: state.active.project ? state.active.project.id : null\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n sendFeedback: (title, message, browserInformation, projectID) => {\n if (projectID) {\n dispatch(exportProjectBeforeFeedback(projectID, \"json\"))\n .then((action) => {\n if (action.type === \"EXPORT_SUCCESS\") {\n const project = JSON.stringify(action.payload);\n dispatch(sendFeedback(title, message, browserInformation, project));\n }\n })\n } else {\n dispatch(sendFeedback(title, message, browserInformation));\n }\n }\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Feedback);\n","let topbarStyle = () => {\n let width = 200;\n if (window.innerWidth<=870) {\n width = 120;\n } else if (window.innerWidth<=1024) {\n width = 150;\n }\n return {\n tab: {\n width, \n height: 55, \n color: '#6A6A6A',\n fontSize: window.innerWidth<=870?\"12px\":null,\n },\n }\n}\nexport default topbarStyle;","\n/**\n *\n * @param {list} projectIDs [ 5a26d22f3b0eb7594c9dec23, ... ]\n * @param {imageIDs} imageIDs [ 5a26d22f3b0eb7594c9dec23, ... ]\n */\nexport function linkImages(projectIDs, imageIDs) {\n return {\n types: ['LINK_IMAGES_FRONTEND','LINK_IMAGES_SUCCESS_BACKEND','LINK_IMAGE_FAILED_BACKEND'],\n payload: {\n request : {\n url: `/images/link`,\n data: {projectIDs, imageIDs},\n method: 'put',\n successMessage: projectIDs.length>1 ? \"You have successfully linked the projects to this image\" : \"You have successfully linked the project to this image\" ,\n errorMessage: \"Ooops! Something went wrong\"\n }\n },\n isUndoable: true,\n };\n}\n\n/**\n *\n * @param {list} projectIDs [ 5a26d22f3b0eb7594c9dec23, ... ]\n * @param {imageIDs} imageIDs [ 5a26d22f3b0eb7594c9dec23, ... ]\n */\nexport function unlinkImages(projectIDs, imageIDs) {\n return {\n types: ['UNLINK_IMAGES_FRONTEND','UNLINK_IMAGES_SUCCESS_BACKEND','UNLINK_IMAGES_FAILED_BACKEND'],\n payload: {\n request : {\n url: `/images/unlink`,\n data: {projectIDs, imageIDs},\n method: 'put',\n successMessage: projectIDs.length>1 ? \"You have successfully unlinked the projects to this image\" : \"You have successfully unlinked this project to this image\" ,\n errorMessage: \"Ooops! Something went wrong\"\n }\n },\n isUndoable: true,\n };\n}\n\n/**\n *\n * @param {list} imageIDs\n */\nexport function deleteImages(imageIDs) {\n return {\n types: ['DELETE_IMAGES_FRONTEND','DELETE_IMAGES_SUCCESS_BACKEND','DELETE_IMAGES_FAILED_BACKEND'],\n payload: {\n request : {\n url: `/images/`,\n method: 'delete',\n data: {imageIDs},\n successMessage: imageIDs.length>1?\"You have successfully deleted the images\":\"You have successfully deleted the image\",\n errorMessage: \"Ooops! Something went wrong\"\n }\n }\n };\n}\n\n/**\n *\n * @param {list} images [ { filename:\"\", contents: data(base64) } , ... ]\n */\nexport function uploadImages(images, projectID) {\n return {\n types: ['SHOW_LOADING','UPLOAD_IMAGES_SUCCESS_BACKEND','UPLOAD_IMAGES_FAILED_BACKEND'],\n payload: {\n request : {\n url: `/images`,\n method: 'post',\n data: {projectID, images},\n successMessage: images.length>1? \"You have successfully uploaded your images\" : \"You have successfully uploaded your image\" ,\n errorMessage: \"Ooops! Something went wrong\"\n }\n }\n };\n}\n\n\nexport function mapSidesToImages(sideMappings) {\n // sideMappings = [{id: 112, image: {}}, ...]\n return { \n types: ['MAP_SIDES_FRONTEND','MAP_SIDES_SUCCESS_BACKEND','MAP_SIDES_FAILED_BACKEND'],\n payload: {\n request : {\n url: `/sides`,\n method: 'put',\n data: {sides: sideMappings},\n successMessage: \"Successfully updated the sides\" ,\n errorMessage: \"Ooops! Something went wrong\"\n }\n },\n isUndoable: true,\n };\n}","import React, {Component} from 'react';\nimport IconButton from 'material-ui/IconButton';\nimport ExpandMore from 'material-ui/svg-icons/navigation/expand-more';\nimport ExpandLess from 'material-ui/svg-icons/navigation/expand-less';\n\n/** Expandable panel component for the project sidebar. Panel examples: Filter, export.. */\nexport default class Panel extends Component {\n constructor(props) {\n super(props);\n this.state = {\n open: props.defaultOpen,\n }\n }\n \n handleChange = (type, value) => {\n this.setState({[type]: value});\n }\n\n render() {\n let paddingStyle = this.props.noPadding?{padding:0}:{};\n return (\n \n { this.handleOpen(\"feedback\"); this.props.togglePopUp(true) }}\n backgroundColor=\"rgba(82, 108, 145, 0.2)\"\n tabIndex={this.props.tabIndex}\n />\n { this.handleOpen(\"credits\"); this.props.togglePopUp(true) }}\n backgroundColor=\"rgba(82, 108, 145, 0.2)\"\n tabIndex={this.props.tabIndex}\n />\n openInNewTab(\"https://viscoll.org/help/\")}\n backgroundColor=\"rgba(82, 108, 145, 0.2)\"\n tabIndex={this.props.tabIndex}\n />\n
\n Bug? Suggestions? Let us know!
\n\n
\n \n Title\n
\n \n this.onChange(\"title\", v)}\n autoFocus\n />\n
\n \n
\n \n \n Feedback\n
\n \n this.onChange(\"feedback\", e.target.value)}\n rows={5}\n />\n
\n \n VCEditor is a tool for building and visualizing the physical structure of manuscripts using the data model\n provided by VisColl: Modeling and Visualizing the\n Physical Construction of Codex Manuscripts, a project\n co-directed by Alberto Campagnolo and Dot Porter.\n
\n\n\n VCEditor is a continuation of development of
\n For VCEditor we have made several\n modification, particularly to the back end, to ensure that the output\n validates to the most recent version of the VisColl data model. Development of the XSLT pipelines for\n VCEditor, called Idrovora, was done by Gregor Middel, and\n primary development of VCEditor was done by Patrick Perkins.\n
\n\n\n Supervision of all development was provided by Doug Emery, and organizational support was provided by Lynn\n Ransom. We would like to thank the Schoenberg Institute for Manuscript Studies and the University of\n Pennsylvania Libraries for their continued support of the project.\n
\n \n\n
\n )\n }\n\n}\n","import React, { Component } from 'react';\nimport Drawer from 'material-ui/Drawer';\nimport RaisedButton from 'material-ui/RaisedButton';\nimport NewProjectContainer from '../components/dashboard/NewProjectContainer';\nimport EditProjectForm from '../components/dashboard/EditProjectForm';\nimport ImageCollections from '../components/dashboard/ImageCollections';\nimport ListView from '../components/dashboard/ListView';\nimport LoadingScreen from '../components/global/LoadingScreen';\nimport ServerErrorScreen from '../components/global/ServerErrorScreen';\nimport NetworkErrorScreen from '../components/global/NetworkErrorScreen';\nimport Notification from '../components/global/Notification';\nimport TopBar from './TopBar';\nimport Feedback from './Feedback';\nimport { Tabs, Tab } from 'material-ui/Tabs';\nimport topbarStyle from '../styles/topbar';\nimport { btnMd } from '../styles/button';\nimport { connect } from 'react-redux';\nimport {\n createProject,\n updateProject,\n deleteProject,\n loadProjects,\n importProject,\n cloneProject,\n} from '../actions/backend/projectActions';\nimport {\n uploadImages,\n linkImages,\n unlinkImages,\n deleteImages,\n} from '../actions/backend/imageActions';\nimport Panel from '../components/global/Panel';\nimport UTLogo from '../assets/ut_logo.png';\nimport UPLogo from '../assets/upenn_logo.png';\n\n/** Dashboard where user is directed to upon login. This is where the user an create a new project or edit an existing project. */\nclass Dashboard extends Component {\n constructor(props) {\n super(props);\n this.state = {\n newProjectPopoverOpen: false,\n newProjectModalOpen: false,\n selectedProject: null,\n projectDrawerOpen: false,\n userProfileDialogOpen: false,\n feedbackOpen: false,\n deleteConfirmationOpen: false,\n page: 'collations',\n };\n }\n\n componentWillMount() {\n this.props.user.authenticated ? this.props.loadProjects(this.props) : this.props.history.push('/');\n }\n\n componentWillReceiveProps(nextProps) {\n if (nextProps.notification !== '') {\n if (nextProps.projects.length >= this.props.projects.length && this.state.page === 'collations') {\n this.setState({\n selectedProject: nextProps.projects[0],\n projectDrawerOpen: true,\n })\n } else {\n this.setState({\n selectedProject: null,\n projectDrawerOpen: false,\n })\n }\n }\n }\n\n componentDidUpdate() {\n if (!this.props.user.authenticated) this.props.history.push('/');\n }\n\n closeProjectPanel = () => {\n this.setState({ projectDrawerOpen: false, selectedProject: null });\n }\n\n doubleClick = projectID => {\n this.props.resetActionHistory();\n this.props.history.push(`/project/${projectID}`);\n }\n\n handleProjectSelection = (index) => {\n if (index >= 0) {\n let project = this.props.projects[index];\n this.setState({ projectDrawerOpen: true, selectedProject: project });\n }\n }\n\n handleNewProjectTouchTap = (event) => {\n event.preventDefault();\n this.setState({ newProjectPopoverOpen: true, popoverAnchorEl: event.currentTarget });\n };\n\n handleNewProjectRequestClose = () => this.setState({ newProjectPopoverOpen: false });\n\n handleNewProjectModalToggle = (value) => {\n this.setState({ newProjectModalOpen: value, newProjectPopoverOpen: false });\n }\n\n handleDeleteConfirmModalToggle = (value) => {\n this.setState({ deleteConfirmationOpen: value });\n }\n\n handleImportProject = (data) => {\n this.props.importProject(data)\n .then((action) => {\n if (action.type === 'IMPORT_PROJECT_SUCCESS') {\n this.handleProjectSelection(0);\n this.props.importProjectCallback();\n }\n });\n }\n\n modalIsOpen = () => {\n return this.state.deleteConfirmationOpen || this.state.feedbackOpen || this.state.newProjectModalOpen || this.state.newProjectPopoverOpen || this.state.userProfileDialogOpen;\n }\n\n userProfileToggle = (userProfileDialogOpen) => {\n this.setState({ userProfileDialogOpen });\n }\n\n render() {\n let sidebar = (\n \n {e.preventDefault(); e.stopPropagation(); this.handleChange(\"open\", !this.state.open)}}\n aria-label={this.state.open?\"Hide \" + this.props.title + \" panel\" : \"Expand \" + this.props.title + \" panel\"}\n iconStyle={{color:\"white\"}}\n tooltip={this.state.open?\"Hide panel\":\"Expand panel\"}\n style={{padding:0,width:\"inherit\",height:\"inherit\"}}\n tooltipPosition=\"bottom-left\"\n tabIndex={this.props.tabIndex}\n >\n {this.state.open? \n
\n {this.props.title}
\n\n {this.props.children}\n
\n \n
\n
\n this.handleNewProjectModalToggle(true)}\n tabIndex={this.modalIsOpen() ? -1 : 0}\n aria-label=\"Create new collation\"\n />\n
\n
\n
\n this.setState({\n page: 'collations',\n projectDrawerOpen: this.state.selectedProject !== null\n })}\n tabIndex={this.modalIsOpen() ? -1 : 0}\n aria-label=\"Collations\"\n >\n Collations\n \n this.setState({ page: 'image', projectDrawerOpen: false })}\n tabIndex={this.modalIsOpen() ? -1 : 0}\n aria-label=\"Image Collections\"\n >\n Image Collections\n \n \n \n \n
\n );\n let projectPane = (\n \n
\n
\n
\n
\n
\n this.setState({ page: 'collations' })}\n showUndoRedo={this.state.page === 'image'}\n >\n \n \n \n \n {sidebar}\n {projectPane}\n this.handleNewProjectModalToggle(false)}\n user={this.props.user}\n createProject={this.props.createProject}\n importProject={this.handleImportProject}\n importStatus={this.props.importStatus}\n cloneProject={this.props.cloneProject}\n />\n \n \n this.setState({ feedbackOpen: v })}/>\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n user: state.user,\n projects: state.dashboard.projects,\n images: state.dashboard.images,\n importStatus: state.dashboard.importStatus,\n loading: state.global.loading,\n notification: state.global.notification,\n actionHistory: state.history,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n createProject: (newProject) => {\n dispatch(createProject(newProject));\n },\n updateProject: (projectID, project) => {\n dispatch(updateProject(projectID, project))\n },\n deleteProject: (projectID, deleteUnlinkedImages) => {\n dispatch(deleteProject(projectID, deleteUnlinkedImages));\n },\n loadProjects: (props) => {\n dispatch(loadProjects());\n },\n importProject: (data) => {\n return dispatch(importProject(data))\n },\n importProjectCallback: () => {\n dispatch({ type: 'IMPORT_PROJECT_SUCCESS_CALLBACK' });\n },\n cloneProject: (projectID) => {\n dispatch(cloneProject(projectID));\n },\n uploadImages: (images) => {\n dispatch(uploadImages(images));\n },\n linkImages: (projectIDs, imageIDs) => {\n dispatch(linkImages(projectIDs, imageIDs));\n },\n unlinkImages: (projectIDs, imageIDs) => {\n dispatch(unlinkImages(projectIDs, imageIDs));\n },\n deleteImages: (imageIDs) => {\n dispatch(deleteImages(imageIDs));\n },\n resetActionHistory: () => {\n dispatch({ type: 'CLEAR_ACTION_HISTORY' })\n }\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Dashboard);\n\n\n","import React from 'react';\n\n/** Side element of collation used in tabular edit mode */\nconst Side = (props) => {\n const { activeSide, project } = props;\n const { \n selectedObjects, \n filters, \n defaultAttributes, \n } = props.collationManager;\n const isActive = selectedObjects.members.includes(activeSide.id);\n const sidesOfMatchingElements = filters.SidesOfMatchingTerms;\n const isFiltered = filters.Sides.includes(activeSide.id);\n const isAffectedFiltered = sidesOfMatchingElements.includes(activeSide.id) && !isFiltered;\n const hideOthers = filters.hideOthers;\n const isFilterActive = filters.active;\n\n let sideAttributes = [];\n\n for (let attribute of defaultAttributes.side) {\n if (project.preferences.side && project.preferences.side[attribute.name]) {\n sideAttributes.push(\n \n {this.state.page === 'collations' ?\n this.setState({ deleteConfirmationOpen: v })}\n action={{\n uploadImages: this.props.uploadImages,\n linkImages: this.props.linkImages,\n unlinkImages: this.props.unlinkImages,\n deleteImages: this.props.deleteImages,\n }}\n />\n }\n
\n \n {attribute.displayName}: {activeSide[attribute.name]}\n
\n );\n } \n }\n\n let activeSideStyle = {};\n\n if (isFiltered && !hideOthers) {\n activeSideStyle[\"borderColor\"] = \"#0f7fdb\";\n }\n\n if (isAffectedFiltered && hideOthers && isFilterActive){\n activeSideStyle[\"backgroundColor\"] = \"#d9dbdb\";\n activeSideStyle[\"borderColor\"] = \"#d9dbdb\";\n }\n\n const activeSideName = activeSide.id.split(\"_\")[0];\n\n let classNames = \"side \";\n if (props.focusLeafID===props.activeSide.id) classNames += \"focus \";\n if (isActive) classNames += \"active \";\n\n let sideComponent = (\n {props.handleObjectClick(activeSide, event); event.stopPropagation();}}\n style={{ ...activeSideStyle }}\n onMouseEnter={()=>props.toggleFocusLeaf(activeSide.id)}\n onMouseLeave={()=>props.toggleFocusLeaf(null)}\n >\n {activeSideName.charAt(0)}\n {if(e.key===\" \"){props.handleObjectPress(activeSide, e)}}}\n onClick={(e)=>{props.handleObjectPress(activeSide, e);e.stopPropagation();}}\n tabIndex={props.tabIndex}\n />\n
\n );\n\n if (sideAttributes.length>0) {\n sideComponent = (\n {props.handleObjectClick(activeSide, event); event.stopPropagation();}}\n style={{ ...activeSideStyle }}\n onMouseEnter={()=>props.toggleFocusLeaf(activeSide.id)}\n onMouseLeave={()=>props.toggleFocusLeaf(null)}\n >\n
\n );\n }\n\n return (\n sideComponent\n );\n}\nexport default Side;\n","import React from 'react';\nimport Side from './Side';\n\n/** Leaf element of collation used in tabular edit mode*/\nconst Leaf = (props) => {\n const { activeLeaf, project } = props;\n const {\n selectedObjects,\n filters, \n defaultAttributes, \n flashItems,\n } = props.collationManager;\n const isActive = selectedObjects.members.includes(activeLeaf.id);\n const isFiltered = filters.Leafs.includes(activeLeaf.id);\n const leafsOfMatchingElements = filters.LeafsOfMatchingSides + filters.LeafsOfMatchingTerms;\n const isAffectedFiltered = leafsOfMatchingElements.includes(activeLeaf.id) && !isFiltered;\n const hideOthers = filters.hideOthers;\n const isFilterActive = filters.active;\n let leafAttributes = [];\n let sideAttributesActive = false;\n\n // Determine if any side attributes are active (visibility toggled)\n for (let sideAttribute of defaultAttributes.side) {\n let attributeName = sideAttribute.name;\n if (project.preferences.side && project.preferences.side[attributeName]) {\n sideAttributesActive = true;\n break;\n } \n }\n\n // Render any visible leaf attributes\n for (let leafAttribute of defaultAttributes.leaf) {\n let attributeName = leafAttribute.name;\n if (project.preferences.leaf && project.preferences.leaf[attributeName]) {\n let divStyle = \"attribute \";\n if (isActive) divStyle += \"active \";\n if (attributeName===\"conjoined_to\"){\n leafAttributes.push(\n \n {activeSideName}\n {if(e.key===\" \"){props.handleObjectPress(activeSide, e)}}}\n onClick={(e)=>{props.handleObjectPress(activeSide, e);e.stopPropagation();}}\n tabIndex={props.tabIndex}\n />\n
\n {sideAttributes}\n \n
\n );\n } else{\n leafAttributes.push(\n \n {leafAttribute.displayName}\n {props.leafIDs.indexOf(activeLeaf[attributeName])!==-1 ? `Leaf ${props.leafIDs.indexOf(activeLeaf[attributeName])+1}` : \"None\"}\n
\n \n
\n );\n }\n }\n }\n\n\n\n let activeLeafStyle = {};\n if (isFiltered && !hideOthers) {\n activeLeafStyle[\"borderColor\"] = \"#0f7fdb\";\n }\n if (isAffectedFiltered && hideOthers && isFilterActive){\n activeLeafStyle[\"backgroundColor\"] = \"#d9dbdb\";\n activeLeafStyle[\"borderColor\"] = \"#d9dbdb\";\n }\n \n let sideComponents;\n let sideClassName = \"sideToggle\";\n if (sideAttributesActive) {\n sideClassName = \"sideSection\";\n }\n const rectoSide = props.Rectos[activeLeaf.rectoID];\n const versoSide = props.Versos[activeLeaf.versoID];\n sideComponents = (\n \n {leafAttribute.displayName}\n {activeLeaf[attributeName]}\n
\n \n
\n );\n\n\n let sectionStyle = \"leafSection \";\n if (isActive) sectionStyle += \"active \";\n if (props.focusLeafID === activeLeaf.id) sectionStyle += \"focus\";\n\n let leafComponent = \n
\n\n if (!isFiltered && hideOthers && isFilterActive && !isAffectedFiltered)\n leafComponent = ;\n\n return (\n leafComponent\n );\n}\nexport default Leaf;\n","import React from 'react';\nimport Leaf from './Leaf';\nimport IconButton from 'material-ui/IconButton';\nimport ExpandMore from 'material-ui/svg-icons/navigation/expand-more';\nimport ExpandLess from 'material-ui/svg-icons/navigation/expand-less';\n\n/** Group element in the tabular edit mode. Recursively mounts nested groups and leaves. */\nexport default class Group extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n open: true,\n }\n }\n\n handleChange = (type, value) => {\n this.setState({[type]:value});\n }\n\n findItemByName = (attributeName) => {\n return this.props.collationManager.defaultAttributes.group.find((item)=>item.name===attributeName);\n }\n\n render() {\n\n const isActive = this.props.collationManager.selectedObjects.members.includes(this.props.activeGroup.id);\n const isFiltered = this.props.collationManager.filters.Groups.includes(this.props.activeGroup.id);\n const groupsOfMatchingElements = this.props.collationManager.filters.GroupsOfMatchingLeafs + this.props.collationManager.filters.GroupsOfMatchingSides + this.props.collationManager.filters.GroupsOfMatchingTerms;\n const isAffectedFiltered = groupsOfMatchingElements.includes(this.props.activeGroup.id) && !isFiltered;\n const hideOthers = this.props.collationManager.filters.hideOthers;\n const isFilterActive = this.props.collationManager.filters.active;\n // Populate all the members of this Group.\n let groupMembers = [];\n this.props.activeGroup.memberIDs.forEach((memberID, index) => {\n if (memberID.charAt(0)===\"L\"){\n let current_leaf = this.props.project.Leafs[memberID];\n groupMembers.push(\n \n
\n {props.handleObjectClick(activeLeaf, event);event.stopPropagation()}}\n style={{ ...activeLeafStyle }}\n onMouseEnter={()=>props.toggleFocusLeaf(activeLeaf.id)}\n onMouseLeave={()=>props.toggleFocusLeaf(null)}\n >\n
\n {sideComponents}\n \n Leaf {props.activeLeafOrder} \n {if(e.key===\" \"){props.handleObjectPress(activeLeaf, e)}}}\n onClick={(e)=>{props.handleObjectPress(activeLeaf, e);e.stopPropagation();}}\n tabIndex={props.tabIndex}\n />\n
\n {leafAttributes.length>0?\n \n {leafAttributes}\n
\n :\"\"}\n \n
\n );\n }\n }\n }\n\n let activeGroupStyle = {};\n if (isFiltered && !hideOthers) {\n activeGroupStyle[\"borderColor\"] = \"#0f7fdb\";\n }\n if (isAffectedFiltered && hideOthers && isFilterActive){\n activeGroupStyle[\"backgroundColor\"] = \"#d9dbdb\";\n activeGroupStyle[\"borderColor\"] = \"#d9dbdb\";\n }\n let groupContainerClasses = \"groupContainer \";\n if (this.props.collationManager.flashItems.groups.includes(this.props.activeGroup.id)) groupContainerClasses += \"flash \";\n if (isActive) groupContainerClasses += \"active \";\n if (this.props.focusLeafID===null && this.props.focusGroupID === this.props.activeGroup.id) groupContainerClasses += \"focus \";\n\n let groupComponent = \n {item.displayName}\n {this.props.activeGroup[attributeName]}\n
\n this.props.toggleFocusGroup(this.props.activeGroup.id)}\n onMouseLeave={()=>this.props.toggleFocusGroup(null)}\n onClick={(event) =>this.props.handleObjectClick(this.props.activeGroup, event)}\n >\n
\n\n if (!isFiltered && hideOthers && isFilterActive && !isAffectedFiltered)\n groupComponent = ;\n\n return (\n groupComponent\n );\n }\n }\n\n\n ","import React from 'react';\nimport update from 'immutability-helper';\nimport Group from './tabularMode/Group';\n\n\n/** Tabular mode - shows collation as table rows */\nexport default class TabularMode extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n focusGroupID: [],\n focusLeafID: null,\n }\n }\n \n toggleFocusGroup = (id) => {\n let newList = [];\n if (id!==null) {\n // Push to array\n newList = update(this.state.focusGroupID, {$push: [id]});\n } else {\n // Pop the array\n newList = update(this.state.focusGroupID, {$splice: [[this.state.focusGroupID.length-1, 1]]});\n }\n this.setState({focusGroupID: newList});\n }\n\n toggleFocusLeaf = (id) => {\n this.setState({focusLeafID: id, focusGroupID: [this.state.focusGroupID[this.state.focusGroupID.length-1]]});\n }\n\n render() { \n let group_components = [];\n for (let groupID of this.props.project.groupIDs){\n const group = this.props.project.Groups[groupID]\n if (group.nestLevel === 1)\n group_components.push(\n \n
\n \n
\n \n Group {this.props.activeGroupOrder}\n {if(e.key===\" \"){this.props.handleObjectPress(this.props.activeGroup, e)}}}\n onClick={(e)=>{this.props.handleObjectPress(this.props.activeGroup, e);}}\n tabIndex={this.props.tabIndex}\n />\n
\n {attributes}\n \n {e.stopPropagation();e.preventDefault();this.handleChange(\"open\", !this.state.open)}}\n aria-label={this.state.open?\"Collapse group \" + this.props.activeGroupOrder : \"Expand group \" + this.props.activeGroupOrder }\n tabIndex={this.props.tabIndex}\n tooltip={this.state.open?\"Collapse group\" : \"Expand group\"}\n >\n {this.state.open? \n
\n \n {groupMembers}\n
\n \n {emptyResults ?
\n );\n }\n}\n","import paper from 'paper';\n\nPaperLeaf.prototype = {\n constructor: PaperLeaf,\n draw: function () {\n // Call this function only after ALL leaves have been instantiated\n // This is because we need all leaves present in order\n // to compute their indentations relative to each other\n this.setIndent();\n // Draw horizontal part\n let x1 =\n this.multiplier < 1\n ? 10 + this.indent * this.spacing * this.multiplier\n : this.indent * this.spacing * this.multiplier;\n let x2 = this.width;\n this.path.add(new paper.Point(x1, this.y));\n if (this.leaf.stub !== 'No') {\n x2 = this.width * 0.15 + x1;\n }\n this.path.add(new paper.Point(x2, this.y));\n // Draw vertical part\n if (this.isConjoined()) {\n var conjoinY = this.y_conjoin_center(this.conjoined_to);\n this.path.insert(\n 0,\n new paper.Point(this.path.segments[0].point.x, conjoinY)\n );\n }\n this.curveMe();\n\n this.path.name = 'leaf ' + this.order;\n\n // Create highlight path\n this.highlight = this.path.clone();\n this.highlight.dashArray = [0, 0];\n this.highlight.segments[this.highlight.segments.length - 1].point.x =\n this.highlight.segments[this.highlight.segments.length - 1].point.x + 5;\n if (this.leaf.conjoined_to === 'None') {\n this.highlight.segments[0].point.x =\n this.highlight.segments[0].point.x - 5;\n }\n this.highlight.strokeColor = this.strokeColorActive;\n this.highlight.strokeWidth = this.path.strokeWidth * 2;\n this.highlight.opacity = 0;\n this.highlight.name = 'leaf ' + this.order + ' highlight';\n this.highlight.insertBelow(this.path);\n\n if (this.isActive) {\n this.highlight.opacity = 0.35;\n this.highlight.strokeWidth = this.path.strokeWidth * 2;\n this.highlight.strokeColor = '#ffffff';\n }\n\n this.filterHighlight = this.path.clone();\n this.filterHighlight.dashArray = [0, 0];\n this.filterHighlight.segments[\n this.filterHighlight.segments.length - 1\n ].point.x =\n this.filterHighlight.segments[this.filterHighlight.segments.length - 1]\n .point.x + 5;\n if (this.leaf.conjoined_to === 'None') {\n this.filterHighlight.segments[0].point.x =\n this.filterHighlight.segments[0].point.x - 5;\n }\n this.filterHighlight.strokeColor = this.strokeColorFilter;\n this.filterHighlight.strokeWidth = this.path.strokeWidth * 2;\n this.filterHighlight.opacity = 0;\n this.filterHighlight.insertBelow(this.path);\n\n // this.path.fullySelected = true;\n this.showAttributes();\n this.createAttachments();\n\n const leafTermsToShow = this.leaf.terms\n .filter(termID => {\n return this.Terms[termID].show;\n })\n .reverse();\n const rectoTermsToShow = this.recto.terms\n .filter(termID => {\n return this.Terms[termID].show;\n })\n .reverse();\n const versoTermsToShow = this.verso.terms.filter(termID => {\n return this.Terms[termID].show;\n });\n\n let textX = 0;\n let textY = this.y;\n let fontSize = this.spacing * 0.5;\n let numChars = (this.path.bounds.width / fontSize) * 2.4;\n\n if (this.isConjoined()) {\n // This leaf is conjoined\n textX = this.path.segments[1].point.x;\n } else {\n // Separate leaf\n textX = this.path.segments[0].point.x + 10;\n }\n if (this.leaf.attached_above.includes('Partial')) {\n // This leaf has a partial glue attachment\n // Place text to the right of attachment drawing\n textX = this.attachment.bounds.right + 5;\n } else if (this.leaf.attached_above.includes('Glued')) {\n // Other type of glueing exists\n textY -= this.spacing * 0.7;\n }\n let that = this;\n let clickListener = function (term) {\n return function (event) {\n that.openTermDialog(term);\n };\n };\n // Draw recto term text\n for (let termIndex = 0; termIndex < rectoTermsToShow.length; termIndex++) {\n const term = this.Terms[rectoTermsToShow[termIndex]];\n const termTitle = this.folio_number\n ? 'â–¼ ' + this.folio_number + ' : ' + term.title.substr(0, numChars)\n : 'â–¼ R : ' + term.title.substr(0, numChars);\n let textTerm = new paper.PointText({\n content: termTitle,\n point: [\n textX,\n textY - termIndex * (this.spacing * 0.7) - this.spacing * 0.3,\n ],\n fillColor: this.strokeColor,\n fontSize: fontSize,\n });\n textTerm.onClick = !this.viewingMode && clickListener(term);\n this.textTerms.addChild(textTerm);\n }\n // Draw leaf term text\n for (let termIndex = 0; termIndex < leafTermsToShow.length; termIndex++) {\n const term = this.Terms[leafTermsToShow[termIndex]];\n\n let textTerm = new paper.PointText({\n content: 'â–¼ L' + this.order + ' : ' + term.title.substr(0, numChars),\n point: [\n textX,\n textY -\n rectoTermsToShow.length * (this.spacing * 0.7) -\n termIndex * (this.spacing * 0.7) -\n this.spacing * 0.3,\n ],\n fillColor: this.strokeColor,\n fontSize: fontSize,\n });\n textTerm.onClick = !this.viewingMode && clickListener(term);\n this.textTerms.addChild(textTerm);\n }\n // Draw verso term text\n for (let termIndex = 0; termIndex < versoTermsToShow.length; termIndex++) {\n const term = this.Terms[versoTermsToShow[termIndex]];\n const termTitle = this.folio_number\n ? 'â–² ' + this.folio_number + ' : ' + term.title.substr(0, numChars)\n : 'â–² V : ' + term.title.substr(0, numChars);\n let textTerm = new paper.PointText({\n content: termTitle,\n point: [\n textX,\n this.y + termIndex * (this.spacing * 0.7) + this.spacing * 0.8,\n ],\n fillColor: this.strokeColor,\n fontSize: fontSize,\n });\n textTerm.onClick = !this.viewingMode && clickListener(term);\n this.textTerms.addChild(textTerm);\n }\n this.textTerms.onMouseEnter = function (event) {\n document.body.style.cursor = 'pointer';\n };\n this.textTerms.onMouseLeave = function (event) {\n document.body.style.cursor = 'default';\n };\n return this;\n },\n setMouseEventHandlers: function () {\n // Set mouse event handlers\n let that = this;\n this.path.onClick = function (event) {\n that.handleObjectClick(that.leaf, event);\n };\n this.textLeafOrder.onClick = function (event) {\n that.handleObjectClick(that.leaf, event);\n };\n this.textRecto.onClick = function (event) {\n that.handleObjectClick(that.leaf, event);\n };\n this.textVerso.onClick = function (event) {\n that.handleObjectClick(that.leaf, event);\n };\n this.path.onMouseEnter = function (event) {\n document.body.style.cursor = 'pointer';\n };\n this.path.onMouseLeave = function (event) {\n document.body.style.cursor = 'default';\n };\n this.textLeafOrder.onMouseEnter = function (event) {\n document.body.style.cursor = 'pointer';\n };\n this.textLeafOrder.onMouseLeave = function (event) {\n document.body.style.cursor = 'default';\n };\n this.textRecto.onMouseEnter = function (event) {\n document.body.style.cursor = 'pointer';\n };\n this.textRecto.onMouseLeave = function (event) {\n document.body.style.cursor = 'default';\n };\n this.textVerso.onMouseEnter = function (event) {\n document.body.style.cursor = 'pointer';\n };\n this.textVerso.onMouseLeave = function (event) {\n document.body.style.cursor = 'default';\n };\n },\n removeMouseEventHandlers: function () {\n // Set mouse event handlers\n this.path.onClick = function (event) {};\n this.textLeafOrder.onClick = function (event) {};\n this.textRecto.onClick = function (event) {};\n this.textVerso.onClick = function (event) {};\n this.path.onMouseEnter = function (event) {};\n this.path.onMouseLeave = function (event) {};\n this.textLeafOrder.onMouseEnter = function (event) {};\n this.textLeafOrder.onMouseLeave = function (event) {};\n this.textRecto.onMouseEnter = function (event) {};\n this.textRecto.onMouseLeave = function (event) {};\n this.textVerso.onMouseEnter = function (event) {};\n this.textVerso.onMouseLeave = function (event) {};\n },\n createAttachments: function () {\n // determine what attachment is drawn based on method indicated\n if (this.order > 1) {\n if (this.leaf.attached_above !== 'None') {\n this.createAttachment();\n }\n }\n },\n createAttachment: function () {\n let x = this.path.segments[0].point.x;\n if (this.isConjoined() && this.conjoined_to < this.order) {\n if (this.conjoined_to + 1 === this.order) {\n x += this.strokeWidth;\n } else {\n x = this.prevPaperLeaf().path.segments[0].point.x;\n }\n }\n if (this.leaf.attached_above.includes('Sewn')) {\n let glueLineCount = 2;\n // Draw tip glue\n for (let i = 0; i < glueLineCount; i++) {\n let glueLine = new paper.Path();\n glueLine.add(new paper.Point(x + 10, this.y - this.spacing));\n glueLine.add(new paper.Point(x + 10, this.y - this.spacing * 0.1));\n glueLine.strokeColor = '#707070';\n glueLine.strokeWidth = 2;\n this.attachment.addChild(glueLine);\n x += 5;\n }\n } else if (this.leaf.attached_above.includes('Stitched')) {\n console.log(this)\n // Complete stitch\n let glueLineCount = 1;\n for (let i = 0; i < glueLineCount; i++) {\n let glueLine = new paper.Path();\n glueLine.add(new paper.Point(x + 10, this.y - this.spacing));\n glueLine.add(new paper.Point(x + 10, this.y - (this.spacing * 0.1)));\n glueLine.strokeColor = '#707070';\n glueLine.strokeWidth = 2;\n this.attachment.addChild(glueLine);\n x += 5;\n }\n } else if (this.leaf.attached_above.includes('Tipped')) {\n let glueLineCount = 4;\n // Draw tip glue\n for (let i = 0; i < glueLineCount; i++) {\n let glueLine = new paper.Path();\n glueLine.add(new paper.Point(x, this.y - this.spacing * 0.3));\n glueLine.add(new paper.Point(x - 10, this.y - this.spacing * 0.7));\n glueLine.strokeColor = '#707070';\n glueLine.strokeWidth = 2;\n this.attachment.addChild(glueLine);\n x += 5;\n }\n } else if (this.leaf.attached_above.includes('Drummed')) {\n let glueLineCount = 15;\n // Draw left drum glue\n for (let i = 0; i < glueLineCount; i++) {\n let glueLine = new paper.Path();\n glueLine.add(new paper.Point(x, this.y - this.spacing * 0.3));\n glueLine.add(new paper.Point(x - 10, this.y - this.spacing * 0.7));\n glueLine.strokeColor = '#707070';\n glueLine.strokeWidth = 2;\n this.attachment.addChild(glueLine);\n x += 5;\n }\n if (\n this.leaf.stub === 'No' &&\n this.prevPaperLeaf().leaf.stub === 'No'\n ) {\n // Draw right drum glue if above or below are not stubs\n x = this.path.segments[this.path.segments.length - 1].point.x;\n for (let i = 0; i < glueLineCount; i++) {\n let glueLine = new paper.Path();\n glueLine.add(new paper.Point(x - 10, this.y - this.spacing * 0.3));\n glueLine.add(new paper.Point(x, this.y - this.spacing * 0.7));\n glueLine.strokeColor = '#707070';\n glueLine.strokeWidth = 2;\n this.attachment.addChild(glueLine);\n x -= 5;\n }\n }\n } else if (this.leaf.attached_above.includes('Pasted')) {\n // Complete glue\n if (\n this.leaf.stub !== 'No' ||\n this.prevPaperLeaf().leaf.stub !== 'No'\n ) {\n let glueLineCount = 15;\n for (let i = 0; i < glueLineCount; i++) {\n let glueLine = new paper.Path();\n glueLine.add(new paper.Point(x + 10, this.y - this.spacing * 0.3));\n glueLine.add(new paper.Point(x, this.y - this.spacing * 0.7));\n glueLine.strokeColor = '#707070';\n glueLine.strokeWidth = 2;\n this.attachment.addChild(glueLine);\n x += 5;\n }\n } else {\n while (\n x <=\n this.path.segments[this.path.segments.length - 1].point.x - 10\n ) {\n let glueLine = new paper.Path();\n glueLine.add(new paper.Point(x + 10, this.y - this.spacing * 0.3));\n glueLine.add(new paper.Point(x, this.y - this.spacing * 0.7));\n glueLine.strokeColor = '#707070';\n glueLine.strokeWidth = 2;\n this.attachment.addChild(glueLine);\n x += 5;\n }\n }\n }\n },\n createOtherAttachment: function () {\n let x = this.path.segments[0].point.x;\n if (this.isConjoined() && this.conjoined_to < this.order) {\n if (this.conjoined_to + 1 === this.order) {\n x += this.strokeWidth;\n } else {\n x = this.prevPaperLeaf().path.segments[0].point.x;\n }\n }\n for (let i = 0; i < 6; i++) {\n let attachLine = new paper.Path();\n attachLine.add(new paper.Point(x, this.y - 10));\n attachLine.add(new paper.Point(x, this.y - 20));\n attachLine.strokeColor = '#707070';\n attachLine.strokeWidth = 2;\n this.attachment.addChild(attachLine);\n x += 5;\n }\n },\n isConjoined: function () {\n return this.conjoined_to > 0;\n },\n conjoinedLeaf: function () {\n return this.manager.getLeaf(this.conjoined_to);\n },\n y_conjoin_center: function (conjoin_order) {\n var y1 = this.path.segments[1].point.y;\n var y2 = this.manager.getLeaf(conjoin_order).getY();\n return y1 + (y2 - y1) / 2.0;\n },\n y_nonconjoin_center: function () {\n var y = this.y;\n var y_center = this.y_centerQuire();\n if (y === y_center) {\n return y_center;\n } else if (y < y_center) {\n var val = this.y_nextPaperLeaf() - this.spacing * 0.3;\n return val;\n } else {\n val = this.y_prevLeaf() - this.spacing * 0.3;\n return val;\n }\n },\n prevPaperLeaf: function () {\n // Previous leaf better exist or else!\n return this.manager.getLeaf(this.order - 1);\n },\n y_prevLeaf: function () {\n if (this.order - 1 < 0) {\n return 0;\n } else {\n return this.manager.getLeaf(this.order).path.segments[1].point.y;\n }\n },\n y_nextPaperLeaf: function () {\n if (this.order + 1 >= this.manager.numLeaves()) {\n return 0;\n } else {\n return this.manager.getLeaf(this.order + 1).y;\n }\n },\n curveMe: function () {\n var path_height = Math.abs(\n this.path.segments[0].point.y - this.path.segments[1].point.y\n );\n var midpoint = this.path.segments[1].point;\n if (this.isConjoined()) {\n var numLeavesInside = Math.abs(this.conjoined_to - this.order);\n // Remove the middle point and insert a new one with handles\n this.path.removeSegment(1);\n // // Calculate new point's location and radius\n var new_x = midpoint.x + 20;\n var radius = new_x - this.path.segments[0].point.x;\n var s1 = new paper.Segment(\n new paper.Point(new_x, midpoint.y),\n new paper.Point(-radius, 0),\n null\n );\n this.path.insert(1, s1);\n\n if (numLeavesInside > 5) {\n // Modify first point's handle so that the curve isn't too curvy\n var direction =\n this.path.segments[0].point.y > this.path.segments[1].point.y\n ? -1\n : 1;\n var oldPoint = this.path.segments[0].point;\n this.path.removeSegment(0);\n var s0 = new paper.Segment(\n new paper.Point(oldPoint.x, oldPoint.y),\n null,\n new paper.Point(0, direction * path_height)\n );\n this.path.insert(0, s0);\n }\n }\n },\n setIndent: function () {\n this.indent = this.leaf.nestLevel;\n if (this.isConjoined() && this.conjoinedLeaf().indent != null) {\n // Leaf is conjoined and conjoiner has indent, so copy that conjoiner's indent\n this.indent = this.conjoinedLeaf().indent;\n } else if (this.isBelowAConjoined()) {\n this.indent = this.prevPaperLeaf().indent + 1;\n } else if (\n this.order > 1 &&\n this.parentOrder === this.prevPaperLeaf().parentOrder\n ) {\n // Leaf is a sibling of previous leaf, so copy sibling's indent\n this.indent = this.prevPaperLeaf().indent;\n } else if (this.order > 1 && this.prevPaperLeaf().parentID !== this.leaf.parentID) {\n this.indent = this.prevPaperLeaf().indent\n }\n }\n ,\n isBelowAConjoined: function () {\n return (\n this.order > 1 &&\n this.prevPaperLeaf().isConjoined() &&\n this.prevPaperLeaf().conjoined_to > this.order\n );\n },\n y_centerQuire: function () {\n var last_leaf = this.manager.getLastLeaf().getY();\n return (last_leaf + this.spacing) / 2.0;\n },\n getY: function () {\n return this.y;\n },\n activate: function () {\n this.path.strokeColor = this.strokeColorActive;\n this.highlight.opacity = 0.35;\n this.highlight.strokeWidth = this.path.strokeWidth * 2;\n this.highlight.strokeColor = '#ffffff';\n },\n deactivate: function () {\n this.highlight.opacity = 0;\n this.highlight.strokeWidth = this.path.strokeWidth;\n this.highlight.strokeColor = this.strokeColorActive;\n\n if (this.leaf.type === 'Added') {\n this.path.strokeColor = this.strokeColorAdded;\n } else if (this.leaf.type === 'Endleaf') {\n this.path.strokeColor = '#727272';\n } else {\n this.path.strokeColor = this.strokeColor;\n }\n },\n setVisibility: function (visibleAttributes) {\n this.visibleAttributes = visibleAttributes;\n this.showAttributes();\n },\n showAttributes: function () {\n const rectoValues = [];\n const versoValues = [];\n if (this.visibleAttributes.side) {\n if (this.visibleAttributes.side.page_number) {\n if (this.recto.page_number) rectoValues.push(this.recto.page_number);\n if (this.verso.page_number) versoValues.push(this.verso.page_number);\n }\n if (this.visibleAttributes.side.texture) {\n rectoValues.push(this.recto.texture);\n versoValues.push(this.verso.texture);\n }\n }\n if (this.visibleAttributes.leaf) {\n if (this.visibleAttributes.leaf.folio_number) {\n let notationStyles = this.notationStyle.split('-');\n if (this.leaf.folio_number) {\n rectoValues.push(this.leaf.folio_number + notationStyles[0]);\n versoValues.push(this.leaf.folio_number + notationStyles[1]);\n }\n }\n }\n let rectoContent = '';\n let versoContent = '';\n for (let i = 0; i < rectoValues.length; i++) {\n rectoContent = rectoContent + rectoValues[i] + ' ';\n }\n for (let i = 0; i < versoValues.length; i++) {\n versoContent = versoContent + versoValues[i] + ' ';\n }\n\n const reducer = (acc, key) => {\n if (this.visibleAttributes.side[key]) return acc + 1;\n if (this.visibleAttributes.leaf[key]) return acc + 1;\n return acc;\n };\n const visibleAttributeCount = this.visibleAttributes.side\n ? Object.keys(this.visibleAttributes.side).reduce(reducer, 0) +\n Object.keys(this.visibleAttributes.leaf).reduce(reducer, 0)\n : 0;\n\n if (visibleAttributeCount === 3) {\n if (this.leaf.stub === 'No') {\n // Reduce leaf width so we can fit attribute text\n this.path.segments[this.path.segments.length - 1].point.x =\n this.width - this.spacing * 3;\n this.highlight.segments[this.highlight.segments.length - 1].point.x =\n this.width - this.spacing * 2.8;\n this.filterHighlight.segments[\n this.filterHighlight.segments.length - 1\n ].point.x = this.width - this.spacing * 2.8;\n }\n this.textLeafOrder.set({\n point: [this.width - this.spacing * 2.8, this.textLeafOrder.point.y],\n });\n this.textRecto.set({\n point: [\n this.textLeafOrder.bounds.right + this.spacing * 0.4,\n this.textRecto.point.y,\n ],\n content: rectoContent,\n });\n this.textVerso.set({\n point: [\n this.textLeafOrder.bounds.right + this.spacing * 0.4,\n this.textVerso.point.y,\n ],\n content: versoContent,\n });\n } else if (visibleAttributeCount === 2) {\n if (this.leaf.stub === 'No') {\n // Reduce leaf width so we can fit attribute text\n this.path.segments[this.path.segments.length - 1].point.x =\n this.width - this.spacing * 2;\n this.highlight.segments[this.highlight.segments.length - 1].point.x =\n this.width - this.spacing * 1.8;\n this.filterHighlight.segments[\n this.filterHighlight.segments.length - 1\n ].point.x = this.width - this.spacing * 1.8;\n }\n this.textLeafOrder.set({\n point: [this.width - this.spacing * 1.8, this.textLeafOrder.point.y],\n });\n this.textRecto.set({\n point: [\n this.textLeafOrder.bounds.right + this.spacing * 0.2,\n this.textRecto.point.y,\n ],\n content: rectoContent,\n });\n this.textVerso.set({\n point: [\n this.textLeafOrder.bounds.right + this.spacing * 0.2,\n this.textVerso.point.y,\n ],\n content: versoContent,\n });\n } else if (visibleAttributeCount === 1) {\n if (this.leaf.stub === 'No') {\n // Reduce leaf width so we can fit folio number text\n this.path.segments[this.path.segments.length - 1].point.x =\n this.width - this.spacing;\n this.highlight.segments[this.highlight.segments.length - 1].point.x =\n this.width - this.spacing * 0.8;\n this.filterHighlight.segments[\n this.filterHighlight.segments.length - 1\n ].point.x = this.width - this.spacing * 0.8;\n }\n this.textLeafOrder.set({\n point: [this.width - this.spacing * 0.8, this.textLeafOrder.point.y],\n });\n this.textRecto.set({\n point: [\n this.textLeafOrder.bounds.right + this.spacing * 0.2,\n this.textRecto.point.y,\n ],\n content: rectoContent,\n });\n this.textVerso.set({\n point: [\n this.textLeafOrder.bounds.right + this.spacing * 0.2,\n this.textVerso.point.y,\n ],\n content: versoContent,\n });\n } else {\n // Reset leaf\n if (this.leaf.stub === 'No') {\n this.path.segments[this.path.segments.length - 1].point.x = this.width;\n this.highlight.segments[this.highlight.segments.length - 1].point.x =\n this.width + 5;\n this.filterHighlight.segments[\n this.filterHighlight.segments.length - 1\n ].point.x = this.width + 5;\n }\n this.textLeafOrder.set({\n point: [this.width + 10, this.textLeafOrder.point.y],\n });\n }\n },\n};\n// Constructor for leaf\nfunction PaperLeaf(args) {\n this.manager = args.manager;\n this.Terms = args.Terms;\n this.leafIDs = args.leafIDs;\n this.leaf = args.leaf;\n this.recto = args.recto;\n this.verso = args.verso;\n this.order = args.leafIDs.indexOf(args.leaf.id) + 1;\n this.parentOrder = args.groupIDs.indexOf(this.leaf.parentID) + 1;\n this.conjoined_to =\n this.leaf.conjoined_to === null\n ? 'None'\n : this.leafIDs.indexOf(this.leaf.conjoined_to) + 1;\n this.indent = null;\n this.origin = args.origin;\n this.viewingMode = args.viewingMode;\n this.width = this.viewingMode ? args.width * 0.88 : args.width * 0.92;\n this.spacing = args.spacing;\n this.y = args.y;\n this.strokeWidth = args.strokeWidth;\n this.strokeColor = args.strokeColor;\n this.strokeColorActive = args.strokeColorActive;\n this.strokeColorGroupActive = args.strokeColorGroupActive;\n this.strokeColorFilter = args.strokeColorFilter;\n this.strokeColorAdded = args.strokeColorAdded;\n this.highlight = new paper.Path();\n this.filterHighlight = new paper.Path();\n this.path = new paper.Path();\n this.isActive = args.isActive;\n this.handleObjectClick = args.handleObjectClick;\n this.multiplier = args.multiplier;\n this.attachment = new paper.Group();\n this.textTerms = new paper.Group();\n this.openTermDialog = args.openTermDialog;\n this.notationStyle = args.notationStyle;\n\n this.textLeafOrder = new paper.PointText({\n point: [this.width, this.y + 5],\n content: 'L' + this.order,\n fillColor: this.strokeColor,\n fontSize: this.spacing * 0.48,\n });\n this.textRecto = new paper.PointText({\n point: [this.width + this.spacing, this.y - 3],\n fillColor: this.strokeColor,\n fontSize: this.spacing * 0.37,\n });\n this.textVerso = new paper.PointText({\n point: [this.width + this.spacing, this.y + this.spacing * 0.37 - 3],\n fillColor: this.strokeColor,\n fontSize: this.spacing * 0.37,\n });\n\n this.visibleAttributes = args.visibleAttributes;\n // Set path properties\n if (this.leaf.type === 'Added') {\n this.path.strokeColor = args.strokeColorAdded;\n } else if (this.leaf.type === 'Endleaf') {\n this.path.strokeColor = '#919191';\n } else {\n this.path.strokeColor = args.strokeColor;\n }\n if (this.leaf.type === 'Missing') {\n // If leaf is missing, make stroke dashed\n this.path.dashArray = [20, 10];\n }\n if (this.leaf.type === 'Replaced') {\n this.path.strokeColor = '#9d6464';\n }\n if (this.isActive) {\n this.path.strokeColor = args.strokeColorActive;\n }\n this.path.strokeWidth = this.strokeWidth;\n if (this.leaf.material === 'Parchment') {\n this.path.strokeWidth = this.path.strokeWidth * 1.2;\n } else if (this.leaf.material === 'Paper') {\n this.path.strokeWidth = this.path.strokeWidth * 0.8;\n }\n}\n\nexport default PaperLeaf;\n","import paper from 'paper';\n\nPaperGroup.prototype = {\n constructor: PaperGroup,\n draw: function () {\n // Create rectangle shapes\n let rectangle = new paper.Rectangle(\n new paper.Point(this.x + 10, this.y),\n new paper.Size(this.width - this.x - 20, this.groupHeight)\n );\n if (this.viewingMode) {\n rectangle = new paper.Rectangle(\n new paper.Point(this.x + 10, this.y),\n new paper.Size(this.width - this.x, this.groupHeight)\n );\n }\n let highlightRectangle = rectangle.clone();\n highlightRectangle.set(\n new paper.Point(this.x, this.y - 10),\n new paper.Size(this.width - this.x, this.groupHeight + 20)\n );\n\n // Create path from rectangle\n this.path = new paper.Path.Rectangle(rectangle);\n if (this.isActive) {\n this.path.fillColor = this.groupColorActive;\n } else {\n this.path.fillColor = this.groupColor;\n }\n if (this.group.nestLevel % 2 === 0) {\n this.path.fillColor.brightness -= 0.05;\n }\n this.path.name = 'group ' + this.groupOrder;\n\n // Create highlight path from rectangle\n this.highlight = new paper.Path.Rectangle(highlightRectangle);\n this.highlight.fillColor = new paper.Color(\n 112 / 255.0,\n 229 / 255.0,\n 220 / 255.0,\n 1\n );\n this.highlight.opacity = 0;\n this.highlight.name = 'group ' + this.groupOrder + ' highlight';\n this.highlight.insertBelow(this.path);\n\n this.filterHighlight = new paper.Path.Rectangle(highlightRectangle);\n this.filterHighlight.fillColor = this.filterColor;\n this.filterHighlight.opacity = 0;\n this.filterHighlight.insertBelow(this.path);\n\n // Set highlight path to be at the back\n paper.project.activeLayer.insertChild(0, this.highlight);\n paper.project.activeLayer.insertChild(0, this.filterHighlight);\n },\n setMouseEventHandlers: function () {\n // Set mouse event handlers\n let that = this;\n this.path.onClick = function (event) {\n that.handleObjectClick(that.group, event);\n };\n this.path.onMouseEnter = function (event) {\n document.body.style.cursor = 'pointer';\n };\n this.path.onMouseLeave = function (event) {\n document.body.style.cursor = 'default';\n };\n },\n removeMouseEventHandlers: function () {\n this.path.onClick = function (event) {};\n this.path.onMouseEnter = function (event) {};\n this.path.onMouseLeave = function (event) {};\n },\n activate: function () {\n this.path.fillColor = this.groupColorActive;\n this.isActive = true;\n this.highlight.opacity = 0.75;\n this.highlight.fillColor = '#ffffff';\n },\n deactivate: function () {\n this.path.fillColor = this.groupColor;\n if (this.group.nestLevel % 2 === 0) {\n this.path.fillColor.brightness -= 0.05;\n }\n this.isActive = false;\n this.highlight.opacity = 0;\n this.highlight.fillColor = new paper.Color(\n 112 / 255.0,\n 229 / 255.0,\n 220 / 255.0,\n 1\n );\n },\n // code here must mirror group_notation function in group.rb:23\n groupNotation: function(group) {\n // get all groupIDs as base nest level\n let outerGroupIDs = []\n this.groupIDs.forEach(gID => {\n if (this.Groups[gID].nestLevel === 1) {\n outerGroupIDs.push(gID)\n }\n })\n let notation = '';\n if (group.nestLevel === 1){\n // get index of current group within the context of all outer groups\n let groupOrder = outerGroupIDs.indexOf(group.id) + 1;\n notation = `${groupOrder}`;\n } else {\n // get parent of current group\n let parentGroup = this.Groups[group.parentID];\n // get children of parent group\n let parentGroupChildren = parentGroup.memberIDs.filter(g => g[0] === 'G');\n let subquireNotation = parentGroupChildren.indexOf(group.id) + 1;\n notation = `${this.groupNotation(parentGroup)}.${subquireNotation}`;\n }\n return notation;\n },\n setVisibility: function (visibleAttributes) {\n this.visibleAttributes = visibleAttributes;\n let groupText = this.group.type + ' ' + this.groupNotation(this.group);\n if (this.visibleAttributes && this.visibleAttributes.title)\n groupText = groupText + ': ' + this.group.title;\n this.text.set({\n content: groupText,\n });\n },\n};\n// Constructor for group\nfunction PaperGroup(args) {\n this.manager = args.manager;\n this.group = args.group;\n this.Groups = args.Groups;\n this.groupIDs = args.groupIDs;\n this.groupOrder = args.groupIDs.indexOf(args.group.id) + 1;\n this.notation = this.groupNotation(this.group);\n this.y = args.y;\n this.x = args.x;\n this.width = args.width;\n this.groupHeight = args.groupHeight;\n this.isActive = args.isActive;\n this.highlight = new paper.Path();\n this.filterHighlight = new paper.Path();\n this.path = new paper.Path();\n this.groupColor = args.groupColor;\n this.groupColorActive = args.groupColorActive;\n this.textColor = args.textColor;\n this.filterColor = args.filterColor;\n this.handleObjectClick = args.handleObjectClick;\n this.visibleAttributes = {};\n this.viewingMode = args.viewingMode;\n this.text = new paper.PointText({\n point: [this.x + args.spacing * 0.6, this.y + args.spacing * 0.6],\n fillColor: this.textColor,\n fontSize: args.spacing * 0.48,\n });\n this.setVisibility(args.visibleAttributes);\n}\nexport default PaperGroup;\n","export function getMemberOrder(member, Groups, groupIDs) {\n const parentID = member.parentID\n if (parentID){\n return Groups[parentID].memberIDs.indexOf(member.id)+1\n } else {\n // member is a root Group. Find member order from groupIDs\n return groupIDs.indexOf(member.id)+1\n }\n\n}\n","import paper from 'paper';\nimport PaperLeaf from './PaperLeaf.js';\nimport PaperGroup from './PaperGroup.js';\nimport { getMemberOrder } from '../../helpers/getMemberOrder';\n\nPaperManager.prototype = {\n constructor: PaperManager,\n createGroup: function (group) {\n let g = new PaperGroup({\n manager: this,\n group: group,\n Groups: this.Groups,\n groupIDs: this.groupIDs,\n y: this.groupYs[this.groupIDs.indexOf(group.id)],\n x: (this.paperLeaves.find(g => g.leaf.id === group.memberIDs[0])) ?\n (this.paperLeaves.find(g => g.leaf.id === group.memberIDs[0]).indent - 1) * this.spacing\n : (group.nestLevel - 1) * this.spacing,\n // x: (group.nestLevel - 1) * this.spacing,\n width: this.width,\n groupHeight: this.getGroupHeight(group),\n isActive: this.activeGroups.includes(group.id),\n groupColor: this.groupColor,\n groupColorActive: this.groupColorActive,\n filterColor: this.strokeColorFilter,\n handleObjectClick: this.handleObjectClick,\n textColor: this.groupTextColor,\n visibleAttributes: this.visibleAttributes.group,\n viewingMode: this.viewingMode,\n spacing: this.spacing,\n });\n\n g.draw();\n g.setMouseEventHandlers();\n\n // Add this group to collections\n this.groupGroups.addChild(g.filterHighlight);\n this.groupGroups.addChild(g.highlight);\n this.groupGroups.addChild(g.path);\n this.groupGroups.addChild(g.text);\n this.paperGroups.push(g);\n\n // Add this group to list of items to flash if it's in the flashItems list\n if (this.flashItems.groups.includes(group.id)) {\n this.flashGroups.push(g);\n }\n },\n createLeaf: function (leaf) {\n let l = new PaperLeaf({\n manager: this,\n origin: this.origin,\n width: this.width,\n spacing: this.spacing,\n strokeWidth:\n this.strokeWidth *\n Math.min(1.0, this.multipliers[this.leafIDs.indexOf(leaf.id) + 1]),\n strokeColor: this.strokeColor,\n strokeColorActive: this.strokeColorActive,\n strokeColorGroupActive: this.strokeColorGroupActive,\n strokeColorAdded: this.strokeColorAdded,\n leaf: leaf,\n recto: this.Rectos[leaf.rectoID],\n verso: this.Versos[leaf.versoID],\n groupIDs: this.groupIDs,\n leafIDs: this.leafIDs,\n Groups: this.Groups,\n Terms: this.Terms,\n y: this.leafYs[this.leafIDs.indexOf(leaf.id)],\n isActive:\n this.activeLeafs.includes(leaf.id) ||\n this.activeRectos.includes(leaf.rectoID) ||\n this.activeVersos.includes(leaf.versoID),\n customSpacings: this.customSpacings,\n handleObjectClick: this.handleObjectClick,\n multiplier: this.multipliers[this.leafIDs.indexOf(leaf.id) + 1],\n strokeColorFilter: this.strokeColorFilter,\n visibleAttributes: this.visibleAttributes,\n viewingMode: this.viewingMode,\n openTermDialog: this.openTermDialog,\n notationStyle: this.notationStyle,\n });\n this.paperLeaves.push(l);\n this.groupLeaves.addChild(l.path);\n this.groupLeaves.addChild(l.textLeafOrder);\n this.groupLeaves.addChild(l.textRecto);\n this.groupLeaves.addChild(l.textVerso);\n this.groupLeaves.addChild(l.attachment);\n this.groupLeaves.addChild(l.textTerms);\n if (this.flashItems.leaves.includes(leaf.id)) {\n this.flashLeaves.push(l);\n }\n return l;\n },\n draw: function () {\n // Clear existing drawn elements\n this.leafYs = [];\n this.groupYs = [];\n this.paperLeaves = [];\n this.paperGroups = [];\n this.flashGroups = [];\n this.flashLeaves = [];\n this.groupLeaves.removeChildren();\n this.groupGroups.removeChildren();\n this.groupContainer.removeChildren();\n this.groupTacket.removeChildren();\n\n // Calculate y positions of groups and leaves\n let currentY = 0;\n let prevRootGroupID = null;\n for (let i in this.groupIDs) {\n const groupID = this.groupIDs[i];\n const group = this.Groups[groupID];\n if (group.nestLevel === 1) {\n if (i > 0 && prevRootGroupID) {\n const prevGroupsLastMember = this.getLastMember(prevRootGroupID);\n const nestLevel = prevGroupsLastMember\n ? prevGroupsLastMember.nestLevel + 1\n : 1;\n currentY = currentY + this.spacing * nestLevel;\n }\n this.groupYs.push(currentY);\n currentY = this.calculateYs(group.memberIDs, currentY, this.spacing);\n\n if (group.memberIDs.length === 0) {\n currentY = currentY + this.spacing;\n }\n prevRootGroupID = groupID;\n }\n }\n\n // Create all the leaves\n for (let leafID of this.leafIDs) {\n this.createLeaf(this.Leafs[leafID]);\n }\n // Draw all leaves and set mouse event handlers\n this.paperLeaves.forEach(leaf => {\n leaf.draw();\n leaf.setMouseEventHandlers();\n });\n\n let nestLevel = 1;\n while (true) {\n let groupsAtLevel = Object.values(this.Groups).filter(g => g.nestLevel === nestLevel);\n if (groupsAtLevel.length === 0) {\n break;\n }\n for (let key in groupsAtLevel) {\n const g = groupsAtLevel[key];\n this.createGroup(g);\n }\n nestLevel++;\n }\n\n // Show filter\n this.showFilter();\n\n // Draw other visualizations\n this.drawTackets();\n this.drawSewing();\n\n this.groupContainer.addChild(this.groupGroups);\n this.groupContainer.addChild(this.groupLeaves);\n this.groupContainer.addChild(this.groupTacket);\n this.groupContainer.addChild(this.groupTacketGuide);\n // Reposition the drawing\n this.groupContainer.position.y += 10;\n this.fitCanvas();\n },\n tacketTargetLeaves: function (groupID, targets) {\n const targetGroup = this.paperGroups.find(member => {\n return member.group.id === groupID;\n })\n targetGroup.group.memberIDs.forEach(memberID => {\n if (memberID.charAt(0) === 'L') {\n const leaf = this.getLeaf(\n this.leafIDs.indexOf(this.Leafs[memberID].id) + 1\n );\n if (\n leaf.isConjoined() &&\n (this.tacketLineDrag.getIntersections(leaf.path).length > 0 ||\n this.tacketLineDrag.getIntersections(leaf.conjoinedLeaf().path)\n .length > 0)\n ) {\n leaf.path.strokeColor = '#ffffff';\n leaf.conjoinedLeaf().path.strokeColor = '#ffffff';\n // Add leaf to list of targets to tacket\n targets.push(leaf);\n } else {\n leaf.deactivate();\n }\n } else if (memberID.charAt(0) === 'G') {\n this.tacketTargetLeaves(memberID, targets)\n }\n })\n },\n activateTacketTool: function (groupID, type = 'tacketed') {\n // Remove existing tacket\n this.groupTacket.removeChildren();\n this.groupTacketGuide.removeChildren();\n this.groupTacketGuideLine.removeChildren();\n\n this.tacketToolIsActive = true;\n if (this.tool) this.tool.remove();\n this.tool = new paper.Tool();\n this.tool.minDistance = 5;\n let targets = [];\n\n // Remove hover cursor effect on groups and leaves\n this.paperGroups.forEach(group => group.removeMouseEventHandlers());\n this.paperLeaves.forEach(leaf => leaf.removeMouseEventHandlers());\n document.body.style.cursor = 'crosshair';\n\n this.drawTacketGuide(groupID, type);\n\n this.tool.onMouseDown = event => {\n this.tacketLineDrag = new paper.Path();\n this.tacketLineDrag.strokeColor = this.strokeColorTacket;\n this.tacketLineDrag.strokeWidth = 5;\n this.tacketLineDrag.add(event.point);\n this.groupTacketGuide.addChild(this.tacketLineDrag);\n };\n this.tool.onMouseUp = event => {\n // Remove line from canvas\n this.groupTacketGuide.removeChildren();\n // Reset colour of leaves\n this.paperLeaves.forEach(leaf => {\n leaf.deactivate();\n });\n this.toggleVisualizationDrawing({ type: type, value: '' });\n if (targets.length > 0) {\n let targetLeaf1 = targets[0];\n let targetLeaf2 = targets[targets.length / 2];\n this.addVisualization(targetLeaf1.leaf.parentID, type, [\n targetLeaf1.leaf.id,\n targetLeaf2.leaf.id,\n ]);\n } else {\n // Redraw old visualization\n if (type === 'tacketed') {\n this.drawTackets();\n } else {\n this.drawSewing();\n }\n }\n };\n this.tool.onMouseDrag = event => {\n // Update line\n if (!this.tacketLineDrag.segments[1]) {\n this.tacketLineDrag.add(event.point);\n } else {\n this.tacketLineDrag.segments[1].point = event.point;\n }\n targets = [];\n this.tacketTargetLeaves(groupID, targets)\n };\n this.tool.activate();\n },\n drawTacketGuide: function (groupID, type) {\n const targetGroup = this.paperGroups.find(member => {\n return member.group.id === groupID;\n });\n const guideY = targetGroup.path.bounds.height / 2;\n const guideX = targetGroup.path.bounds.left;\n let guideLine = new paper.Path();\n guideLine.strokeColor = '#ffffff';\n guideLine.strokeWidth = 5;\n guideLine.dashArray = [10, 10];\n guideLine.add(\n new paper.Point(\n guideX,\n targetGroup.path.bounds.y + guideY + this.strokeWidth / 2\n )\n );\n guideLine.add(\n new paper.Point(\n guideX + targetGroup.path.bounds.width / 3,\n targetGroup.path.bounds.y + guideY + this.strokeWidth / 2\n )\n );\n let guideLineArrow = new paper.Path();\n guideLineArrow.strokeColor = '#ffffff';\n guideLineArrow.strokeWidth = 3;\n guideLineArrow.add(\n guideLine.segments[1].point.x - 10,\n guideLine.segments[1].point.y - 10\n );\n guideLineArrow.add(\n guideLine.segments[1].point.x,\n guideLine.segments[1].point.y\n );\n guideLineArrow.add(\n guideLine.segments[1].point.x - 10,\n guideLine.segments[1].point.y + 10\n );\n let guideLineX1 = new paper.Path();\n guideLineX1.strokeColor = '#ffffff';\n guideLineX1.strokeWidth = 3;\n guideLineX1.add(\n new paper.Point(guideX - 10, guideLine.segments[0].point.y - 10)\n );\n guideLineX1.add(\n new paper.Point(guideX + 10, guideLine.segments[0].point.y + 10)\n );\n let guideLineX2 = new paper.Path();\n guideLineX2.strokeColor = '#ffffff';\n guideLineX2.strokeWidth = 3;\n guideLineX2.add(\n new paper.Point(guideX - 10, guideLine.segments[0].point.y + 10)\n );\n guideLineX2.add(\n new paper.Point(guideX + 10, guideLine.segments[0].point.y - 10)\n );\n\n const drawType = type === 'tacketed' ? 'TACKET' : 'SEWING';\n let guideText = new paper.PointText({\n content: 'DRAW ' + drawType + ' LINE',\n point: [guideX + 20, targetGroup.path.bounds.y + guideY - 20],\n fillColor: '#000000',\n fontSize: 12,\n });\n let guideTextRectangle = new paper.Rectangle(\n new paper.Point(guideX + 15, targetGroup.path.bounds.y + guideY - 35),\n new paper.Size(guideText.bounds.width + 10, guideText.bounds.height + 5)\n );\n let guideTextBackground = new paper.Path.Rectangle(guideTextRectangle);\n guideTextBackground.fillColor = 'rgba(255,255,255,0.75)';\n this.groupTacketGuideLine.addChild(guideLine);\n this.groupTacketGuideLine.addChild(guideLineArrow);\n this.tacketToolOriginalPosition = this.groupTacketGuideLine.position.x;\n this.groupTacketGuide.addChild(this.groupTacketGuideLine);\n this.groupTacketGuide.addChild(guideTextBackground);\n this.groupTacketGuide.addChild(guideText);\n this.groupTacketGuide.addChild(guideLineX1);\n this.groupTacketGuide.addChild(guideLineX2);\n },\n deactivateTacketTool: function () {\n this.tacketToolIsActive = false;\n this.groupTacketGuide.removeChildren();\n if (this.tool) {\n this.tool.remove();\n }\n document.body.style.cursor = 'default';\n this.paperGroups.forEach(group => group.setMouseEventHandlers());\n this.paperLeaves.forEach(leaf => leaf.setMouseEventHandlers());\n },\n drawSewing: function () {\n this.paperGroups.forEach(group => {\n if (group.group.sewing !== null && group.group.sewing.length > 0) {\n const leafID1 = group.group.sewing[0];\n const leafID2 =\n group.group.sewing.length > 1 ? group.group.sewing[1] : undefined;\n\n if (leafID1 !== undefined && this.leafIDs.indexOf(leafID1) >= 0) {\n let startX, startY, endX, endY;\n let paperLeaf1, paperLeaf2;\n\n paperLeaf1 = this.getLeaf(this.leafIDs.indexOf(leafID1) + 1);\n if (leafID2 !== undefined) {\n paperLeaf2 = this.getLeaf(this.leafIDs.indexOf(leafID2) + 1);\n startX = paperLeaf1.path.segments[0].point.x - this.strokeWidth;\n startY = paperLeaf2.path.segments[0].point.y;\n endX = paperLeaf2.path.segments[0].point.x;\n } else {\n startX = 15;\n startY = paperLeaf1.path.segments[0].point.y;\n endX = paperLeaf1.path.segments[0].point.x;\n }\n if (\n group.group.tacketed !== null &&\n group.group.tacketed.length > 0\n ) {\n startY -= this.spacing * 0.15;\n }\n endY = startY;\n let sewingPath = new paper.Path();\n sewingPath.name = 'tacket1';\n sewingPath.strokeColor = this.strokeColorTacket;\n sewingPath.strokeWidth = 3;\n sewingPath.add(new paper.Point(startX, startY));\n sewingPath.add(new paper.Point(endX + this.strokeWidth, endY));\n const that = this;\n // Add listeners\n sewingPath.onClick = function (event) {\n that.handleObjectClick(group.group, event);\n };\n sewingPath.onMouseEnter = function (event) {\n document.body.style.cursor = 'pointer';\n };\n sewingPath.onMouseLeave = function (event) {\n document.body.style.cursor = 'default';\n };\n this.groupTacket.addChild(sewingPath);\n }\n }\n });\n },\n drawTackets: function () {\n this.paperGroups.forEach(group => {\n if (group.group.tacketed !== null && group.group.tacketed.length > 0) {\n const leafID1 = group.group.tacketed[0];\n const leafID2 = group.group.tacketed[1];\n if (leafID1 !== undefined && this.leafIDs.indexOf(leafID1) >= 0) {\n let startX, startY, endX, endY;\n let paperLeaf1, paperLeaf2;\n\n paperLeaf1 = this.getLeaf(this.leafIDs.indexOf(leafID1) + 1);\n if (leafID2 !== undefined) {\n paperLeaf2 = this.getLeaf(this.leafIDs.indexOf(leafID2) + 1);\n startX = paperLeaf1.path.segments[0].point.x - this.strokeWidth;\n startY = paperLeaf2.path.segments[0].point.y;\n endX = paperLeaf2.path.segments[0].point.x;\n } else {\n startX = 15;\n startY = paperLeaf1.path.segments[0].point.y;\n endX = paperLeaf1.path.segments[0].point.x;\n }\n if (\n group.group.tacketed !== null &&\n group.group.tacketed.length > 0\n ) {\n startY -= this.spacing * 0.2;\n }\n if (group.group.sewing !== null && group.group.sewing.length > 0) {\n startY += this.spacing * 0.25;\n }\n endY = startY;\n let tacketPath1 = new paper.Path();\n tacketPath1.name = 'tacket1';\n tacketPath1.strokeColor = this.strokeColorTacket;\n tacketPath1.strokeWidth = 3;\n tacketPath1.add(new paper.Point(startX, startY - 2));\n tacketPath1.add(new paper.Point(endX + this.strokeWidth, endY - 2));\n tacketPath1.add(\n new paper.Point(\n tacketPath1.segments[1].point.x + 5,\n tacketPath1.segments[1].point.y - 3\n )\n );\n let tacketPath2 = new paper.Path();\n tacketPath2.name = 'tacket2';\n tacketPath2.strokeColor = this.strokeColorTacket;\n tacketPath2.strokeWidth = 3;\n tacketPath2.add(new paper.Point(startX, startY + 2));\n tacketPath2.add(new paper.Point(endX + this.strokeWidth, endY + 2));\n tacketPath2.add(\n new paper.Point(\n tacketPath2.segments[1].point.x + 5,\n tacketPath2.segments[1].point.y + 3\n )\n );\n const that = this;\n // Add listeners\n tacketPath1.onClick = function (event) {\n that.handleObjectClick(group.group, event);\n };\n tacketPath2.onClick = function (event) {\n that.handleObjectClick(group.group, event);\n };\n tacketPath1.onMouseEnter = function (event) {\n document.body.style.cursor = 'pointer';\n };\n tacketPath1.onMouseLeave = function (event) {\n document.body.style.cursor = 'default';\n };\n tacketPath2.onMouseEnter = function (event) {\n document.body.style.cursor = 'pointer';\n };\n tacketPath2.onMouseLeave = function (event) {\n document.body.style.cursor = 'default';\n };\n this.groupTacket.addChild(tacketPath1);\n this.groupTacket.addChild(tacketPath2);\n }\n }\n });\n },\n getYOfFirstMember: function (groupID) {\n let group = this.Groups[groupID];\n if (group.memberIDs.length === 0) {\n let y = this.groupYs[this.groupIDs.indexOf(group.id)];\n return y;\n }\n let firstMemberID = group.memberIDs[0];\n let firstMember = this[firstMemberID.split('_')[0] + 's'][firstMemberID];\n if (firstMemberID.memberType === 'Group') {\n return this.getYOfFirstMember(firstMemberID);\n } else {\n let firstLeafY = this.leafYs[this.leafIDs.indexOf(firstMember.id)];\n return firstLeafY;\n }\n },\n getYOfLastMember: function (groupID) {\n const group = this.Groups[groupID];\n const lastMember = this.getLastMember(groupID);\n if (lastMember && lastMember.memberType === 'Group') {\n let y = this.groupYs[this.groupIDs.indexOf(lastMember.id)];\n return y + (lastMember.nestLevel - group.nestLevel) * this.spacing;\n } else if (lastMember && lastMember.memberType === 'Leaf') {\n let lastLeafY =\n this.leafYs[this.leafIDs.indexOf(lastMember.id)] +\n this.strokeWidth +\n this.spacing / 2.0;\n return (\n lastLeafY + (lastMember.nestLevel - group.nestLevel - 1) * this.spacing\n );\n } else {\n return 0;\n }\n },\n getLastMember: function (groupID) {\n let lastMemberIDs = this.Groups[groupID].memberIDs;\n if (lastMemberIDs.length === 0) return null;\n let lastMemberID = lastMemberIDs[lastMemberIDs.length - 1];\n if (lastMemberID.charAt(0) === 'L') {\n return this.Leafs[lastMemberID];\n } else {\n let lastMember = this.Groups[lastMemberID];\n // Check if this group has members\n let innerLastMember = this.getLastMember(lastMemberID);\n if (innerLastMember) lastMember = innerLastMember;\n return lastMember;\n }\n },\n getGroupHeight: function (group) {\n if (group.memberIDs.length > 0) {\n let height =\n this.getYOfLastMember(group.id) -\n this.groupYs[this.groupIDs.indexOf(group.id)];\n return height + this.spacing;\n } else {\n return this.spacing;\n }\n },\n numLeaves: function () {\n return this.paperLeaves.length;\n },\n getLeaf: function (leaf_order) {\n return this.paperLeaves[leaf_order - 1];\n },\n getGroup: function (group_order) {\n return this.paperGroups[group_order - 1]\n },\n getLastLeaf: function () {\n return this.paperLeaves[this.numLeaves() - 1];\n },\n calculateYs: function (members, currentY, spacing) {\n if (members.length < 1) {\n return currentY;\n }\n let multiplier = 1;\n if (members.length > 70) {\n multiplier = 0.5;\n } else if (members.length > 45) {\n multiplier = 0.6;\n } else if (members.length > 35 || this.viewingMode) {\n multiplier = 0.8;\n }\n members.forEach((memberID, i) => {\n let memberObject = this[memberID.split('_')[0] + 's'][memberID];\n let termsToShowAbove = memberObject.terms.filter(termID => {\n return this.Terms[termID].show;\n }).length;\n let termsToShowBelow = 0;\n let glueSpacing = 0;\n if (memberObject.memberType === 'Leaf') {\n // Find if it has side terms\n termsToShowAbove += this.Rectos[memberObject.rectoID].terms.filter(\n termID => {\n return this.Terms[termID].show;\n }\n ).length;\n termsToShowBelow += this.Versos[memberObject.versoID].terms.filter(\n termID => {\n return this.Terms[termID].show;\n }\n ).length;\n // Find if leaf has glue that's not a partial glue\n glueSpacing =\n termsToShowAbove > 0 &&\n memberObject.attached_above.includes('Glued') &&\n !memberObject.attached_above.includes('Partial')\n ? 1\n : 0;\n }\n\n if (\n memberObject.memberType === 'Leaf' &&\n getMemberOrder(memberObject, this.Groups, this.groupIDs) === 1 &&\n termsToShowAbove > 0\n ) {\n // First leaf in the group with a term\n this.multipliers[\n this.leafIDs.indexOf(memberObject.id) + 1\n ] = multiplier;\n currentY = currentY + spacing * (termsToShowAbove + 1);\n this.leafYs.push(currentY);\n currentY = currentY + spacing * termsToShowBelow * 0.8;\n if (i === members.length - 1) {\n // Last member of group\n currentY = currentY + memberObject.nestLevel * spacing;\n }\n } else if (\n memberObject.memberType === 'Leaf' &&\n this.leafIDs.indexOf(memberObject.id) + 1 > 0\n ) {\n this.multipliers[\n this.leafIDs.indexOf(memberObject.id) + 1\n ] = multiplier;\n currentY =\n currentY +\n spacing * Math.max(1, termsToShowAbove) +\n spacing * glueSpacing;\n if (\n i > 0 &&\n members[i - 1].includes('Group') &&\n this.Groups[members[i - 1]].memberIDs.length\n ) {\n // Previous sibling is a group with children\n // Find difference of nest level between current leaf and previous group's last member\n const previousMember = this.getLastMember(members[i - 1]);\n currentY =\n currentY +\n (previousMember.nestLevel - memberObject.nestLevel) * spacing;\n }\n this.leafYs.push(currentY);\n currentY = currentY + spacing * termsToShowBelow * 0.8;\n } else if (memberObject.memberType === 'Group') {\n currentY = currentY + spacing;\n if (\n i > 0 &&\n members[i - 1].includes('Group') &&\n this.Groups[members[i - 1]].memberIDs.length > 0\n ) {\n // Previous sibling is a group with children\n const previousMember = this.getLastMember(members[i - 1]);\n currentY =\n currentY +\n (previousMember.nestLevel - memberObject.nestLevel + 1) * spacing;\n } else if (\n i > 0 &&\n members[i - 1].includes('Group') &&\n this.Groups[members[i - 1]].memberIDs.length === 0\n ) {\n // Previous sibling is a group without children\n currentY = currentY + spacing;\n }\n this.groupYs.push(currentY);\n\n // Recursify!!!\n currentY = this.calculateYs(memberObject.memberIDs, currentY, spacing);\n }\n });\n return currentY;\n },\n fitCanvas: function () {\n // Resize canvas so that nothing is cut off\n this.canvas.height = this.groupGroups.bounds.bottom + 10;\n },\n setWidth: function (value) {\n this.width = value;\n },\n setProject: function (project) {\n this.groupIDs = project.groupIDs;\n this.leafIDs = project.leafIDs;\n this.Groups = project.Groups;\n this.Leafs = project.Leafs;\n this.Rectos = project.Rectos;\n this.Versos = project.Versos;\n this.Terms = project.Terms;\n },\n setActiveGroups: function (value) {\n this.activeGroups = value;\n if (this.paperGroups.length > 0) {\n this.paperGroups.forEach(group => {\n group.deactivate();\n });\n this.paperGroups.forEach(paperGroup => {\n if (this.activeGroups.includes(paperGroup.group.id)) {\n paperGroup.activate();\n }\n });\n }\n },\n setActiveLeafs: function (value) {\n this.activeLeafs = value;\n if (this.paperLeaves.length > 0) {\n this.paperLeaves.forEach(leaf => {\n leaf.deactivate();\n });\n this.paperLeaves.forEach(paperLeaf => {\n if (this.activeLeafs.includes(paperLeaf.leaf.id)) {\n paperLeaf.activate();\n }\n });\n }\n },\n setActiveRectos: function (value) {\n this.activeRectos = value;\n if (this.paperLeaves.length > 0) {\n this.paperLeaves.forEach(leaf => {\n leaf.deactivate();\n });\n this.paperLeaves.forEach(paperLeaf => {\n if (this.activeRectos.includes(paperLeaf.leaf.rectoID)) {\n paperLeaf.activate();\n }\n });\n }\n },\n setActiveVersos: function (value) {\n this.activeVersos = value;\n if (this.paperLeaves.length > 0) {\n this.paperLeaves.forEach(leaf => {\n leaf.deactivate();\n });\n this.paperLeaves.forEach(paperLeaf => {\n if (this.activeVersos.includes(paperLeaf.leaf.versoID)) {\n paperLeaf.activate();\n }\n });\n }\n },\n setFlashItems: function (value) {\n this.flashItems = value;\n },\n setFilter: function (filters) {\n this.filters = filters;\n this.showFilter();\n },\n showFilter: function () {\n this.paperLeaves.forEach(leaf => {\n leaf.filterHighlight.opacity = 0;\n if (\n this.filters.Leafs.includes(leaf.leaf.id) ||\n this.filters.Sides.includes(leaf.leaf.rectoID) ||\n this.filters.Sides.includes(leaf.leaf.versoID)\n ) {\n leaf.filterHighlight.opacity = 1;\n }\n });\n this.paperGroups.forEach(group => {\n group.filterHighlight.opacity = 0;\n if (this.filters.Groups.includes(group.group.id)) {\n group.filterHighlight.opacity = 1;\n }\n });\n },\n setVisibility: function (visibleAttributes) {\n this.visibleAttributes = visibleAttributes;\n this.paperGroups.forEach(group =>\n group.setVisibility(visibleAttributes.group)\n );\n this.paperLeaves.forEach(leaf => leaf.setVisibility(visibleAttributes));\n },\n setScale: function (spacing, strokeWidth) {\n this.spacing = this.width * spacing;\n this.strokeWidth = this.width * strokeWidth;\n },\n};\n\nfunction PaperManager(args) {\n this.canvas = document.getElementById(args.canvasID);\n paper.setup(this.canvas);\n this.tool = null;\n this.groupIDs = args.groupIDs;\n this.leafIDs = args.leafIDs;\n this.Groups = args.Groups;\n this.Leafs = args.Leafs;\n this.Rectos = args.Rectos;\n this.Versos = args.Versos;\n this.Terms = args.Terms;\n this.origin = args.origin;\n this.width = paper.view.viewSize.width;\n this.spacing = this.width * args.spacing;\n this.strokeWidth = this.width * args.strokeWidth;\n this.strokeColor = args.strokeColor;\n this.strokeColorActive = args.strokeColorActive;\n this.strokeColorAdded = args.strokeColorAdded;\n this.strokeColorGroupActive = args.strokeColorGroupActive;\n this.strokeColorTacket = args.strokeColorTacket;\n this.groupColor = args.groupColor;\n this.groupColorActive = args.groupColorActive;\n this.groupTextColor = args.groupTextColor;\n this.handleObjectClick = args.handleObjectClick;\n this.groupLeaves = new paper.Group(); // Groups of leaf paths\n this.groupGroups = new paper.Group(); // Group of group paths\n this.groupContainer = new paper.Group();\n this.activeGroups = args.activeGroups;\n this.activeLeafs = args.activeLeafs;\n this.activeRectos = args.activeRectos;\n this.activeVersos = args.activeVersos;\n this.paperLeaves = [];\n this.paperGroups = [];\n this.leafYs = [];\n this.groupYs = [];\n this.multipliers = {};\n this.flashItems = args.flashItems;\n this.flashLeaves = [];\n this.flashGroups = [];\n this.filters = args.filters;\n this.strokeColorFilter = args.strokeColorFilter;\n this.visibleAttributes = args.visibleAttributes;\n this.viewingMode = args.viewingMode;\n this.tacketLineDrag = new paper.Path();\n this.groupTacketGuide = new paper.Group();\n this.groupTacketGuideLine = new paper.Group();\n this.groupTacket = new paper.Group();\n this.toggleVisualizationDrawing = args.toggleVisualizationDrawing;\n this.addVisualization = args.addVisualization;\n this.tacketToolIsActive = false;\n this.tacketToolOriginalPosition = 0;\n this.slideForward = true;\n this.openTermDialog = args.openTermDialog;\n this.leafIDs = args.leafIDs;\n this.notationStyle = args.notationStyle;\n\n let that = this;\n // Flash newly added items\n paper.view.onFrame = function (event) {\n for (let i = 0; i < that.flashLeaves.length; i++) {\n that.flashLeaves[i].highlight.opacity = Math.min(\n 0.8,\n that.flashLeaves[i].highlight.opacity + 0.05\n );\n }\n for (let i = 0; i < that.flashGroups.length; i++) {\n that.flashGroups[i].highlight.opacity = Math.min(\n 0.8,\n that.flashGroups[i].highlight.opacity + 0.05\n );\n }\n if (that.tacketToolIsActive) {\n if (that.slideForward) {\n that.groupTacketGuideLine.position.x += 0.5;\n if (\n that.groupTacketGuideLine.position.x >\n that.tacketToolOriginalPosition + 25\n ) {\n that.slideForward = false;\n }\n } else {\n that.groupTacketGuideLine.position.x -= 0.5;\n if (\n that.groupTacketGuideLine.position.x < that.tacketToolOriginalPosition\n ) {\n that.slideForward = true;\n }\n }\n }\n };\n}\n\nexport default PaperManager;\n","import React from 'react';\nimport PaperManager from '../../assets/visualMode/PaperManager.js';\n\n/** Contains the collation drawing in a canvas element */\nexport default class VisualMode extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n paperManager: {},\n };\n }\n\n componentDidMount() {\n this.props.toggleVisualizationDrawing({ type: 'tacketed', value: '' });\n this.props.toggleVisualizationDrawing({ type: 'sewing', value: '' });\n window.addEventListener('resize', this.drawOnCanvas);\n this.setState(\n {\n paperManager: new PaperManager({\n canvasID: 'myCanvas',\n origin: 0,\n spacing: 0.04,\n strokeWidth: 0.015,\n strokeColor: 'rgb(82,108,145)',\n strokeColorActive: 'rgb(78,214,203)',\n strokeColorGroupActive: 'rgb(82,108,145)',\n strokeColorFilter: '#95fff6',\n strokeColorAdded: '#5F95D6',\n groupColor: '#e7e7e7',\n groupColorActive: 'rgb(78,214,203)',\n groupTextColor: '#727272',\n strokeColorTacket: '#4e4e4e',\n handleObjectClick: this.props.handleObjectClick,\n groupIDs: this.props.project.groupIDs,\n leafIDs: this.props.project.leafIDs,\n Groups: this.props.project.Groups,\n Leafs: this.props.project.Leafs,\n Rectos: this.props.project.Rectos,\n Versos: this.props.project.Versos,\n Terms: this.props.project.Terms,\n activeGroups:\n this.props.collationManager.selectedObjects.type === 'Group'\n ? this.props.collationManager.selectedObjects.members\n : [],\n activeLeafs:\n this.props.collationManager.selectedObjects.type === 'Leaf'\n ? this.props.collationManager.selectedObjects.members\n : [],\n activeRectos:\n this.props.collationManager.selectedObjects.type === 'Recto'\n ? this.props.collationManager.selectedObjects.members\n : [],\n activeVersos:\n this.props.collationManager.selectedObjects.type === 'Verso'\n ? this.props.collationManager.selectedObjects.members\n : [],\n flashItems: this.props.collationManager.flashItems,\n filters: this.props.collationManager.filters,\n visibleAttributes: this.props.project.preferences,\n toggleVisualizationDrawing: this.props.toggleVisualizationDrawing,\n addVisualization: this.addVisualization,\n openTermDialog: this.props.openTermDialog,\n notationStyle: this.props.project.notationStyle,\n }),\n },\n () => {\n this.drawOnCanvas();\n }\n );\n }\n componentWillUnmount() {\n this.props.toggleVisualizationDrawing({ type: 'tacketed', value: '' });\n this.props.toggleVisualizationDrawing({ type: 'sewing', value: '' });\n this.state.paperManager.deactivateTacketTool();\n window.removeEventListener('resize', this.drawOnCanvas);\n }\n\n shouldComponentUpdate(nextProps) {\n return (\n this.props.project.Groups !== nextProps.project.Groups ||\n this.props.project.Sides !== nextProps.project.Sides ||\n this.props.project.Rectos !== nextProps.project.Rectos ||\n this.props.project.Versos !== nextProps.project.Versos ||\n this.props.project.Terms !== nextProps.project.Terms ||\n this.props.collationManager.selectedObjects !==\n nextProps.collationManager.selectedObjects ||\n this.props.collationManager.flashItems !==\n nextProps.collationManager.flashItems ||\n this.props.collationManager.filters !==\n nextProps.collationManager.filters ||\n this.props.project.preferences !== nextProps.project.preferences ||\n this.props.tacketed !== nextProps.tacketed ||\n this.props.sewing !== nextProps.sewing\n );\n }\n\n componentWillUpdate(nextProps) {\n if (Object.keys(this.state.paperManager).length > 0) {\n this.state.paperManager.setProject(nextProps.project);\n this.state.paperManager.setFlashItems(\n nextProps.collationManager.flashItems\n );\n this.state.paperManager.setActiveGroups(\n nextProps.collationManager.selectedObjects.type === 'Group'\n ? nextProps.collationManager.selectedObjects.members\n : []\n );\n this.state.paperManager.setActiveLeafs(\n nextProps.collationManager.selectedObjects.type === 'Leaf'\n ? nextProps.collationManager.selectedObjects.members\n : []\n );\n this.state.paperManager.setActiveRectos(\n nextProps.collationManager.selectedObjects.type === 'Recto'\n ? nextProps.collationManager.selectedObjects.members\n : []\n );\n this.state.paperManager.setActiveVersos(\n nextProps.collationManager.selectedObjects.type === 'Verso'\n ? nextProps.collationManager.selectedObjects.members\n : []\n );\n this.state.paperManager.setFilter(nextProps.collationManager.filters);\n this.state.paperManager.setVisibility(nextProps.project.preferences);\n this.drawOnCanvas();\n if (nextProps.tacketed !== '') {\n this.state.paperManager.activateTacketTool(nextProps.tacketed);\n } else if (nextProps.sewing !== '') {\n this.state.paperManager.activateTacketTool(nextProps.sewing, 'sewing');\n } else {\n this.state.paperManager.deactivateTacketTool();\n }\n }\n }\n\n addVisualization = (groupID, type, leafIDs) => {\n let updatedGroup = {\n [type]: leafIDs,\n };\n this.props.updateGroup(groupID, updatedGroup);\n };\n\n /**\n * Update canvas size based on current window size\n */\n updateCanvasSize = () => {\n // Resize the canvas\n let maxWidth = window.innerWidth - window.innerWidth * 0.46;\n document.getElementById('myCanvas').width = maxWidth;\n this.state.paperManager.setWidth(maxWidth);\n };\n\n /**\n * Draw canvas\n */\n drawOnCanvas = () => {\n // Create leaves through manager\n this.updateCanvasSize();\n this.state.paperManager.draw();\n };\n\n render() {\n let canvasAttr = {\n 'data-paper-hidpi': 'off',\n height: '99999999px',\n width: window.innerWidth - window.innerWidth * 0.46,\n };\n return (\n No objects match the query
: group_components}\n\n \n
\n );\n }\n}\n","import paper from 'paper';\n\nPaperLeaf.prototype = {\n constructor: PaperLeaf,\n draw: function() {\n // Call this function only after ALL leaves have been instantiated\n // This is because we need all leaves present in order\n // to compute their indentations relative to each other\n this.setIndent();\n // Draw horizontal part\n let x1 = this.multiplier<1? 10 + this.indent*this.spacing*this.multiplier : this.indent*this.spacing*this.multiplier;\n let x2 = this.width;\n this.path.add(new paper.Point(x1, this.y));\n if (this.leaf.stub !== \"No\") {\n x2 = this.width*0.15+x1;\n }\n this.path.add(new paper.Point(x2, this.y));\n // Draw vertical part\n if (this.isConjoined()) {\n var conjoinY=this.y_conjoin_center(this.conjoined_to);\n this.path.insert(0, new paper.Point(this.path.segments[0].point.x, conjoinY));\n }\n this.curveMe();\n\n this.path.name = \"leaf \" + this.order;\n\n // Create highlight path\n this.highlight = this.path.clone();\n this.highlight.dashArray = [0, 0];\n this.highlight.segments[this.highlight.segments.length-1].point.x = this.highlight.segments[this.highlight.segments.length-1].point.x + 5;\n if (this.leaf.conjoined_to === \"None\") {\n this.highlight.segments[0].point.x = this.highlight.segments[0].point.x - 5;\n }\n this.highlight.strokeColor = this.strokeColorActive;\n this.highlight.strokeWidth = this.path.strokeWidth*2;\n this.highlight.opacity = 0;\n this.highlight.name = \"leaf \" + this.order + \" highlight\";\n this.highlight.insertBelow(this.path);\n\n if (this.isActive) {\n this.highlight.opacity = 0.35;\n this.highlight.strokeWidth = this.path.strokeWidth*2;\n this.highlight.strokeColor = \"#ffffff\";\n }\n \n this.filterHighlight = this.path.clone();\n this.filterHighlight.dashArray = [0, 0];\n this.filterHighlight.segments[this.filterHighlight.segments.length-1].point.x = this.filterHighlight.segments[this.filterHighlight.segments.length-1].point.x + 5;\n if (this.leaf.conjoined_to === \"None\") {\n this.filterHighlight.segments[0].point.x = this.filterHighlight.segments[0].point.x - 5;\n }\n this.filterHighlight.strokeColor = this.strokeColorFilter;\n this.filterHighlight.strokeWidth = this.path.strokeWidth*2;\n this.filterHighlight.opacity = 0;\n this.filterHighlight.insertBelow(this.path);\n\n // this.path.fullySelected = true;\n this.showAttributes();\n this.createAttachments();\n\n const leafTermsToShow = this.leaf.terms.filter((termID)=>{return this.Terms[termID].show}).reverse();\n const rectoTermsToShow = this.recto.terms.filter((termID)=>{return this.Terms[termID].show}).reverse();\n const versoTermsToShow = this.verso.terms.filter((termID)=>{return this.Terms[termID].show});\n\n let textX = 0;\n let textY = this.y;\n let fontSize = this.spacing*0.50;\n let numChars = this.path.bounds.width/fontSize*2.4;\n\n if (this.isConjoined()) {\n // This leaf is conjoined\n textX = this.path.segments[1].point.x;\n } else {\n // Separate leaf\n textX = this.path.segments[0].point.x + 10;\n }\n if (this.leaf.attached_above.includes(\"Partial\")) {\n // This leaf has a partial glue attachment\n // Place text to the right of attachment drawing\n textX = this.attachment.bounds.right+5;\n } else if (this.leaf.attached_above.includes(\"Glued\")) {\n // Other type of glueing exists\n textY -= this.spacing*0.7;\n } \n let that = this;\n let clickListener = function(term) {\n return function(event) {\n that.openTermDialog(term);\n }\n }\n if (this.showTerms) {\n // Draw recto term text\n for (let termIndex = 0; termIndex < rectoTermsToShow.length; termIndex++) {\n const term = this.Terms[rectoTermsToShow[termIndex]];\n const termTitle = this.recto.folio_number? \"â–¼ \" + this.recto.folio_number + \" : \" + term.title.substr(0,numChars) : \"â–¼ R : \" + term.title.substr(0,numChars) ;\n let textTerm = new paper.PointText({\n content: termTitle,\n point: [textX, textY - termIndex*(this.spacing*0.7) - this.spacing*0.3],\n fillColor: this.strokeColor,\n fontSize: fontSize,\n });\n textTerm.onClick = !this.viewingMode && clickListener(term);\n this.textTerms.addChild(textTerm);\n }\n // Draw leaf term text\n for (let termIndex = 0; termIndex < leafTermsToShow.length; termIndex++) {\n const term = this.Terms[leafTermsToShow[termIndex]];\n \n let textTerm = new paper.PointText({\n content: \"â–¼ L\" + this.order + \" : \" + term.title.substr(0,numChars),\n point: [textX, textY - rectoTermsToShow.length*(this.spacing*0.7) - termIndex*(this.spacing*0.7) - this.spacing*0.3],\n fillColor: this.strokeColor,\n fontSize: fontSize,\n });\n textTerm.onClick = !this.viewingMode && clickListener(term);\n this.textTerms.addChild(textTerm);\n }\n // Draw verso term text\n for (let termIndex = 0; termIndex < versoTermsToShow.length; termIndex++) {\n const term = this.Terms[versoTermsToShow[termIndex]];\n const termTitle = this.verso.folio_number? \"â–² \" + this.verso.folio_number + \" : \" + term.title.substr(0,numChars) : \"â–² V : \" + term.title.substr(0,numChars);\n let textTerm = new paper.PointText({\n content: termTitle,\n point: [textX, this.y + termIndex*(this.spacing*0.7) + this.spacing*0.8],\n fillColor: this.strokeColor,\n fontSize: fontSize,\n });\n textTerm.onClick = !this.viewingMode && clickListener(term);\n this.textTerms.addChild(textTerm);\n }\n this.textTerms.onMouseEnter = function(event) {\n document.body.style.cursor = \"pointer\";\n }\n this.textTerms.onMouseLeave = function(event) {\n document.body.style.cursor = \"default\";\n }\n }\n\n\n return this;\n },\n setMouseEventHandlers: function() {\n // Set mouse event handlers\n let that = this;\n this.path.onClick = function(event) {\n that.handleObjectClick(that.leaf, event);\n };\n this.textLeafOrder.onClick = function(event) {\n that.handleObjectClick(that.leaf, event);\n };\n this.textRecto.onClick = function(event) {\n that.handleObjectClick(that.leaf, event);\n };\n this.textVerso.onClick = function(event) {\n that.handleObjectClick(that.leaf, event);\n };\n this.path.onMouseEnter = function(event) {\n document.body.style.cursor = \"pointer\";\n }\n this.path.onMouseLeave = function(event) {\n document.body.style.cursor = \"default\";\n }\n this.textLeafOrder.onMouseEnter = function(event) {\n document.body.style.cursor = \"pointer\";\n }\n this.textLeafOrder.onMouseLeave = function(event) {\n document.body.style.cursor = \"default\";\n }\n this.textRecto.onMouseEnter = function(event) {\n document.body.style.cursor = \"pointer\";\n }\n this.textRecto.onMouseLeave = function(event) {\n document.body.style.cursor = \"default\";\n }\n this.textVerso.onMouseEnter = function(event) {\n document.body.style.cursor = \"pointer\";\n }\n this.textVerso.onMouseLeave = function(event) {\n document.body.style.cursor = \"default\";\n }\n },\n removeMouseEventHandlers: function() {\n // Set mouse event handlers\n this.path.onClick = function(event) {};\n this.textLeafOrder.onClick = function(event) {};\n this.textRecto.onClick = function(event) {};\n this.textVerso.onClick = function(event) {};\n this.path.onMouseEnter = function(event) {};\n this.path.onMouseLeave = function(event) {};\n this.textLeafOrder.onMouseEnter = function(event) {};\n this.textLeafOrder.onMouseLeave = function(event) {};\n this.textRecto.onMouseEnter = function(event) {};\n this.textRecto.onMouseLeave = function(event) {};\n this.textVerso.onMouseEnter = function(event) {};\n this.textVerso.onMouseLeave = function(event) {};\n },\n createAttachments: function() {\n if (this.order>1 && this.leaf.attached_above.includes(\"Glued\")) {\n this.createGlue();\n } else if (this.order>1 && this.leaf.attached_above===\"Other\") {\n this.createOtherAttachment();\n } \n if (this.order>1 && this.leaf.conjoin_type===\"Sewn\") {\n this.createSewn();\n }\n },\n createGlue: function() {\n let x = this.path.segments[0].point.x;\n if (this.isConjoined() && this.conjoined_to\n {canvases}\n
\n );\n }\n}\n","import React from 'react';\nimport OpenSeadragon from 'openseadragon';\nimport UUID from 'uuid';\nimport BlankPage from '../../assets/blank_page.png';\n\n/** Image viewing component (OpenSeaDragon) */\nexport default class ImageViewer extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n suffixedID: 'openseadragon-' + UUID.v4(),\n osd: null\n }\n }\n\n componentDidMount() {\n var tilesSources = [];\n // .+?(?=full)\n // https://exhibits.library.stonybrook.edu/iiif-img/3/5846/full/800,476/0/default.jpg\n if (this.props.rectoURL && !this.props.isRectoDIY) {\n tilesSources.push(this.getInfoURL(this.props.rectoURL));\n } else if (this.props.rectoURL && this.props.isRectoDIY) {\n tilesSources.push({type: \"image\", url: this.props.rectoURL});\n }\n if (this.props.versoURL && !this.props.isVersoDIY) {\n tilesSources.push(this.getInfoURL(this.props.versoURL))\n } else if (this.props.versoURL && this.props.isVersoDIY) {\n tilesSources.push({type: \"image\", url: this.props.versoURL});\n }\n if (!this.props.rectoURL && !this.props.versoURL) tilesSources = [{type: \"image\", url: BlankPage}];\n this.setState({\n osd: OpenSeadragon({\n id: this.state.suffixedID,\n prefixUrl: 'https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.4.2/images/',\n showNavigationControl: true,\n showFullPageControl: false,\n showRotationControl: true,\n showNavigator: true,\n collectionMode: true,\n collectionRows: 1,\n collectionTileMargin: 1,\n crossOriginPolicy: 'Anonymous',\n navImages: {\n zoomIn: {\n REST: \"zoomin_rest.png\",\n GROUP: \"zoomin_grouphover.png\",\n HOVER: \"zoomin_hover.png\",\n DOWN: \"zoomin_pressed.png\"\n },\n zoomOut: {\n REST: \"zoomout_rest.png\",\n GROUP: \"zoomout_grouphover.png\",\n HOVER: \"zoomout_hover.png\",\n DOWN: \"zoomout_pressed.png\"\n },\n home: {\n REST: \"home_rest.png\",\n GROUP: \"home_grouphover.png\",\n HOVER: \"home_hover.png\",\n DOWN: \"home_pressed.png\"\n },\n rotateleft: {\n REST: \"rotateleft_rest.png\",\n GROUP: \"rotateleft_grouphover.png\",\n HOVER: \"rotateleft_hover.png\",\n DOWN: \"rotateleft_pressed.png\"\n },\n rotateright: {\n REST: \"rotateright_rest.png\",\n GROUP: \"rotateright_grouphover.png\",\n HOVER: \"rotateright_hover.png\",\n DOWN: \"rotateright_pressed.png\"\n }\n },\n tileSources: tilesSources\n })\n });\n }\n\n componentWillUpdate(nextProps) {\n this.addTiles(nextProps.isRectoDIY, nextProps.isVersoDIY, nextProps.rectoURL, nextProps.versoURL);\n }\n\n getInfoURL(url) {\n if (url.includes(\"full\")) {\n return /.+?(?=\\/full)/.exec(url)[0] + '/info.json'\n } else {\n return url + '/info.json'\n }\n }\n\n addTiles(rDIY, vDIY, r, v) {\n if (this.state.osd) {\n let tilesSources = [];\n if (r && !rDIY) {\n tilesSources.push(this.getInfoURL(r))\n } else if (r && rDIY) {\n tilesSources.push({type: \"image\", url: r});\n }\n if (v && !vDIY) {\n tilesSources.push(this.getInfoURL(v))\n } else if (v && vDIY) {\n tilesSources.push({type: \"image\", url: v});\n }\n if (!r && !v) tilesSources = [{type: \"image\", url: BlankPage}];\n this.state.osd.open(tilesSources);\n }\n }\n\n render() {\n let style = {width: \"100%\", height: \"500px\", background: this.props.backgroundColor? this.props.backgroundColor:\"black\"};\n if (this.props.fixed) style = {position: \"fixed\", width:\"42.5%\",height:\"82%\", left: \"30%\", background: 'black', padding: 5};\n return (\n \n
\n );\n }\n}\n","import React from 'react';\nimport PaperManager from \"../../assets/visualMode/PaperManager.js\";\nimport ImageViewer from \"../global/ImageViewer\";\n\n/** Contains the collation drawing in a canvas element */\nexport default class ViewingMode extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n paperManager: {},\n };\n }\n\n componentDidMount() {\n window.addEventListener(\"resize\", this.drawOnCanvas);\n this.setState({\n paperManager: new PaperManager({\n canvasID: 'myCanvas',\n origin: 0,\n spacing: 0.04,\n strokeWidth: 0.015,\n strokeColor: 'rgb(82,108,145)',\n strokeColorActive: 'rgb(78,214,203)',\n strokeColorGroupActive: 'rgb(82,108,145)',\n strokeColorFilter: '#95fff6',\n strokeColorAdded: \"#5F95D6\",\n groupColor: '#e7e7e7',\n groupColorActive: 'rgb(78,214,203)',\n groupTextColor: \"#727272\",\n strokeColorTacket: \"#4e4e4e\",\n handleObjectClick: this.props.handleObjectClick,\n groupIDs: this.props.project.groupIDs,\n leafIDs: this.props.project.leafIDs,\n Groups: this.props.project.Groups,\n Leafs: this.props.project.Leafs,\n Rectos: this.props.project.Rectos,\n Versos: this.props.project.Versos,\n Terms: this.props.project.Terms,\n activeGroups: this.props.collationManager.selectedObjects.type===\"Group\"? this.props.collationManager.selectedObjects.members : [],\n activeLeafs: this.props.collationManager.selectedObjects.type===\"Leaf\"? this.props.collationManager.selectedObjects.members : [],\n activeRectos: this.props.collationManager.selectedObjects.type===\"Recto\"? this.props.collationManager.selectedObjects.members : [],\n activeVersos: this.props.collationManager.selectedObjects.type===\"Verso\"? this.props.collationManager.selectedObjects.members : [],\n flashItems: this.props.collationManager.flashItems,\n filters: this.props.collationManager.filters,\n visibleAttributes: this.props.project.preferences,\n toggleTacket: this.props.toggleTacket,\n addTacket: this.addTacket,\n viewingMode: true,\n notationStyle: this.props.project.notationStyle,\n })\n }, ()=>{this.drawOnCanvas();});\n }\n\n shouldComponentUpdate(nextProps, nextState) {\n return (\n this.props.collationManager.selectedObjects!==nextProps.collationManager.selectedObjects ||\n this.props.collationManager.filters !== nextProps.collationManager.filters ||\n this.props.project.preferences !== nextProps.project.preferences ||\n this.props.project.Terms!==nextProps.project.Terms ||\n this.state.viewingMode !== nextState.viewingMode ||\n this.props.imageViewerEnabled !== nextProps.imageViewerEnabled\n );\n }\n\n componentWillUpdate(nextProps, nextState) {\n if (Object.keys(this.state.paperManager).length>0) {\n this.state.paperManager.setProject(nextProps.project);\n this.state.paperManager.setActiveGroups(nextProps.collationManager.selectedObjects.type===\"Group\"? nextProps.collationManager.selectedObjects.members : []);\n this.state.paperManager.setActiveLeafs(nextProps.collationManager.selectedObjects.type===\"Leaf\"? nextProps.collationManager.selectedObjects.members : []);\n this.state.paperManager.setActiveRectos(nextProps.collationManager.selectedObjects.type===\"Recto\"? nextProps.collationManager.selectedObjects.members : []);\n this.state.paperManager.setActiveVersos(nextProps.collationManager.selectedObjects.type===\"Verso\"? nextProps.collationManager.selectedObjects.members : []);\n this.state.paperManager.setFilter(nextProps.collationManager.filters);\n this.state.paperManager.setVisibility(nextProps.project.preferences);\n }\n }\n\n componentDidUpdate() {\n this.drawOnCanvas();\n }\n\n componentWillUnmount() {\n window.removeEventListener(\"resize\", this.drawOnCanvas);\n }\n\n /**\n * Draw canvas\n */\n drawOnCanvas = () => {\n // Create leaves through manager\n this.updateCanvasSize();\n this.state.paperManager.draw();\n }\n /**\n * Update canvas size based on current window size\n */\n updateCanvasSize = () => {\n // Resize the canvas\n let maxWidth = window.innerWidth-window.innerWidth*0.46;\n if (this.props.imageViewerEnabled) {\n maxWidth = window.innerWidth-window.innerWidth*0.75;\n }\n document.getElementById(\"myCanvas\").width=maxWidth;\n this.state.paperManager.setWidth(maxWidth);\n if (this.props.imageViewerEnabled) {\n this.state.paperManager.setScale(0.06, 0.027);\n } else {\n this.state.paperManager.setScale(0.04, 0.015);\n }\n }\n \n render() {\n let canvasAttr = {\n 'data-paper-hidpi': 'off',\n 'height': \"99999999px\",\n 'width': this.props.imageViewerEnabled? window.innerWidth-window.innerWidth*0.75: window.innerWidth-window.innerWidth*0.46,\n };\n\n let leafID, leaf, recto, verso, isRectoDIY, isVersoDIY, rectoURL, versoURL;\n if (this.props.selectedObjects.type===\"Leaf\"){\n leafID = this.props.selectedObjects.members[0];\n leaf = this.props.project.Leafs[leafID];\n recto = this.props.project.Rectos[leaf.rectoID];\n verso = this.props.project.Versos[leaf.versoID];\n } else if (this.props.selectedObjects.type===\"Recto\") {\n recto = this.props.project.Rectos[this.props.selectedObjects.members[0]];\n } else if (this.props.selectedObjects.type===\"Verso\") {\n verso = this.props.project.Versos[this.props.selectedObjects.members[0]];\n }\n isRectoDIY = recto!==undefined && recto.image.manifestID!==undefined && recto.image.manifestID.includes(\"DIY\");\n isVersoDIY = verso!==undefined && verso.image.manifestID!==undefined && verso.image.manifestID.includes(\"DIY\");\n rectoURL = recto!==undefined && recto.image.url!==undefined? recto.image.url : null;\n versoURL = verso!==undefined && verso.image.url!==undefined? verso.image.url : null;\n return (\n \n
\n );\n }\n}\n","import React from 'react';\nimport Dialog from 'material-ui/Dialog';\nimport FlatButton from 'material-ui/FlatButton';\nimport fileDownload from 'js-file-download';\nimport copy from 'copy-to-clipboard';\nimport IconCopy from 'material-ui/svg-icons/content/content-copy';\nimport IconDownload from 'material-ui/svg-icons/file/file-download';\nimport IconButton from 'material-ui/IconButton';\nimport JSZip from 'jszip';\nimport saveAs from 'file-saver';\n\n/** Dialog to export collation to JSON, XML or PNG */\nconst Export = props => {\n const filename = props.projectTitle.replace(/\\s/g, '_');\n const actions = [\n \n \n \n
\n {this.props.imageViewerEnabled?\n \n { props.exportedType === 'share' && window.location.href + '/viewOnly' }\n \n\n {props.exportedType === 'svg' ? (\n // \n // {Array.from(props.exportedData)\n // .map((value, index) => {\n // return (\n //
\n Please download your SVGs below.\n ) : (\n
{props.exportedData}\n )}\n \n ) : (\n \n Please download your PNGs below.\n\n
\n );\n return (\n \n
\n \n Note: custom folio numbers and page numbers will be\n lost when exporting to XML format. If you wish to preserve all\n collation data, please choose JSON export.\n
\n ) : (\n ''\n )}\n {props.label === 'Share this project' ? (\nThe URL below shows the view-only mode of your project.
\n ) : (\n ''\n )}\n {exportedData}\n \n );\n};\n\nexport default Export;\n","import React from 'react';\nimport Dialog from 'material-ui/Dialog';\nimport FlatButton from 'material-ui/FlatButton';\nimport RaisedButton from 'material-ui/RaisedButton';\nimport Checkbox from 'material-ui/Checkbox';\nimport { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';\nimport TextField from 'material-ui/TextField';\nimport IconButton from 'material-ui/IconButton';\nimport AddCircle from 'material-ui/svg-icons/content/add-circle';\nimport RemoveCircle from 'material-ui/svg-icons/content/remove-circle-outline';\nimport light from '../../../styles/light';\nimport { getMemberOrder } from '../../../helpers/getMemberOrder';\nimport SelectField from '../../global/SelectField';\n\n\n/** Dialog to add groups in a collation. This component is used in the visual and tabular edit modes. It is mounted by `InfoBox` and `GroupInfoBox` components. */\nexport default class AddGroupDialog extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n numberOfGroups: 1,\n hasLeaves: props.addLeafs || false,\n numberOfLeaves: 1,\n conjoin: false,\n oddLeaf: 2,\n copies: 1,\n location: 'inside',\n placementLocation: '',\n selectedChild: '',\n errorText: {\n numberOfGroups: '',\n numberOfLeaves: '',\n oddLeaf: '',\n copies: '',\n },\n memberOrder: 1,\n }\n };\n\n componentWillReceiveProps() {\n this.resetForm();\n }\n\n /**\n * Increment a state's value by one, bounded by `max` and `min`. If the user previously\n * entered an invalid value, the value is set to `min`.\n */\n incrementNumber = (name, min, max, e) => {\n if (e) e.preventDefault();\n let newCount = 0;\n if (!this.isNormalInteger(this.state[name])) {\n newCount = min;\n } else {\n newCount = Math.min(max, this.state[name] + 1);\n }\n let newState = { errorText: {} };\n newState[name] = (isNaN(newCount)) ? min : newCount;\n newState.errorText[name] = '';\n this.setState({ ...newState });\n }\n\n /**\n * Decrement a state by one, bounded by `max` and `min`. If the user previously\n * entered an invalid value, the value is set to min.\n */\n decrementNumber = (name, min, max, e) => {\n if (e) e.preventDefault();\n let newCount = Math.min(max, Math.max(min, this.state[name] - 1));\n let newState = { errorText: {} };\n newState[name] = (isNaN(newCount)) ? min : newCount;\n newState.errorText[name] = '';\n this.setState({ ...newState });\n }\n\n /**\n * get all children of a given group, including the children of child groups\n */\n getAllChildrenOfGroup = (inputGroupID) => {\n let allChildrenOfGroup = []\n let group = this.props.Groups[inputGroupID]\n group.memberIDs.forEach(memberID => {\n if (memberID[0] === 'L') {\n if (!allChildrenOfGroup.includes(memberID)) {\n allChildrenOfGroup.push(memberID);\n } else {\n allChildrenOfGroup.push(this.getAllChildrenOfGroup(memberID))\n }\n }\n })\n return allChildrenOfGroup;\n }\n\n countGroupChildren = (inputGroupID) => {\n let group = this.props.Groups[inputGroupID]\n let groupCount = 0;\n group.memberIDs.forEach(memberID => {\n if (memberID[0] === 'G') {\n groupCount++;\n // go into group\n groupCount += this.countGroupChildren(memberID)\n }\n })\n return groupCount;\n }\n\n /**\n * Generate group notation for dropdown.\n * Code here must mirror PaperGroup and Group model notation logic.\n */\n groupNotation = (group) => {\n // get all groups as base nest level\n let outerGroups = Object.values(this.props.Groups).filter(g => g.nestLevel === 1);\n let outerGroupIDs = outerGroups.map(g => g.id);\n let notation = '';\n if (group.nestLevel === 1) {\n // get index of current group within the context of all outer groups\n let groupOrder = outerGroupIDs.indexOf(group.id) + 1;\n notation = `${groupOrder}`;\n } else {\n // get parent of current group\n let parentGroup = this.props.Groups[group.parentID];\n // get children of parent group\n let parentGroupChildren = parentGroup.memberIDs.filter(g => g[0] === 'G');\n let subquireNotation = parentGroupChildren.indexOf(group.id) + 1;\n notation = `${this.groupNotation(parentGroup)}.${subquireNotation}`;\n }\n return notation;\n }\n\n /**\n * Validate user input. If invalid, display error message, otherwise update relevant state\n */\n onNumberChange = (name, value) => {\n let errorState = this.state.errorText;\n errorState[name] = '';\n if (!this.isNormalInteger(value)) {\n errorState[name] = 'Must be a number';\n } else {\n value = parseInt(value, 10);\n }\n if ((name === 'numberOfGroups' || name === 'copies') && (value < 1 || value > 99)) {\n errorState[name] = 'Number must be between 1 and 99';\n } else if (name === 'numberOfLeaves' && (value < 1 || value > 999)) {\n errorState[name] = 'Number must be between 1 and 999';\n } else if (name === 'oddLeaf' && (value < 1 || value > this.state.numberOfLeaves)) {\n errorState[name] = 'Number must be between 1 and ' + this.state.numberOfLeaves;\n }\n let newState = {};\n newState[name] = value;\n this.setState({ ...newState, errorText: errorState });\n }\n\n /**\n * Check if string is an integer\n */\n isNormalInteger = (str) => {\n return /^([1-9]\\d*)$/.test(str);\n }\n\n /**\n * Toggle a checkbox\n */\n onToggleCheckbox = (stateName, value) => {\n let newState = {};\n newState[stateName] = value;\n this.setState(newState);\n }\n\n /**\n * Change dropdown value\n */\n dropDownChange = (value, stateValue) => {\n if (Object.keys(this.props.selectedGroups).length === 1) {\n let updatedStateValue = {};\n updatedStateValue[stateValue] = value;\n this.setState(updatedStateValue);\n }\n }\n\n /**\n * Update location radio button group\n */\n onLocationChange = (value) => {\n this.setState({ location: value });\n ;\n }\n onPlacementLocationChange = (value) => {\n this.setState({ placementLocation: value });\n ;\n }\n /**\n * Returns next sibling of a group\n */\n getNextSibling = () => {\n let activeGroup = this.props.Groups[this.props.selectedGroups[0]];\n for (let groupID of this.props.groupIDs.slice(this.props.groupIDs.indexOf(activeGroup.id) + 1)) {\n const group = this.props.Groups[groupID]\n if (group.nestLevel === activeGroup.nestLevel)\n return group\n }\n return null;\n }\n\n /**\n * Returns the last child group\n */\n findLastChildGroup = (memberIDs) => {\n let lastGroup = null;\n for (let memberID of memberIDs) {\n if (memberID.charAt(0) === 'G') {\n const member = this.props.Groups[memberID]\n if (lastGroup === null || (this.props.groupIDs.indexOf(member.id) > this.props.groupIDs.indexOf(lastGroup.id))) {\n lastGroup = member;\n }\n if (member.memberIDs.length > 0) {\n let result = this.findLastChildGroup(member.memberIDs);\n if (result && this.props.groupIDs.indexOf(result.id) > this.props.groupIDs.indexOf(lastGroup.id)) lastGroup = result;\n }\n }\n }\n return lastGroup;\n }\n\n /**\n * Submit add group request\n */\n submit = () => {\n if (this.props.addLeafs || !this.isDisabled()) {\n let data = { group: {}, additional: {} };\n data.additional['noOfGroups'] = this.state.numberOfGroups;\n if (this.state.hasLeaves) {\n data.additional['noOfLeafs'] = this.state.numberOfLeaves;\n data.additional['conjoin'] = (this.state.numberOfLeaves > 1) ? this.state.conjoin : false;\n if (this.state.numberOfLeaves > 1 && this.state.conjoin && !(this.state.numberOfLeaves % 2 === 0)) {\n data.additional['oddMemberLeftOut'] = this.state.oddLeaf;\n }\n }\n if (this.props.selectedGroups.length === 0) {\n // Empty project. Add new group\n data.additional['order'] = 1;\n data.additional['memberOrder'] = 1;\n data.group['type'] = 'Quire';\n data.group['title'] = 'None';\n } else if (this.props.addLeafs) {\n // Add Leafs inside\n data = { leaf: {}, additional: { ...data.additional } };\n delete data.additional.noOfGroups\n data.leaf['project_id'] = this.props.projectID;\n data.leaf['parentID'] = this.props.selectedGroups[0];\n data.additional['memberOrder'] = 1;\n this.props.action.addLeafs(data);\n this.props.closeDialog();\n return;\n } else {\n // Add group(s)\n const group = this.props.Groups[this.props.selectedGroups[0]];\n let memberOrder = getMemberOrder(group, this.props.Groups, this.props.groupIDs);\n let groupOrder = this.props.groupIDs.indexOf(group.id) + 1;\n if (group.parentID) {\n // If active group is nested, the new group(s) must have the same parent as the active group\n data.additional['parentGroupID'] = group.parentID;\n }\n if (this.state.location === 'below') {\n // Add group below\n memberOrder += 1;\n let sibling = this.getNextSibling();\n if (sibling) {\n groupOrder = this.props.groupIDs.indexOf(sibling.id) + 1;\n } else {\n // No sibling..\n if (!group.parentID) {\n // Active group is a root group with no next sibling\n groupOrder = this.props.groupIDs.length + 1;\n } else {\n if (group.memberIDs.length > 0) {\n // Find the last child (possibly multi-nested)\n let lastChild = this.findLastChildGroup(group.memberIDs);\n if (lastChild === null) {\n groupOrder = this.props.groupIDs.indexOf(group.id) + 2;\n } else {\n groupOrder = this.props.groupIDs.indexOf(lastChild.id) + 2;\n }\n } else {\n // If no children\n groupOrder = groupOrder + 1;\n }\n }\n }\n } else if (this.state.location === 'inside') {\n // two values need to be calculated here. these values are memberOrder and groupOrder.\n // memberOrder represents the placement of the new group in context of it's parent group's memberIDs\n this.setState({ selectedChild: this.props.Groups[this.props.selectedGroups]['memberIDs'][0] })\n let selectedChildIndex = this.props.Groups[this.props.selectedGroups]['memberIDs'].indexOf(this.state.selectedChild)\n if (this.state.placementLocation === 'above') {\n memberOrder = selectedChildIndex + 1\n } else if (this.state.placementLocation === 'below') {\n memberOrder = selectedChildIndex + 2\n }\n //// determine groupOrder\n // generate an array of all groups and leaves in the project in order\n let orderedElements = []\n this.props.groupIDs.forEach(groupID => {\n if (!orderedElements.includes(groupID)) {\n orderedElements.push(groupID)\n // recursively get group children for nested subquires\n orderedElements.push(...this.getAllChildrenOfGroup(groupID))\n }\n })\n // find the user selected leaf/group in this array\n let selectedChildIndexInOrderedElements = orderedElements.indexOf(this.state.selectedChild)\n let orderedElementsSliced = []\n if (this.state.placementLocation === 'above') {\n orderedElementsSliced = orderedElements.slice(0, selectedChildIndexInOrderedElements)\n } else if (this.state.placementLocation === 'below') {\n orderedElementsSliced = orderedElements.slice(0, selectedChildIndexInOrderedElements + 1)\n }\n // count how many groups occur before this value in the array\n let groupCount = 0;\n orderedElementsSliced.forEach(member => {\n if (member[0] === 'G') {\n groupCount++;\n }\n })\n // add 1 to determine the new groupOrder\n if (this.state.selectedChild) {\n if (this.state.selectedChild[0] === 'G') {\n groupCount += this.countGroupChildren(this.state.selectedChild)\n }\n } else {\n groupCount = 1\n }\n groupOrder = groupCount + 1;\n data.additional['parentGroupID'] = group.id;\n }\n data.group = {\n title: 'None',\n type: 'Quire'\n };\n data.additional['memberOrder'] = memberOrder;\n data.additional['order'] = groupOrder;\n }\n data.group['project_id'] = this.props.projectID\n this.props.action.addGroups(data);\n this.props.closeDialog();\n this.setState({ location: 'below' });\n this.resetForm();\n }\n }\n\n\n /**\n * Return `true` if there are any errors in the input fields\n */\n isDisabled = () => {\n let copiesError = !(this.state.errorText.copies === undefined) && this.state.errorText.copies.length > 0;\n let numberOfGroupsError = !(this.state.errorText.numberOfGroups === undefined) && this.state.errorText.numberOfGroups.length > 0;\n let numberOfLeavesError = !(this.state.errorText.numberOfLeaves === undefined) && this.state.errorText.numberOfLeaves.length > 0;\n let oddLeafError = !(this.state.errorText.oddLeaf === undefined) && this.state.errorText.oddLeaf.length > 0;\n return this.state.location === '' || copiesError || numberOfGroupsError || numberOfLeavesError || oddLeafError;\n }\n\n /**\n * Reset state\n */\n resetForm = () => {\n this.setState({\n numberOfGroups: 1,\n hasLeaves: this.props.addLeafs || false,\n numberOfLeaves: 1,\n conjoin: false,\n oddLeaf: 2,\n copies: 1,\n location: this.props.selectedGroups.length > 0 ? '' : 'inside',\n placementLocation: '',\n selectedChild: this.props.Groups !== undefined ? this.props.Groups[this.props.selectedGroups[0]]['memberIDs'][0] : '',\n errorText: {\n numberOfGroups: '',\n numberOfLeaves: '',\n oddLeaf: '',\n copies: '',\n },\n memberOrder: 1,\n });\n }\n\n render() {\n const actions = [\n\n
;\n }\n\n if (this.state.hasLeaves && this.state.numberOfLeaves > 1) {\n conjoinOption =\n \n
\n Number of leaves
\n\n this.onNumberChange('numberOfLeaves', v)}\n style={{ width: '100px' }}\n inputStyle={{ textAlign: 'center' }}\n />\n this.decrementNumber('numberOfLeaves', 1, 999, e)}\n aria-label=\"Decrement number of leaves\"\n >\n \n \n this.incrementNumber('numberOfLeaves', 1, 999, e)}\n aria-label=\"Increment number of leaves\"\n >\n \n \n
\n \n
\n }\n if (this.state.hasLeaves && this.state.conjoin && !(this.state.numberOfLeaves % 2 === 0)) {\n oddLeaf =\n \n
\n Conjoin leaves?
\n\n this.onToggleCheckbox('conjoin', !this.state.conjoin)}\n />\n
\n \n
\n }\n\n let numberOfGroups = this.state.location ? \n
\n Odd leaf to not conjoin
\n\n this.onNumberChange('oddLeaf', v)}\n style={{ width: '100px' }}\n inputStyle={{ textAlign: 'center' }}\n />\n this.decrementNumber('oddLeaf', 1, this.state.numberOfLeaves, e)}\n aria-label=\"Decrement leaf number\"\n >\n \n \n this.incrementNumber('oddLeaf', 1, this.state.numberOfLeaves, e)}\n aria-label=\"Increment leaf number\"\n >\n \n \n
\n \n
: '';\n\n let radioButtonGroupHeader = \n
\n Number of groups
\n\n this.onNumberChange('numberOfGroups', v)}\n style={{ width: '100px' }}\n inputStyle={{ textAlign: 'center' }}\n />\n this.decrementNumber('numberOfGroups', 1, 999, e)}\n >\n \n \n this.incrementNumber('numberOfGroups', 1, 999, e)}\n >\n \n \n
\n Add new group(s)
;\n let radioButtonGroup =\n
: '';\n let groupPosition = this.props.Groups !== undefined\n && this.props.Groups[this.props.selectedGroups[0]].memberIDs.length != 0\n && this.state.location === 'inside' ? \n
\n Add leaves inside?
\n\n this.onToggleCheckbox('hasLeaves', !this.state.hasLeaves)}\n />\n
\n \n
: '';\n\n\n if (!this.props.selectedGroups) {\n radioButtonGroupHeader = '';\n radioButtonGroup = '';\n }\n\n if (this.props.selectedGroups.length === 0) {\n radioButtonGroup = '';\n }\n\n if (this.props.addLeafs) {\n numberOfGroups = '';\n radioButtonGroupHeader = '';\n radioButtonGroup = '';\n addLeafsCheckbox = '';\n }\n\n const dialog = (\n \n Group position\n
\n\n \n this.onPlacementLocationChange(v)}>\n \n
\n\n \n this.dropDownChange(v, 'selectedChild')}\n value={this.props.Groups[this.props.selectedGroups[0]]['memberIDs'][0]}\n data={this.props.Groups[this.props.selectedGroups[0]]['memberIDs'].map((itemID) => {\n if (itemID[0] === 'L') {\n return { value: itemID, text: `Leaf ${this.props.leafIDs.indexOf(itemID) + 1}` }\n } else if (itemID[0] === 'G') {\n let groupType = this.props.Groups[itemID].type\n // quireNumber should be the notation value, which means we have to have\n // the notation logic here as well\n let groupNotation = this.groupNotation(this.props.Groups[itemID])\n return { value: itemID, text: `${groupType} ${groupNotation}` }\n }\n\n })}\n width={250}\n />\n
\n \n {dialog}\n
\n );\n }\n}","import React from 'react';\nimport Dialog from 'material-ui/Dialog';\nimport FlatButton from 'material-ui/FlatButton';\nimport RaisedButton from 'material-ui/RaisedButton';\nimport {btnBase} from '../../../styles/button';\n\n/** Delete confirmation dialog for deleting group(s) and leaf(s) */\nexport default class DeleteConfirmationDialog extends React.Component {\n state = {\n open: false,\n windowWidth: window.innerWidth,\n };\n\n resizeHandler = () => {\n this.setState({windowWidth:window.innerWidth});\n }\n\n componentDidMount() {\n window.addEventListener('resize', this.resizeHandler);\n }\n\n componentWillUnmount() {\n window.removeEventListener(\"resize\", this.resizeHandler);\n }\n\n handleOpen = () => {\n this.setState({open: true});\n this.props.togglePopUp(true);\n };\n\n handleClose = () => {\n this.setState({open: false});\n this.props.togglePopUp(false);\n };\n\n containsTacketedLeaf = () => {\n if (this.props.memberType===\"Leaf\") {\n for (const leafID of this.props.selectedObjects) {\n const group = this.props.Groups[this.props.Leafs[leafID].parentID];\n if (\n (group.tacketed.length>0 && (group.tacketed[0]===leafID || (group.tacketed[1] && group.tacketed[1]===leafID)))\n ||\n (group.sewing.length>0 && (group.sewing[0]===leafID || (group.sewing[1] && group.sewing[1]===leafID)))\n ) return true;\n }\n }\n return false;\n }\n\n getTitle = () => {\n const memberType = this.props.memberType;\n const item = this.props[memberType+\"s\"][this.props.selectedObjects[0]];\n let itemOrder = this.props[`${item.memberType.toLowerCase()}IDs`].indexOf(item.id)+1;\n\n if (item){\n if (this.containsTacketedLeaf()) {\n if (this.props.selectedObjects.length>1) {\n return \"One of the selected leaves is tacketed or sewn. You cannot delete tacketed/sewn leaves.\";\n } else {\n return \"You cannot delete a leaf that is tacketed or sewn.\";\n }\n } else if (this.props.selectedObjects.length===1) {\n return \"Are you sure you want to delete \" + item.memberType.toLowerCase() + \" \" + itemOrder + \"?\";\n } else {\n let itemName = item.memberType.toLowerCase();\n if (itemName===\"leaf\") itemName = \"leave\";\n return \"Are you sure you want to delete \" + \n this.props.selectedObjects.length + \" \" + itemName + \"s?\";\n }\n }\n\n }\n\n submit = (e) => {\n if (e) e.preventDefault();\n if (this.props.selectedObjects.length===1) {\n // handle single delete\n let id = this.props.selectedObjects[0]\n this.props.action.singleDelete(id);\n } else {\n // handle batch delete\n const memberType = this.props.memberType.toLowerCase();\n let data = {};\n data[memberType+\"s\"]= [];\n for (var id of this.props.selectedObjects) {\n data[memberType+\"s\"].push(id);\n }\n this.props.action.batchDelete(data);\n }\n this.handleClose();\n }\n\n render() {\n const actions = [\n \n \n \n
\n );\n }\n}\n","import React from 'react';\nimport Dialog from 'material-ui/Dialog';\nimport FlatButton from 'material-ui/FlatButton';\nimport RaisedButton from 'material-ui/RaisedButton';\nimport IconButton from 'material-ui/IconButton';\nimport IconAdd from 'material-ui/svg-icons/content/add';\nimport AutoComplete from 'material-ui/AutoComplete';\nimport SelectField from 'material-ui/SelectField';\nimport MenuItem from 'material-ui/MenuItem';\nimport TextField from 'material-ui/TextField';\nimport Checkbox from 'material-ui/Checkbox';\n\n/** Dialog to add a term to an object (leaf, side, or group). This component is used in the visual and tabular edit modes. */\nexport default class AddTerm extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n open: false,\n taxonomy: '',\n description: '',\n uri: '',\n show: false,\n searchText: '',\n termID: null,\n };\n }\n\n /** Open this modal component */\n handleOpen = () => {\n this.setState({\n open: true,\n taxonomy: '',\n description: '',\n uri: '',\n show: false,\n searchText: '',\n termID: null,\n });\n this.props.togglePopUp(true);\n };\n\n /** Close this modal component */\n handleClose = () => {\n this.setState({ open: false });\n this.props.togglePopUp(false);\n };\n\n handleUpdateInput = searchText => {\n this.setState({\n searchText: searchText,\n termID: null,\n });\n };\n\n handleNewRequest = request => {\n // User pressed enter instead of selecting a term in drop down\n // Look for key associated with user input\n let termID = null;\n for (let id in this.props.Terms) {\n const term = this.props.Terms[id];\n if (term.title === request) {\n termID = term.id;\n }\n }\n this.setState({ termID }, () => {\n if (termID) this.submit();\n });\n };\n\n submit = () => {\n if (this.state.termID !== null) {\n // Attach existing term to selected objects\n this.props.action.linkTerm(this.state.termID);\n } else {\n // Check if term exists (in case user types and did not press enter)\n let termID = null;\n for (let id in this.props.Terms) {\n const term = this.props.Terms[id];\n if (term.title === this.state.searchText) termID = term.id;\n }\n if (termID) {\n this.props.action.linkTerm(termID);\n } else {\n // Did not find term, so create and attach new term to object\n this.props.action.createAndAttachTerm(\n this.state.searchText,\n this.state.taxonomy,\n this.state.description,\n this.state.uri,\n this.state.show\n );\n }\n }\n this.handleClose();\n };\n\n termExists = () => {\n for (let termID in this.props.Terms) {\n const term = this.props.Terms[termID];\n if (term.title === this.state.searchText) {\n return true;\n }\n }\n return false;\n };\n\n /**\n * Mapping function to render one term taxonomy menu item\n */\n renderTaxonomies = name => {\n return ;\n };\n\n onChange = (name, value) => {\n this.setState({ [name]: value });\n };\n\n getFilteredTermTitlesDropDown = () => {\n return Object.keys(this.props.Terms).filter(termID => {\n return !this.props.commonTerms.includes(termID);\n });\n };\n\n render() {\n const dataSourceConfig = {\n text: 'textKey',\n value: 'valueKey',\n };\n\n const actions = [\n \n this.onChange('taxonomy', v)}\n floatingLabelText=\"Taxonomy\"\n fullWidth\n style={{ marginTop: -20 }}\n >\n {this.props.Taxonomies.map(this.renderTaxonomies)}\n \n this.onChange('description', v)}\n multiLine\n fullWidth\n style={{ marginTop: -20 }}\n />\n this.onChange('uri', v)}\n multiLine\n fullWidth\n style={{ marginTop: -20 }}\n />\n
\n );\n }\n\n let dialog = (\n \n Show in diagram (leaves & sides only):\n
\n \n this.onChange('show', !this.state.show)}\n />\n
\n \n \n
\n );\n }\n}\n","export function getLeafsOfGroup(group, Leafs, includeNone=true){\n let leafMembersOfCurrentGroup = [];\n if (includeNone) {\n leafMembersOfCurrentGroup.push({\n order: \"None\",\n id: \"None\",\n })\n }\n for (let memberID of group.memberIDs) {\n if (memberID.charAt(0)===\"L\") leafMembersOfCurrentGroup.push(Leafs[memberID]);\n }\n return leafMembersOfCurrentGroup;\n}\n","import React from 'react';\nimport {getLeafsOfGroup} from '../../../helpers/getLeafsOfGroup';\nimport Dialog from 'material-ui/Dialog';\nimport FlatButton from 'material-ui/FlatButton';\nimport RaisedButton from 'material-ui/RaisedButton';\nimport SelectField from '../../global/SelectField';\n\n/** Dialog for creating/editing sewing or tacketed attribute */\nexport default class VisualizationDialog extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n startLeaf: null,\n endLeaf: null,\n }\n }\n\n componentWillReceiveProps() {\n this.setState({\n startLeaf: null,\n endLeaf: null,\n });\n }\n\n handleChange = (type, value) => {\n this.setState({[type]:value});\n }\n\n renderMenuItem = (item, index) => {\n if (item.id) {\n return { \n value:item.id,\n text:\"Leaf \" + (this.props.leafIDs.indexOf(item.id)+1),\n }\n } else {\n return { \n value:\"spine\",\n text:\"Spine\",\n }\n }\n }\n\n onCreate = () => {\n let attributeValue = this.state.startLeaf===\"spine\"?[this.state.endLeaf]:[this.state.startLeaf,this.state.endLeaf];\n this.props.updateGroup(this.props.type, attributeValue); \n this.props.closeDialog();\n }\n\n render() {\n let isCreateAction = (this.props.type!==\"\" && this.props.group[this.props.type].length===0);\n const actions = [\n \n this.props.closeDialog()}\n contentStyle={{width: \"30%\", minWidth:\"320px\", maxWidth:\"450px\"}}\n >\n {selectFields}\n \n
\n );\n }\n}","export let checkboxStyle = () => { \n let fontSize = null;\n if (window.innerWidth<=1024) {\n fontSize = \"14px\";\n } \n if (window.innerWidth<=768) {\n fontSize = \"12px\";\n } \n return {\n iconStyle:{\n height:window.innerWidth<=1024?15:20,\n width:window.innerWidth<=1024?15:20,\n marginTop:window.innerWidth<=1024?\"2px\":null,\n marginRight:window.innerWidth<=1024?\"5px\":\"10px\",\n },\n labelStyle: {\n fontSize,\n lineHeight:\"21px\",\n }\n }\n}","import React from 'react';\nimport Chip from 'material-ui/Chip';\n\nexport function renderTermChip(props, term) {\n let deleteFn = () => {\n props.action.unlinkTerm(term.id);\n };\n if (props.isReadOnly) deleteFn = null;\n return (\n \n
\n );\n label = (\n \n
\n );\n }\n // Generate dropdown or text box depending on the current attribute\n let input = groupAttributes[attributeDict.name];\n if (!this.props.isReadOnly) {\n if (attributeDict.options !== undefined) {\n // Drop down menu\n let menuItems = [];\n let value = 'keep';\n attributeDict.options.forEach((option, index) => {\n menuItems.push({ value: option, text: option });\n });\n if (groupAttributes[attributeDict.name] === null) {\n menuItems.push({ value: 'keep', text: 'Keep same' });\n }\n if (groupAttributes[attributeDict.name] !== null) {\n value = groupAttributes[attributeDict.name];\n }\n input = (\n \n
\n );\n }\n let value = 'Keep same';\n if (this.state['editing_' + attributeDict.name]) {\n value = this.state[attributeDict.name];\n } else if (groupAttributes[attributeDict.name]) {\n value = groupAttributes[attributeDict.name];\n }\n input = (\n \n \n
\n );\n }\n } else {\n if (!input && this.props.selectedGroups.length > 1) {\n input = (\n \n
\n );\n });\n let submitBtn = '';\n if (isBatch && this.hasActiveAttributes()) {\n submitBtn = (\n \n {eyeCheckbox}\n {label}\n
\n {input}
\n \n
\n );\n } else if (this.props.selectedGroups.length === 1 && sewing.length > 0) {\n attributeSewing = (\n \n {\n if (this.props.viewMode === 'TABULAR') {\n this.toggleVisualizationDialog('sewing');\n } else {\n this.toggleSewingDrawing(e);\n }\n }}\n tabIndex={this.props.tabIndex}\n >\n
\n Sewing
\n\n
\n \n \n \n \n );\n }\n const tacketed = this.props.Groups[this.props.selectedGroups[0]].tacketed;\n let attributeTacket = '';\n if (\n this.props.selectedGroups.length === 1 &&\n tacketed.length === 0 &&\n this.props.viewMode !== 'VIEWING'\n ) {\n attributeTacket = (\n \n {\n this.deleteSewing();\n }\n : null\n }\n onClick={() => {\n if (this.props.viewMode !== 'VIEWING')\n this.toggleVisualizationDialog('sewing');\n }}\n tabIndex={this.props.tabIndex}\n >\n \n
\n Sewing
\n\n \n {sewing.length === 1\n ? 'Spine to Leaf ' +\n (this.props.leafIDs.indexOf(sewing[0]) + 1)\n : 'Leaf ' +\n (this.props.leafIDs.indexOf(sewing[0]) + 1) +\n ' to Leaf ' +\n (this.props.leafIDs.indexOf(sewing[1]) + 1)}\n
\n \n
\n \n
\n );\n } else if (this.props.selectedGroups.length === 1 && tacketed.length > 0) {\n attributeTacket = (\n \n {\n if (this.props.viewMode === 'VISUAL') {\n this.toggleTacketDrawing(e);\n } else {\n this.toggleVisualizationDialog('tacketed');\n }\n }}\n tabIndex={this.props.tabIndex}\n >\n
\n Tacket
\n\n
\n \n \n \n \n );\n }\n const terms = this.renderTerms();\n return (\n \n {\n this.deleteTacket();\n }\n : null\n }\n onClick={() => {\n if (this.props.viewMode !== 'VIEWING')\n this.toggleVisualizationDialog('tacketed');\n }}\n tabIndex={this.props.tabIndex}\n >\n \n
\n Tacket
\n\n \n {tacketed.length === 1\n ? 'Spine to Leaf ' +\n (this.props.leafIDs.indexOf(tacketed[0]) + 1)\n : 'Leaf ' +\n (this.props.leafIDs.indexOf(tacketed[0]) + 1) +\n ' to Leaf ' +\n (this.props.leafIDs.indexOf(tacketed[1]) + 1)}\n
\n \n
\n \n
\n {attributeSewing}\n {attributeTacket}\n {submitBtn}\n {addButtonPopover}\n \n \n {attributeDivs}\n {!this.props.isReadOnly ? (\n \n {this.props.selectedGroups.length > 1 ? 'Terms in common' : 'Terms'}\n \n \n {terms}\n
\n \n
\n Actions
\n\n {addBtn}\n {deleteBtn}\n
\n \n
;\n } \n\n if (this.state.numberOfLeaves>1) {\n conjoinOption = \n \n
\n Number of leaves
\n\n this.onNumberChange(\"numberOfLeaves\", v)}\n style={{width:\"100px\"}}\n inputStyle={{textAlign:\"center\"}}\n />\n this.decrementNumber(\"numberOfLeaves\", 1, 999, e)}\n >\n this.incrementNumber(\"numberOfLeaves\", 1, 999, e)}\n >\n
\n \n
\n }\n if (this.state.conjoin && this.state.numberOfLeaves>1 && !(this.state.numberOfLeaves%2===0)) {\n oddLeaf = \n \n
\n Conjoin leaves?
\n\n this.onToggleConjoin()}\n checked={this.state.conjoin && this.state.numberOfLeaves>1}\n style={{verticalAlign:\"bottom\"}}\n />\n
\n \n
\n }\n \n let disabledAddAbove = (activeLeaf.attached_above!==\"None\"?\n \n
\n Odd leaf to not conjoin
\n\n this.onNumberChange(\"oddLeaf\", v)}\n style={{width:\"100px\"}}\n inputStyle={{textAlign:\"center\"}}\n />\n this.decrementNumber(\"oddLeaf\", 1, this.state.numberOfLeaves, e)}\n >\n this.incrementNumber(\"oddLeaf\", 1, this.state.numberOfLeaves, e)}\n >\n
\n \n
\n : \"\"\n );\n let disabledAddBelow = (activeLeaf.attached_below!==\"None\"?\n {this.setState({disabledAbove:true})}}\n onMouseOut={()=>{this.setState({disabledAbove:false})}}>\n above leaf {activeLeafOrder}\n
\n \n Cannot insert a new leaf above leaf {activeLeafOrder} because leaf {activeLeafOrder} attached to leaf {activeLeafOrder-1}\n
\n \n
\n : \"\"\n );\n\n let addLeaves = \n {this.setState({disabledBelow:true})}}\n onMouseOut={()=>{this.setState({disabledBelow:false})}}>\n below leaf {activeLeafOrder}\n
\n \n Cannot insert a new leaf below leaf {activeLeafOrder} because leaf {activeLeafOrder} is attached to leaf {activeLeafOrder+1}\n
\n \n this.onLocationChange(v)}\n >\n \n {disabledAddAbove}\n
\n \n const dialog = (\n Add new leaves...
\n {disabledAddBelow}\n\n
\n );\n }\n}\n","import React from 'react';\nimport Dialog from 'material-ui/Dialog';\nimport FlatButton from 'material-ui/FlatButton';\nimport RaisedButton from 'material-ui/RaisedButton';\nimport TextField from 'material-ui/TextField';\nimport IconButton from 'material-ui/IconButton';\nimport AddCircle from 'material-ui/svg-icons/content/add-circle';\nimport RemoveCircle from 'material-ui/svg-icons/content/remove-circle-outline';\nimport {RadioButton, RadioButtonGroup} from 'material-ui/RadioButton';\nimport light from '../../../styles/light';\n\n/** Dialog to add leaves in a collation. This component is used in the visual and tabular edit modes. */\nexport default class FolioNumberDialog extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n folioOrPage: null,\n startNumber: this.props.defaultStartNumber,\n errorText: {\n startNumber: \"\",\n },\n };\n }\n\n componentWillReceiveProps(nextProps) {\n this.setState({startNumber: nextProps.defaultStartNumber});\n }\n\n /**\n * Increment a state's value by one, bounded by `max` and `min`. If the user previously \n * entered an invalid value, the value is set to `min`. \n */\n incrementNumber = (name, min, max, e) => {\n if (e) e.preventDefault();\n let newCount = 0;\n if (!this.isNormalInteger(this.state[name])) {\n newCount = min; \n } else {\n newCount = Math.min(max, this.state[name]+1);\n }\n let newState = {errorText:{}};\n newState[name]=(isNaN(newCount))?1:newCount;\n newState.errorText[name]=\"\";\n this.setState({...newState});\n }\n\n /**\n * Decrement a state by one, bounded by `max` and `min`. If the user previously \n * entered an invalid value, the value is set to min. \n */\n decrementNumber = (name, min, max, e) => {\n if (e) e.preventDefault();\n let newCount = Math.min(max, Math.max(min, this.state[name]-1));\n let newState = {errorText:{}};\n newState[name]=(isNaN(newCount))?1:newCount;\n newState.errorText[name]=\"\";\n this.setState({...newState});\n }\n\n /**\n * Validate user input. If invalid, display error message, otherwise update relevant state \n */\n onNumberChange = (stateName, value) => {\n let errorState = this.state.errorText;\n errorState[stateName] = \"\";\n if (!this.isNormalInteger(value)) {\n errorState[stateName] = \"Must be a number\";\n } else {\n value = parseInt(value, 10);\n }\n if (stateName===\"startNumber\" && (value<1 || value>9999)) {\n errorState[stateName] = \"Number must be between 1 and 9999\";\n }\n let newState = {};\n newState[stateName] = value;\n this.setState({...newState, errorText: errorState});\n }\n\n isNormalInteger = (str) => {\n return /^([1-9]\\d*)$/.test(str);\n }\n\n clearForm = () => {\n this.setState({\n folioOrPage: null,\n errorText: { startNumber: \"\" }, \n })\n }\n\n submit = () => {\n if (this.state.folioOrPage===\"folio_number\") {\n this.props.action.generateFolioNumbers(this.state.startNumber);\n } else {\n this.props.action.generatePageNumbers(this.state.startNumber);\n }\n this.clearForm();\n this.props.toggleFolioModal(false);\n }\n\n render() {\n const actions = [\n \n this.setState({folioOrPage: v})}\n >\n \n\n {this.state.folioOrPage? \n
\n );\n }\n}\n","import React from 'react';\nimport AddLeafDialog from '../infoBox/dialog/AddLeafDialog';\nimport DeleteConfirmationDialog from '../infoBox/dialog/DeleteConfirmationDialog';\nimport RaisedButton from 'material-ui/RaisedButton';\nimport Checkbox from 'material-ui/Checkbox';\nimport Visibility from 'material-ui/svg-icons/action/visibility';\nimport VisibilityOff from 'material-ui/svg-icons/action/visibility-off';\nimport { getLeafsOfGroup } from '../../helpers/getLeafsOfGroup';\nimport Dialog from 'material-ui/Dialog';\nimport AddTerm from './dialog/AddTerm';\nimport ImageViewer from '../global/ImageViewer';\nimport SelectField from '../global/SelectField';\nimport { getMemberOrder } from '../../helpers/getMemberOrder';\nimport { checkboxStyle } from '../../styles/checkbox';\nimport { btnBase } from '../../styles/button';\nimport FolioNumberDialog from '../infoBox/dialog/FolioNumberDialog';\nimport { renderTermChip } from '../../helpers/renderHelper';\nimport TextField from 'material-ui/TextField/TextField';\nimport IconSubmit from 'material-ui/svg-icons/action/done';\nimport IconClear from 'material-ui/svg-icons/content/clear';\n\n/** Leaf infobox */\nexport default class LeafInfoBox extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n imageModalOpen: false,\n insideBifoliaModalOpen: false,\n outsideBifoliaModalOpen: false,\n folioModalOpen: false,\n isBatch: this.props.selectedLeaves.length > 1,\n ...this.emptyAttributeState(),\n ...this.batchAttributeToggleState(),\n ...this.visibilityHoverState(),\n };\n }\n\n visibilityHoverState() {\n let state = {};\n for (var i in this.props.defaultAttributes) {\n state[\n 'visibility_hover_' + this.props.defaultAttributes[i]['name']\n ] = false;\n }\n return state;\n }\n\n /**\n * Creates a dictionary of attributes and if its toggled on or off during batch edit\n * This is used for the checkbox states\n */\n batchAttributeToggleState = () => {\n let state = {};\n for (var i in this.props.defaultAttributes) {\n state['batch_' + this.props.defaultAttributes[i]['name']] = false;\n }\n return state;\n };\n\n /**\n * Creates a dictionary of attributes with no values\n */\n\n emptyAttributeState = () => {\n let state = {};\n for (var i in this.props.defaultAttributes) {\n state[this.props.defaultAttributes[i]['name']] = '';\n }\n return state;\n };\n\n componentWillReceiveProps(nextProps) {\n this.setState({\n isBatch: nextProps.selectedLeaves.length > 1,\n });\n if (!this.state.isBatch) {\n this.setState({ ...this.emptyAttributeState() });\n }\n }\n\n hasActiveAttributes = () => {\n for (var i in this.props.defaultAttributes) {\n if (\n this.state['batch_' + this.props.defaultAttributes[i]['name']] &&\n this.state[this.props.defaultAttributes[i]['name']] !== 'keep' &&\n this.state[this.props.defaultAttributes[i]['name']] !== ''\n ) {\n return true;\n }\n }\n return false;\n };\n\n onTextboxChange = (value, attributeName) => {\n let newAttributeState = {};\n newAttributeState[attributeName] = value;\n let newEditingState = {};\n newEditingState['editing_' + attributeName] = true;\n this.setState({ ...newAttributeState, ...newEditingState });\n };\n\n textSubmit = (e, attributeName) => {\n e.preventDefault();\n let newEditingState = {};\n newEditingState['editing_' + attributeName] = false;\n this.setState({ ...newEditingState });\n if (!this.state.isBatch) {\n this.singleSubmit(attributeName, this.state[attributeName]);\n }\n };\n\n singleSubmit = (attributeName, value) => {\n let attributes = {};\n attributes[attributeName] = value;\n let leafID = this.props.selectedLeaves[0];\n let leaf = {\n ...attributes,\n };\n this.props.action.updateLeaf(leafID, leaf);\n };\n\n textCancel = (e, attributeName) => {\n let newAttributeState = {};\n newAttributeState[attributeName] = this.props.Sides[\n this.props.selectedSides[0]\n ][attributeName];\n let newEditingState = {};\n newEditingState['editing_' + attributeName] = false;\n this.setState({ ...newAttributeState, ...newEditingState });\n };\n\n dropDownChange = (value, attributeName) => {\n if (this.props.selectedLeaves.length === 1) {\n // In single edit - we submit change immediately\n let attributes = {};\n attributes[attributeName] = value;\n let leaf = {\n ...attributes,\n };\n this.props.action.updateLeaf(this.props.selectedLeaves[0], leaf);\n } else {\n // In batch edit - save change of attribute to the state\n let updatedAttribute = {};\n updatedAttribute[attributeName] = value;\n this.setState(updatedAttribute);\n }\n };\n\n onConjoinChange = (leaf, newID) => {\n if (newID === 'None') newID = null;\n let request = { conjoined_to: newID };\n this.props.action.updateLeaf(leaf.id, request);\n };\n\n onAttachedToChange = (event, activeLeaf, location, id, method) => {\n let request = { attached_to: activeLeaf.attached_to };\n if (method === 'None') {\n request.attached_to[location + 'ID'] = '';\n request.attached_to[location + 'Method'] = '';\n } else {\n request.attached_to[location + 'ID'] = id;\n request.attached_to[location + 'Method'] = method;\n }\n this.props.action.updateLeaf(activeLeaf.id, request);\n };\n\n batchSubmit = () => {\n let attributes = {};\n for (var i in this.props.defaultAttributes) {\n let attrName = this.props.defaultAttributes[i]['name'];\n let attrValue = this.state[this.props.defaultAttributes[i]['name']];\n if (attrValue !== '' && attrValue !== 'keep') {\n attributes[attrName] = attrValue;\n }\n }\n let leafs = [];\n for (var key of this.props.selectedLeaves) {\n const leaf = this.props.Leafs[key];\n leafs.push({ id: leaf.id, attributes });\n }\n this.props.action.updateLeafs(leafs);\n // Reset states\n this.setState({ ...this.batchAttributeToggleState() });\n };\n\n /**\n * Returns dictionary of attribute names and values\n * If multiple selected leaves have conflicting values,\n * the value of that attribute will be set to null\n */\n getAttributeValues() {\n let leafAttributes = {};\n for (var i in this.props.defaultAttributes) {\n let attributeName = this.props.defaultAttributes[i]['name'];\n for (var key of this.props.selectedLeaves) {\n const leaf = this.props.Leafs[key];\n if (leafAttributes[attributeName] === undefined) {\n leafAttributes[attributeName] = leaf[attributeName];\n } else if (leafAttributes[attributeName] !== leaf[attributeName]) {\n leafAttributes[attributeName] = null;\n break;\n }\n }\n }\n return leafAttributes;\n }\n\n /**\n * Handle checkbox toggling by updating relevant attribute state\n */\n toggleCheckbox = target => {\n let newToggleState = {};\n newToggleState['batch_' + target] = !this.state['batch_' + target];\n this.setState(newToggleState);\n };\n\n renderTerms = () => {\n let chips = [];\n for (let termID of this.props.commonTerms) {\n const term = this.props.Terms[termID];\n chips.push(renderTermChip(this.props, term));\n }\n return chips;\n };\n\n closeTermDialog = () => {\n this.setState({ activeTerm: null });\n this.props.togglePopUp(false);\n };\n\n toggleImageModal = imageModalOpen => {\n this.setState({ imageModalOpen });\n this.props.togglePopUp(imageModalOpen);\n };\n\n toggleInsideBifoliaModal = insideBifoliaModalOpen => {\n this.setState({ insideBifoliaModalOpen });\n this.props.togglePopUp(insideBifoliaModalOpen)\n }\n\n toggleOutsideBifoliaModal = outsideBifoliaModalOpen => {\n this.setState({ outsideBifoliaModalOpen });\n this.props.togglePopUp(outsideBifoliaModalOpen)\n }\n\n toggleFolioModal = folioModalOpen => {\n this.setState({ folioModalOpen });\n this.props.togglePopUp(folioModalOpen);\n };\n\n clickVisibility = (attributeName, value) => {\n this.props.action.updatePreferences({\n leaf: { ...this.props.preferences.leaf, [attributeName]: value },\n });\n };\n\n render() {\n let leafAttributes = this.getAttributeValues();\n let attributeDivs = [];\n const activeLeaf = this.props.Leafs[this.props.selectedLeaves[0]];\n const activeLeafOrder = this.props.leafIDs.indexOf(activeLeaf.id) + 1;\n const parentGroup = this.props.Groups[activeLeaf.parentID];\n const leafMembersOfCurrentGroup = getLeafsOfGroup(\n parentGroup,\n this.props.Leafs\n );\n const isFirstLeaf =\n getMemberOrder(activeLeaf, this.props.Groups, this.props.groupIDs) === 1;\n const isLastLeaf =\n activeLeaf.id ===\n leafMembersOfCurrentGroup[leafMembersOfCurrentGroup.length - 1].id;\n const hasOnlyActiveLeaf = leafMembersOfCurrentGroup.length === 2; // 2 because there's none leaf\n // Generate drop down for each leaf attribute\n this.props.defaultAttributes.forEach(attributeDict => {\n if (attributeDict.name.includes('attached')) {\n if (\n hasOnlyActiveLeaf ||\n (isFirstLeaf && attributeDict.name.includes('above')) ||\n (isLastLeaf && attributeDict.name.includes('below'))\n ) {\n return;\n }\n }\n let fontSize = null;\n if (this.props.windowWidth <= 768) {\n fontSize = '12px';\n } else if (this.props.windowWidth <= 1024 && this.state.isBatch) {\n fontSize = '13px';\n } else if (this.props.windowWidth <= 1024) {\n fontSize = '14px';\n }\n let label = (\n Generate...
\n\n
\n :\"\"}\n \n
\n Starting number
\n\n this.onNumberChange(\"startNumber\", v)}\n style={{width:\"100px\"}}\n inputStyle={{textAlign:\"center\"}}\n />\n this.decrementNumber(\"startNumber\", 1, 9999, e)}\n >\n this.incrementNumber(\"startNumber\", 1, 9999, e)}\n >\n
\n \n \n {this.props.preferences[attributeDict.name]\n ? 'Hide attribute in the collation'\n : 'Show attribute in the collation'}\n
\n \n );\n } else if (this.props.viewMode === 'TABULAR') {\n // In single edit tabular mode - display eye icon with label\n label = (\n \n \n {eyeIsChecked\n ? 'Hide attribute in the collation'\n : 'Show attribute in the collation'}\n
\n \n );\n } else if (\n this.props.viewMode === 'VISUAL' &&\n attributeDict.name === 'folio_number'\n ) {\n // In single edit tabular mode - display eye icon with label\n label = (\n \n \n {eyeIsChecked\n ? 'Hide attribute in the collation'\n : 'Show attribute in the collation'}\n
\n \n );\n }\n if (this.state.isBatch && !this.props.isReadOnly) {\n // In batch edit for either edit modes\n label = (\n \n
\n );\n }\n let value = '';\n if (this.state['editing_' + attributeDict.name]) {\n value = this.state[attributeDict.name];\n } else if (leafAttributes[attributeDict.name] !== null) {\n value = leafAttributes[attributeDict.name];\n }\n input = (\n \n \n
\n );\n } else {\n let menuItems = [];\n let value = 'keep';\n // Populate drop down items\n if (attributeDict.options) {\n attributeDict.options.forEach((option, index) => {\n menuItems.push({ value: option, text: option });\n });\n }\n if (leafAttributes[attributeDict.name] === null) {\n menuItems.push({ value: 'keep', text: 'Keep same' });\n }\n if (this.state[attributeDict.name] !== '' && this.state.isBatch) {\n value = this.state[attributeDict.name];\n } else if (leafAttributes[attributeDict.name] !== null) {\n value = leafAttributes[attributeDict.name];\n }\n input = (\n \n \n {input}\n
\n \n );\n });\n\n const leaf = this.props.Leafs[this.props.selectedLeaves[0]];\n let leafIndex = this.props.leafIDs.indexOf(leaf.id);\n let conjoinIndex = this.props.leafIDs.indexOf(leaf.conjoined_to);\n let firstInConjoin = leafIndex < conjoinIndex;\n\n let rectoIsPresent = Object.keys(this.props.Rectos[leaf.rectoID].image).length != 0\n let versoIsPresent = Object.keys(this.props.Versos[leaf.versoID].image).length != 0\n let leafImagePresent = [rectoIsPresent, versoIsPresent].every(v => v === true)\n\n let outsideFacingBtn = '';\n let insideFacingBtn = '';\n if (this.props.Leafs[this.props.selectedLeaves[0]].conjoined_to !== null && leafImagePresent === true) {\n if (firstInConjoin === true) {\n outsideFacingBtn = (\n \n {eyeCheckbox}\n {label}\n
\n \n {recto.memberType}\n \n );\n }\n if (versoURL) {\n imageThumbnails.push(\n
\n {verso.memberType}\n \n );\n }\n }\n\n const terms = this.renderTerms();\n return (\n
\n {attributeDivs}\n this.toggleImageModal(false)}\n contentStyle={{ background: 'none', boxShadow: 'inherit' }}\n bodyStyle={{ padding: 0 }}\n >\n {imageModalContent}\n \n this.toggleInsideBifoliaModal(false)}\n contentStyle={{background: 'none', boxShadow: 'inherit'}}\n bodyStyle={{padding: 0}}\n >\n {insideBifoliaModalContent}\n \n this.toggleOutsideBifoliaModal(false)}\n contentStyle={{background: 'none', boxShadow: 'inherit'}}\n bodyStyle={{padding: 0}}\n >\n {outsideBifoliaModalContent}\n \n
\n );\n }\n}\n","import React from 'react';\nimport RaisedButton from 'material-ui/RaisedButton';\nimport Checkbox from 'material-ui/Checkbox';\nimport TextField from 'material-ui/TextField';\nimport IconSubmit from 'material-ui/svg-icons/action/done';\nimport IconClear from 'material-ui/svg-icons/content/clear';\nimport Visibility from 'material-ui/svg-icons/action/visibility';\nimport VisibilityOff from 'material-ui/svg-icons/action/visibility-off';\nimport AddTerm from './dialog/AddTerm';\nimport Dialog from 'material-ui/Dialog';\nimport ImageViewer from '../global/ImageViewer';\nimport SelectField from '../global/SelectField';\nimport { checkboxStyle } from '../../styles/checkbox';\nimport { renderTermChip } from '../../helpers/renderHelper';\n\n/** Side infobox */\nexport default class SideInfoBox extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n imageModalOpen: false,\n isBatch: this.props.selectedSides.length > 1,\n ...this.emptyAttributeState(),\n ...this.otherAttributeStates(),\n ...this.visibilityHoverState(),\n };\n }\n\n visibilityHoverState = () => {\n let state = {};\n for (var i in this.props.defaultAttributes) {\n state[\n 'visibility_hover_' + this.props.defaultAttributes[i]['name']\n ] = false;\n }\n return state;\n };\n\n /**\n * Creates a dictionary of attributes and if its toggled on or off during batch edit\n * This is used for the checkbox states\n */\n otherAttributeStates = () => {\n let state = {};\n for (var i in this.props.defaultAttributes) {\n state['batch_' + this.props.defaultAttributes[i]['name']] = false;\n state['editing_' + this.props.defaultAttributes[i]['name']] = false;\n }\n return state;\n };\n\n /**\n * Creates a dictionary of attributes with no values\n */\n emptyAttributeState = () => {\n let state = {};\n for (var i in this.props.defaultAttributes) {\n state[this.props.defaultAttributes[i]['name']] = null;\n }\n return state;\n };\n\n hasActiveAttributes = () => {\n for (var i in this.props.defaultAttributes) {\n if (\n this.props.defaultAttributes[i]['name'] === 'page_number' &&\n this.state['batch_' + this.props.defaultAttributes[i]['name']] &&\n this.state[this.props.defaultAttributes[i]['name']] !== 'Keep same'\n ) {\n return true;\n } else if (\n this.state['batch_' + this.props.defaultAttributes[i]['name']] &&\n this.state[this.props.defaultAttributes[i]['name']] !== 'keep' &&\n this.state[this.props.defaultAttributes[i]['name']] !== ''\n ) {\n return true;\n }\n }\n return false;\n };\n\n componentWillReceiveProps(nextProps) {\n this.setState({\n isBatch: nextProps.selectedSides.length > 1,\n });\n if (!this.state.isBatch) {\n this.setState({ ...this.emptyAttributeState() });\n }\n }\n\n dropDownChange = (value, attributeName) => {\n if (!this.state.isBatch) {\n // In single edit - we submit change immediately\n this.singleSubmit(attributeName, value);\n } else {\n // In batch edit - save change of attribute to the state\n let updatedAttribute = {};\n updatedAttribute[attributeName] = value;\n this.setState(updatedAttribute);\n }\n };\n\n onTextboxChange = (value, attributeName) => {\n let newAttributeState = {};\n newAttributeState[attributeName] = value;\n let newEditingState = {};\n newEditingState['editing_' + attributeName] = true;\n this.setState({ ...newAttributeState, ...newEditingState });\n };\n\n textSubmit = (e, attributeName) => {\n e.preventDefault();\n let newEditingState = {};\n newEditingState['editing_' + attributeName] = false;\n this.setState({ ...newEditingState });\n if (!this.state.isBatch) {\n this.singleSubmit(attributeName, this.state[attributeName]);\n }\n };\n\n singleSubmit = (attributeName, value) => {\n let attributes = {};\n attributes[attributeName] = value;\n let sideID = this.props.selectedSides[0];\n let side = {\n ...attributes,\n };\n this.props.action.updateSide(sideID, side);\n };\n\n textCancel = (e, attributeName) => {\n let newAttributeState = {};\n newAttributeState[attributeName] = this.props.Sides[\n this.props.selectedSides[0]\n ][attributeName];\n let newEditingState = {};\n newEditingState['editing_' + attributeName] = false;\n this.setState({ ...newAttributeState, ...newEditingState });\n };\n\n /**\n * Handle checkbox toggling by updating relevant attribute state\n */\n toggleCheckbox = target => {\n let newToggleState = {};\n newToggleState['batch_' + target] = !this.state['batch_' + target];\n this.setState(newToggleState);\n };\n\n batchSubmit = () => {\n let attributes = {};\n let sides = [];\n for (var i in this.props.defaultAttributes) {\n // Go through each default attributes\n let attrName = this.props.defaultAttributes[i]['name'];\n if (this.state['batch_' + attrName]) {\n // This side attribute was selected for batch edit\n // Get its new value\n let attrValue = this.state[this.props.defaultAttributes[i]['name']];\n if (\n attrValue !== null &&\n attrValue !== 'keep' &&\n attrValue !== 'Keep same'\n ) {\n attributes[attrName] = attrValue;\n }\n }\n }\n if (Object.keys(attributes).length > 0) {\n for (let id of this.props.selectedSides) {\n if (Object.keys(attributes).length > 0) {\n sides.push({ id, attributes });\n }\n }\n this.props.action.updateSides(sides);\n }\n this.setState({ ...this.otherAttributeStates() });\n };\n\n getAttributeValues = (selectedSides = this.props.selectedSides) => {\n let sideAttributes = {};\n for (var i in this.props.defaultAttributes) {\n let attributeName = this.props.defaultAttributes[i]['name'];\n for (let sideID of selectedSides) {\n const side = this.props.Sides[sideID];\n if (sideAttributes[attributeName] === undefined) {\n sideAttributes[attributeName] = side[attributeName];\n } else if (sideAttributes[attributeName] !== side[attributeName]) {\n sideAttributes[attributeName] = null;\n break;\n }\n }\n }\n return sideAttributes;\n };\n\n renderTerms = () => {\n let chips = [];\n for (let termID of this.props.commonTerms) {\n const term = this.props.Terms[termID];\n chips.push(renderTermChip(this.props, term));\n }\n return chips;\n };\n\n closeTermDialog = () => {\n this.setState({ activeTerm: null });\n };\n\n toggleImageModal = imageModalOpen => {\n this.setState({ imageModalOpen });\n };\n\n clickVisibility = (attributeName, value) => {\n if (attributeName !== 'script_direction') {\n this.props.action.updatePreferences({\n side: { ...this.props.preferences.side, [attributeName]: value },\n });\n }\n };\n\n renderTooltip = (eyeIsChecked, eyeStyle, attributeDict) => {\n return (\n \n {imageThumbnails}\n
\n \n {insideFacingBtn}\n {outsideFacingBtn}\n
\n {this.props.isReadOnly && terms.length === 0 ? (\n ''\n ) : (\n \n {this.props.isReadOnly ? (\n ''\n ) : (\n
\n )}\n {submitBtn}\n\n {this.props.isReadOnly ? (\n ''\n ) : (\n \n
\n \n {Object.keys(this.props.selectedLeaves).length > 1\n ? 'Terms in common'\n : 'Terms'}\n
\n{terms}
\n \n
\n )}\n\n Actions
\n {conjoinButton}\n {generateFolioButton}\n {addBtn}\n {deleteBtn}\n\n
\n );\n label = (\n \n
\n );\n }\n // Generate dropdown or text box depending on the current attribute\n let input = sideAttributes[attributeDict.name];\n if (!this.props.isReadOnly) {\n if (attributeDict.options !== undefined) {\n // Drop down menu\n let menuItems = [];\n for (var j in attributeDict.options) {\n let option = attributeDict.options[j];\n menuItems.push({ value: option, text: option });\n }\n if (sideAttributes[attributeDict.name] === null) {\n menuItems.push({ value: 'keep', text: 'Keep same' });\n }\n let value = this.state.isBatch ? 'keep' : '';\n if (this.state[attributeDict.name] !== null && this.state.isBatch) {\n value = this.state[attributeDict.name];\n } else if (sideAttributes[attributeDict.name] !== null) {\n value = sideAttributes[attributeDict.name];\n }\n input = (\n \n
\n );\n }\n let value = this.state.isBatch ? 'Keep same' : '';\n if (this.state['editing_' + attributeDict.name]) {\n value = this.state[attributeDict.name];\n } else if (sideAttributes[attributeDict.name] !== null) {\n value = sideAttributes[attributeDict.name];\n }\n input = (\n \n \n
\n );\n }\n } else {\n // We're in readOnly mode with no common attribute value\n if (!input && this.props.selectedSides.length > 1) {\n input = (\n \n
\n );\n }\n const terms = this.renderTerms();\n let termsDiv = [];\n if (!(this.props.isReadOnly && terms.length === 0)) {\n termsDiv.push(\n \n {eyeCheckbox}\n {label}\n
\n {input}
\n \n {Object.keys(this.props.selectedSides).length > 1\n ? 'Terms in common'\n : 'Terms'}\n
\n{terms}
\n \n );\n }\n\n let submitBtn = '';\n if (this.state.isBatch && this.hasActiveAttributes()) {\n submitBtn = (\n \n {attributeDivs}\n this.toggleImageModal(false)}\n contentStyle={{ background: 'none', boxShadow: 'inherit' }}\n bodyStyle={{ padding: 0 }}\n >\n {imageModalContent}\n \n
\n );\n }\n}\n","let fontSize = null;\nif (window.innerWidth<=768) {\n fontSize = \"12px\";\n} else if (window.innerWidth<=1024) {\n fontSize = \"14px\";\n}\n\nlet infoBoxStyle = {\n tab: {\n color: '#6A6A6A',\n fontSize,\n },\n}\nexport default infoBoxStyle;","export function addLeafs(leaf, additional) {\n let successMessage = 'Successfully added the leaf';\n if (additional.noOfLeafs > 1)\n successMessage = 'Successfully added the leaves';\n\n return {\n types: [\n 'CREATE_LEAVES_FRONTEND',\n 'CREATE_LEAVES_SUCCESS_BACKEND',\n 'CREATE_LEAVES_FAILED_BACKEND',\n ],\n payload: {\n request: {\n url: `/leafs`,\n method: 'post',\n data: { leaf, additional },\n successMessage,\n errorMessage: 'Ooops! Something went wrong',\n },\n },\n isUndoable: true,\n };\n}\n\nexport function updateLeaf(leafID, leaf) {\n return {\n types: [\n 'UPDATE_LEAF_FRONTEND',\n 'UPDATE_LEAF_SUCCESS_BACKEND',\n 'UPDATE_LEAF_FAILED_BACKEND',\n ],\n payload: {\n request: {\n url: `/leafs/${leafID}`,\n method: 'put',\n data: { leaf },\n successMessage: 'Successfully updated the leaf',\n errorMessage: 'Ooops! Something went wrong',\n },\n },\n isUndoable: true,\n };\n}\n\nexport function updateLeafs(leafs, project_id) {\n return {\n types: [\n 'UPDATE_LEAVES_FRONTEND',\n 'UPDATE_LEAVES_SUCCESS_BACKEND',\n 'UPDATE_LEAVES_FAILED_BACKEND',\n ],\n payload: {\n request: {\n url: `/leafs`,\n method: 'put',\n data: { leafs, project_id },\n successMessage: 'Successfully updated the leaves',\n errorMessage: 'Ooops! Something went wrong',\n },\n },\n isUndoable: true,\n };\n}\n\n/**\n leafs: [\n \"59ea025c3b0eb7168e9591de\",\n \"59ea025c3b0eb7168e9591de\",\n \"59ea025c3b0eb7168e9591de\",\n \"59ea025c3b0eb7168e9591de\"\n ]\n */\nexport function autoConjoinLeafs(leafs) {\n return {\n types: [\n 'AUTOCONJOIN_LEAFS_FRONTEND',\n 'AUTOCONJOIN_LEAFS_SUCCESS_BACKEND',\n 'AUTOCONJOIN_LEAFS_FAILED_BACKEND',\n ],\n payload: {\n request: {\n url: `/leafs/conjoin`,\n method: 'put',\n data: { leafs },\n successMessage: 'Successfully conjoined the leaves',\n errorMessage: 'Ooops! Something went wrong',\n },\n },\n isUndoable: true,\n };\n}\n\nexport function deleteLeaf(leafID) {\n return {\n types: [\n 'DELETE_LEAF_FRONTEND',\n 'DELETE_LEAF_SUCCESS_BACKEND',\n 'DELETE_LEAF_FAILED_BACKEND',\n ],\n payload: {\n request: {\n url: `/leafs/${leafID}`,\n method: 'delete',\n successMessage: 'Successfully deleted the leaf',\n errorMessage: 'Ooops! Something went wrong',\n },\n },\n isUndoable: true,\n };\n}\n\nexport function deleteLeafs(leafs) {\n return {\n types: [\n 'DELETE_LEAVES_FRONTEND',\n 'DELETE_LEAFS_SUCCESS_BACKEND',\n 'DELETE_LEAFS_FAILED_BACKEND',\n ],\n payload: {\n request: {\n url: `/leafs`,\n method: 'delete',\n data: leafs,\n successMessage: 'Successfully deleted the leaves',\n errorMessage: 'Ooops! Something went wrong',\n },\n },\n isUndoable: true,\n };\n}\n\nexport function generateFolioNumbers(startNumber, leafIDs) {\n return {\n types: [\n 'GENERATE_FOLIO_NUMBERS_FRONTEND',\n 'GENERATE_FOLIO_NUMBERS_SUCCESS_BACKEND',\n 'GENERATE_FOLIO_NUMBERS_FAILED_BACKEND',\n ],\n payload: {\n request: {\n url: `/leafs/generateFolio`,\n method: 'put',\n data: { startNumber, leafIDs },\n successMessage: 'Successfully generated the folio numbers',\n errorMessage: 'Ooops! Something went wrong',\n },\n },\n isUndoable: true,\n };\n}\n\nexport function generatePageNumbers(startNumber, rectoIDs, versoIDs) {\n return {\n types: [\n 'GENERATE_PAGE_NUMBERS_FRONTEND',\n 'GENERATE_PAGE_NUMBERS_SUCCESS_BACKEND',\n 'GENERATE_PAGE_NUMBERS_FAILED_BACKEND',\n ],\n payload: {\n request: {\n url: `/sides/generatePageNumber`,\n method: 'put',\n data: { startNumber, rectoIDs, versoIDs },\n successMessage: 'Successfully generated the page numbers',\n errorMessage: 'Ooops! Something went wrong',\n },\n },\n isUndoable: true,\n };\n}\n","\nexport function addGroups(group, additional) {\n return {\n types: ['CREATE_GROUPS_FRONTEND','CREATE_GROUPS_SUCCESS_BACKEND','CREATE_GROUPS_FAILED_BACKEND'],\n payload: {\n request : {\n url: `/groups`,\n method: 'post',\n data: {group, additional},\n successMessage: \"Successfully added the groups\" ,\n errorMessage: \"Ooops! Something went wrong\"\n }\n },\n isUndoable: true,\n };\n}\n\nexport function updateGroup(groupID, group) {\n return {\n types: ['UPDATE_GROUP_FRONTEND','UPDATE_GROUP_SUCCESS_BACKEND','UPDATE_GROUP_FAILED_BACKEND'],\n payload: {\n request : {\n url: `/groups/${groupID}`,\n method: 'put',\n data: {group},\n successMessage: \"Successfully updated the group\" ,\n errorMessage: \"Ooops! Something went wrong\"\n }\n },\n isUndoable: true,\n };\n}\n\nexport function updateGroups(groups) {\n return {\n types: ['UPDATE_GROUPS_FRONTEND','UPDATE_GROUPS_SUCCESS_BACKEND','UPDATE_GROUPS_FAILED_BACKEND'],\n payload: {\n request : {\n url: `/groups`,\n method: 'put',\n data: {groups},\n successMessage: \"Successfully updated the groups\" ,\n errorMessage: \"Ooops! Something went wrong\"\n }\n },\n isUndoable: true,\n };\n}\n\nexport function deleteGroup(groupID) {\n return {\n types: ['DELETE_GROUP_FRONTEND','DELETE_GROUP_SUCCESS_BACKEND','DELETE_GROUP_FAILED_BACKEND'],\n payload: {\n request : {\n url: `/groups/${groupID}`,\n method: 'delete',\n successMessage: \"Successfully deleted the group\" ,\n errorMessage: \"Ooops! Something went wrong\"\n }\n },\n isUndoable: true,\n };\n}\n\nexport function deleteGroups(groups, projectID) {\n return {\n types: ['DELETE_GROUPS_FRONTEND','DELETE_GROUPS_SUCCESS_BACKEND','DELETE_GROUPS_FAILED_BACKEND'],\n payload: {\n request : {\n url: `/groups`,\n method: 'delete',\n data: {...groups, projectID},\n successMessage: \"Successfully deleted the groups\" ,\n errorMessage: \"Ooops! Something went wrong\"\n }\n },\n isUndoable: true,\n };\n}","export function updateSide(sideID, side) {\n return {\n types: ['UPDATE_SIDE_FRONTEND','UPDATE_SIDE_SUCCESS_BACKEND','UPDATE_SIDE_FAILED_BACKEND'],\n payload: {\n request : {\n url: `/sides/${sideID}`,\n method: 'put',\n data: {side},\n successMessage: \"Successfully updated the side\" ,\n errorMessage: \"Ooops! Something went wrong\"\n }\n },\n isUndoable: true,\n };\n}\n\nexport function updateSides(sides) {\n return {\n types: ['UPDATE_SIDES_FRONTEND','UPDATE_SIDES_SUCCESS_BACKEND','UPDATE_SIDES_FAILED_BACKEND'],\n payload: {\n request : {\n url: `/sides`,\n method: 'put',\n data: {sides},\n successMessage: \"Successfully updated the sides\" ,\n errorMessage: \"Ooops! Something went wrong\"\n }\n },\n isUndoable: true,\n };\n}","export function addTerm(term) {\n /**\n term: {\n \"project_id\": \"5951303fc9bf3c7b9a573a3f\",\n \"id\": \"595130sadsadsa9bf3c7b9a573a3f\"\n \"title\": \"some title for term\",\n \"taxonomy\": \"Ink\",\n \"description\": \"blue ink\",\n \"uri\": \"https://www.test.com/\",\n \"show\": \"true\"\n }\n */\n return {\n types: [\n 'CREATE_TERM_FRONTEND',\n 'CREATE_TERM_SUCCESS_BACKEND',\n 'CREATE_TERM_FAILED_BACKEND',\n ],\n payload: {\n request: {\n url: `/terms`,\n method: 'post',\n data: { term },\n successMessage: 'Successfully created the term',\n errorMessage: 'Ooops! Something went wrong',\n },\n },\n };\n}\n\nexport function updateTerm(termID, term) {\n /**\n term: {\n \"title\": \"some title for term\",\n \"taxonomy\": \"Ink\",\n \"description\": \"blue ink\"\n \"uri\": \"https://www.test.com/\",\n }\n */\n return {\n types: [\n 'UPDATE_TERM_FRONTEND',\n 'UPDATE_TERM_SUCCESS_BACKEND',\n 'UPDATE_TERM_FAILED_BACKEND',\n ],\n payload: {\n request: {\n url: `/terms/${termID}`,\n method: 'put',\n data: { term },\n successMessage: 'Successfully updated the term',\n errorMessage: 'Ooops! Something went wrong',\n },\n },\n };\n}\n\nexport function deleteTerm(termID) {\n return {\n types: [\n 'DELETE_TERM_FRONTEND',\n 'DELETE_TERM_SUCCESS_BACKEND',\n 'DELETE_TERM_FAILED_BACKEND',\n ],\n payload: {\n request: {\n url: `/terms/${termID}`,\n method: 'delete',\n successMessage: 'Successfully deleted the term',\n errorMessage: 'Ooops! Something went wrong',\n },\n },\n isUndoable: true,\n };\n}\n\nexport function linkTerm(termID, objects) {\n /**\n objects: [\n {\n \"id\": \"5951303fc9bf3c7b9a573a3f\",\n \"type\": \"Group\"\n },\n ]\n */\n return {\n types: [\n 'LINK_TERM_FRONTEND',\n 'LINK_TERM_SUCCESS_BACKEND',\n 'LINK_TERM_FAILED_BACKEND',\n ],\n payload: {\n request: {\n url: `/terms/${termID}/link`,\n method: 'put',\n data: { objects },\n successMessage: 'Successfully linked the term',\n errorMessage: 'Ooops! Something went wrong',\n },\n },\n isUndoable: true,\n };\n}\n\nexport function unlinkTerm(termID, objects) {\n /**\n objects: [\n {\n \"id\": \"5951303fc9bf3c7b9a573a3f\",\n \"type\": \"Group\"\n },\n ]\n */\n return {\n types: [\n 'UNLINK_TERM_FRONTEND',\n 'UNLINK_TERM_SUCCESS_BACKEND',\n 'UNLINK_TERM_FAILED_BACKEND',\n ],\n payload: {\n request: {\n url: `/terms/${termID}/unlink`,\n method: 'put',\n data: { objects },\n successMessage: 'Successfully unlinked the term',\n errorMessage: 'Ooops! Something went wrong',\n },\n },\n isUndoable: true,\n };\n}\n\nexport function createTaxonomy(taxonomy) {\n /**\n \"taxonomy\": {\n \"project_id\": \"5951303fc9bf3c7b9a573a3f\",\n \"taxonomy\": \"Ink\"\n }\n */\n return {\n types: [\n 'CREATE_TAXONOMY_FRONTEND',\n 'CREATE_TAXONOMY_SUCCESS_BACKEND',\n 'CREATE_TAXONOMY_FAILED_BACKEND',\n ],\n payload: {\n request: {\n url: `/terms/taxonomy`,\n method: 'post',\n data: { taxonomy },\n successMessage: 'Successfully created the term taxonomy',\n errorMessage: 'Ooops! Something went wrong',\n },\n },\n isUndoable: true,\n };\n}\n\nexport function updateTaxonomy(taxonomy) {\n /**\n \"taxonomy\": {\n \"project_id\": \"5951303fc9bf3c7b9a573a3f\",\n \"taxonomy\": \"Ink\",\n \"old_taxonomy\": \"Inkss\"\n }\n */\n return {\n types: [\n 'UPDATE_TAXONOMY_FRONTEND',\n 'UPDATE_TAXONOMY_SUCCESS_BACKEND',\n 'UPDATE_TAXONOMY_FAILED_BACKEND',\n ],\n payload: {\n request: {\n url: `/terms/taxonomy`,\n method: 'put',\n data: { taxonomy },\n successMessage: 'Successfully updated the term taxonomy',\n errorMessage: 'Ooops! Something went wrong',\n },\n },\n isUndoable: true,\n };\n}\n\nexport function deleteTaxonomy(taxonomy) {\n /**\n \"taxonomy\": {\n \"project_id\": \"5951303fc9bf3c7b9a573a3f\",\n \"taxonomy\": \"Ink\"\n }\n */\n return {\n types: [\n 'DELETE_TAXONOMY_FRONTEND',\n 'DELETE_TAXONOMY_SUCCESS_BACKEND',\n 'DELETE_TAXONOMY_FAILED_BACKEND',\n ],\n payload: {\n request: {\n url: `/terms/taxonomy`,\n method: 'delete',\n data: { taxonomy },\n successMessage: 'Successfully deleted the term taxonomy',\n errorMessage: 'Ooops! Something went wrong',\n },\n },\n isUndoable: true,\n };\n}\n","export function changeViewMode(viewMode) {\n return {\n type: 'CHANGE_VIEW_MODE',\n payload: viewMode,\n };\n}\n\nexport function changeManagerMode(managerMode) {\n return {\n type: 'CHANGE_MANAGER_MODE',\n payload: managerMode,\n };\n}\n\nexport function changeTermsTab(newTab) {\n return {\n type: 'CHANGE_TERMS_TAB',\n payload: newTab,\n };\n}\n\nexport function changeImageTab(newTab) {\n return {\n type: 'CHANGE_IMAGES_TAB',\n payload: newTab,\n };\n}\n\nexport function toggleFilterPanel(value) {\n return {\n type: 'TOGGLE_FILTER_PANEL',\n payload: value,\n };\n}\n\nexport function handleObjectPress(selectedObjects, object, event) {\n selectedObjects = {\n ...selectedObjects,\n members: [...selectedObjects.members],\n };\n selectedObjects.type = object.memberType;\n selectedObjects.members = [object.id];\n\n return {\n type: 'TOGGLE_SELECTED_OBJECTS',\n payload: selectedObjects,\n };\n}\n\nexport function handleObjectClick(selectedObjects, object, event, objects) {\n selectedObjects = {\n ...selectedObjects,\n members: [...selectedObjects.members],\n };\n if (\n event.ctrlKey ||\n event.metaKey ||\n (event.modifiers !== undefined && event.modifiers.command)\n ) {\n // Toggle this object without clearing active objects unless type is different\n if (selectedObjects.type !== object.memberType) {\n selectedObjects.members = [];\n selectedObjects.type = object.memberType;\n }\n const index = selectedObjects.members.indexOf(object.id);\n if (index !== -1) {\n selectedObjects.members.splice(index, 1);\n } else {\n selectedObjects.members.push(object.id);\n }\n }\n if (event.button === 0 || event.modifiers !== undefined) {\n let notCtrl =\n event.ctrlKey !== undefined && !event.ctrlKey && !event.shiftKey;\n let notCmd =\n event.metaKey !== undefined && !event.metaKey && !event.shiftKey;\n let notCanvasCmd =\n event.modifiers !== undefined &&\n !event.modifiers.command &&\n !event.modifiers.shift;\n if ((notCtrl && notCmd) || notCanvasCmd) {\n // Clear all and toggle only this object\n if (selectedObjects.members.includes(object.id)) {\n selectedObjects.members = [];\n } else {\n selectedObjects.members = [object.id];\n }\n }\n if (\n event.shiftKey ||\n (event.modifiers !== undefined && event.modifiers.shift)\n ) {\n window.getSelection().removeAllRanges();\n // Object type changed, clear all active selected objects\n if (selectedObjects.type !== object.memberType) {\n selectedObjects.members = [object.id];\n } else {\n // Select all similar type objects within this object and last selected object\n const orderOfCurrentElement = objects[object.memberType + 's'].indexOf(\n object.id\n );\n const orderOfLastElement = objects[object.memberType + 's'].indexOf(\n selectedObjects.lastSelected\n );\n let indexes = [orderOfLastElement, orderOfCurrentElement];\n indexes.sort((a, b) => {\n return a - b;\n });\n const currentSelected = [...selectedObjects.members];\n selectedObjects.members = objects[object.memberType + 's'].slice(\n indexes[0],\n indexes[1] + 1\n );\n for (let id of currentSelected) {\n if (!selectedObjects.members.includes(id))\n selectedObjects.members.push(id);\n }\n }\n }\n }\n // Sort the selected members by ascending order\n selectedObjects.members.sort((a, b) =>\n objects[object.memberType + 's'].indexOf(a) >\n objects[object.memberType + 's'].indexOf(b)\n ? 1\n : -1\n );\n\n if (selectedObjects.members.length === 0) {\n selectedObjects.type = '';\n } else {\n selectedObjects.type = object.memberType;\n selectedObjects.lastSelected = object.id;\n }\n\n return {\n type: 'TOGGLE_SELECTED_OBJECTS',\n payload: selectedObjects,\n };\n}\n\n/**\n * Switch selectedObjects between types: Leaf, Recto, Verso\n * @param {object} selectedObjects currently selected objects\n * @param {string} newType new type to switch to (leaf, recto or verso)\n * @param {object} Leafs all Leaf, Recto & Verso objects of this project\n */\nexport function changeInfoBoxTab(newType, selectedObjects, objects) {\n let newSelectedObjects = { type: newType, members: [], lastSelected: '' };\n if (selectedObjects.type === 'newType') return { type: 'NO_TAB_CHANGE' };\n\n const object = objects[selectedObjects.type + 's'];\n\n switch (newType) {\n case 'Leaf':\n for (let id of selectedObjects.members) {\n newSelectedObjects.members.push(object[id].parentID);\n }\n break;\n case 'Recto':\n for (let id of selectedObjects.members) {\n if (selectedObjects.type === 'Leaf')\n newSelectedObjects.members.push(object[id].rectoID);\n else\n newSelectedObjects.members.push(\n objects.Leafs[object[id].parentID].rectoID\n );\n }\n break;\n case 'Verso':\n for (let id of selectedObjects.members) {\n if (selectedObjects.type === 'Leaf')\n newSelectedObjects.members.push(object[id].versoID);\n else\n newSelectedObjects.members.push(\n objects.Leafs[object[id].parentID].versoID\n );\n }\n break;\n default:\n break;\n }\n\n newSelectedObjects.lastSelected =\n newSelectedObjects.members[newSelectedObjects.members.length - 1];\n\n return {\n type: 'TOGGLE_SELECTED_OBJECTS',\n payload: newSelectedObjects,\n };\n}\n\nexport function toggleVisualizationDrawing(request) {\n return {\n type: 'TOGGLE_VISUALIZATION_DRAWING',\n payload: request,\n };\n}\n","\nexport function filterProject(projectID, queries) {\n /**\n \"queries\": [\n {\n \"type\": \"Leaf\",\n \"attribute\": \"material\",\n \"condition\": \"equals\",\n \"values\": [\"paper\"],\n \"conjunction\": \"AND\"\n }\n ]\n */\n return {\n types: ['SHOW_LOADING','FILTER_PROJECT_SUCCESS','FILTER_PROJECT_FAILED'],\n payload: {\n request : {\n url: `/projects/${projectID}/filter`,\n method: 'put',\n data: queries,\n successMessage: \"Successfully filtered the project\" ,\n errorMessage: \"Ooops! Something went wrong\"\n }\n }\n };\n}\n\nexport function reapplyFilterProject(projectID, filters) {\n const { queries, active } = filters;\n if (!active)\n return {type: \"NO_FILTER_CHANGE\"}\n let index = 0;\n let haveErrors = false;\n for (let query of queries) {\n if (query.type === null)\n haveErrors = true\n if (query.attribute === \"\")\n haveErrors = true\n if (query.values.length === 0)\n haveErrors = true\n if (query.condition === \"\")\n haveErrors = true\n if (index !== queries.length-1)\n if (query.conjunction === \"\")\n haveErrors = true\n index += 1;\n }\n if (!haveErrors){\n return {\n types: ['NO_LOADING','FILTER_PROJECT_SUCCESS','FILTER_PROJECT_FAILED'],\n payload: {\n request : {\n url: `/projects/${projectID}/filter`,\n method: 'put',\n data: {queries},\n successMessage: \"\" ,\n errorMessage: \"Ooops! Something went wrong\"\n }\n }\n };\n }\n return { type: \"NO_FILTER_CHANGE\" }\n}\n\n\nexport function resetFilters(queries) {\n return {\n type: 'RESET_FILTERS',\n payload: queries,\n };\n}\n\n\nexport function toggleFilterDisplay() {\n return {\n type: 'TOGGLE_FILTER_DISPLAY'\n };\n}\n\n\nexport function updateFilterQuery(newQueries) {\n return {\n type: 'UPDATE_FILTER_QUERY',\n payload: newQueries\n };\n}\n\n\nexport function updateFilterSelection(selection, matchingFilterObjects, allObjects) {\n let type = selection.split(\"_\")[0];\n const select = selection.split(\"_\")[1];\n let selectedObjects = { type: type? type.slice(0,-1) : type, members: [], lastSelected: \"\" };\n if (select===\"all\"){\n selectedObjects.members = allObjects[type.slice(0, type.length-1)+\"IDs\"];\n } else if (select===\"matching\") {\n selectedObjects.members = allObjects[type.slice(0, type.length-1)+\"IDs\"].filter((id) => {\n if (type===\"Rectos\" || type===\"Versos\")\n return matchingFilterObjects.Sides.includes(id)\n else\n return matchingFilterObjects[type].includes(id)\n })\n }\n return {\n type: 'UPDATE_FILTER_SELECTION',\n payload: {\n selection,\n selectedObjects\n }\n };\n}","import React from 'react';\nimport GroupInfoBox from '../components/infoBox/GroupInfoBox';\nimport LeafInfoBox from '../components/infoBox/LeafInfoBox';\nimport SideInfoBox from '../components/infoBox/SideInfoBox';\nimport infoBoxStyle from '../styles/infobox';\nimport { Tabs, Tab } from 'material-ui/Tabs';\nimport RaisedButton from 'material-ui/RaisedButton';\nimport AddGroupDialog from '../components/infoBox/dialog/AddGroupDialog';\nimport { connect } from 'react-redux';\nimport {\n addLeafs,\n updateLeaf,\n updateLeafs,\n autoConjoinLeafs,\n deleteLeaf,\n deleteLeafs,\n generateFolioNumbers,\n generatePageNumbers,\n} from '../actions/backend/leafActions';\nimport {\n addGroups,\n updateGroup,\n updateGroups,\n deleteGroup,\n deleteGroups,\n} from '../actions/backend/groupActions';\nimport { updateSide, updateSides } from '../actions/backend/sideActions';\nimport { addTerm, linkTerm } from '../actions/backend/termActions';\nimport {\n changeInfoBoxTab,\n toggleVisualizationDrawing,\n} from '../actions/backend/interactionActions';\nimport { reapplyFilterProject } from '../actions/backend/filterActions';\nimport { updatePreferences } from '../actions/backend/projectActions';\n\n/** Container of the leaf, group and side infoboxes */\nclass InfoBox extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n addGroupDialogOpen: false,\n };\n }\n\n toggleAddGroupDialog = (value = false) => {\n this.setState({ addGroupDialogOpen: value });\n this.props.togglePopUp(value);\n };\n\n addLeafs = data => {\n let leafIDs = [];\n const userID = this.props.user.id;\n for (let count = 0; count < data.additional.noOfLeafs; count++) {\n const date = Date.now().toString();\n const IDHash = userID + date + count;\n leafIDs.push(IDHash.substr(IDHash.length - 24));\n }\n let sideIDs = [];\n for (\n let count = leafIDs.length;\n count < leafIDs.length + data.additional.noOfLeafs * 2;\n count++\n ) {\n const date = Date.now().toString();\n const IDHash = userID + date + count;\n sideIDs.push(IDHash.substr(IDHash.length - 24));\n }\n data.additional['leafIDs'] = leafIDs;\n data.additional['sideIDs'] = sideIDs;\n this.props.addLeafs(\n data.leaf,\n data.additional,\n this.props.projectID,\n this.props.filters\n );\n };\n\n updateLeaf = (leafID, leaf) => {\n this.props.updateLeaf(\n leafID,\n leaf,\n this.props.projectID,\n this.props.filters\n );\n };\n\n updateLeafs = leafs => {\n this.props.updateLeafs(leafs, this.props.projectID, this.props.filters);\n };\n\n autoConjoinLeafs = () => {\n this.props.autoConjoinLeafs(\n this.props.selectedObjects.members,\n this.props.projectID,\n this.props.filters\n );\n };\n\n deleteLeaf = leafID => {\n this.props.deleteLeaf(leafID, this.props.projectID, this.props.filters);\n };\n\n deleteLeafs = leafs => {\n this.props.deleteLeafs(leafs, this.props.projectID, this.props.filters);\n };\n\n updateGroup = (groupID, group) => {\n this.props.updateGroup(\n groupID,\n group,\n this.props.projectID,\n this.props.filters\n );\n };\n\n updateGroups = groups => {\n this.props.updateGroups(groups, this.props.projectID, this.props.filters);\n };\n\n addGroups = data => {\n const userID = this.props.user.id;\n let groupIDs = [];\n for (let count = 0; count < data.additional.noOfGroups; count++) {\n const date = Date.now().toString();\n const IDHash = userID + date + count;\n groupIDs.push(IDHash.substr(IDHash.length - 24));\n }\n let leafIDs = [];\n for (\n let count = groupIDs.length;\n count < groupIDs.length + groupIDs.length * data.additional.noOfLeafs;\n count++\n ) {\n const date = Date.now().toString();\n const IDHash = userID + date + count;\n leafIDs.push(IDHash.substr(IDHash.length - 24));\n }\n let sideIDs = [];\n for (\n let count = groupIDs.length * leafIDs.length;\n count < groupIDs.length * leafIDs.length + leafIDs.length * 2;\n count++\n ) {\n const date = Date.now().toString();\n const IDHash = userID + date + count;\n sideIDs.push(IDHash.substr(IDHash.length - 24));\n }\n data.additional['groupIDs'] = groupIDs;\n data.additional['leafIDs'] = leafIDs;\n data.additional['sideIDs'] = sideIDs;\n this.props.addGroups(\n data.group,\n data.additional,\n this.props.projectID,\n this.props.filters\n );\n };\n\n // if the group is a subgroup, reset tacketing on the parent\n resetTacket = (groupID) => {\n let group = {};\n group['tacketed'] = [];\n group['sewing'] = []\n let parentID = this.props.Groups[groupID].parentID\n this.updateGroup(parentID, group);\n }\n\n deleteGroup = groupID => {\n // reset tacket on parent\n if (this.props.Groups[groupID].parentID) {\n this.resetTacket(groupID)\n }\n this.props.deleteGroup(groupID, this.props.projectID, this.props.filters);\n };\n\n deleteGroups = groups => {\n this.props.deleteGroups(groups, this.props.projectID, this.props.filters);\n };\n\n updateSide = (sideID, side) => {\n this.props.updateSide(\n sideID,\n side,\n this.props.projectID,\n this.props.filters\n );\n };\n\n updateSides = sides => {\n this.props.updateSides(sides, this.props.projectID, this.props.filters);\n };\n\n linkTerm = termID => {\n let objects = [];\n let type = this.props.selectedObjects.type;\n if (type === 'Recto' || type === 'Verso') type = 'Side';\n for (let id of this.props.selectedObjects.members) {\n objects.push({ id, type });\n }\n this.props.action.linkTerm(\n termID,\n objects,\n this.props.projectID,\n this.props.filters\n );\n };\n\n unlinkTerm = (termID, sideIndex) => {\n let objects = [];\n let type = this.props.selectedObjects.type;\n for (let id of this.props.selectedObjects.members) {\n objects.push({ id, type });\n }\n this.props.action.unlinkTerm(\n termID,\n objects,\n this.props.projectID,\n this.props.filters\n );\n };\n\n createAndAttachTerm = (termTitle, taxonomy, description, uri, show) => {\n let objects = [];\n let type = this.props.selectedObjects.type;\n if (type === 'Recto' || type === 'Verso') type = 'Side';\n for (let id of this.props.selectedObjects.members) {\n objects.push({ id, type });\n }\n const userID = this.props.user.id;\n const date = Date.now().toString();\n const IDHash = userID + date;\n const id = IDHash.substr(IDHash.length - 24);\n let term = {\n project_id: this.props.projectID,\n id: id,\n title: termTitle,\n taxonomy: taxonomy,\n description: description,\n uri: uri,\n show: show,\n };\n this.props.createAndAttachTerm(\n term,\n objects,\n this.props.projectID,\n this.props.filters\n );\n };\n\n generateFolioNumbers = startNumber => {\n let leafIDs = this.props.collationManager.selectedObjects.members;\n\n this.props.generateFolioNumbers(startNumber, leafIDs);\n };\n\n generatePageNumbers = startNumber => {\n let leafIDs = this.props.collationManager.selectedObjects.members;\n let rectoIDs = [];\n let versoIDs = [];\n\n for (const leafID of leafIDs) {\n const leaf = this.props.Leafs[leafID];\n rectoIDs.push(leaf.rectoID);\n versoIDs.push(leaf.versoID);\n }\n this.props.generatePageNumbers(startNumber, rectoIDs, versoIDs);\n };\n\n handleChangeInfoBoxTab = (value, event) => {\n this.props.changeInfoBoxTab(\n value,\n this.props.selectedObjects,\n this.props.Leafs,\n this.props.Rectos,\n this.props.Versos\n );\n };\n\n updatePreferences = newPreferences => {\n const preferences = { ...this.props.preferences, ...newPreferences };\n this.props.updatePreferences(this.props.projectID, { preferences });\n };\n\n render() {\n if (Object.keys(this.props.Groups).length === 0) {\n return (\n \n {imageThumbnail}\n
\n {termsDiv}\n {submitBtn}\n \n this.toggleAddGroupDialog(true)}\n />\n
\n );\n }\n\n if (this.props.selectedObjects.members.length === 0) {\n return ;\n }\n\n const leafSideTabs = (\n \n {groupTab}\n
\n );\n } else if (this.props.selectedObjects.type === 'Leaf') {\n return (\n \n {leafSideTabs}\n
\n );\n } else if (\n this.props.selectedObjects.type === 'Recto' ||\n this.props.selectedObjects.type === 'Verso'\n ) {\n const sideIndex = this.props.selectedObjects.type === 'Recto' ? 0 : 1;\n return (\n \n {leafSideTabs}\n
\n );\n } else {\n return ;\n }\n }\n}\n\nconst mapStateToProps = state => {\n return {\n user: state.user,\n projectID: state.active.project.id,\n preferences: state.active.project.preferences,\n Groups: state.active.project.Groups,\n groupIDs: state.active.project.groupIDs,\n leafIDs: state.active.project.leafIDs,\n rectoIDs: state.active.project.rectoIDs,\n versoIDs: state.active.project.versoIDs,\n Leafs: state.active.project.Leafs,\n Rectos: state.active.project.Rectos,\n Versos: state.active.project.Versos,\n Terms: state.active.project.Terms,\n Taxonomies: state.active.project.Taxonomies,\n selectedObjects: state.active.collationManager.selectedObjects,\n collationManager: state.active.collationManager,\n termsManager: state.active.termsManager,\n filters: state.active.collationManager.filters,\n tacketed: state.active.collationManager.visualizations.tacketed,\n };\n};\n\nconst mapDispatchToProps = dispatch => {\n return {\n toggleVisualizationDrawing: data => {\n dispatch(toggleVisualizationDrawing(data));\n },\n\n addLeafs: (leaf, additional, projectID, filters) => {\n dispatch(addLeafs(leaf, additional)).then(() =>\n dispatch(reapplyFilterProject(projectID, filters))\n );\n },\n\n updateLeaf: (leafID, leaf, projectID, filters) => {\n dispatch(updateLeaf(leafID, leaf)).then(() =>\n dispatch(reapplyFilterProject(projectID, filters))\n );\n },\n\n updateLeafs: (leafs, projectID, filters) => {\n dispatch(updateLeafs(leafs, projectID)).then(() =>\n dispatch(reapplyFilterProject(projectID, filters))\n );\n },\n\n autoConjoinLeafs: (leafIDs, projectID, filters) => {\n dispatch(autoConjoinLeafs(leafIDs)).then(() =>\n dispatch(reapplyFilterProject(projectID, filters))\n );\n },\n\n deleteLeaf: (leafID, projectID, filters) => {\n dispatch(deleteLeaf(leafID)).then(() =>\n dispatch(reapplyFilterProject(projectID, filters))\n );\n },\n\n deleteLeafs: (leafs, projectID, filters) => {\n dispatch(deleteLeafs(leafs)).then(() =>\n dispatch(reapplyFilterProject(projectID, filters))\n );\n },\n\n addGroups: (group, additional, projectID, filters) => {\n dispatch(addGroups(group, additional)).then(() =>\n dispatch(reapplyFilterProject(projectID, filters))\n );\n },\n\n updateGroup: (groupID, group, projectID, filters) => {\n dispatch(updateGroup(groupID, group)).then(() =>\n dispatch(reapplyFilterProject(projectID, filters))\n );\n },\n\n updateGroups: (groups, projectID, filters) => {\n dispatch(updateGroups(groups)).then(() =>\n dispatch(reapplyFilterProject(projectID, filters))\n );\n },\n\n deleteGroup: (groupID, projectID, filters) => {\n dispatch(deleteGroup(groupID)).then(() =>\n dispatch(reapplyFilterProject(projectID, filters))\n );\n },\n\n deleteGroups: (groups, projectID, filters) => {\n dispatch(deleteGroups(groups, projectID)).then(() =>\n dispatch(reapplyFilterProject(projectID, filters))\n );\n },\n\n updateSide: (sideID, side, projectID, filters) => {\n dispatch(updateSide(sideID, side)).then(() =>\n dispatch(reapplyFilterProject(projectID, filters))\n );\n },\n\n updateSides: (sides, projectID, filters) => {\n dispatch(updateSides(sides)).then(() =>\n dispatch(reapplyFilterProject(projectID, filters))\n );\n },\n\n changeInfoBoxTab: (newType, selectedObjects, Leafs, Rectos, Versos) => {\n dispatch(\n changeInfoBoxTab(newType, selectedObjects, { Leafs, Rectos, Versos })\n );\n },\n\n createAndAttachTerm: (term, objects, projectID, filters) => {\n dispatch(addTerm(term))\n .then(() => dispatch(linkTerm(term.id, objects)))\n .then(() => dispatch(reapplyFilterProject(projectID, filters)));\n },\n\n generateFolioNumbers: (startNumber, leafIDs) => {\n dispatch(generateFolioNumbers(startNumber, leafIDs));\n },\n\n generatePageNumbers: (startNumber, rectoIDs, versoIDs) => {\n dispatch(generatePageNumbers(startNumber, rectoIDs, versoIDs));\n },\n\n updatePreferences: (projectID, project) => {\n dispatch(updatePreferences(projectID, project));\n },\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(InfoBox);\n","import React, {Component} from 'react';\nimport {floatFieldLight} from '../../styles/textfield';\nimport MenuItem from 'material-ui/MenuItem';\nimport TextField from 'material-ui/TextField';\nimport IconClear from 'material-ui/svg-icons/content/clear';\nimport ContentAdd from 'material-ui/svg-icons/content/add';\nimport IconButton from 'material-ui/IconButton';\nimport FloatingActionButton from 'material-ui/FloatingActionButton';\nimport SelectField from '../global/SelectField';\n\n/** A row of filter query */\nclass FilterRow extends Component {\n\n renderAttributeMenuItems = () => {\n if (this.props.type) {\n return this.props.defaultAttributes[this.props.type].map(this.mapAttributeMenuItems);\n } else {\n return [];\n }\n }\n\n mapTermAttributeMenuItems = (taxonomy, index) => {\n return { key:taxonomy+index, value:taxonomy, text:taxonomy }\n }\n\n mapAttributeMenuItems = (item, index) => {\n return { key:item.name+index, value:item.name, text:item.displayName}\n }\n \n renderValueItems = (item, index) => {\n return